/* ============ Base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }  /* author display rules must not override the hidden attribute */

:root {
  --gold: #f2c14e;
  --gold-deep: #c8901e;
  --wood: #3a2417;
  --wood-dark: #241509;
  --parchment: #f3e3bf;
  --ink: #2a1a0c;
  --scroll-length: 220vh; /* how much scrolling drives the zoom */
}

html { scroll-behavior: auto; }

body {
  font-family: "Inter", sans-serif;
  background: #0b1420;
  color: var(--parchment);
  overflow-x: hidden;
  overscroll-behavior: none; /* no rubber-band bounce that peeks past the fixed cabin */
}

img { user-select: none; }

/* ============ Custom cutlass cursor ============ */
@media (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}

#cutlassCursor {
  position: fixed;
  left: 0; top: 0;
  width: 44px;
  height: 44px;
  z-index: 9999;
  pointer-events: none;
  display: none;
  will-change: transform;
}
#cutlassCursor img {
  width: 100%;
  height: 100%;
  /* blade tip sits at the top-left of the art — swing pivots at the grip */
  transform-origin: 72% 72%;
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,.4));
}
#cutlassCursor.slash img { animation: slash .28s ease-out; }
@keyframes slash {
  0%   { transform: rotate(0deg); }
  35%  { transform: rotate(-52deg); }
  100% { transform: rotate(0deg); }
}

/* ============ Fixed stage ============ */
#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 10;
}

#stage.released { position: absolute; visibility: hidden; }

.bg-outside {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  will-change: transform;
}

/* mouse parallax wrapper (translate) — zoom wrapper (scale) kept separate */
.inside-parallax {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.inside-zoom {
  position: absolute;
  inset: 0;
  /* transparent porthole center measured at 806/1613, 452/900 */
  transform-origin: 49.97% 50.2%;
  will-change: transform, opacity;
}

.ship-inside {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 49.97% 50.2%;
  /* slight overscale so mouse-parallax never reveals the ocean at the edges */
  transform: scale(1.05);
}

#scroll-space { height: var(--scroll-length); }

/* ============ Top bar ============ */
.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 28px;
  z-index: 5;
  transition: opacity .3s ease;
}

/* social links as small hanging banners, top-left */
/* The clamp maxima below are deliberately generous: they used to top out
   around a 1470px viewport, so on 1440p/ultrawide/4K the signs stopped
   growing and looked stranded. Mobile sizes are set in the max-width
   breakpoints further down and are unaffected. */
.socials { display: flex; gap: clamp(12px, .8vw, 20px); transform-origin: 50% 0; will-change: transform; }

.social-banner {
  position: relative;
  display: block;
  width: clamp(58px, 6vw, 132px);
  transform-origin: 50% 0;
  animation: sway 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.45));
}
.social-banner:nth-child(2) { animation-delay: -1.6s; }
.social-banner:nth-child(3) { animation-delay: -3.2s; }
.social-banner:nth-child(4) { animation-delay: -4.8s; }

.social-icon {
  position: absolute;
  left: 8%; right: 8%;
  top: 16%; bottom: 10%;
  display: grid;
  place-items: center;
}
.social-icon svg {
  width: 42%;
  height: 60%;
  fill: #3b2313;
  filter: drop-shadow(0 1px 0 rgba(255, 232, 172, .35));
  transition: fill .2s ease;
}
.social-banner:hover .social-icon svg { fill: #6d1f12; }

/* text-based sign (Stake) */
.social-word {
  position: absolute;
  left: 8%; right: 8%;
  top: 16%; bottom: 10%;
  display: grid;
  place-items: center;
  font-family: "Pirata One", serif;
  font-size: clamp(11px, 1.2vw, 23px);
  letter-spacing: 1px;
  color: #3b2313;
  text-shadow: 0 1px 0 rgba(255, 232, 172, .35);
  transition: color .2s ease;
}
.social-banner:hover .social-word { color: #6d1f12; }

@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(4.5deg); }
  40% { transform: rotate(-4deg); }
  60% { transform: rotate(2.5deg); }
  80% { transform: rotate(-1.5deg); }
}

/* ============ Hanging banner nav — one sign per page, top-right ============ */
.banner-row {
  position: absolute;
  top: 0;
  right: clamp(28px, 1.7vw, 52px);
  display: flex;
  gap: clamp(14px, 1vw, 26px);
  z-index: 6;
  transform-origin: 50% 0;
  will-change: transform;
  transition: opacity .3s ease;
}

.banner-item {
  position: relative;
  display: block;
  width: clamp(128px, 13.5vw, 300px);
  transform-origin: 50% 0;
  animation: sway 7s ease-in-out infinite alternate;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
  text-decoration: none;
  transition: filter .2s ease;
}
.banner-item:nth-child(2) { animation-delay: -3.5s; }
.banner-item:hover { filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)) brightness(1.12); }

/* hanging signs shake when hovered — declared after the sway/delay rules
   so the shake's zero delay wins the cascade on every sign */
.social-banner:hover,
.banner-item:hover {
  animation: shake .7s ease-in-out;
}

@keyframes sway {
  from { transform: rotate(1.4deg); }
  to   { transform: rotate(-1.4deg); }
}

.banner-img { width: 100%; display: block; }

/* wood plank area of the png (below the ropes) */
.banner-label {
  position: absolute;
  left: 8%; right: 8%;
  top: 16%; bottom: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Pirata One", serif;
  font-size: clamp(14px, 1.55vw, 32px);
  letter-spacing: 1px;
  color: #3b2313;
  text-shadow: 0 1px 0 rgba(255, 232, 172, .35), 0 -1px 1px rgba(0,0,0,.35);
  transition: color .2s ease;
}
.banner-item:hover .banner-label { color: #6d1f12; }

/* ============ Stream clips panel (right side) ============ */
.clips-exit {
  position: absolute;
  right: 0;
  top: clamp(130px, 17vh, 190px); /* below the hanging nav signs */
  z-index: 4; /* under the nav banners, never covers them */
  will-change: transform, opacity;
  --clips-w: 292px; /* body width — collapse slide must always match it */
}

.clips-panel {
  display: flex;
  align-items: flex-start;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
/* slides right until only the tab peeks out */
.clips-panel.collapsed { transform: translateX(var(--clips-w)); }

.clips-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 16px;
  cursor: pointer;
  font-family: "Pirata One", serif;
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  background: linear-gradient(180deg, rgba(58, 36, 23, .95), rgba(36, 21, 9, .98));
  border: 2px solid rgba(242, 193, 78, .4);
  border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -8px 6px 18px rgba(0,0,0,.4);
  transition: border-color .2s ease, filter .2s ease;
}
.clips-tab:hover { border-color: var(--gold); filter: brightness(1.1); }

.tab-arrow {
  font-size: 13px;
  transition: transform .4s ease;
}
.clips-panel:not(.collapsed) .tab-arrow { transform: rotate(180deg); }

.clips-body {
  width: var(--clips-w);
  padding: 14px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(58, 36, 23, .96), rgba(36, 21, 9, .98));
  border: 2px solid rgba(242, 193, 78, .4);
  border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -10px 10px 24px rgba(0,0,0,.45);
  max-height: calc(100vh - 250px); /* never runs past the bottom of the screen */
}

