:root {
  color-scheme: dark;
  --bg: #090909;
  --panel: rgba(20, 20, 20, .88);
  --panel-strong: rgba(25, 25, 25, .97);
  --line: rgba(223, 186, 102, .16);
  --line-bright: rgba(223, 186, 102, .34);
  --gold: #d6ae5e;
  --gold-pale: #f0d79a;
  --text: #f1ede4;
  --muted: #919191;
  --live: #69d29b;
  --red: #e4766f;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(116, 78, 32, .22), transparent 30rem),
    radial-gradient(circle at 90% 15%, rgba(72, 72, 72, .16), transparent 35rem),
    linear-gradient(160deg, #0d0d0d 0%, #070707 55%, #101010 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.ambient { position: fixed; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(110px); pointer-events: none; opacity: .14; }
.ambient-a { background: #b67a2f; top: -12rem; left: -8rem; }
.ambient-b { background: #3b3b3b; right: -13rem; top: 24rem; }
.shell { width: min(1440px, calc(100% - 48px)); margin-inline: auto; position: relative; }
.glass { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(18px); }

.hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 38px 0 28px; }
.brand { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); min-width: 0; }
.brand-logo { display: block; width: auto; height: clamp(52px, 5vw, 66px); }
.brand-title {
  position: relative;
  padding-left: clamp(18px, 2vw, 30px);
  color: #d8d7d2;
  font: 500 clamp(25px, 3vw, 42px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .055em;
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #6a6a6a,
    0 4px 7px rgba(0,0,0,.85),
    0 0 18px rgba(190,145,55,.16);
  -webkit-text-stroke: .35px rgba(34,28,19,.9);
}
.brand-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  width: 1px;
  height: 84%;
  background: linear-gradient(transparent, #a77b28 22%, #e0ba61 50%, #80601f 78%, transparent);
  box-shadow: 0 0 9px rgba(214,174,94,.22);
}
.section-label { margin: 0 0 5px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
h2 { font-size: 25px; }
.connection-card { min-width: 210px; display: flex; align-items: center; gap: 12px; padding: 13px 17px; border: 1px solid var(--line); background: rgba(11,11,11,.76); }
.connection-card div { display: grid; gap: 2px; }
.connection-card strong { font-size: 13px; }
.connection-card span:last-child { color: var(--muted); font-size: 11px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(214,174,94,.1); }
.live-dot.live { background: var(--live); box-shadow: 0 0 0 5px rgba(105,210,155,.1), 0 0 18px rgba(105,210,155,.5); animation: breathe 2s ease-in-out infinite; }
.live-dot.error { background: var(--red); box-shadow: 0 0 0 5px rgba(228,118,111,.1); }
@keyframes breathe { 50% { opacity: .5; } }

.status-panel { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 19px 22px; border-radius: 4px; }
#status-text { margin: 0; color: #c5c0b6; font-size: 13px; line-height: 1.5; }
.status-actions { display: flex; align-items: end; gap: 10px; flex: none; }
.board-picker { display: grid; gap: 5px; }
.board-picker > span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.board-picker select { min-width: 150px; }
select, button, input { font: inherit; }
select { min-height: 38px; color: var(--text); border: 1px solid var(--line-bright); background: #171717; padding: 0 12px; }
select:focus, button:focus-visible, input:focus { outline: 1px solid var(--gold); outline-offset: 2px; }

.leaderboard { border-radius: 4px; margin: 12px 0 42px; overflow: hidden; }
.table-toolbar { padding: 22px; display: flex; justify-content: space-between; align-items: end; gap: 22px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(214,174,94,.04), transparent 35%); }
.search-box { width: min(390px, 45vw); height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); background: rgba(7,7,7,.68); }
.search-box svg { width: 18px; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; }
.search-box input::placeholder { color: #686868; }
.table-scroll { overflow: auto; max-height: calc(100vh - 350px); min-height: 320px; scrollbar-color: #5d5138 #141414; }
table { width: 100%; min-width: 1100px; border-collapse: collapse; }
thead { position: sticky; top: 0; z-index: 3; background: #171717; box-shadow: 0 1px var(--line); }
th { padding: 13px 16px; color: #8e8e8e; font-size: 10px; letter-spacing: .12em; text-align: left; text-transform: uppercase; }
td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.045); vertical-align: middle; }
tbody tr { transition: background .15s, box-shadow .15s; cursor: pointer; }
tbody tr:hover, tbody tr.selected { background: rgba(214,174,94,.055); box-shadow: inset 3px 0 var(--gold); }
.rank-column { width: 82px; text-align: center; }
.number-column { text-align: right; }
.rank { text-align: center; font: 500 19px Georgia, serif; color: #c8c1b2; }
.rank.podium { color: var(--gold-pale); font-size: 23px; }
.player { display: grid; gap: 4px; }
.player strong { font: 500 17px Georgia, serif; }
.player code { color: #727272; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.career-chip { display: inline-flex; padding: 5px 8px; border: 1px solid rgba(185,185,185,.16); color: #b5b5b2; background: rgba(185,185,185,.045); font-size: 11px; }
.score { text-align: right; font: 500 18px Georgia, serif; color: var(--gold-pale); font-variant-numeric: tabular-nums; }
.loadout { display: flex; flex-wrap: wrap; gap: 5px; min-width: 190px; }
.item-slot { width: 38px; height: 38px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(214,174,94,.22); background: radial-gradient(circle at 45% 35%, #343434, #141414 72%); }
.item-slot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0,0,0,.7)); }
.item-slot.missing { border-color: rgba(255,255,255,.09); }
.item-fallback { color: #777; font: 9px ui-monospace, monospace; text-align: center; }
.record { display: grid; gap: 5px; min-width: 160px; }
.record strong { font-size: 12px; font-weight: 600; }
.record span { color: var(--muted); font-size: 11px; }
.profile-pending { color: #676767; font-size: 11px; }
.empty-row td { padding: 80px 20px; text-align: center; color: var(--muted); cursor: default; }
.table-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px; color: #797979; font-size: 10px; border-top: 1px solid var(--line); }

.player-drawer { position: fixed; top: 0; right: 0; z-index: 20; width: min(460px, 92vw); height: 100vh; padding: 58px 30px 30px; overflow: auto; background: rgba(16,16,16,.98); border-left: 1px solid var(--line-bright); box-shadow: -30px 0 70px rgba(0,0,0,.45); transform: translateX(105%); transition: transform .22s ease; }
.player-drawer.open { transform: translateX(0); }
.drawer-scrim { position: fixed; inset: 0; z-index: 19; pointer-events: none; opacity: 0; background: rgba(0,0,0,.5); transition: opacity .2s; }
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer-close { position: absolute; right: 18px; top: 16px; width: 34px; height: 34px; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; font-size: 23px; }
.drawer-title { margin-bottom: 24px; }
.drawer-title h2 { font-size: 32px; }
.drawer-role { color: #777; font: 11px ui-monospace, monospace; word-break: break-all; }
.drawer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.drawer-stat { padding: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.drawer-stat span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.drawer-stat strong { font: 500 19px Georgia, serif; color: var(--gold-pale); }
.drawer-section { margin-top: 24px; }
.drawer-section h3 { margin: 0 0 12px; color: #b8b3aa; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.drawer-loadout { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.drawer-loadout .item-slot { width: 100%; aspect-ratio: 1; height: auto; }

@media (max-width: 800px) {
  .shell { width: min(100% - 24px, 1440px); }
  .hero { align-items: flex-start; padding-top: 24px; }
  .connection-card { min-width: 0; }
  .connection-card span:last-child { display: none; }
  .status-panel, .table-toolbar { align-items: stretch; flex-direction: column; }
  .status-actions, .search-box { width: 100%; }
  .board-picker { flex: 1; }
  .board-picker select { width: 100%; }
  .table-scroll { max-height: none; }
  .brand { gap: 14px; }
  .brand-logo { width: auto; height: 54px; }
  .brand-title { padding-left: 15px; font-size: 26px; }
}

@media (max-width: 520px) {
  .brand { width: 100%; }
  .brand-logo { width: auto; height: 46px; }
  .brand-title { padding-left: 12px; font-size: clamp(20px, 7vw, 27px); }
  .hero { flex-wrap: wrap; }
  .connection-card { width: 100%; }
  .table-footer { flex-direction: column; }
}