/* ============================================================================
   HypersZone Market — dark game-store UI.

   Palette is the HyperZ brand set (Deep Night ground, Hyper Green for money and
   success, Electric Blue for interaction, Deep Steel for layered surfaces).

   Two ideas carry the whole look:
     1. Rarity is a colour that appears in FOUR places on a card — the top bar,
        the border on hover, the aura behind the art, and the category label —
        so a player reads value before they read a word.
     2. Depth comes from layered surfaces plus one soft light source at the top,
        never from heavy borders. Borders stay near-invisible until hover.
   ============================================================================ */

:root {
  --night:      #05090f;
  --night-2:    #070d16;
  --surface:    #0c141f;
  --surface-2:  #101b28;
  --surface-3:  #162434;
  --surface-4:  #1d3044;
  --line:       #1a2939;
  --line-soft:  #132030;
  --line-lit:   #2a4157;

  --text:       #e8eff6;
  --muted:      #8fa1b6;
  --dim:        #5f7286;

  --green:      #70b446;
  --green-lit:  #92d963;
  --green-dim:  rgba(112, 180, 70, .13);
  --blue:       #2982c3;
  --blue-lit:   #52a8e8;
  --blue-dim:   rgba(41, 130, 195, .13);
  --steel:      #1f396c;
  --gold:       #e0a33a;
  --danger:     #e04a63;
  --danger-dim: rgba(224, 74, 99, .12);

  --r-common:    #97a5b5;
  --r-uncommon:  #56ad63;
  --r-rare:      #3f8ade;
  --r-epic:      #a862e0;
  --r-legendary: #f0a03a;

  --radius:   10px;
  --radius-s: 7px;
  --shadow:   0 10px 34px rgba(0, 0, 0, .55);
  --shadow-s: 0 4px 14px rgba(0, 0, 0, .38);
  --ease:     cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--surface-4) var(--night); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 14px/1.55 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 620px at 50% -180px, rgba(41, 130, 195, .12), transparent 70%),
    radial-gradient(900px 480px at 88% -120px, rgba(112, 180, 70, .07), transparent 70%),
    var(--night);
  background-attachment: fixed;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 6px; border: 2px solid var(--night); }
::-webkit-scrollbar-thumb:hover { background: var(--line-lit); }

a { color: var(--blue-lit); text-decoration: none; transition: color .14s var(--ease); }
a:hover { color: var(--green-lit); }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
h1, h2, h3, h4 { letter-spacing: -.015em; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 8px 15px; font-weight: 500; white-space: nowrap;
  transition: background .14s var(--ease), border-color .14s var(--ease), transform .1s var(--ease);
}
.btn:hover { background: var(--surface-4); border-color: var(--line-lit); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--green-lit), var(--green));
  color: #08150a; border-color: transparent; font-weight: 700;
  box-shadow: 0 2px 12px rgba(112, 180, 70, .28);
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.blue {
  background: linear-gradient(180deg, var(--blue-lit), var(--blue));
  color: #04121d; border-color: transparent; font-weight: 700;
  box-shadow: 0 2px 12px rgba(41, 130, 195, .3);
}
.btn.blue:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { background: var(--danger); color: #fff; border-color: transparent; font-weight: 600; }
.btn.sm { padding: 5px 11px; font-size: 12.5px; }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* ---------------------------------------------------------------- top bar */

.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 20px;
  height: 62px; padding: 0 22px;
  background: rgba(7, 13, 22, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, var(--green-lit) 5%, var(--blue) 95%);
  display: grid; place-items: center; color: #05121b; font-weight: 900; font-size: 15px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 4px 14px rgba(41, 130, 195, .35);
}
.brand .z { color: var(--green-lit); }

.navlinks { display: flex; gap: 4px; }
.navlinks a {
  color: var(--muted); font-size: 13.5px; font-weight: 500;
  padding: 7px 13px; border-radius: var(--radius-s);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.navlinks a:hover { background: var(--surface-2); color: var(--text); }
.navlinks a.on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-lit); }
.spacer { flex: 1; }

