/* PUBG theme — small theme-side overrides on top of the compiled Tailwind bundle. */

/* Belt-and-suspenders against horizontal scroll on small screens. */
html,
body {
  max-width: 100%;
}
.pubg-shell {
  overflow-x: clip;
}

/* Long unbroken strings (coords, ids) never force a scrollbar. */
.notranslate {
  overflow-wrap: anywhere;
}

/* Empty media URLs must degrade to the existing tactical surface instead of
   exposing the browser broken-image icon and duplicated alt text. */
.pubg-shell img[src=''],
.pubg-shell img:not([src]) {
  visibility: hidden;
}

/* Mobile menu: JS swaps `hidden` → `flex`; keep column layout when shown. */
#pubg-mobile-menu.flex {
  display: flex;
}

/* ================================================ Hero match panel (xl and up)
 *
 * A bracketed targeting module sitting in the dead right half of the hero
 * photograph — the part that carries no subject at any slide. It is deliberately
 * not a stack of generic cards: a lit corner frame, a status edge coloured by
 * state, a rotated index in the left gutter and an oversized score column give it
 * the readout look the rest of the tactical design system uses.
 *
 * Translucent rather than solid, so the image still reads through and the hero
 * stays one picture instead of two competing panels. */
.pubg-hero-rail {
  position: relative;
  max-width: 100%;
  padding: 18px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.58), rgba(10, 10, 10, 0.34));
  backdrop-filter: blur(10px) saturate(1.06);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Two diagonal corner brackets rather than four — a frame that reads as aimed
   instead of merely boxed. */
.pubg-hero-rail::before,
.pubg-hero-rail::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.pubg-hero-rail::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--primary, #F2A900);
  border-left: 2px solid var(--primary, #F2A900);
}
.pubg-hero-rail::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--primary, #F2A900);
  border-right: 2px solid var(--primary, #F2A900);
}

