/* ==========================================================================
   ARENA — loot crate + rifle, both built in code
   Palette borrowed from the Codian Esports site so this ports cleanly.
   ========================================================================== */

:root{
  --soot:  #08090E;
  --gun:   #0F1119;
  --edge:  #252A39;
  --edge-2:#39415A;
  --ink:   #EDF0F6;
  --ink-2: #8E99AE;
  --ink-3: #525B70;
  --blood: #FF3D14;
  --ember: #FF8A3D;
  --gold:  #F5B841;
  --ok:    #25D07A;

  --shell: clamp(18px, 3.6vw, 56px);
  --ease:  cubic-bezier(.16,1,.3,1);
  --mono:  ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:  system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Arial Black","Helvetica Neue",Impact,var(--sans);
  color-scheme:dark;
}

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

html{ background:var(--soot); scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--soot);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,p,dl,dd{ margin:0; }
a{ color:inherit; text-decoration:none; }
canvas{ display:block; }

.tag{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.head{
  font-family:var(--display);
  font-size:clamp(38px,7.4vw,104px);
  letter-spacing:-.035em;
  line-height:.92;
  text-transform:uppercase;
  margin:.16em 0 .34em;
}
.head em{ font-style:normal; color:var(--blood); }
.sub{ font-size:clamp(13px,1.05vw,15px); color:var(--ink-2); max-width:40ch; }

/* ==========================================================================
   Bar
   ========================================================================== */

.bar{
  position:fixed;
  inset:0 0 auto;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px var(--shell);
  background:linear-gradient(rgba(8,9,14,.85), transparent);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.26em;
}
.brand i{
  width:11px; height:11px;
  background:var(--blood);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.bar .back{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  transition:color .3s var(--ease);
}
.bar .back:hover{ color:var(--ink); }

/* ==========================================================================
   Stage — one canvas for both objects
   ========================================================================== */

.stage{
  position:fixed;
  inset:0;
  z-index:1;
  touch-action:pan-y;
  cursor:grab;
}
.stage.is-dragging{ cursor:grabbing; }
.stage canvas{ width:100%; height:100%; }

.hint{
  position:absolute;
  left:50%;
  bottom:clamp(20px,4vh,38px);
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-3);
  pointer-events:none;
  transition:opacity .6s var(--ease);
}
.hint.is-gone{ opacity:0; }

/* ==========================================================================
   Beats
   ========================================================================== */

.story{ position:relative; z-index:2; pointer-events:none; }
.story a{ pointer-events:auto; }

.beat{
  min-height:100vh;
  display:grid;
  align-content:end;
  padding:0 var(--shell) clamp(56px,10vh,110px);
}
.beat--mid{ align-content:center; }

.copy{
  max-width:min(44ch,50vw);
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.copy.is-in{ opacity:1; transform:none; }

/* loot rarity readout, right rail */
.loot{
  position:absolute;
  right:var(--shell);
  top:50%;
  transform:translateY(-50%);
  display:grid;
  gap:clamp(10px,2vh,22px);
  text-align:right;
  font-family:var(--mono);
}
.loot > div{
  opacity:0;
  transform:translateX(22px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.loot.is-in > div{ opacity:1; transform:none; }
.loot.is-in > div:nth-child(2){ transition-delay:.08s; }
.loot.is-in > div:nth-child(3){ transition-delay:.16s; }
.loot.is-in > div:nth-child(4){ transition-delay:.24s; }
.loot b{
  display:block;
  font-size:clamp(15px,1.5vw,20px);
  font-weight:600;
  letter-spacing:-.01em;
}
.loot span{
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.loot .r1{ color:var(--ink-2); }
.loot .r2{ color:var(--ok); }
.loot .r3{ color:var(--volt,#22D3EE); }
.loot .r4{ color:var(--gold); }

/* rifle phase readout */
.phase{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:16px;
  padding:7px 14px;
  border:1px solid var(--edge);
  background:rgba(15,17,25,.7);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.phase i{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--blood);
  box-shadow:0 0 10px var(--blood);
}

.steps{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.steps li{
  list-style:none;
  padding:8px 14px;
  border:1px solid var(--edge);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.steps li.live{
  border-color:var(--blood);
  color:var(--ink);
  background:rgba(255,61,20,.09);
}

/* ==========================================================================
   Foot
   ========================================================================== */

.foot{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:space-between;
  padding:28px var(--shell);
  background:var(--soot);
  border-top:1px solid var(--edge);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
}
.foot a:hover{ color:var(--ink); }

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

@media (max-width:860px){
  .copy{ max-width:none; }
  .loot{
    position:static;
    transform:none;
    grid-template-columns:repeat(2,1fr);
    text-align:left;
    margin-top:26px;
    gap:16px;
  }
  .loot > div{ transform:translateY(16px); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .copy,.loot > div{ opacity:1; transform:none; }
}