/* ============================================================
   VELARIS M+ TEAMS
   Palette sampled directly from the key artwork.
   Gold (#FDE017) appears only in the rune sigil of the source
   image, so it is used here only for completed vault slots.
   ============================================================ */

:root{
  --void:      #02040F;
  --abyss:     #05091F;
  --deep:      #060D40;
  --rift:      #071D74;
  --arcane:    #0A6DFF;
  --crystal:   #8FD8FF;
  --silver:    #C7D3E6;
  --parchment: #EEF4FF;
  --sigil:     #FDE017;

  --muted:     #6B7A99;
  --line:      rgba(143, 216, 255, .14);
  --panel:     rgba(6, 13, 64, .34);

  --display: 'Forum', Georgia, serif;
  --ui: 'Barlow', system-ui, sans-serif;
  --data: 'Azeret Mono', ui-monospace, monospace;

  --gut: 22px;
}

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

html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--void);
  color: var(--silver);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

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

[hidden]{ display: none !important; }

/* ============================================================
   GATE
   ============================================================ */

.gate{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 40;
}

.gate.is-leaving{
  animation: gate-out .9s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes gate-out{
  to{ opacity: 0; transform: scale(1.06); }
}

.gate-art{
  position: absolute;
  inset: -2%;
  background: url('gate.webp') center/cover no-repeat;
  animation: drift 26s ease-in-out infinite alternate;
}

@keyframes drift{
  from{ transform: scale(1.02) translate3d(0,0,0); }
  to  { transform: scale(1.08) translate3d(0,-1.2%,0); }
}

.gate-veil{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(2,4,15,0) 0%, rgba(2,4,15,.35) 58%, rgba(2,4,15,.85) 100%),
    linear-gradient(to bottom, rgba(2,4,15,.3) 0%, rgba(2,4,15,0) 30%, rgba(2,4,15,.55) 74%, rgba(2,4,15,.93) 100%);
}

.gate-inner{
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 26px;
  width: min(760px, 70vw);
}

/* flanking hairlines: the only ornament, and it points at the one control */
.gate-rule{
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,216,255,.42));
  position: relative;
  overflow: hidden;
}

.gate-inner .gate-rule:last-child{
  background: linear-gradient(90deg, rgba(143,216,255,.42), transparent);
}

.gate-rule::after{
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--crystal), transparent);
  animation: trace 5.5s ease-in-out infinite;
}

.gate-inner .gate-rule:last-child::after{ animation-delay: 2.75s; }

@keyframes trace{
  0%   { left: -30%; opacity: 0; }
  18%  { opacity: 1; }
  70%  { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

.enter{
  position: relative;
  flex: none;
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 20px 46px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--parchment);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.enter::before{
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(143,216,255,.34);
  background: rgba(2,4,15,.55);
  backdrop-filter: blur(4px);
  transition: border-color .35s, background .35s, box-shadow .35s;
}

.enter:hover{ transform: translateY(-2px); }

.enter:hover::before{
  border-color: var(--crystal);
  background: rgba(7,29,116,.5);
  box-shadow: 0 0 34px rgba(10,109,255,.45), inset 0 0 22px rgba(10,109,255,.18);
}

.enter-label{
  position: relative;
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: .36em;
  text-indent: .36em;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(143,216,255,.55);
}

.enter-sub{
  position: relative;
  font-family: var(--data);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   INTRO
   ============================================================ */

.intro{
  position: fixed;
  inset: 0;
  background: #000;
  display: grid;
  place-items: center;
  z-index: 50;
}

.intro.is-leaving{ animation: fade-out .7s ease forwards; }

@keyframes fade-out{ to{ opacity: 0; } }

.intro-video{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.skip{
  position: absolute;
  right: 30px;
  bottom: 28px;
  padding: 9px 20px;
  border: 1px solid rgba(199,211,230,.26);
  border-radius: 2px;
  background: rgba(2,4,15,.6);
  color: var(--silver);
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s, color .25s;
}

.skip:hover{ border-color: var(--crystal); color: var(--parchment); }

/* ============================================================
   ROSTER
   ============================================================ */

.roster{
  position: relative;
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 40px 70px;
  animation: rise .9s cubic-bezier(.4,0,.2,1) both;
}

@keyframes rise{
  from{ opacity: 0; transform: translateY(16px); }
  to  { opacity: 1; transform: none; }
}

.roster::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(7,29,116,.5), transparent 70%),
    var(--void);
}

/* --- masthead --- */

.masthead{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 40px 0 26px;
  border-bottom: 1px solid var(--line);
}

.mark{
  display: block;
  width: 300px;
  height: auto;
  filter: drop-shadow(0 6px 30px rgba(10,109,255,.34));
}

.masthead-meta{
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
}

.stamp{
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.refresh{
  padding: 8px 17px;
  border: 1px solid rgba(143,216,255,.24);
  border-radius: 2px;
  background: transparent;
  color: var(--silver);
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}

.refresh:hover{
  border-color: var(--crystal);
  background: rgba(7,29,116,.4);
  color: var(--parchment);
}

/* --- grid --- */

.grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gut);
  align-items: start;
  margin-top: var(--gut);
}

/* --- team panel --- */

.team{
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(7,29,116,.2), rgba(6,13,64,.1) 40%, transparent),
    var(--panel);
  padding: 20px 22px 8px;
}

