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

:root {
  --void:     #1E122A;
  --card:     #262940;
  --bone:     #F4F1EA;
  --green:    #39FF14;
  --pink:     #FF0055;
  --bone-dim: rgba(244, 241, 234, 0.55);
}

body {
  background-color: var(--void);
  color: var(--bone);
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  min-height: 100vh;
}

/* hex grid background texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpolygon points='26,15 52,30 52,60 26,75 0,60 0,30' fill='none' stroke='%23ffffff07' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90'%3E%3Cpolygon points='26,15 52,30 52,60 26,75 0,60 0,30' fill='none' stroke='%23ffffff07' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 52px 90px, 52px 90px;
  background-position: 0 0, 26px 45px;
  pointer-events: none;
  z-index: 0;
}

/* ── layout ── */
#app { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 16px 48px; }

/* ── header ── */
header { display: flex; flex-direction: row; align-items: center; padding: 32px 0 24px; gap: 32px; }
.logo  { height: 120px; width: auto; flex-shrink: 0; }

/* ── search ── */
.search-wrap { flex: 1; position: relative; }
.search-wrap label {
  display: block; font-size: 11px; color: var(--bone-dim);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px;
}
.search-wrap input {
  width: 100%; background: var(--card); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; color: var(--bone); font-family: inherit; font-size: 14px;
  padding: 10px 14px; outline: none; transition: border-color .2s;
}
.search-wrap input:focus    { border-color: var(--green); }
.search-wrap input::placeholder { color: var(--bone-dim); }

#search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--card); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; max-height: 240px; overflow-y: auto; z-index: 99;
}
.search-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.07); }
.search-item:last-child { border-bottom: none; }
.search-item:hover  { background: rgba(57,255,20,.08); }
.search-item .sname { font-weight: 700; }
.search-item .smeta { color: var(--bone-dim); font-size: 12px; }

/* ── nav tabs ── */
nav { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tab {
  background: var(--card); border: 1px solid rgba(255,255,255,.12);
  color: var(--bone-dim); font-family: inherit; font-size: 13px;
  padding: 7px 18px; border-radius: 4px; cursor: pointer; transition: all .2s;
}
.tab:hover  { color: var(--bone); border-color: rgba(255,255,255,.3); }
.tab.active { color: var(--green); border-color: var(--green); background: rgba(57,255,20,.06); }

/* ── headings ── */
h2      { font-family: 'Creepster', cursive; font-size: 28px; letter-spacing: .05em; margin-bottom: 16px; }
h2 .dim { color: var(--bone-dim); font-size: 16px; font-family: 'Space Mono', monospace; margin-left: 8px; }

/* ── stat cards ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.card  { background: var(--card); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 16px 14px; }
.card.glow-green { box-shadow: 0 0 12px rgba(57,255,20,.25);  border-color: rgba(57,255,20,.4); }
.card.glow-pink  { box-shadow: 0 0 12px rgba(255,0,85,.2);    border-color: rgba(255,0,85,.35); }
.card-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 8px; }
.card-value { font-size: 26px; font-weight: 700; line-height: 1; }
.card-value.green { color: var(--green); }
.card-value.pink  { color: var(--pink); }
.card-sub   { font-size: 11px; color: var(--bone-dim); margin-top: 4px; }

/* ── player hero ── */
.player-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.hex-avatar {
  width: 64px; height: 64px; flex-shrink: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, var(--green) 0%, #1a7a0a 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--void);
}
.player-hero h2   { margin-bottom: 4px; }
.player-hero .meta { color: var(--bone-dim); font-size: 12px; }

/* ── tables ── */
.table-wrap { overflow-x: auto; }
table  { width: 100%; border-collapse: collapse; }
thead th {
  background: rgba(255,255,255,.04); text-align: left; padding: 10px 12px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone-dim); white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.1);
}
tbody tr           { border-bottom: 1px solid rgba(255,255,255,.05); transition: background .15s; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: rgba(57,255,20,.06); }
td { padding: 10px 12px; white-space: nowrap; }

.rank-num { color: var(--bone-dim); font-size: 13px; }
.rank-1   { color: #ffd700; }
.rank-2   { color: #c0c0c0; }
.rank-3   { color: #cd7f32; }
.win      { color: var(--green); font-weight: 700; }
.loss     { color: var(--pink); }

/* ── badges ── */
.badge       { display: inline-block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; font-weight: 700; }
.badge-async { background: rgba(57,255,20,.15); color: var(--green); }
.badge-arena { background: rgba(255,0,85,.15);  color: var(--pink); }

/* ── chart ── */
.chart-wrap { background: var(--card); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 16px 12px 8px; margin-bottom: 24px; }
.chart-legend { display: flex; gap: 16px; margin-top: 8px; padding: 0 4px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--bone-dim); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── misc ── */
.back-btn {
  background: none; border: 1px solid rgba(255,255,255,.2); color: var(--bone-dim);
  font-family: inherit; font-size: 12px; padding: 6px 14px; border-radius: 4px;
  cursor: pointer; margin-bottom: 20px; transition: all .2s;
}
.back-btn:hover { color: var(--bone); border-color: rgba(255,255,255,.5); }

.loading   { text-align: center; padding: 60px 20px; color: var(--bone-dim); font-size: 13px; }
.error-msg { background: rgba(255,0,85,.1); border: 1px solid rgba(255,0,85,.3); border-radius: 6px; padding: 14px 16px; color: var(--pink); margin-bottom: 20px; }

footer { text-align: center; padding: 32px 0 0; color: var(--bone-dim); font-size: 11px; }