/* ==========================================================================
   DuelDrops — capture-desk aesthetic.
   Base is a slate indigo, not near-black. Two accents that carry meaning:
   SIGNAL (hot pink) only ever marks a live/next state, DATA (mint) only
   ever marks machine-readable values — timecodes, durations, dates, odds.
   Signature: the bracketed mono stamp, used on every item on the site.
   Written mobile-first; desktop rules are additive from 48rem up.
   ========================================================================== */

:root{
  --ink:      #161A24;   /* page */
  --surface:  #1E2431;   /* cards */
  --raise:    #262E3D;   /* hover / inset */
  --line:     #313B4D;
  --paper:    #EDEFF4;
  --muted:    #8992A6;
  --signal:   #FF3D6E;   /* live, next, rec */
  --data:     #6FE3C4;   /* numbers, timecodes */

  --display: "Bebas Neue", Impact, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --gap:  1rem;
  --wrap: 76rem;
  --r:    3px;           /* near-square: this is a capture desk, not a card UI */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:400 1rem/1.65 var(--body);
  overflow-x:hidden;
}

img,video{ max-width:100%; height:auto; display:block; }

a{ color:var(--paper); text-decoration:none; }
main a:not(.btn){ text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
main a:not(.btn):hover{ text-decoration-color:var(--signal); }

:focus-visible{ outline:2px solid var(--data); outline-offset:2px; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--signal);
  color:#fff; padding:.6rem 1rem; z-index:99;
}
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:1.1rem; }

/* ---- signature stamp ---------------------------------------------------- */
/* Every timecode, duration and date on the site wears this. It is the one
   element that ties the clip grid, the fight card and the game tables
   together, so it never gets used for decorative text. */
.stamp{
  font:500 .72rem/1 var(--mono);
  letter-spacing:.04em;
  color:var(--data);
  white-space:nowrap;
}
.stamp::before{ content:"["; opacity:.5; margin-right:.15em; }
.stamp::after { content:"]"; opacity:.5; margin-left:.15em; }

/* ---- header ------------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:40;
  background:rgba(22,26,36,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.hdr__in{
  display:flex; align-items:center; gap:.75rem;
  min-height:3.5rem;
}
.brand{ font-family:var(--display); font-size:1.5rem; letter-spacing:.06em; line-height:1; }
.brand__mark{ color:var(--paper); }
.brand__mark--alt{ color:var(--signal); }

.navtoggle{ position:absolute; opacity:0; }
.burger{
  margin-left:auto; width:2.5rem; height:2.5rem;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:.5rem; cursor:pointer;
}
.burger span{ display:block; height:2px; background:var(--paper); }

.nav{
  position:fixed; inset:3.5rem 0 auto 0;
  background:var(--surface); border-bottom:1px solid var(--line);
  max-height:0; overflow:hidden; transition:max-height .22s ease;
}
.navtoggle:checked ~ .nav{ max-height:24rem; }
.nav ul{ list-style:none; margin:0; padding:.5rem 1.1rem 1rem; }
.nav li + li{ border-top:1px solid var(--line); }
.nav a{
  display:block; padding:.85rem 0;
  font-family:var(--display); font-size:1.35rem; letter-spacing:.05em;
}
.nav a[aria-current]{ color:var(--signal); }

.hdr__cta{ display:none; }

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-block; padding:.8rem 1.4rem;
  background:var(--signal); color:#fff;
  font:700 .82rem/1 var(--body); letter-spacing:.08em; text-transform:uppercase;
  border:0; border-radius:var(--r); cursor:pointer;
}
.btn:hover{ filter:brightness(1.12); }
.btn--sm{ padding:.55rem 1rem; font-size:.74rem; }
.btn--ghost{ background:transparent; color:var(--paper); box-shadow:inset 0 0 0 1px var(--line); }
.btn--ghost:hover{ background:var(--raise); filter:none; }

/* ---- type --------------------------------------------------------------- */
h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:.02em; line-height:1.02; margin:0 0 .5rem; }
h1{ font-size:clamp(2.4rem,10vw,4.2rem); }
h2{ font-size:clamp(1.8rem,6vw,2.6rem); margin-top:2.5rem; }
h3{ font-size:1.15rem; font-family:var(--body); font-weight:700; line-height:1.3; }
p{ margin:0 0 1rem; }
.lede{ font-size:1.08rem; color:var(--paper); }
.muted{ color:var(--muted); }

.eyebrow{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font:500 .72rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:1.5rem 0 .75rem;
}

/* ---- status pills ------------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .55rem; border-radius:var(--r);
  font:500 .68rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
}
.pill--live,.pill--upcoming{ background:rgba(255,61,110,.13); color:var(--signal); }
.pill--live::before,.pill--upcoming::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--signal);
  animation:blink 1.6s steps(2,start) infinite;
}
.pill--done{ background:var(--raise); color:var(--muted); }
@keyframes blink{ 50%{ opacity:.25; } }

/* ---- clip grid ---------------------------------------------------------- */
.clips{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin:1.5rem 0; }

.clip{ margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }

/* Viewfinder corners — reads as a capture frame, not a card chrome. */
.clip__frame{ position:relative; background:#000; }
.clip__frame::before,.clip__frame::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none; z-index:2;
  border-color:rgba(255,255,255,.55); border-style:solid;
}
.clip__frame::before{ top:8px; left:8px;  border-width:1px 0 0 1px; }
.clip__frame::after { bottom:8px; right:8px; border-width:0 1px 1px 0; }

/* Clips arrive in whatever shape they were shot. Default to 16:9, and let
   a modifier switch the frame to portrait for phone-shot verticals — either
   way the video is contained, never cropped, so nothing gets cut off. */
