/* ==========================================================================
   Drop Bears — leaderboard
   Matched to stats.dropbears.gg, which is the brand being carried across the
   site. Restraint is the point: no card chrome, no gradients, no tints. Type
   on a dark field with hairline separators, and orange in exactly three
   places: the rule above the header, the active sort, the top three ranks.
   ========================================================================== */

.tablewrap {
  overflow-x: auto;
  border: 0;
  border-top: 2px solid var(--ember);
}

table.data {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

table.data th {
  background: none;
  border-bottom: 1px solid var(--line);
  color: var(--mute);
  font-family: var(--body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  text-align: right;
  padding: var(--s2);
  white-space: nowrap;
}
table.data th:first-child,
table.data th.l,
table.data td:first-child,
table.data td.l { text-align: left; }

table.data td {
  padding: var(--s2);
  text-align: right;
  border-bottom: 1px solid var(--line);
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--bone);
  background: none;
}

table.data tbody tr:hover td { background: rgba(255, 255, 255, .03); }

/* rank: orange for the top three, muted for everyone else */
table.data .rank {
  width: 48px;
  font-family: var(--body);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--mute);
}
table.data tr.top .rank { color: var(--ember); }

/* the name and the headline stat carry the weight, nothing else does */
table.data td.name { font-weight: 600; color: var(--bone); font-size: .9375rem; }
table.data td[data-l="Kills"] { font-weight: 700; }
table.data tr.top td { background: none; }

table.data th button[data-sort] {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}
table.data th button[data-sort]:hover { color: var(--bone); }

/* ---------------------------------------------------------- find a player -- */

.finder {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4); flex-wrap: wrap;
}
.finder input {
  flex: 1 1 260px;
  min-height: 46px;
  padding: 0 var(--s3);
  background: var(--char);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--bone);
  font-family: var(--body);
  font-size: .9375rem;
}
.finder input::placeholder { color: var(--faint); }
.finder input:focus { outline: none; border-color: var(--ember); }
.finder__meta { color: var(--mute); font-size: .875rem; margin-left: auto; }

.finder__none { padding: var(--s5) 0; color: var(--mute); border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------------ lede -- */

.board__lede { color: var(--mute); font-size: 1.0625rem; line-height: 1.5; max-width: 62ch; }
.board__lede b { color: var(--bone); font-weight: 700; }

/* ----------------------------------------------------------------- phone -- */
/* His page keeps a real table on a phone and it reads fine, so the card
   treatment is gone. Two columns just drop out. */

@media (max-width: 719px) {
  table.data .hide-s { display: none; }
  table.data th, table.data td { padding: 14px 6px; font-size: .875rem; }
  table.data .rank { width: 26px; }
  /* Names wrap instead of being cut off. A clan tag plus a handle passes
     148px easily, so "[SUCK] Poblo Ec..." hid who the player actually is.
     Two lines beats an unreadable name. */
  table.data td.name { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
  .finder__meta { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------- rules, left to right -- */
/* Joel: the vertical 01-06 column read as AI filler. These are six separate
   rules, not a sequence, so they sit as a grid. */

.rulegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
@media (min-width: 640px)  { .rulegrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .rulegrid { grid-template-columns: repeat(3, 1fr); } }

.rulecard { background: var(--char); padding: var(--s4); }
@media (min-width: 900px) { .rulecard { padding: var(--s5) var(--s4); } }
.rulecard h3 { font-size: 1.0625rem; line-height: 1.25; }
.rulecard p { margin: var(--s2) 0 0; color: var(--mute); font-size: .9375rem; line-height: 1.55; }

/* enforcement tiers read better as a row than as four big numerals */
.facts { border-radius: 6px; overflow: hidden; }
.fact__n { font-size: clamp(1.75rem, 4vw, 2.5rem); font-stretch: 100%; }

/* --------------------------------------------------- kills bar (his device) -- */
/* A translucent orange bar behind the kills figure, scaled against the top
   player. Lifted from stats.dropbears.gg: left 10px, 22px tall, 2px radius,
   rgba(240,98,26,.38), and the number sits above it. */

table.data td.kills { position: relative; text-align: right; width: 210px; --gap: 110px; }
table.data td.kills .bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 22px;
  border-radius: 2px;
  background: rgba(240, 98, 26, .38);
  pointer-events: none;
  /* same maths as his page, but the track adapts to the column width */
  width: calc((100% - var(--gap)) * var(--pct, 0) / 100);
}
table.data tr.top td.kills .bar { background: rgba(240, 98, 26, .55); }
table.data td.kills span { position: relative; font-weight: 700; }

@media (max-width: 719px) {
  /* The bar is gone on a phone. Squeezed into about 35px it conveys nothing,
     and it was stealing the width that pushed long names onto three lines.
     Reading who is on the board beats a decorative bar. */
  table.data td.kills { width: 56px; --gap: 0px; }
  table.data td.kills .bar { display: none; }
}

/* ------------------------------------------------------- community cards -- */

.rulecard--link { display: flex; flex-direction: column; }
.rulecard__cta { margin-top: auto; padding-top: var(--s3); }

/* ------------------------------------------------------- server tabs ----- */
/* One board per server plus a combined one. Matches his page: plain text
   tabs on a rule, the active one underlined in orange. */

.tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin: 0 0 var(--s2);
  border-bottom: 1px solid var(--line);
}
.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 10px var(--s3);
  min-height: 44px;
  font-family: var(--body);
  font-size: .875rem;
  font-weight: 600;
  color: var(--mute);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.tab:hover { color: var(--bone); }
.tab[aria-selected="true"] { color: var(--bone); border-bottom-color: var(--ember); }

.board__name {
  margin: 0 0 var(--s4);
  color: var(--mute);
  font-size: .875rem;
  min-height: 1.4em;
}

/* ------------------------------------------------------- server id rows -- */

.spec__id {
  display: block;
  margin-top: 6px;
  font-size: .8125rem;
  color: var(--faint);
  overflow-wrap: anywhere;
  letter-spacing: .01em;
}

/* ------------------------------------------ the mob section, copy + frame -- */

.mob { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: center; }
@media (min-width: 900px)  { .mob { grid-template-columns: 1fr 1.35fr; gap: var(--s6); align-items: stretch; } }
@media (min-width: 1200px) { .mob { grid-template-columns: 1fr 1.55fr; } }

.mob__copy { max-width: 56ch; }
.mob__copy h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); }