.clips-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 4px;
}
.clips-list::-webkit-scrollbar { width: 5px; }
.clips-list::-webkit-scrollbar-track { background: rgba(20, 12, 5, .6); border-radius: 3px; }
.clips-list::-webkit-scrollbar-thumb { background: rgba(242, 193, 78, .5); border-radius: 3px; }

/* clips cascade in one by one, right to left, when the panel opens */
@keyframes clipIn {
  from { opacity: 0; transform: translateX(52px); }
  to   { opacity: 1; transform: translateX(0); }
}
.clips-panel:not(.collapsed) .clip-card {
  animation: clipIn .45s ease backwards;
}
.clips-panel:not(.collapsed) .clip-card:nth-child(1) { animation-delay: .25s; }
.clips-panel:not(.collapsed) .clip-card:nth-child(2) { animation-delay: .45s; }
.clips-panel:not(.collapsed) .clip-card:nth-child(3) { animation-delay: .65s; }
.clips-panel:not(.collapsed) .clip-card:nth-child(4) { animation-delay: .85s; }
.clips-panel:not(.collapsed) .clip-card:nth-child(5) { animation-delay: 1.05s; }
.clips-panel:not(.collapsed) .join-stake {
  animation: clipIn .45s ease backwards;
  animation-delay: .9s;
}

.clip-card {
  display: block;
  text-decoration: none;
  padding: 7px 7px 8px;
  border-radius: 12px;
  background: rgba(20, 12, 5, .55);
  border: 1px solid rgba(242, 193, 78, .18);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.clip-card:hover {
  transform: scale(1.03);
  border-color: rgba(242, 193, 78, .6);
  background: rgba(20, 12, 5, .8);
}

.clip-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(242, 193, 78, .3);
  background:
    radial-gradient(circle at 50% 45%, rgba(242, 193, 78, .12), transparent 65%),
    rgba(14, 8, 3, .9);
  display: grid;
  place-items: center;
}
.clip-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.clip-card:hover .clip-thumb img { transform: scale(1.08); }

.clip-play {
  position: relative;
  z-index: 1;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  padding-left: 3px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--ink);
  background: radial-gradient(circle at 35% 25%, #ffe9a8, var(--gold) 55%, #b07d14);
  border: 1px solid rgba(59, 35, 19, .6);
  box-shadow: 0 4px 10px rgba(0,0,0,.6);
  opacity: .92;
  transition: transform .2s ease, opacity .2s ease;
}
.clip-card:hover .clip-play { transform: scale(1.15); opacity: 1; }

.clip-title {
  margin-top: 8px;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-align: center;
  color: rgba(243, 227, 191, .9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clip-card:hover .clip-title { color: var(--gold); }

.join-stake {
  display: block;
  text-align: center;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 2px;
  color: #3b2313;
  text-decoration: none;
  padding: 12px 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, #ffe9a8, var(--gold) 55%, #b07d14);
  border: 2px solid rgba(59, 35, 19, .65);
  box-shadow:
    inset 0 2px 3px rgba(255, 244, 214, .6),
    inset 0 -3px 4px rgba(59, 35, 19, .35),
    0 4px 0 rgba(59, 35, 19, .5),
    0 8px 12px rgba(0,0,0,.4);
  text-shadow: 0 1px 0 rgba(255, 244, 214, .5);
  transition: transform .2s ease, filter .2s ease;
}
.join-stake:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); }

/* ============ Hero ============ */
.hero {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  text-align: center;
  z-index: 4;
  transition: opacity .3s ease;
  text-shadow: 0 3px 12px rgba(0,0,0,.8);
}

/* soft dark halo behind the text so it reads over the bright sea */
.hero::before {
  content: "";
  position: absolute;
  inset: -14% -20%;
  z-index: -1;
  background: radial-gradient(ellipse 58% 62% at 50% 42%,
    rgba(8, 5, 2, .6), rgba(8, 5, 2, .32) 55%, transparent 78%);
  filter: blur(8px);
  pointer-events: none;
}

.hero-title {
  font-family: "Pirata One", serif;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 1;
  color: var(--gold);
  letter-spacing: 6px;
  -webkit-text-stroke: 3px rgba(30, 17, 7, .9);
  paint-order: stroke fill; /* outline sits behind the gold, not over it */
  text-shadow: 0 3px 0 rgba(30, 17, 7, .5), 0 10px 26px rgba(0, 0, 0, .9);
}

.hero-sub {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 20px);
  margin-top: 8px;
  color: #fdf3d9;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 3px 10px rgba(0,0,0,.85);
}

.scroll-hint {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 3px 8px rgba(0,0,0,.8);
}
.mouse {
  width: 24px; height: 38px;
  border: 2px solid var(--parchment);
  border-radius: 14px;
  display: flex; justify-content: center;
}
.wheel {
  width: 4px; height: 8px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--gold);
  animation: wheel 1.6s ease-in-out infinite;
}
@keyframes wheel {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ============ Leaderboard ============ */
#leaderboard {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 20, 36, 0) 0%, rgba(6, 20, 36, .18) 20%, rgba(4, 12, 24, .28) 100%);
}
#leaderboard.visible { pointer-events: auto; }

/* keep the ocean behind the leaderboard */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../assets/ship_outside_new.webp") center / cover no-repeat;
  z-index: 0;
}

.lb-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 90px 20px 60px;
}

.lb-head { text-align: center; margin-bottom: 54px; text-shadow: 0 2px 10px rgba(0,0,0,.75); }

.lb-flag {
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 5px;
  color: var(--gold);
  opacity: .9;
}

.lb-title {
  font-family: "Pirata One", serif;
  font-size: clamp(44px, 7vw, 84px);
  color: var(--gold);
  margin-top: 10px;
  line-height: 1.05;
  text-shadow: 0 4px 18px rgba(242,193,78,.25), 0 3px 8px rgba(0,0,0,.7);
}
.lb-title span { display: block; font-size: .48em; color: var(--parchment); letter-spacing: 8px; }

.lb-desc {
  max-width: 560px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(243, 227, 191, .85);
}
.lb-desc strong { color: var(--gold); }

/* ---- Podium cards ---- */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  align-items: center;
  margin-bottom: 46px;
}