.wallet-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border: 1px solid var(--line-lit); border-radius: 22px;
  padding: 6px 7px 6px 14px; font-weight: 600;
}
.wallet-chip .amt { color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wallet-chip .add {
  width: 24px; height: 24px; border-radius: 50%; border: 0;
  background: var(--green); color: #08150a; font-weight: 900; font-size: 16px;
  display: grid; place-items: center; line-height: 1; padding: 0;
  transition: transform .14s var(--ease), background .14s var(--ease);
}
.wallet-chip .add:hover { background: var(--green-lit); transform: scale(1.1); }

.gem { display: inline-block; width: 13px; height: 13px; flex: none; vertical-align: -1px; }
.gem path { fill: var(--blue-lit); }

.user { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover;
  border: 1px solid var(--line-lit); background: var(--surface-3);
}
.user .who { font-size: 13px; line-height: 1.25; max-width: 150px; }
.user .who b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user .who b span { white-space: nowrap; }
.user .who small { color: var(--dim); font-size: 11px; }

/* ---------------------------------------------------------------- hero / player card */

.hero { padding: 26px 22px 4px; }
.hero-inner { max-width: 1440px; margin: 0 auto; }

.playercard {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 20px 24px; border-radius: 14px;
  background:
    radial-gradient(560px 200px at 8% 0%, rgba(41, 130, 195, .17), transparent 72%),
    radial-gradient(460px 200px at 92% 110%, rgba(112, 180, 70, .11), transparent 72%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-s);
}
.playercard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%);
}
.pc-face { position: relative; flex: none; }
.pc-face img {
  width: 74px; height: 74px; border-radius: 16px; object-fit: cover;
  border: 1px solid var(--line-lit); background: var(--surface-3);
}
.pc-face .lvl {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold), #b97d1c); color: #180d00;
  font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45); white-space: nowrap;
}
.pc-main { flex: 1; min-width: 190px; }
.pc-name { font-size: 21px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* A Free Fire nickname renders as one <span> per colour run; without this they would each
   become a flex item of .pc-name and the gap would push the letters apart. */
.pc-name .nm { display: inline; word-break: break-word; }
.pc-sub { color: var(--dim); font-size: 12.5px; margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; }
.pc-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.pc-stat .k { color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; }
.pc-stat .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 1px; }
.pc-stat .v.money { color: var(--green-lit); }

.badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; border: 1px solid;
}
.badge.vip   { color: var(--gold); border-color: rgba(224, 163, 58, .5); background: rgba(224, 163, 58, .12); }
.badge.ep    { color: var(--r-epic); border-color: rgba(168, 98, 224, .5); background: rgba(168, 98, 224, .12); }
.badge.admin { color: var(--blue-lit); border-color: rgba(82, 168, 232, .5); background: var(--blue-dim); }
.badge.clan  { color: var(--muted); border-color: var(--line-lit); background: var(--surface-3); }

.guest-hero {
  text-align: center; padding: 46px 22px 40px; border-radius: 14px;
  background:
    radial-gradient(700px 260px at 50% -40px, rgba(41, 130, 195, .18), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
}
.guest-hero h1 { margin: 0 0 8px; font-size: 30px; }
.guest-hero p { margin: 0 auto 20px; color: var(--muted); max-width: 520px; }

/* ---------------------------------------------------------------- search */

.searchbar { max-width: 1440px; margin: 18px auto 0; padding: 0 22px; display: flex; gap: 10px; }
.searchbar .field { position: relative; flex: 1; }
.searchbar .field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .5; }
.searchbar input {
  width: 100%; background: var(--surface); border: 1px solid var(--line);
  color: var(--text); padding: 12px 14px 12px 40px; border-radius: var(--radius);
  outline: none; transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.searchbar input::placeholder { color: var(--dim); }
.searchbar input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }

/* ---------------------------------------------------------------- layout */