.team::before{
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 46px; height: 46px;
  border-top: 1px solid rgba(143,216,255,.45);
  border-left: 1px solid rgba(143,216,255,.45);
  pointer-events: none;
}

.team-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.team-name{
  margin: 0;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--parchment);
}

.team-avg{
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.team-avg b{
  color: var(--crystal);
  font-weight: 700;
}

/* --- column headers --- */

.cols{
  display: grid;
  grid-template-columns: 14px minmax(0,1fr) 62px 52px 40px 44px;
  gap: 12px;
  align-items: center;
  padding: 12px 0 9px;
  font-family: var(--data);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(107,122,153,.7);
}

.cols span:nth-child(3),
.cols span:nth-child(4),
.cols span:nth-child(5){ text-align: right; }

/* --- member row --- */

.row{
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0,1fr) 62px 52px 40px 44px;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid rgba(143,216,255,.07);
  transition: background .2s;
}

.row:hover{ background: rgba(10,109,255,.07); }

.role{
  font-family: var(--data);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
}

.role[data-role="tank"]  { color: #6FA8FF; }
.role[data-role="healer"]{ color: #6FE3B0; }
.role[data-role="dps"]   { color: #FF8E6F; }

.who{ min-width: 0; }

.name{
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--parchment);
  text-decoration: none;
}

a.name:hover{ text-decoration: underline; text-underline-offset: 3px; }

.spec{
  display: block;
  margin-top: 1px;
  font-family: var(--data);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.io, .ilvl, .key{
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.io{
  font-size: 16px;
  font-weight: 700;
  color: var(--parchment);
}

.ilvl{ font-size: 13px; color: var(--silver); }
.key { font-size: 13px; color: var(--silver); }

.key[data-none="1"], .ilvl[data-none="1"]{ color: rgba(107,122,153,.5); }

/* --- vault pips --- */

.vault{
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.pip{
  width: 9px;
  height: 9px;
  border: 1px solid rgba(143,216,255,.28);
  transform: rotate(45deg);
}

.pip.on{
  border-color: var(--sigil);
  background: var(--sigil);
  box-shadow: 0 0 9px rgba(253,224,23,.55);
}

/* --- states --- */

.row.is-missing .name{ color: var(--muted); }
.row.is-missing .io  { color: var(--muted); font-size: 13px; }

.team-empty{
  padding: 22px 0 26px;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
}

/* --- colophon --- */

.colophon{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 46px;
  font-family: var(--data);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(107,122,153,.6);
}

/* ============================================================
   NARROW FALLBACK — desktop is the target, but it must not break
   ============================================================ */

@media (max-width: 1080px){
  .grid{ grid-template-columns: minmax(0,1fr); }
  .roster{ padding: 0 20px 50px; }
  .mark{ width: 240px; }
  .masthead{ flex-wrap: wrap; gap: 16px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}