.podium-card {
  position: relative;
  text-align: center;
  /* wanted poster proportions (poster area of the square png) */
  aspect-ratio: 0.645;
  transition: transform .25s ease, filter .25s ease;
}
.podium-card:hover { transform: translateY(-10px) rotate(-1deg); }

.podium-card.first  { order: 2; transform: scale(1.16); z-index: 1; }
.podium-card.first:hover { transform: scale(1.16) translateY(-10px) rotate(-1deg); }
.podium-card.second { order: 1; }
.podium-card.third  { order: 3; }

.poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops the png's transparent side margins */
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.55));
}

/* empty name area of the poster, below "DEAD OR ALIVE" between the flourishes */
.poster-info {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 71.5%;
  bottom: 9.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2%;
  overflow: hidden;
}

/* rank medals styled like old embossed coins */
.podium-rank {
  position: absolute;
  top: 7.5%; left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: "Pirata One", serif;
  font-size: 24px;
  color: #3b2313;
  border: 3px double rgba(42, 26, 12, .55);
  box-shadow:
    inset 0 3px 5px rgba(255, 244, 214, .55),
    inset 0 -4px 6px rgba(42, 26, 12, .35),
    0 6px 14px rgba(0,0,0,.55);
  text-shadow: 0 1px 0 rgba(255, 244, 214, .5);
  z-index: 2;
}
.first  .podium-rank { background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 55%, #b07d14); width: 52px; height: 52px; font-size: 29px; }
.second .podium-rank { background: radial-gradient(circle at 35% 30%, #f3f3f3, #c2c8cf 55%, #848b94); }
.third  .podium-rank { background: radial-gradient(circle at 35% 30%, #f0bc8b, #cd8a50 55%, #8f5324); }

/* ink text written onto the parchment */
.podium-name {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(14px, 1.6vw, 22px);
  color: #3b2313;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-wager {
  font-family: "Cinzel", serif;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 1px;
  color: rgba(59, 35, 19, .75);
}
.podium-wager b { color: #3b2313; font-size: 1.25em; }

.podium-prize {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(11px, 1.15vw, 15px);
  letter-spacing: 1px;
  color: #6d1f12;
}

/* ---- Table ---- */
.lb-table-wrap {
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(242,193,78,.25);
  background: rgba(20, 12, 5, .82);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
}

.lb-table { width: 100%; border-collapse: collapse; }

.lb-table th {
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  text-align: left;
  padding: 16px 22px;
  background: rgba(58, 36, 23, .9);
}

.lb-table td {
  padding: 15px 22px;
  font-size: 15px;
  border-top: 1px solid rgba(242,193,78,.1);
}

.lb-table tbody tr { transition: background .15s ease; }
.lb-table tbody tr:hover { background: rgba(242,193,78,.07); }

.lb-table td:first-child { font-family: "Cinzel", serif; font-weight: 700; color: var(--gold); width: 60px; }
.lb-table td:nth-child(3), .lb-table th:nth-child(3),
.lb-table td:nth-child(4), .lb-table th:nth-child(4) { text-align: right; }
.lb-table td:nth-child(4) { color: var(--gold); font-weight: 600; }

.lb-status {
  text-align: center;
  padding: 12px;
  font-size: 13px;
  color: rgba(243,227,191,.55);
}
.lb-status:empty { display: none; }

/* ---- Countdown ---- */
.countdown-wrap { text-align: center; margin-top: 8px; position: relative; outline: none; }

/* Stake only refreshes the sheet once a day — this tooltip explains the
   cadence so a static board doesn't read as broken. Hover, keyboard focus,
   or tap (the .tip-open class) all reveal it. */
.cd-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 7px;
  border-radius: 50%;
  border: 1px solid rgba(242, 193, 78, .55);
  color: var(--gold);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
  cursor: help;
  opacity: .8;
}
.countdown-wrap:hover .cd-info { opacity: 1; }

.countdown-wrap[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: min(340px, 82vw);
  padding: 10px 13px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(58, 36, 23, .98), rgba(30, 17, 7, .99));
  border: 1px solid rgba(242, 193, 78, .45);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  color: #e9dcc6;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 40;
  pointer-events: none;
}
.countdown-wrap[data-tip]:hover::after,
.countdown-wrap[data-tip]:focus-visible::after,
.countdown-wrap[data-tip].tip-open::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.countdown-label {
  font-family: "Cinzel", serif;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--parchment);
  margin-bottom: 18px;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

.countdown { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

.cd-box {
  min-width: 88px;
  padding: 16px 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(58,36,23,.92), rgba(36,21,9,.96));
  border: 2px solid rgba(242,193,78,.3);
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
}
.cd-box span {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 34px;
  color: var(--gold);
}
.cd-box label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(243,227,191,.6);
}

/* ---- Tabs ---- */
.lb-tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 30px 0 40px;
}

.tab-btn {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 12px 30px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--parchment);
  background: rgba(36,21,9,.8);
  border: 2px solid rgba(242,193,78,.35);
  transition: all .2s ease;
}
.tab-btn:hover { border-color: var(--gold); transform: translateY(-2px); }
.tab-btn.active {
  color: var(--ink);
  background: linear-gradient(180deg,#ffe08a,var(--gold-deep));
  border-color: var(--gold);
}

/* ---- Wager weighting rules (collapsible dropdown) ---- */
.rules-panel {
  margin-top: 42px;
  border-radius: 16px;
  border: 2px solid rgba(242, 193, 78, .25);
  background: linear-gradient(180deg, rgba(58, 36, 23, .9), rgba(36, 21, 9, .94));
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  overflow: hidden;
  transition: border-color .2s ease;
}
.rules-panel:hover { border-color: rgba(242, 193, 78, .5); }

/* smooth expand/collapse of the dropdown content */
html { interpolate-size: allow-keywords; }

.rules-panel::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .45s cubic-bezier(.4, 0, .2, 1), content-visibility .45s allow-discrete;
}
.rules-panel[open]::details-content { block-size: auto; }

.rules-content {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s ease .1s, transform .35s ease .1s;
}
.rules-panel[open] .rules-content {
  opacity: 1;
  transform: translateY(0);
}

.rules-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.rules-summary::-webkit-details-marker { display: none; }

.rules-title {
  font-family: "Pirata One", serif;
  font-size: clamp(19px, 1.9vw, 26px);
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.rules-arrow {
  font-size: 20px;
  color: var(--gold);
  transition: transform .25s ease;
}
.rules-panel[open] .rules-arrow { transform: rotate(180deg); }

.rules-content {
  padding: 4px 24px 22px;
  text-align: center;
}

.rules-sub {
  margin: 0 auto 18px;
  max-width: 520px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(243, 227, 191, .7);
}

.rules-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  text-align: left;
}

.rules-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(20, 12, 5, .55);
  border: 1px solid rgba(242, 193, 78, .15);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(243, 227, 191, .88);
  transition: border-color .2s ease, background .2s ease;
}
.rules-list li:hover { border-color: rgba(242, 193, 78, .5); background: rgba(36, 21, 9, .75); }
.rules-list strong { color: var(--gold); }