/* ---------------------------------------------------------------- Panel head */
.pubg-hero-rail__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pubg-hero-rail__tick {
  flex-shrink: 0;
  width: 3px;
  height: 15px;
  background: var(--primary, #F2A900);
}
.pubg-hero-rail__title {
  flex-shrink: 0;
  font-family: var(--font-display, "Oswald", "Oswald Fallback", sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
}
.pubg-hero-rail__count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 2px 7px;
  font-family: var(--font-mono, "JetBrains Mono", "Mono Fallback", monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #FF3D00;
  background: rgba(255, 61, 0, 0.12);
  border: 1px solid rgba(255, 61, 0, 0.45);
}
.pubg-hero-rail__count i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: pubg-hero-pulse 1.6s ease-in-out infinite;
}
.pubg-hero-rail__rule {
  flex: 1;
  min-width: 8px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}
.pubg-hero-rail__all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-family: var(--font-mono, "JetBrains Mono", "Mono Fallback", monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8C8C86;
  transition: color .25s ease;
}
.pubg-hero-rail__all:hover { color: var(--primary, #F2A900); }
.pubg-hero-rail__all svg { transition: transform .25s ease; }
.pubg-hero-rail__all:hover svg { transform: translateX(3px); }

.pubg-hero-rail__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --------------------------------------------------------------- Match cards */
/* Status drives every accent through custom properties, so the three states are
   one rule set instead of three near-copies. */
.pubg-hero-match--live      { --hm-edge: #FF3D00; --hm-chip: #FF3D00; --hm-chip-bg: rgba(255, 61, 0, 0.14);    --hm-chip-bd: rgba(255, 61, 0, 0.5); }
.pubg-hero-match--upcoming  { --hm-edge: #F2A900; --hm-chip: #F2A900; --hm-chip-bg: rgba(242, 169, 0, 0.12);   --hm-chip-bd: rgba(242, 169, 0, 0.5); }
.pubg-hero-match--completed { --hm-edge: #6E6E68; --hm-chip: #A7A79F; --hm-chip-bg: rgba(167, 167, 159, 0.1);  --hm-chip-bd: rgba(167, 167, 159, 0.4); }

.pubg-hero-match__link {
  position: relative;
  display: block;
  padding: 12px 14px 12px 30px;
  background: rgba(12, 12, 12, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.08);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  /* Compositor properties only. These sit in the same flex row as the headline
     and must never change size on hover — the rule that fixed PLAY PUBG. */
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.pubg-hero-match__link:hover {
  background: rgba(22, 22, 22, 0.9);
  border-color: rgba(242, 169, 0, 0.42);
  transform: translateX(-5px);
  box-shadow: -10px 0 30px -16px rgba(242, 169, 0, 0.75);
}
.pubg-hero-match__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primary, #F2A900);
}

/* Status edge: always lit, brighter on hover. */
.pubg-hero-match__edge {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hm-edge);
  opacity: 0.65;
  transition: opacity .25s ease, box-shadow .25s ease;
}
.pubg-hero-match__link:hover .pubg-hero-match__edge {
  opacity: 1;
  box-shadow: 0 0 14px 1px var(--hm-edge);
}

/* Index sits rotated in the left gutter, where nothing else competes for space. */
.pubg-hero-match__index {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: var(--font-display, "Oswald", "Oswald Fallback", sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.24);
  transition: color .25s ease;
  pointer-events: none;
}
.pubg-hero-match__link:hover .pubg-hero-match__index { color: var(--hm-edge); }

.pubg-hero-match__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.pubg-hero-match__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 3px 7px;
  font-family: var(--font-mono, "JetBrains Mono", "Mono Fallback", monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hm-chip);
  background: var(--hm-chip-bg);
  border: 1px solid var(--hm-chip-bd);
}
.pubg-hero-match__chip i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: pubg-hero-pulse 1.6s ease-in-out infinite;
}
.pubg-hero-match__tour {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, "JetBrains Mono", "Mono Fallback", monospace);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8C8C86;
}
.pubg-hero-match__time {
  flex-shrink: 0;
  font-family: var(--font-display, "Oswald", "Oswald Fallback", sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--primary, #F2A900);
}

.pubg-hero-match__team {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 3px 0;
}
.pubg-hero-match__crest {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}
.pubg-hero-match__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display, "Oswald", "Oswald Fallback", sans-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
}
.pubg-hero-match__score {
  flex-shrink: 0;
  min-width: 22px;
  text-align: right;
  font-family: var(--font-display, "Oswald", "Oswald Fallback", sans-serif);
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #62625D;
}
.pubg-hero-match__team.is-lead .pubg-hero-match__name  { color: #fff; }
.pubg-hero-match__team.is-lead .pubg-hero-match__score { color: var(--primary, #F2A900); }

/* Lobby result: one winner out of sixteen, not two sides with a scoreline. */
.pubg-hero-match__lobby {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0 2px;
}
.pubg-hero-match__crest--lg { width: 38px; height: 38px; }
.pubg-hero-match__lobby .pubg-hero-match__name {
  flex: 0 1 auto;
  color: #fff;
}
.pubg-hero-match__place {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary, #F2A900);
}
.pubg-hero-match__lobby .pubg-hero-match__score { color: #fff; }
/* The kill count needs a unit, or "9" beside a team name reads as a score. */
.pubg-hero-match__lobby .pubg-hero-match__score::after {
  content: " K";
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #62625D;
}

/* Hairline between the two sides, indented past the crest column. */
.pubg-hero-match__vs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1px 0 1px 41px;
}
.pubg-hero-match__vs::before,
.pubg-hero-match__vs::after {
  content: "";
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.pubg-hero-match__vs::before { flex: 0 0 12px; }
.pubg-hero-match__vs::after  { flex: 1; }
.pubg-hero-match__vs span {
  font-family: var(--font-mono, "JetBrains Mono", "Mono Fallback", monospace);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.3);
}

@keyframes pubg-hero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .pubg-hero-match__link,
  .pubg-hero-match__edge,
  .pubg-hero-match__index,
  .pubg-hero-rail__all,
  .pubg-hero-rail__all svg { transition: none; }
  .pubg-hero-match__chip i,
  .pubg-hero-rail__count i { animation: none; }
}

/* --------------------------------------------- News Standard: Read more --
   <details> keeps the full SEO text in the HTML; CSS swaps teaser for full
   text on toggle. No JavaScript, per the standard's performance rule. */
.pubg-readmore { max-width: 860px; }
.pubg-readmore summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.65;
  color: #9B9B96;
}
.pubg-readmore summary::-webkit-details-marker { display: none; }
.pubg-readmore__more,
.pubg-readmore__less {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-display, "Oswald", "Oswald Fallback", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary, #F2A900);
  border-bottom: 1px solid rgba(242, 169, 0, 0.45);
}
.pubg-readmore__less { display: none; }
.pubg-readmore[open] .pubg-readmore__teaser,
.pubg-readmore[open] .pubg-readmore__more { display: none; }
.pubg-readmore[open] .pubg-readmore__less { display: inline-block; }
.pubg-readmore__full {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #9B9B96;
}

/* Newest / Oldest switch — compact, secondary to the H1. */
.pubg-sort {
  display: inline-flex;
  gap: 2px;
  margin-top: 18px;
  border: 1px solid var(--line, #2A2A26);
}
.pubg-sort__opt {
  padding: 9px 16px;
  font-family: var(--font-display, "Oswald", "Oswald Fallback", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8D8D88;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.pubg-sort__opt:hover { color: #F2F2EE; }
.pubg-sort__opt.is-active {
  background: var(--primary, #F2A900);
  color: #090909;
}

/* ------------------------------------------------------------ Live search */
.pubg-ls__item + .pubg-ls__item { border-top: 1px solid var(--line, #2A2A26); }
.pubg-ls__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.pubg-ls__item.is-active .pubg-ls__link,
.pubg-ls__link:hover { background: rgba(242, 169, 0, 0.08); }
.pubg-ls__thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--line, #2A2A26);
}
.pubg-ls__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pubg-ls__title {
  font-family: var(--font-display, "Oswald", "Oswald Fallback", sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #E8E8E2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pubg-ls__type {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary, #F2A900);
}
.pubg-ls__empty {
  padding: 14px 12px;
  font-size: 12px;
  color: #8D8D88;
}

/* ------------------------------------------------------------ Country flags */
.vpe-flag {
  display: inline-block;
  width: 20px;
  height: 15px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.12);
  vertical-align: -2px;
}

/* --------------------------------------------------- Equipment / gear cards */
.gear-card__shot {
  display: grid;
  place-items: center;
  height: 108px;
  margin: -4px -4px 12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(242, 169, 0, 0.10), transparent 62%),
    #0E0E0E;
  border-bottom: 1px solid var(--line, #2A2A26);
}
.gear-card__shot img {
  max-height: 88px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}

/* ------------------------------------------------------- Header search box */
/*
 * Clipped corner and border as one shape. A plain `border` on a clip-path box
 * gets cut off at the corner, which read as a broken frame on focus — so the
 * frame is a backing layer and the field sits 1px inside it.
 */
.pubg-search {
  --pubg-search-frame: var(--line, #2A2A26);
  position: relative;
  display: block;
  padding: 1px;
  background: var(--pubg-search-frame);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: background-color 0.25s ease;
}
.pubg-search:focus-within { --pubg-search-frame: var(--primary, #F2A900); }
.pubg-search__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* No width/height override here: the utility classes on the element own the
     box, and forcing 100% collapsed the field to the wrapper's auto height. */
  background: #131313;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.pubg-search input { border: 0; }
.pubg-search input:focus { outline: none; }