.wrap { max-width: 1440px; margin: 0 auto; padding: 20px 22px 70px; display: flex; gap: 22px; align-items: flex-start; }
.wrap.solo { display: block; }
.sidebar { width: 252px; flex: 0 0 252px; position: sticky; top: 78px; }
.content { flex: 1; min-width: 0; }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.panel + .panel { margin-top: 14px; }
.panel > h3 {
  margin: 0; padding: 12px 15px; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.panel .body { padding: 13px 15px; }
.panel .body.flush { padding: 0; }

.filter-list { max-height: 358px; overflow-y: auto; padding: 5px 0; }
.filter-list button {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 0; color: var(--muted);
  padding: 8px 15px; text-align: left; font-size: 13.5px;
  border-left: 2px solid transparent;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.filter-list button:hover { background: var(--surface-2); color: var(--text); }
.filter-list button.on { background: var(--surface-3); color: var(--text); border-left-color: var(--green); font-weight: 600; }
.filter-list .n { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }

.rarity-row { display: flex; flex-wrap: wrap; gap: 7px; }
.rarity-row button {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 16px; padding: 5px 12px; font-size: 12.5px;
  transition: all .14s var(--ease);
}
.rarity-row button:hover { border-color: var(--line-lit); color: var(--text); }
.rarity-row button.on { color: #06101a; font-weight: 700; border-color: transparent; }
.rarity-row button[data-r="Common"].on    { background: var(--r-common); }
.rarity-row button[data-r="Uncommon"].on  { background: var(--r-uncommon); }
.rarity-row button[data-r="Rare"].on      { background: var(--r-rare); }
.rarity-row button[data-r="Epic"].on      { background: var(--r-epic); }
.rarity-row button[data-r="Legendary"].on { background: var(--r-legendary); }

.price-row { display: flex; gap: 9px; align-items: center; }
.price-row input {
  width: 100%; background: var(--night-2); border: 1px solid var(--line);
  color: var(--text); padding: 8px 10px; border-radius: 6px; outline: none;
}
.price-row input:focus { border-color: var(--blue); }

/* ---------------------------------------------------------------- results bar */

.resbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.resbar .count { color: var(--muted); font-size: 13.5px; }
.resbar .count b { color: var(--text); font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-3); border: 1px solid var(--line-lit);
  border-radius: 16px; padding: 4px 6px 4px 12px; font-size: 12.5px;
}
.chip button { background: transparent; border: 0; color: var(--dim); font-size: 15px; line-height: 1; padding: 0 4px; }
.chip button:hover { color: var(--danger); }
select.sort {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  padding: 8px 11px; border-radius: var(--radius-s); outline: none; cursor: pointer;
}
select.sort:hover { border-color: var(--line-lit); }

/* ---------------------------------------------------------------- item cards */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 15px; }

.card {
  --rc: var(--r-common);
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.card[data-r="Uncommon"]  { --rc: var(--r-uncommon); }
.card[data-r="Rare"]      { --rc: var(--r-rare); }
.card[data-r="Epic"]      { --rc: var(--r-epic); }
.card[data-r="Legendary"] { --rc: var(--r-legendary); }

.card::before { content: ""; display: block; height: 3px; background: var(--rc); opacity: .85; }
.card:hover { transform: translateY(-4px); border-color: var(--rc); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.card:hover::before { opacity: 1; }

.card .top { padding: 11px 13px 5px; }
.card .cat { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--rc); }
.card .name {
  font-size: 13.5px; font-weight: 600; margin-top: 2px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card .art {
  position: relative; height: 146px; display: grid; place-items: center; padding: 10px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 20%, transparent), transparent 68%);
}
.card .art img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
  transition: transform .25s var(--ease);
}
.card:hover .art img { transform: scale(1.07); }
.card .foot { margin-top: auto; padding: 0 13px 13px; }
.card .sub { font-size: 11px; color: var(--dim); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.card .buy {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface-3); border: 1px solid var(--line);
  color: var(--text); border-radius: 7px; padding: 9px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: all .14s var(--ease);
}
.card:hover .buy { background: var(--steel); border-color: var(--blue); }
.card .buy .usd { color: var(--dim); font-weight: 400; font-size: 11px; }
.card.owned { cursor: default; }
.card.owned .buy { background: transparent; border-style: dashed; border-color: rgba(112, 180, 70, .45); color: var(--green-lit); }
.card.owned:hover { transform: none; border-color: rgba(112, 180, 70, .45); box-shadow: none; }
.card.owned:hover .art img { transform: none; }