.rule-check {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12px;
  color: var(--ink);
  background: radial-gradient(circle at 35% 25%, #ffe9a8, var(--gold) 55%, #b07d14);
  border: 1px solid rgba(59, 35, 19, .6);
  box-shadow: inset 0 1px 2px rgba(255, 244, 214, .6), 0 2px 5px rgba(0,0,0,.4);
}

/* ============ Bonuses page ============ */
#bonuses {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  display: none;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 20, 36, 0) 0%, rgba(6, 20, 36, .18) 20%, rgba(4, 12, 24, .28) 100%);
}
#bonuses.visible { pointer-events: auto; }

/* bonuses get a wider stage so the posters can cover more space */
#bonuses .lb-inner { max-width: 1240px; }

.bonus-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px 42px;
  margin-bottom: 20px;
}

.bonus-card {
  position: relative;
  width: clamp(260px, 26vw, 350px);
  aspect-ratio: 0.645;
  will-change: transform, opacity;
}
.bonus-card:hover { z-index: 3; }

.bonus-inner {
  position: absolute;
  inset: 0;
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), filter .35s ease;
}
.bonus-card:hover .bonus-inner {
  transform: scale(1.1) rotate(1.6deg) translateY(-10px);
  filter: brightness(1.08) drop-shadow(0 26px 34px rgba(0,0,0,.5));
}

/* bonus text inside the empty photo frame of the poster */
.bonus-body {
  position: absolute;
  left: 19%; right: 19%;
  top: 30%; bottom: 34%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6%;
  text-align: center;
  overflow: hidden;
}

.bonus-title {
  font-family: "Pirata One", serif;
  font-size: clamp(21px, 2.1vw, 30px);
  letter-spacing: 1px;
  line-height: 1.05;
  color: #3b2313;
}

.bonus-desc {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(11px, 1.05vw, 15px);
  line-height: 1.5;
  color: rgba(59, 35, 19, .85);
}

/* discord claim button in the name area below "DEAD OR ALIVE" */
.bonus-claim {
  position: absolute;
  left: 14%; right: 14%;
  top: 74.5%; bottom: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* gold-coin claim button, like treasure stamped onto the parchment */
.claim-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: 2px;
  color: #3b2313;
  text-decoration: none;
  padding: 9px 22px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, #ffe9a8, var(--gold) 55%, #b07d14);
  border: 2px solid rgba(59, 35, 19, .65);
  box-shadow:
    inset 0 2px 3px rgba(255, 244, 214, .6),
    inset 0 -3px 4px rgba(59, 35, 19, .35),
    0 4px 0 rgba(59, 35, 19, .5),
    0 8px 12px rgba(42, 26, 12, .35);
  text-shadow: 0 1px 0 rgba(255, 244, 214, .5);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.claim-btn svg { width: 17px; height: 17px; fill: #3b2313; flex: none; }
.claim-btn:hover {
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.08);
}
.claim-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 3px rgba(255, 244, 214, .6),
    inset 0 -3px 4px rgba(59, 35, 19, .35),
    0 1px 0 rgba(59, 35, 19, .5),
    0 3px 6px rgba(42, 26, 12, .35);
}

/* ============ Milestones page ============ */
#milestones {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  display: none;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 20, 36, 0) 0%, rgba(6, 20, 36, .18) 20%, rgba(4, 12, 24, .28) 100%);
}
#milestones.visible { pointer-events: auto; }

/* sticky viewport — header stays put while vertical scroll drives the rail */
.ms-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* mobile: track the real viewport as the URL bar hides */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* compact header — the posters are the stars */
.ms-head { padding-top: 24px; margin-bottom: 0; }
.ms-head .lb-flag { font-size: 11px; letter-spacing: 4px; }
.ms-head .lb-title { font-size: clamp(28px, 4.8vh, 46px); margin-top: 6px; }
.ms-head .lb-title span { letter-spacing: 5px; }
.ms-head .lb-desc { margin-top: 6px; font-size: 12.5px; max-width: 640px; }

/* horizontal rail of rank posters, moved by scroll (no scrollbar) */
.ms-strip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 52px;
  padding: 6px 6vw 6px;
  will-change: transform;
}

/* footer sits at the very end of the section — revealed by a last bit of
   scroll after the rail finishes, pinned to the bottom of the screen */
#milestones .ms-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 0 16px;
  margin-top: 0;
}

.ms-card {
  position: relative;
  flex: none;
  height: min(69vh, 660px);
  aspect-ratio: 0.645;
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), filter .35s ease;
}
.ms-card:nth-child(odd)  { transform: rotate(-3deg); }
.ms-card:nth-child(even) { transform: rotate(2.5deg) translateY(10px); }
.ms-card:hover {
  transform: rotate(0deg) translateY(-12px) scale(1.07);
  filter: brightness(1.08) drop-shadow(0 22px 30px rgba(0,0,0,.5));
  z-index: 2;
}

/* rank info inside the empty photo frame */
.ms-body {
  position: absolute;
  left: 19%; right: 19%;
  top: 29%; bottom: 34%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  text-align: center;
  overflow: hidden;
}

.ms-rank {
  font-family: "Pirata One", serif;
  font-size: clamp(20px, 3.4vh, 30px);
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(59, 35, 19, .45);
}

.ms-wager {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(12px, 1.9vh, 17px);
  color: #3b2313;
}
.ms-reward {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(11px, 1.7vh, 15px);
  letter-spacing: 1px;
  color: #6d1f12;
}
.ms-desc {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(9px, 1.35vh, 12px);
  line-height: 1.45;
  color: rgba(59, 35, 19, .75);
}

.ms-claim {
  position: absolute;
  left: 14%; right: 14%;
  top: 74.5%; bottom: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ms-claim .claim-btn { font-size: clamp(11px, 1.7vh, 15px); padding: 8px 24px; cursor: pointer; }

/* ============ Claim cinematic (shootout) ============ */
#shootout { position: fixed; inset: 0; z-index: 100; overflow: hidden; }

.so-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 22, .82);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .5s ease;
}
#shootout.st-enter .so-backdrop { opacity: 1; }
#shootout.st-zoom .so-backdrop { opacity: 0; transition: opacity .9s ease .3s; }