.mob__shot {
  margin: 0; position: relative;
  border-radius: 6px;
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
/* slides stack and crossfade; the first carries is-on from the markup so
   there is something on screen before the script runs */
.mob__shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  display: block;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.mob__shot img.is-on { opacity: 1; }
@media (min-width: 900px) {
  /* fill the height of the copy beside it instead of leaving dead space */
  .mob__copy { align-self: center; }
  .mob__shot { aspect-ratio: auto; min-height: 480px; }
}
@media (min-width: 1200px) { .mob__shot { min-height: 560px; } }
.mob__shot figcaption {
  z-index: 2;
  position: absolute; right: 10px; bottom: 8px;
  font-size: .625rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(236, 229, 216, .72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

/* ------------------------------------- server details on a darkened plate -- */

.plate { position: relative; overflow: hidden; }
.plate__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.plate::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, var(--ink) 0 3%, rgba(19,20,19,.76) 16%, rgba(19,20,19,.78) 84%, var(--ink) 100%);
}
.plate__in { position: relative; z-index: 2; }

/* two columns of spec rows once there is room for them */
@media (min-width: 900px) {
  .spec--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s6);
    border-top: 0;
  }
  .spec--2col .spec__row { grid-template-columns: 150px 1fr; gap: var(--s3); }
  /* the first row in each column needs the top rule the container used to carry */
  .spec--2col .spec__row:nth-child(1),
  .spec--2col .spec__row:nth-child(2) { border-top: 1px solid var(--line); }
}

/* Over the photo plate the muted label colour can dip under 4.5:1 on the
   brightest patches, so lift it just inside this section. */
.plate .spec__k { color: #B5AFA4; }

@media (max-width: 899px) {
  /* the plate reads as noise behind a single stacked column on a phone */
  .plate::after {
    background: linear-gradient(180deg, var(--ink) 0 4%, rgba(19,20,19,.88) 16%, rgba(19,20,19,.9) 84%, var(--ink) 100%);
  }
  .mob__shot { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .mob__shot img { transition: none; }
}

/* ------------------------------------------- slideshows beyond the mob --- */

/* the server-details plate drifts between frames */
.plate__bg { position: absolute; inset: 0; z-index: 0; }
.plate__bg .plate__img {
  opacity: 0;
  transition: opacity 1400ms var(--ease);
}
.plate__bg .plate__img.is-on { opacity: 1; }

/* clip of the week leads with a rotating frame */
.clip__slides { position: absolute; inset: 0; z-index: 0; display: block; }
.clip__slides img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  filter: contrast(1.08) brightness(.62);
}
.clip__slides img.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .plate__bg .plate__img,
  .clip__slides img { transition: none; }
}

/* ------------------------------------------- season 2 countdown --------- */
/* Deliberately a scoreboard, not a "launching soon" widget. No pill, no
   pulsing dot, no gradient. Big tabular numerals in the display face, an ember
   rule, and that is the whole idea. It sits directly above the board so it
   reads as part of the standings rather than as a banner stuck on top. */

.cd {
  border-left: 3px solid var(--ember);
  padding: var(--s3) 0 var(--s3) var(--s3);
  margin-bottom: var(--s5);
}

.cd__label {
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 var(--s2);
}

.cd__units {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-bottom: var(--s2);
}

.cd__u { display: flex; flex-direction: column; }

.cd__u b {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 900;
  line-height: 1;
  color: var(--bone);
  /* Tabular figures so the seconds ticking does not shuffle the layout. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.cd__u span {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: var(--s1);
}

/* The days number is the one that matters at a glance. */
.cd__u:first-child b { color: var(--ember); }

.cd__sub {
  margin: 0;
  font-size: .875rem;
  color: var(--mute);
  max-width: 54ch;
  line-height: 1.6;
}

.cd--live .cd__label { color: var(--ember); font-size: 1rem; }

@media (max-width: 480px) {
  .cd__units { gap: var(--s3); }
}

/* ------------------------------------------------ home: quests band ----- */
/* One idea, one action. An ember rule rather than a panel, so it reads as a
   continuation of the board above it: the board shows who is winning, this
   shows what you get for playing. */
.questband { padding-block: var(--s6); }
.questband__in {
  border-top: 2px solid var(--ember);
  padding-top: var(--s5);
  display: grid;
  gap: var(--s4);
}
.questband h2 { margin: 0 0 var(--s2); }
.questband .lede { max-width: 52ch; margin: 0; }
@media (min-width: 900px) {
  .questband__in { grid-template-columns: 1fr auto; align-items: end; }
}