.clip__video{ width:100%; aspect-ratio:16/9; object-fit:contain; background:#000; }
.clip--portrait .clip__video{ aspect-ratio:9/16; }

.clip__dur{
  position:absolute; right:.5rem; top:.5rem; z-index:2;
  padding:.15rem .4rem; border-radius:var(--r);
  background:rgba(0,0,0,.72);
  font:500 .7rem/1 var(--mono); color:var(--data);
}
.clip__meta{ padding:.85rem .9rem 1rem; }
.clip__title{ margin:0 0 .3rem; font-size:.98rem; }
.clip__cap{ margin:0 0 .5rem; font-size:.86rem; color:var(--muted); }

/* ---- generic cards ------------------------------------------------------ */
.cards{ display:grid; grid-template-columns:1fr; gap:1rem; margin:1.5rem 0; }
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.1rem;
}
.card h3{ margin-bottom:.35rem; }
.card p{ margin-bottom:.6rem; font-size:.92rem; color:var(--muted); }
.card--link:hover{ background:var(--raise); }

/* ---- fight card list ---------------------------------------------------- */
.bouts{ list-style:none; margin:1.25rem 0; padding:0; border-top:1px solid var(--line); }
.bout{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem;
  padding:.9rem 0; border-bottom:1px solid var(--line);
}
.bout__names{ flex:1 1 100%; font-family:var(--display); font-size:1.35rem; letter-spacing:.03em; }
.bout__vs{ color:var(--signal); margin-inline:.35rem; }
.bout__tag{
  font:500 .68rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.bout--main .bout__names{ font-size:1.75rem; }

/* ---- data table --------------------------------------------------------- */
.tbl{ width:100%; overflow-x:auto; margin:1.25rem 0; }
.tbl table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:26rem; }
.tbl th,.tbl td{ text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); }
.tbl th{ font:500 .7rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.tbl td.num{ font-family:var(--mono); color:var(--data); }

/* ---- callout ------------------------------------------------------------ */
.note{
  border-left:2px solid var(--signal);
  background:var(--surface);
  padding:.9rem 1rem; margin:1.5rem 0; border-radius:0 var(--r) var(--r) 0;
}
.note p:last-child{ margin-bottom:0; }

/* ---- breadcrumbs -------------------------------------------------------- */
.crumbs{ margin:1rem 0 .25rem; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0;
  font:500 .72rem/1.6 var(--mono); color:var(--muted); }
.crumbs li + li::before{ content:"/"; margin-right:.4rem; opacity:.5; }
.crumbs a{ color:var(--muted); text-decoration:none; }

/* ---- hero --------------------------------------------------------------- */
.hero{ padding:2rem 0 1rem; border-bottom:1px solid var(--line); margin-bottom:1.5rem; }
.hero h1{ margin-bottom:.75rem; }

/* ---- cta band ----------------------------------------------------------- */
.cta{
  margin:2.5rem 0; padding:1.5rem 1.2rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  text-align:center;
}
.cta h2{ margin-top:0; }
.cta p{ color:var(--muted); font-size:.9rem; }

/* ---- footer ------------------------------------------------------------- */
.ftr{ margin-top:3.5rem; padding:2rem 0 3rem; border-top:1px solid var(--line); background:#12161F; }
.ftr__brand{ font-family:var(--display); font-size:1.4rem; letter-spacing:.06em; margin:0 0 .5rem; }
.ftr__brand span{ color:var(--signal); }
.ftr__blurb,.ftr__rg,.ftr__legal{ font-size:.82rem; color:var(--muted); }
.ftr__cols{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0; }
.ftr h4{ font:500 .72rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--paper); margin:0 0 .6rem; }
.ftr ul{ list-style:none; margin:0; padding:0; font-size:.88rem; }
.ftr li{ margin-bottom:.4rem; }
.ftr a{ color:var(--muted); }
.ftr a:hover{ color:var(--paper); }
.ftr__rg{ border-top:1px solid var(--line); padding-top:1rem; }

/* ==========================================================================
   Desktop and up. Nothing is a stretched phone layout: the clip grid gains
   columns, the nav unfolds, and long-form pages get a real measure.
   ========================================================================== */

@media (min-width:48rem){
  .burger{ display:none; }
  .hdr__in{ min-height:4.25rem; gap:1.5rem; }
  .brand{ font-size:1.75rem; }

  .nav{ position:static; max-height:none; overflow:visible; background:none; border:0; margin-left:auto; }
  .nav ul{ display:flex; gap:1.5rem; padding:0; }
  .nav li + li{ border:0; }
  .nav a{ padding:0; font-size:1.15rem; }
  .nav a:hover{ color:var(--signal); }

  .hdr__cta{ display:inline-block; }

  .clips{ grid-template-columns:repeat(2,1fr); gap:1.5rem; }
  .cards{ grid-template-columns:repeat(2,1fr); }

  .hero{ padding:3.5rem 0 2rem; }
  .lede{ font-size:1.2rem; max-width:52ch; }
  main p, main li{ max-width:70ch; }

  .bout{ gap:1rem; }
  .bout__names{ flex:1 1 auto; }

  .ftr__cols{ grid-template-columns:repeat(4,1fr); }
}

@media (min-width:64rem){
  .cards{ grid-template-columns:repeat(3,1fr); }
  /* Landscape clips stay at two across here — three would shrink a 16:9
     frame below the point where you can tell what you are looking at. */
  .clips--portrait{ grid-template-columns:repeat(3,1fr); }
}

@media (min-width:80rem){
  .clips{ grid-template-columns:repeat(3,1fr); }
  .clips--portrait{ grid-template-columns:repeat(4,1fr); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}