/* Arcane Tourneys — operations interface
   A clean military command UI: flat graphite, compact data type, sharp
   geometry and one controlled orange signal colour. */

:root {
  --ink-900: #07090a;
  --ink-850: #0b0e10;
  --ink-800: #101417;
  --surface: rgba(14, 18, 20, .94);
  --surface-2: rgba(19, 24, 27, .96);
  --raised: #171c1f;
  --molten: #d85b24;
  --ember: #f17832;
  --ember-lt: #ff9a5b;
  --tan: #8e9799;
  --tan-lt: #c4ccce;
  --rust: #9f3f1d;
  --teal: #75a7ad;
  --teal-dim: #263c40;
  --line: rgba(207, 221, 224, .15);
  --line-heavy: rgba(220, 232, 234, .3);
  --line-soft: rgba(207, 221, 224, .075);
  --text: #f1f4f3;
  --muted: #a3abad;
  --faint: #737d80;
  --font-stencil: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --shadow-panel: 0 16px 40px rgba(0, 0, 0, .28);
  --shadow-hover: 0 20px 48px rgba(0, 0, 0, .4);
}

body { background: #07090a; letter-spacing: .005em; }

/* Let the environment provide atmosphere; keep the interface itself clean. */
.bg-video { opacity: .42; }
.backdrop {
  background:
    linear-gradient(90deg, rgba(5, 7, 8, .96), rgba(6, 8, 9, .78) 48%, rgba(5, 7, 8, .88)),
    linear-gradient(180deg, rgba(3, 5, 6, .18), rgba(3, 5, 6, .78));
}
.vignette { opacity: .62; }
.scorch, .grime { display: none; }

/* Remove the old distressed lettering and physical plate effects. */
h1, .detail-title, .featured .featured-label, .rail-brand .name,
.brand-lockup .wordmark, .stat .v {
  -webkit-mask-image: none;
  mask-image: none;
  text-shadow: none;
}

.panel, .featured, .deploy-screen, .event-btn, .stat, #highlight-card,
.squad-card, .spec > div, .live-match-card {
  background: linear-gradient(135deg, rgba(255,255,255,.018), transparent 34%), var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-panel);
}

.panel::before, .featured::before, .deploy-screen::before, .event-btn::before,
.stat::before, #highlight-card::before, .squad-card::before { content: none; }

.panel::after, .damaged-light::after, .charred::after {
  background: linear-gradient(90deg, var(--ember) 0 36px, transparent 36px) 0 0 / 100% 2px no-repeat;
  opacity: .78;
}