.tag {
  position: absolute; top: 12px; right: 11px; z-index: 2;
  font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 11px; border: 1px solid;
}
.tag.owned { color: var(--green-lit); border-color: rgba(112, 180, 70, .5); background: rgba(9, 24, 8, .82); }
.tag.hot { color: var(--gold); border-color: rgba(224, 163, 58, .5); background: rgba(30, 20, 3, .82); }

.skeleton {
  height: 272px; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-soft); position: relative;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
  animation: sweep 1.35s infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.empty { text-align: center; padding: 66px 20px; color: var(--muted); }
.empty .ico { font-size: 40px; opacity: .35; margin-bottom: 10px; }
.empty h3 { color: var(--text); margin: 0 0 6px; font-size: 17px; }
.empty p { margin: 0 auto; max-width: 420px; font-size: 13.5px; }

.pager { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 30px; }
.pager button { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-s); padding: 8px 15px; }
.pager button:hover:not(:disabled) { border-color: var(--blue); background: var(--surface-3); }
.pager .at { color: var(--muted); font-size: 13px; padding: 0 8px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- modal */

.overlay {
  position: fixed; inset: 0; z-index: 120; display: none;
  background: rgba(2, 5, 9, .8); backdrop-filter: blur(5px);
  align-items: center; justify-content: center; padding: 20px;
  animation: fade .16s var(--ease);
}
.overlay.open { display: flex; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%; max-width: 460px; max-height: 92vh; overflow: auto;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-lit); border-radius: 14px; box-shadow: var(--shadow);
  animation: rise .2s var(--ease);
}
.modal.wide { max-width: 760px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.modal header {
  padding: 15px 19px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: sticky; top: 0; background: var(--surface-2); z-index: 1;
}
.modal header h3 { margin: 0; font-size: 15.5px; }
.modal header .x { background: transparent; border: 0; color: var(--dim); font-size: 22px; line-height: 1; padding: 0 4px; }
.modal header .x:hover { color: var(--text); }
.modal .body { padding: 19px; }
.modal .foot { padding: 15px 19px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }

.detail { display: flex; gap: 20px; flex-wrap: wrap; }
.detail .art {
  --rc: var(--r-common);
  flex: none; width: 190px; height: 190px; border-radius: 12px;
  display: grid; place-items: center; padding: 14px;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 26%, transparent), transparent 70%),
    var(--night-2);
  border: 1px solid var(--line);
}
.detail .art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)); }
.detail .meta { flex: 1; min-width: 200px; }
.detail .meta h4 { margin: 0 0 5px; font-size: 20px; }
.detail .rar { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.detail .price { margin-top: 16px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; display: flex; align-items: center; gap: 9px; }
.detail .price .gem { width: 20px; height: 20px; }
.detail .after { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.detail dl { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 12.5px; }
.detail dt { color: var(--dim); }
.detail dd { margin: 0; font-variant-numeric: tabular-nums; }

.msg { padding: 11px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 13px; line-height: 1.5; }
.msg.err  { background: var(--danger-dim); border: 1px solid rgba(224, 74, 99, .35); color: #ffb3bf; }
.msg.ok   { background: var(--green-dim);  border: 1px solid rgba(112, 180, 70, .35); color: var(--green-lit); }
.msg.info { background: var(--blue-dim);   border: 1px solid rgba(41, 130, 195, .35); color: var(--blue-lit); }

.toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 200;
  transform: translateX(-50%) translateY(22px);
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-3); border: 1px solid var(--line-lit);
  border-left: 3px solid var(--green);
  padding: 13px 19px; border-radius: 10px; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: .24s var(--ease); max-width: 92vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { border-left-color: var(--danger); }

/* ---------------------------------------------------------------- misc */

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

.stat {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px;
}
.stat .k { color: var(--dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }
.stat .v { font-size: 23px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
button.stat { text-align: left; width: 100%; transition: border-color .14s var(--ease), transform .1s var(--ease); }
button.stat:hover { border-color: var(--line-lit); }
button.stat.on { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 6px 20px rgba(112, 180, 70, .16); }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: left; color: var(--muted); font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 10px 13px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); position: sticky; top: 0; z-index: 1;
}
table.tbl td { padding: 10px 13px; border-bottom: 1px solid var(--line-soft); }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tr:hover td { background: rgba(255, 255, 255, .018); }
.tbl .num { font-variant-numeric: tabular-nums; text-align: right; }

.pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 11px; border: 1px solid; text-transform: uppercase; letter-spacing: .05em; }
.pill.pending  { color: var(--gold); border-color: rgba(224, 163, 58, .45); background: rgba(224, 163, 58, .1); }
.pill.approved, .pill.delivered { color: var(--green-lit); border-color: rgba(112, 180, 70, .45); background: var(--green-dim); }
.pill.rejected, .pill.failed, .pill.refunded { color: #ffb3bf; border-color: rgba(224, 74, 99, .45); background: var(--danger-dim); }
.pos { color: var(--green-lit); }
.neg { color: #ffb3bf; }

label.fld { display: block; margin-bottom: 13px; }
label.fld span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
label.fld input, label.fld select, label.fld textarea {
  width: 100%; background: var(--night-2); border: 1px solid var(--line);
  color: var(--text); padding: 10px 12px; border-radius: 7px; outline: none;
  transition: border-color .14s var(--ease);
}
label.fld input:focus, label.fld textarea:focus, label.fld select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }

/* Standalone input, for the fields that sit outside a <label class="fld">. */
.inp {
  background: var(--night-2); border: 1px solid var(--line); color: var(--text);
  padding: 10px 12px; border-radius: 7px; outline: none;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.inp:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }
.inp::placeholder { color: var(--dim); }
.inp.sm { padding: 6px 9px; border-radius: 5px; font-size: 12.5px; }

code.copy {
  background: var(--surface-3); border: 1px solid var(--line);
  padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
code.copy:hover { color: var(--green-lit); border-color: var(--green); }

.matchrow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.matchrow:last-child { border-bottom: 0; }
.matchrow .res { width: 46px; flex: none; font-weight: 800; font-size: 11px; letter-spacing: .06em; }
.matchrow .res.w { color: var(--green-lit); }
.matchrow .res.l { color: var(--dim); }
.matchrow .kd { font-variant-numeric: tabular-nums; color: var(--muted); }
.matchrow .when { margin-left: auto; color: var(--dim); font-size: 11.5px; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .wrap { flex-direction: column; }
  .sidebar { width: 100%; flex: none; position: static; }
  .filter-list { max-height: 210px; }
}

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 9px 13px; row-gap: 6px; gap: 10px; }
  /* The nav is the tab switcher on the admin page — hiding it on a phone leaves no way to
     reach anything but the first pane, so it gets its own scrollable row instead. */
  .navlinks { order: 10; width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .navlinks::-webkit-scrollbar { display: none; }
  .navlinks a { white-space: nowrap; }
  .user .who { display: none; }
  .hero { padding: 16px 13px 0; }
  .searchbar { padding: 0 13px; }
  .wrap { padding: 16px 13px 60px; }
  .guest-hero h1 { font-size: 23px; }
  .playercard { padding: 16px; gap: 16px; }
  .pc-face img { width: 60px; height: 60px; }
  .pc-name { font-size: 18px; }
  .pc-stats { gap: 18px; width: 100%; }
  .pc-stat .v { font-size: 16px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
  .card .art { height: 116px; }
  .detail .art { width: 100%; height: 170px; }
  table.tbl { font-size: 12px; }
  table.tbl th, table.tbl td { padding: 8px 9px; }
}