/* selected poster comes forward to the middle */
.so-poster {
  position: absolute;
  left: 50%; top: 50%;
  height: min(78vh, 130vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.35);
  transform-origin: 50.7% 48.5%; /* bullet hole center */
  opacity: 0;
  transition: transform .65s cubic-bezier(.2, 1.4, .4, 1), opacity .4s ease;
}
#shootout.st-enter .so-poster { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.so-poster img { width: 100%; height: 100%; object-fit: contain; }

#shootout.st-shot .so-poster { animation: posterHit .5s ease-out; }
@keyframes posterHit {
  0%   { transform: translate(-50%, -50%) scale(1); }
  30%  { transform: translate(-51%, -49%) scale(1.12) rotate(-1.5deg); }
  60%  { transform: translate(-49.6%, -50.2%) scale(1.04) rotate(.8deg); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* camera dives through the bullet hole */
#shootout.st-zoom .so-poster {
  transform: translate(-50%, -50%) scale(10);
  opacity: 0;
  transition: transform 1.5s cubic-bezier(.5, 0, .8, .4), opacity .8s ease .7s;
}

.so-info {
  position: absolute;
  left: 30%; right: 31%;
  top: 28%; bottom: 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: opacity .25s ease;
}
#shootout.st-shot .so-info { opacity: 0; }

.so-info-rank {
  font-family: "Pirata One", serif;
  font-size: clamp(26px, 4vh, 40px);
  text-shadow: 0 1px 1px rgba(59, 35, 19, .45);
}
.so-info-line {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(12px, 1.8vh, 17px);
  color: #3b2313;
}
.so-info-reward { color: #6d1f12; }

/* the pirate gun rises from the bottom right, held like an FPS weapon:
   grip cropped off the corner, muzzle aimed up-left at the poster */
.so-gun {
  position: absolute;
  right: -12vw;
  bottom: -16vh;
  width: 56vw;
  height: 72vh;
  transform-origin: 76% 80%; /* pivot at the grip, like a wrist */
  transform: translate(60%, 110%) rotate(0deg);
  transition: transform .8s cubic-bezier(.2, 1, .35, 1);
  pointer-events: none;
}
/* aim the barrel at the middle of the poster
   (positive = clockwise = muzzle up; 0deg sat slightly low, 32deg way high) */
#shootout.st-gun .so-gun { transform: translate(0, 0) rotate(12deg); }
#shootout.st-shot .so-gun { animation: recoil .45s ease-out; }
@keyframes recoil {
  0%   { transform: translate(0, 0) rotate(12deg); }
  18%  { transform: translate(4%, 6%) rotate(22deg); } /* kick back, muzzle flips up */
  55%  { transform: translate(1%, 2%) rotate(15deg); }
  100% { transform: translate(0, 0) rotate(12deg); }
}
#shootout.st-zoom .so-gun { transform: translate(65%, 115%) rotate(4deg); }

/* muzzle flash */
.so-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 63% 62%, rgba(255, 244, 200, .95), rgba(255, 214, 120, .5) 12%, transparent 38%);
  opacity: 0;
}
#shootout.st-shot .so-flash { animation: muzzle .3s ease-out; }
@keyframes muzzle {
  0% { opacity: 0; }
  15% { opacity: 1; }
  100% { opacity: 0; }
}

/* congratulations popup on the pirate scroll */
.so-popup {
  position: absolute;
  left: 50%; top: 50%;
  width: min(82vh, 94vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
  pointer-events: none;
}
#shootout.st-popup .so-popup {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.so-popup > img { width: 100%; height: 100%; object-fit: contain; }

.so-popup-body {
  position: absolute;
  left: 24%; right: 24%;
  top: 36%; bottom: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.so-congrats {
  font-family: "Pirata One", serif;
  font-size: clamp(24px, 4.4vh, 40px);
  line-height: 1;
  color: #6d1f12;
  text-shadow: 0 1px 1px rgba(255, 232, 172, .5);
}
.so-rank-line, .so-reward-line {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(12px, 1.9vh, 17px);
  line-height: 1.4;
  color: #3b2313;
}
.so-rank-line b, .so-reward-line b { color: #6d1f12; }
.so-claim { margin-top: 6px; }

/* Return/Home pinned to the screen corner, away from the scroll art */
.so-nav {
  position: absolute;
  top: 22px; left: 22px;
  display: flex;
  gap: 12px;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .4s ease .25s, transform .4s ease .25s;
  pointer-events: none;
}
#shootout.st-popup .so-nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.so-btn {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(10px, 1.5vh, 13px);
  letter-spacing: 1px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--parchment);
  background: #3b2313;
  border: 2px solid rgba(42, 26, 12, .8);
  transition: transform .2s ease, background .2s ease;
}
.so-btn:hover { transform: scale(1.06); background: #59331a; }

.so-close {
  position: absolute;
  top: 13%; right: 13%;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--parchment);
  background: #3b2313;
  border: 2px solid rgba(42, 26, 12, .8);
  transition: transform .2s ease, background .2s ease;
}
.so-close:hover { transform: scale(1.12) rotate(90deg); background: #6d1f12; }

.lb-foot {
  margin-top: 60px;
  text-align: center;
  font-size: 12px;
  color: rgba(243,227,191,.85);
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}

/* empty leaderboard: one lone poster, centered across the podium row */
.podium-card.lb-nodata {
  grid-column: 1 / -1;
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
}
.podium-card.lb-nodata:hover { transform: none; }
.podium-card.lb-nodata .poster-info { justify-content: center; }

/* ============ Giveaway page ============ */
#giveaway {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  display: none;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 20, 36, 0) 0%, rgba(6, 20, 36, .18) 20%, rgba(4, 12, 24, .28) 100%);
}
#giveaway.visible { pointer-events: auto; }
#giveaway .lb-inner { max-width: 1160px; }

.gw-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 44px;
  margin-bottom: 24px;
}

/* the live giveaway poster (assets/giveaway_poster.webp, 848x1253) */
.gw-card {
  position: relative;
  width: min(430px, 92vw);
  aspect-ratio: 848 / 1253;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
}
.gw-bg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* red ribbon across the top */
.gw-ribbon {
  position: absolute;
  left: 16%; right: 16%;
  top: 8.4%; height: 6.4%;
  display: grid;
  place-items: center;
  font-family: "Pirata One", serif;
  font-size: clamp(17px, 1.9vw, 26px);
  letter-spacing: 5px;
  color: #f8e9c6;
  text-shadow: 0 2px 3px rgba(60, 8, 8, .8);
  overflow: hidden;
  white-space: nowrap;
}

/* rope-framed parchment area */
.gw-body {
  position: absolute;
  left: 23%; right: 23%;
  top: 27%; bottom: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5%;
  text-align: center;
  overflow: hidden;
}

.gw-label {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(59, 35, 19, .75);
}

