/* OATH ARENA V1: shared shell and component finish. */
html{background:var(--bg);scrollbar-color:var(--gold-line) var(--bg)}
body{
  position:relative;
  background:
    linear-gradient(rgba(216,179,79,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(216,179,79,.025) 1px,transparent 1px),
    linear-gradient(180deg,var(--bg-2),var(--bg) 430px);
  background-size:88px 88px,88px 88px,auto;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.container{max-width:var(--arena-max)}

.nav{
  min-height:74px;
  border-bottom-color:var(--arena-line);
  background:rgba(5,5,6,.90);
  box-shadow:0 1px rgba(216,179,79,.04);
}
.nav::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,rgba(216,179,79,.26) 24%,rgba(217,219,221,.12) 52%,rgba(216,179,79,.22) 78%,transparent 96%);
  transform:scaleX(.82);
  opacity:.55;
}
.nav.is-scrolled{background:rgba(5,5,6,.97);box-shadow:0 16px 44px rgba(0,0,0,.34)}
.nav-brand{position:relative;isolation:isolate}
.nav-brand::before{
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  width:58px;
  height:58px;
  z-index:-1;
  border:1px solid rgba(216,179,79,.18);
  border-radius:50%;
  transform:translateY(-50%);
  box-shadow:inset 0 0 24px rgba(216,179,79,.04),0 0 22px rgba(216,179,79,.04);
}
.nav-brand img{filter:drop-shadow(0 4px 13px rgba(216,179,79,.24))}
.nav-brand-name{letter-spacing:0}
.nav-brand-sub{color:var(--arena-muted)}
.nav-links a{letter-spacing:0}
.nav-links a::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-3px;
  width:18px;
  height:1px;
  background:var(--gold);
  opacity:0;
  transform:translateX(-50%) scaleX(.2);
  transition:opacity var(--arena-fast),transform var(--arena-fast);
}
.nav-links a:hover::before{opacity:.75;transform:translateX(-50%) scaleX(1)}
.nav-links a.active::before{display:none}

.btn{
  position:relative;
  overflow:hidden;
  border-radius:var(--arena-r1);
  letter-spacing:0;
  transition:transform var(--arena-fast) var(--arena-ease),border-color var(--arena-fast),background var(--arena-fast),color var(--arena-fast),box-shadow var(--arena-fast);
}
.btn::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.22) 48%,transparent 68%);
  transform:translateX(-125%);
  transition:transform 620ms var(--arena-ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:hover::after{transform:translateX(125%)}
.btn-gold{box-shadow:0 10px 30px rgba(216,179,79,.12)}
.btn-gold:hover{box-shadow:0 14px 36px rgba(216,179,79,.19)}

.panel,.admin-panel,.p-stat-card,.p-chart,.p-best-card,.member-card,.post,.used-player-panel,.m-card,
.signup-action-panel,.signup-rules-card,.signup-roster-card,.free-team-card,.t-admin-step{
  border-radius:var(--arena-r1);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.panel,.admin-panel,.p-chart,.member-card,.post,.used-player-panel,.m-card{
  background-color:rgba(14,14,17,.92);
}

.arena-edge{
  position:relative;
  isolation:isolate;
}
.arena-edge::before{
  content:"";
  position:absolute;
  top:-1px;
  right:0;
  width:72px;
  height:1px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold));
  box-shadow:0 0 14px rgba(216,179,79,.28);
}

.arena-section-number{
  position:absolute;
  right:0;
  top:-22px;
  color:transparent;
  -webkit-text-stroke:1px rgba(216,179,79,.12);
  font-family:var(--font-display);
  font-size:76px;
  font-weight:900;
  line-height:1;
  pointer-events:none;
}

table{font-variant-numeric:tabular-nums}
:is(.tbl,.admin-table,.p-match-tbl,.m-table,.used-player-table) thead th{
  background:rgba(255,255,255,.025);
  color:var(--arena-muted);
  letter-spacing:0;
}
:is(.tbl,.admin-table,.p-match-tbl,.m-table,.used-player-table) tbody tr{
  transition:background var(--arena-fast),box-shadow var(--arena-fast);
}
:is(.tbl,.admin-table,.p-match-tbl,.m-table,.used-player-table) tbody tr:hover{
  background:rgba(216,179,79,.035);
  box-shadow:inset 2px 0 var(--gold);
}

input,select,textarea{
  border-radius:var(--arena-r1)!important;
  letter-spacing:0!important;
}
input:focus,select:focus,textarea:focus{
  box-shadow:0 0 0 3px rgba(216,179,79,.08);
}

.status-tone.is-live,.t-card-status.ongoing{color:var(--arena-cyan)}
.status-tone.is-live::before,.t-card-status.ongoing::before{box-shadow:0 0 12px rgba(113,210,220,.48)}

footer{position:relative;background:#050506}
footer::before{
  content:"BIG3  /  THE OATH";
  position:absolute;
  right:max(24px,calc((100vw - var(--arena-max))/2));
  top:20px;
  color:rgba(216,179,79,.12);
  font-family:var(--font-display);
  font-size:34px;
  font-weight:900;
  letter-spacing:0;
  pointer-events:none;
}

.arena-media-viewer{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:18px;
  background:rgba(2,2,3,.94);
  backdrop-filter:blur(18px);
}
.arena-media-viewer[hidden]{display:none}
.arena-media-viewer-head,.arena-media-viewer-foot{
  width:min(1200px,100%);
  min-width:0;
  max-width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:var(--arena-muted);
  font-size:12px;
}
.arena-media-viewer-head{padding-bottom:12px}
.arena-media-viewer-title{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena-media-viewer-stage{min-height:0;display:grid;place-items:center;overflow:hidden}
.arena-media-viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 28px 60px rgba(0,0,0,.45))}
.arena-media-viewer-foot{padding-top:12px;justify-content:center;color:var(--arena-quiet);text-align:center}
.arena-media-viewer .btn{flex:0 0 auto}

@media (max-width:980px){
  .nav::after{transform:none}
  .nav-brand::before{width:50px;height:50px;left:-8px}
  .nav-links a::before{display:none}
}
@media (max-width:640px){
  body{background-size:64px 64px,64px 64px,auto}
  body::before{opacity:.11}
  .nav-brand::before{width:44px;height:44px}
  footer::before{font-size:24px;right:14px;opacity:.55}
  .arena-media-viewer{padding:10px}
  .arena-media-viewer-head{padding-bottom:8px}
  .arena-media-viewer-foot{padding-top:8px;font-size:11px}
}

:root[data-theme="light"] body::before{mix-blend-mode:multiply;opacity:.08}
:root[data-theme="light"] .nav{background:rgba(250,248,243,.94)}
:root[data-theme="light"] .panel,
:root[data-theme="light"] .admin-panel,
:root[data-theme="light"] .p-chart,
:root[data-theme="light"] .member-card,
:root[data-theme="light"] .post,
:root[data-theme="light"] .used-player-panel,
:root[data-theme="light"] .m-card{background-color:rgba(255,255,255,.94)}