/* Navigation reads as a command list instead of a physical control panel. */
.command-rail {
  background: rgba(8, 11, 12, .97);
  border-right: 1px solid var(--line);
  box-shadow: 18px 0 50px rgba(0,0,0,.2);
}
.command-rail::after { content: none; }
.rail-brand, .rail-foot {
  background: transparent;
  border-color: var(--line-soft);
  box-shadow: none;
}
.rail-brand .name {
  font-size: clamp(30px, 2.5vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.nav-btn {
  min-height: 58px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .075em;
  color: #8d9698;
  border-left: 3px solid transparent;
}
.nav-btn::after { content: none; }
.nav-btn:hover { background: rgba(255,255,255,.035); color: #fff; }
.nav-btn[aria-selected="true"] {
  color: #fff;
  border-left-color: var(--ember);
  background: linear-gradient(90deg, rgba(241,120,50,.16), transparent 72%);
}
.nav-btn svg { color: currentColor; opacity: .86; }

.status-bar {
  min-height: 88px;
  background: rgba(8, 11, 12, .87);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 36px rgba(0,0,0,.2);
  backdrop-filter: blur(16px);
}
.status-bar::after { content: none; }
.status-title h1 {
  font-size: clamp(28px, 3vw, 43px);
  font-weight: 650;
  letter-spacing: .035em;
}

/* Type follows the clear hierarchy of an operations display. */
h1, h2, h3, h4 { letter-spacing: .055em; }
.eyebrow { color: #859094; letter-spacing: .18em; }
.eyebrow::before { width: 18px; height: 1px; background: var(--ember); }
.muted-copy { color: var(--muted); }

.featured {
  min-height: clamp(340px, 36vw, 470px);
  padding: clamp(30px, 5vw, 60px);
  border-left: 1px solid var(--line);
  overflow: hidden;
}
.featured::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(216,91,36,.23), transparent 48%),
    linear-gradient(135deg, transparent 0 75%, rgba(255,255,255,.025) 75% 75.5%, transparent 75.5%);
  opacity: 1;
}
.featured > * { position: relative; z-index: 1; }
.featured .featured-label {
  max-width: 13ch;
  font-size: clamp(48px, 7.3vw, 88px);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.featured .featured-meta { color: #b8c0c1; }

.panel-head {
  padding: 15px 20px;
  background: rgba(255,255,255,.025);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.panel-head h2, .panel-head h3 { color: #dce1e1; letter-spacing: .16em; }
.panel-body { padding: 22px; }

.event-btn { min-height: 80px; padding: 19px 21px; }
.event-btn:hover {
  filter: none;
  border-color: rgba(241,120,50,.5);
  transform: translateY(-1px);
  background: linear-gradient(90deg, rgba(241,120,50,.08), transparent 45%), var(--surface-2);
}
.event-btn.is-live { border-left: 3px solid var(--teal); }
.event-btn .title { font-weight: 650; }

.btn {
  min-height: 46px;
  padding: 12px 21px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .11em;
  transform: skew(-3deg);
  box-shadow: none;
}
.btn > * { transform: skew(3deg); }
.btn-primary, .btn-primary:hover {
  background: var(--ember);
  border-color: var(--ember);
  color: #100b08;
  text-shadow: none;
  box-shadow: none;
}
.btn-primary:hover { background: #ff8b48; border-color: #ff8b48; }
.btn-ghost {
  background: rgba(255,255,255,.025);
  border-color: var(--line-heavy);
  color: var(--text);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: #e6ecec; }

.chip { padding: 4px 9px; border: 1px solid currentColor; box-shadow: none; }
.chip-violet { background: rgba(241,120,50,.14); color: #ff9a5b; }
.chip-muted { background: rgba(255,255,255,.04); color: #aeb6b7; border-color: var(--line); }
.chip-tan { background: rgba(241,120,50,.1); color: var(--ember-lt); }
.dot { border-radius: 50%; }

.account-chip {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  box-shadow: none;
}
.account-chip:hover { background: rgba(255,255,255,.06); border-color: var(--ember); }

.stat { min-height: 104px; border-top: 1px solid var(--line); }
.stat::after { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 2px; background: var(--ember); }
.stat .v { color: #eef2f1; }

.leaderboard-filters {
  background: rgba(8,11,12,.72);
  border: 1px solid var(--line);
  box-shadow: none;
}
.table-wrap { border-color: var(--line); box-shadow: var(--shadow-panel); }
table.records thead th {
  background: #0c1012;
  border-color: var(--line);
  box-shadow: none;
}
table.records tbody tr:nth-child(1) { background: linear-gradient(90deg, rgba(241,120,50,.13), transparent 60%); }
table.records tbody tr:nth-child(2) { background: linear-gradient(90deg, rgba(190,204,207,.07), transparent 55%); }
table.records tbody tr:nth-child(3) { background: linear-gradient(90deg, rgba(169,103,64,.08), transparent 50%); }

.roster-row {
  background: rgba(4,6,7,.5);
  border-color: var(--line-soft);
  box-shadow: none;
}
.deploy-screen { border-top: 2px solid var(--ember); }
.spec > div { box-shadow: none; }

.bottom-bar {
  background: rgba(7,10,11,.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 34px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
}
.bottom-bar .nav-btn { border-left: 0; border-top: 2px solid transparent; }
.bottom-bar .nav-btn[aria-selected="true"] { border-top-color: var(--ember); }

.site-footer { background: rgba(7,9,10,.86); border-top-color: var(--line); }

@media (max-width: 620px) {
  .status-bar { min-height: 72px; }
  .content, .content-inner, .work, .col, #play-list { min-width: 0; max-width: 100%; }
  .featured { min-height: 320px; width: 100%; min-width: 0; padding: 30px 22px; }
  .featured .featured-label {
    max-width: 100%;
    font-size: clamp(42px, 13vw, 56px);
    overflow-wrap: anywhere;
  }
  .featured .featured-meta { max-width: 100%; overflow-wrap: anywhere; }
  .featured-actions { width: 100%; }
  .featured-actions .btn { width: 100%; max-width: 100%; }
  .btn { transform: none; }
  .panel-body { padding: 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .event-btn, .btn { transition: none; }
}