.gw-keyword {
  font-family: "Pirata One", serif;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.05;
  letter-spacing: 2px;
  color: #6d1f12;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.gw-rows { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.gw-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 2px 5px;
  border-bottom: 1px dashed rgba(59, 35, 19, .3);
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(10px, 1vw, 13px);
  color: rgba(59, 35, 19, .85);
}
.gw-row b { color: #6d1f12; }

.gw-note {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(9px, .9vw, 12px);
  line-height: 1.5;
  color: rgba(59, 35, 19, .7);
}
.gw-note.ok { color: #1e5e2a; }
.gw-note.err { color: #8c2f21; }

/* the red plaque near the bottom links to the stream */
.gw-plaque {
  position: absolute;
  left: 23%; right: 23%;
  top: 81%; height: 6.4%;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(12px, 1.2vw, 16px);
  letter-spacing: 2px;
  color: #f8e9c6;
  text-shadow: 0 2px 3px rgba(60, 8, 8, .85);
  transition: transform .2s ease, filter .2s ease;
}
.gw-plaque:hover { transform: scale(1.05); filter: brightness(1.15); }

/* side column: how to enter + winners */
.gw-side {
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gw-panel {
  border-radius: 16px;
  border: 2px solid rgba(242, 193, 78, .25);
  background: linear-gradient(180deg, rgba(58, 36, 23, .9), rgba(36, 21, 9, .94));
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  padding: 18px 20px;
}
.gw-panel-title {
  font-family: "Pirata One", serif;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  margin-bottom: 14px;
}

.gw-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.gw-steps li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(243, 227, 191, .88);
}
.gw-steps b { color: var(--gold); }

.gw-winners { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gw-winners li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 10px;
  background: rgba(20, 12, 5, .55);
  border: 1px solid rgba(242, 193, 78, .15);
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 13px;
  color: rgba(243, 227, 191, .92);
}
.gw-winners .when { font-size: 11px; font-weight: 400; color: rgba(243, 227, 191, .5); font-family: "Inter", sans-serif; }
.gw-winners .gw-empty { justify-content: center; color: rgba(243, 227, 191, .55); font-weight: 400; font-family: "Inter", sans-serif; font-size: 12.5px; }

/* ============ Account modal (Discord / Kick / Stake) ============ */
/* the exact Stake channel the code must be posted in — called out so it
   isn't skimmed past, which would leave the code unverified */
.auth-code .chan {
  display: inline-block;
  color: var(--gold);
  background: rgba(242, 193, 78, .15);
  border: 1px solid rgba(242, 193, 78, .45);
  border-radius: 6px;
  padding: 0 7px;
  white-space: nowrap;
}

/* ---- finished-month banner ----
   The month is over but Stake hasn't published the next tab yet, so the
   board below is the final standings rather than a live race. */
.lb-ended {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 auto 22px;
  max-width: 760px;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(58, 36, 23, .92), rgba(36, 21, 9, .95));
  border: 1px solid rgba(242, 193, 78, .42);
  color: #e9dcc6;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}
.lb-ended-tag {
  flex: none;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1.6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(242, 193, 78, .16);
  border: 1px solid rgba(242, 193, 78, .5);
  color: var(--gold);
  white-space: nowrap;
}
/* a ticking clock would contradict "ended" — it reads 00:00:00, so mute it */
#leaderboard.is-ended .countdown-wrap { opacity: .45; }

/* ---- loading skeletons ----
   Shown while switching boards so the previous board's rows can't be
   mistaken for the one just picked. */
.sk-line {
  display: block;
  height: 11px;
  border-radius: 6px;
  /* on the parchment poster, so it shimmers dark */
  background: linear-gradient(90deg, rgba(59,35,19,.13), rgba(59,35,19,.30), rgba(59,35,19,.13));
  background-size: 200% 100%;
  animation: skShimmer 1.2s ease-in-out infinite;
}
.sk-w20 { width: 20%; }
.sk-w30 { width: 30%; }
.sk-w40 { width: 40%; }
.sk-w50 { width: 50%; }
.sk-w60 { width: 60%; }
.sk-w70 { width: 70%; }

.podium-card.is-skeleton { pointer-events: none; }
.podium-card.is-skeleton .poster-info { gap: 9px; align-items: center; }
.podium-card.is-skeleton .podium-rank { opacity: .45; }

/* table rows sit on the dark board, so they shimmer gold instead */
.lb-table .sk-row .sk-line {
  height: 10px;
  background: linear-gradient(90deg, rgba(242,193,78,.09), rgba(242,193,78,.26), rgba(242,193,78,.09));
  background-size: 200% 100%;
}

@keyframes skShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; }
}

#authModal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
}
#authModal[hidden] { display: none; }

/* ---- unclaimed positions ----
   Every paid place stays on the board before anyone holds it, so the prize
   pool is always visible. Vacant places are dimmed, not hidden. */
.podium-card.is-open { opacity: .72; }
.podium-card.is-open .podium-name { color: #6b4a2c; }
.podium-card.is-open .podium-wager { font-style: italic; opacity: .85; }
.lb-table tr.row-open td { opacity: .55; }
.lb-table tr.row-open td:last-child { opacity: .8; }   /* keep the reward legible */

/* ---- every board switched off ----
   Nothing to show, so the race furniture is removed rather than left empty. */
#leaderboard.lb-off .podium,
#leaderboard.lb-off .countdown-wrap,
#leaderboard.lb-off .lb-tabs,
#leaderboard.lb-off .lb-table { display: none; }
#leaderboard.lb-off .lb-status { font-size: 15px; padding: 28px 0; }

.auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 12, 22, .82);
  backdrop-filter: blur(5px);
}

.auth-card {
  position: relative;
  width: min(460px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 26px 22px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: linear-gradient(180deg, rgba(58, 36, 23, .97), rgba(36, 21, 9, .99));
  border: 2px solid rgba(242, 193, 78, .45);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  animation: authPop .45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes authPop {
  from { transform: scale(.85) translateY(18px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.auth-title {
  font-family: "Pirata One", serif;
  font-size: 27px;
  letter-spacing: 2px;
  text-align: center;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.auth-close { top: 10px; right: 10px; width: 30px; height: 30px; font-size: 12px; }

.auth-block { display: flex; flex-direction: column; gap: 9px; }
.auth-label {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold);
}

.auth-row { display: flex; gap: 10px; align-items: center; }
.auth-status-line {
  flex: 1;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 13px;
  color: rgba(243, 227, 191, .75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-status-line.ok { color: #9fe09f; }

.auth-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid rgba(242, 193, 78, .35);
  background: rgba(20, 12, 5, .75);
  color: var(--parchment);
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 14px;
  outline: none;
  transition: border-color .2s ease;
}
.auth-row input:focus { border-color: var(--gold); }
.auth-row input::placeholder { color: rgba(243, 227, 191, .4); font-weight: 400; }
.auth-row input:disabled { opacity: .45; }

.auth-btn { font-size: 12px; padding: 9px 16px; flex: none; cursor: pointer; border: 2px solid rgba(59, 35, 19, .65); }
.auth-btn[disabled] { opacity: .5; pointer-events: none; }
.auth-kick-btn svg { width: 15px; height: 15px; fill: #3b2313; }

.auth-code {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(20, 12, 5, .6);
  border: 1px dashed rgba(242, 193, 78, .45);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(243, 227, 191, .8);
}
.auth-code b { color: var(--gold); }
.auth-code-value {
  margin-top: 9px;
  text-align: center;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--gold);
  user-select: all;
}

.auth-status { font-size: 12.5px; min-height: 17px; line-height: 1.45; }
.auth-status.ok { color: #9fe09f; }
.auth-status.err { color: #ee9a8a; }

.auth-logout { align-self: center; }

/* ============ Responsive ============ */

/* --- tablets: shrink the hanging signs so both rows fit on one line --- */
@media (max-width: 1100px) {
  .topbar { padding: 0 16px; }
  .socials { gap: 8px; }
  .social-banner { width: clamp(44px, 5.5vw, 64px); }
  .social-word { font-size: clamp(9px, 1.1vw, 13px); letter-spacing: 0; }
  .banner-row { right: 16px; gap: 10px; }
  .banner-item { width: clamp(96px, 12vw, 150px); }
  .banner-label { font-size: clamp(12px, 1.5vw, 17px); letter-spacing: 1px; }
}

/* --- small screens: socials on the first row, page signs hang below them,
       clips panel narrows instead of disappearing --- */
@media (max-width: 860px) {
  .topbar { padding: 0 8px; }
  .socials { gap: 7px; }
  .social-banner { width: clamp(40px, 10vw, 56px); }
  .social-word { font-size: clamp(10px, 2.6vw, 14px); letter-spacing: 0; }

  /* A wide landscape cabin on a tall phone gets zoomed by object-fit:cover.
     Keep the overscale as small as the parallax safely allows so more of the
     cabin shows (less "zoomed-in" feel). */
  .ship-inside { transform: scale(1.12); }

  .banner-row {
    left: 6px;
    right: 6px;
    top: clamp(44px, 12.5vw, 64px);
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px 6px;
  }
  .banner-item { width: clamp(74px, 21vw, 120px); }
  .banner-label { font-size: clamp(10px, 2.8vw, 14px); letter-spacing: 0; }

  .clips-exit {
    top: clamp(128px, 34vw, 190px);
    /* tab (~190px) + body must fit the screen when expanded */
    --clips-w: min(292px, calc(100vw - 196px));
  }
  .clips-tab {
    font-size: 14px;
    letter-spacing: 1px;
    gap: 7px;
    padding: 11px 12px;
  }
  .clips-body { max-height: calc(100vh - 240px); }

  .hero { width: 100%; padding: 0 12px; }
  .hero-title { letter-spacing: 4px; }
}

/* --- phones: content pages --- */
@media (max-width: 720px) {
  .lb-inner { padding: 72px 16px 50px; }
  .lb-head { margin-bottom: 40px; }
  .lb-title span { letter-spacing: 4px; }

  /* big top-3 posters, stacked 1 → 2 → 3 (timer + table are below) */
  .podium { grid-template-columns: 1fr; gap: 30px; }
  .podium-card { max-width: 320px; margin: 0 auto; width: 100%; }
  .podium-card.first { order: 1; transform: none; }
  .podium-card.first:hover { transform: translateY(-10px) rotate(-1deg); }
  .podium-card.second { order: 2; }
  .podium-card.third { order: 3; }
  .podium-name { font-size: 18px; }
  .podium-wager { font-size: 12px; }
  .podium-prize { font-size: 13px; }

  /* table: cells never wrap; if the row is wider than the screen it scrolls
     sideways instead of hiding the values */
  .lb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lb-table { min-width: 340px; }
  .lb-table th, .lb-table td { padding: 10px 9px; font-size: 12.5px; white-space: nowrap; }
  .lb-table td:first-child, .lb-table th:first-child { width: 30px; }

  /* countdown: 4 boxes always on ONE line (flex-share, never wrap) */
  .countdown { gap: 6px; flex-wrap: nowrap; }
  .cd-box { min-width: 0; flex: 1 1 0; padding: 10px 4px 8px; }
  .cd-box span { font-size: clamp(18px, 5.5vw, 26px); }
  .cd-box label { font-size: 9px; letter-spacing: 1px; }
  .lb-tabs { margin: 26px 0 30px; }
  .tab-btn { padding: 10px 22px; font-size: 13px; }

  .rules-summary { padding: 13px 16px; }
  .rules-content { padding: 2px 14px 16px; }
  .rules-list { grid-template-columns: 1fr; }

  /* bonuses: single centered column of posters */
  .bonus-grid { gap: 30px 20px; }
  .bonus-card { width: min(320px, 84vw); }

  /* milestones: header hugs the edges, slightly smaller posters */
  .ms-head { padding-left: 14px; padding-right: 14px; }
  .ms-head .lb-desc { font-size: 12px; }
  .ms-strip { gap: 30px; }
  .ms-card { height: min(60vh, 560px); }

  /* giveaway */
  .gw-wrap { gap: 30px; }
  .gw-card { width: min(360px, 94vw); }
  .auth-card { padding: 20px 18px 18px; gap: 14px; }

  /* claim cinematic on portrait screens */
  .so-poster { height: min(72vh, 150vw); }
  .so-gun { width: 110vw; height: 55vh; right: -30vw; bottom: -12vh; }
  .so-popup { width: min(82vh, 100vw); }
  .so-popup-body { left: 22%; right: 22%; gap: 8px; }
  .so-close { width: 30px; height: 30px; top: 11%; right: 11%; }
  .so-nav { top: 14px; left: 14px; gap: 8px; }
}

/* ============ Mobile bottom nav (5 portholes) + slide-out ============ */
.mnav, .msocial-toggle, .msocial-panel { display: none; }

.mnav {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 45;
  pointer-events: none; /* only the buttons take taps */
}
.mnav-bar {
  position: relative;
  width: 100%;                   /* full width, edge to edge */
  aspect-ratio: 1376 / 288;      /* crop to just the wooden band */
  overflow: hidden;
  pointer-events: auto;
  filter: drop-shadow(0 -6px 16px rgba(0,0,0,.55));
}
/* holes sit at the image's vertical center, so cover-center crops to the band */
.mnav-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.mnav-btn {
  position: absolute; top: 50%;
  width: 11%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  color: rgba(255, 226, 150, .72);
  transition: color .2s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mnav-btn svg { width: 60%; height: 60%; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.mnav-home svg { width: 70%; height: 70%; }
.mnav-btn:active { transform: translate(-50%, -50%) scale(.88); }
.mnav-btn.active { color: var(--gold); }
.mnav-btn.active svg { filter: drop-shadow(0 0 6px rgba(242,193,78,.9)); }

/* slide-out toggle (top-right) */
.msocial-toggle {
  position: fixed; top: 12px; right: 12px; z-index: 49;
  width: 44px; height: 44px; border-radius: 12px;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(58,36,23,.95), rgba(36,21,9,.98));
  border: 2px solid rgba(242,193,78,.5);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.msocial-toggle span { width: 18px; height: 2px; border-radius: 2px; background: var(--gold); }

.msocial-backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(5,12,22,.6); }
.msocial-panel {
  position: fixed; top: 0; right: 0; z-index: 49;
  height: 100%; width: min(76vw, 300px);
  padding: 22px 14px;
  flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, rgba(58,36,23,.98), rgba(30,17,8,.99));
  border-left: 2px solid rgba(242,193,78,.5);
  box-shadow: -12px 0 30px rgba(0,0,0,.6);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.65,0,.35,1);
}
.msocial-panel.open { transform: translateX(0); }
.msocial-title { font-family: "Pirata One", serif; font-size: 24px; letter-spacing: 1px; color: var(--gold); text-align: center; margin-bottom: 14px; }
.msocial-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 10px;
  color: var(--parchment); text-decoration: none;
  font-family: "Cinzel", serif; font-weight: 700; font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
.msocial-row:active { background: rgba(242,193,78,.12); }
.msocial-row b { color: var(--gold); }
.msocial-ico { width: 24px; display: grid; place-items: center; font-size: 18px; }
.msocial-ico svg { width: 20px; height: 20px; fill: var(--gold); }
.msocial-sep { height: 1px; background: rgba(242,193,78,.2); margin: 8px 4px; }

/* --- turn it all on for phones, and re-frame the cabin --- */
@media (max-width: 720px) {
  :root { --mnav-h: calc(100vw * 0.209); }

  /* hanging signs + clips give way to the bottom nav + slide-out */
  .topbar, .banner-row, .clips-exit { display: none !important; }
  .mnav { display: block; }
  .msocial-toggle { display: flex; }
  .msocial-panel { display: flex; }

  /* portrait cabin: zoom-through anchored on the upper porthole */
  .inside-zoom { transform-origin: 50.3% 30.5%; }
  /* extra overscale so the tilt/shake parallax never lifts the cabin off
     the top edge (the porthole sits high, so top headroom is the tight one) */
  .ship-inside { object-position: 50.3% 30.5%; transform: scale(1.15); }

  /* keep the hero + page content clear of the fixed bottom bar */
  .hero { bottom: calc(var(--mnav-h) + 4vh); }
  #leaderboard .lb-inner, #bonuses .lb-inner, #giveaway .lb-inner {
    padding-bottom: calc(var(--mnav-h) + 26px);
  }
  #milestones .ms-foot { bottom: var(--mnav-h); }
}

/* ---- leaderboard call-to-action pair ----
   Sits between the title and the podium. Same two-button shape as the
   reference, but carved wood and brass instead of flat red, so it belongs to
   the ship. Gold one joins under the code, dark one explains the weighting. */
.lb-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: -22px auto 40px;
}
.lb-cta-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 220px;
  padding: 13px 26px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  background: linear-gradient(180deg, rgba(74, 47, 28, .95), rgba(34, 19, 8, .97));
  border: 1px solid rgba(242, 193, 78, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 175, .18),
    0 10px 20px rgba(0, 0, 0, .45);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s, filter .18s;
}
.lb-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 228, 175, .25), 0 16px 28px rgba(0, 0, 0, .55);
}
.lb-cta-btn:active { transform: translateY(0); }

/* the join button carries the brass finish so it reads as the primary action */
.lb-cta-btn.is-primary {
  background: linear-gradient(180deg, #ffe08a, var(--gold-deep));
  border-color: rgba(255, 235, 190, .7);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, .8), 0 10px 22px rgba(0, 0, 0, .5);
}
.lb-cta-btn.is-primary:hover { filter: brightness(1.05); }

.cta-title {
  font-family: "Pirata One", serif;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1.1;
  color: var(--gold);
}
.cta-sub {
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #b8a888;
}
.lb-cta-btn.is-primary .cta-title { color: #2a1a0c; text-shadow: 0 1px 0 rgba(255, 245, 220, .5); }
.lb-cta-btn.is-primary .cta-sub { color: #4a3116; }
.lb-cta-btn.is-primary .cta-sub b { color: #2a1a0c; }

/* ---- wager weighting popup ---- */
#weightModal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
}
#weightModal[hidden] { display: none; }
.weight-card { width: min(470px, 92vw); gap: 14px; }
.weight-lead { color: #cbb99a; font-size: 13.5px; line-height: 1.6; text-align: center; }

.weight-list { list-style: none; display: grid; gap: 10px; }
.weight-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(242, 193, 78, .2);
}
.weight-pct {
  flex: none;
  min-width: 62px;
  text-align: center;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 19px;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.weight-rule { display: grid; gap: 2px; }
.weight-rule b { color: var(--parchment); font-size: 13.5px; }
.weight-rule small { color: #9c8b70; font-size: 11.5px; }

.weight-note {
  text-align: center;
  color: #e9dcc6;
  font-size: 13px;
  padding: 11px 12px;
  border-radius: 11px;
  background: rgba(242, 193, 78, .12);
  border: 1px solid rgba(242, 193, 78, .35);
}
.weight-note b { color: var(--gold); }

@media (max-width: 620px) {
  .lb-cta { margin: -10px auto 30px; gap: 10px; }
  .lb-cta-btn { min-width: 0; flex: 1 1 46%; padding: 11px 14px; }
  .cta-title { font-size: 16px; letter-spacing: 1.2px; }
  .cta-sub { font-size: 10px; }
}


/* the join button leads with the code itself: the label is a small kicker
   above it, the code is the thing people came for */
.lb-cta-btn.is-primary { padding: 10px 26px 12px; }
.cta-kicker {
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #6b4a20;
}
.cta-code {
  font-family: "Pirata One", serif;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: 2px;
  color: #2a1a0c;
  text-shadow: 0 1px 0 rgba(255, 245, 220, .55);
}
.cta-code b { font-weight: inherit; }
@media (max-width: 620px) {
  .cta-code { font-size: 21px; }
  .cta-kicker { font-size: 9px; letter-spacing: 1.5px; }
}