:root {
  --ink: #eef2ec;
  --muted: #8f9a9d;
  --blue: #6ebbc9;
  --blue-bright: #a8e0e4;
  --gold: #d9b96f;
  --gold-bright: #f2d997;
  --paper: #111820;
  --paper-soft: #172029;
  --line: rgba(190, 211, 205, .12);
  --shadow: rgba(0, 0, 0, .44);
  font-family: Inter, Arial, sans-serif;
  color: var(--ink);
  background: #0b1016;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 80% 45% at 50% 6%, rgba(38, 90, 102, .18), transparent 68%),
    linear-gradient(180deg, #10171e 0%, #0e141a 28%, #0b1016 100%);
}

body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  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='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

button, input { font: inherit; }
button { cursor: pointer; }
.container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.ambient-glow { position: fixed; z-index: -1; width: 36rem; height: 36rem; border-radius: 50%; filter: blur(90px); opacity: .08; pointer-events: none; }
.ambient-glow--left { top: 35%; left: -22rem; background: #4fbdcc; }
.ambient-glow--right { top: 62%; right: -22rem; background: #a58b4f; }

.hero {
  position: relative;
  min-height: 512px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(8, 13, 19, .96) 0%, rgba(10, 17, 24, .64) 49%, rgba(8, 13, 19, .92) 100%),
    radial-gradient(ellipse 64% 97% at 74% 32%, rgba(72, 129, 141, .37), transparent 62%),
    linear-gradient(130deg, #0d1e29, #111b21 54%, #1a2424);
  border-bottom: 1px solid rgba(210, 183, 110, .28);
}

.hero::before, .hero::after { content: ""; position: absolute; inset: auto; z-index: -1; pointer-events: none; }
.hero::before { width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; top: -420px; right: -90px; border: 1px solid rgba(164, 221, 223, .13); border-radius: 47% 53% 63% 37% / 54% 39% 61% 46%; box-shadow: 0 0 0 38px rgba(144, 202, 202, .025), 0 0 0 78px rgba(144, 202, 202, .02); transform: rotate(-17deg); }
.hero::after { width: 100%; height: 100%; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 78px, rgba(184, 208, 196, .025) 79px 80px, transparent 81px 158px); }

.navigation { height: 94px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; letter-spacing: .09em; }
.brand__crest { width: 37px; height: 44px; display: grid; place-items: center; color: #161b1b; font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 18px; background: linear-gradient(135deg, #f0d791, #a6803f); clip-path: polygon(50% 0, 94% 17%, 88% 73%, 50% 100%, 12% 73%, 6% 17%); box-shadow: 0 0 18px rgba(229, 193, 111, .2); }
.brand strong, .brand small { display: block; font-family: Cinzel, Georgia, serif; line-height: 1; }
.brand strong { font-size: 14px; }
.brand small { margin-top: 4px; color: var(--gold); font-size: 8px; letter-spacing: .32em; }
.nav-links { display: flex; gap: 32px; margin-left: 76px; }
.nav-links a { position: relative; color: #aeb7b5; font-size: 13px; text-decoration: none; transition: color .2s; }
.nav-links a:hover, .nav-links .active { color: var(--ink); }
.nav-links .active::after { content: ""; position: absolute; width: 4px; height: 4px; background: var(--gold); border-radius: 50%; left: calc(50% - 2px); bottom: -10px; }
.region-select { display: flex; align-items: center; gap: 8px; padding: 9px 13px; color: #c7cfca; font-size: 12px; background: rgba(5, 9, 13, .32); border: 1px solid rgba(180, 198, 187, .19); border-radius: 4px; }
.region-select:hover { border-color: rgba(217, 185, 111, .55); }
.chevron { color: var(--gold); font-size: 16px; line-height: 0; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6dc69b; box-shadow: 0 0 8px #61c994; }

.hero__content { position: relative; z-index: 1; padding-top: 80px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--gold); font-family: Cinzel, Georgia, serif; font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.eyebrow span { width: 24px; height: 1px; background: var(--gold); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; }
h1 { max-width: 760px; margin: 17px 0 13px; color: #f0f3ed; font-size: clamp(38px, 5.5vw, 68px); font-weight: 600; letter-spacing: -.04em; line-height: 1.07; text-shadow: 0 5px 30px rgba(0,0,0,.42); }
h1 em { color: var(--gold-bright); font-style: normal; }
.hero__content > p { max-width: 470px; margin-bottom: 29px; color: #afbcba; font-size: 14px; line-height: 1.7; }
.search { width: min(528px, 100%); height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 13px 0 17px; background: rgba(7, 12, 17, .72); border: 1px solid rgba(202, 220, 208, .22); border-radius: 5px; box-shadow: 0 13px 28px rgba(0,0,0,.2); transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: rgba(228, 196, 120, .7); box-shadow: 0 0 0 3px rgba(211, 174, 90, .11); }
.search__icon { color: var(--gold); font-size: 26px; line-height: 1; transform: rotate(-19deg); }
.search input { width: 100%; color: var(--ink); font-size: 13px; outline: none; background: transparent; border: 0; }
.search input::placeholder { color: #8b9697; }
kbd { padding: 4px 7px; color: #899593; font-family: Inter, sans-serif; font-size: 10px; white-space: nowrap; background: rgba(162, 189, 183, .09); border: 1px solid rgba(162, 189, 183, .15); border-radius: 3px; }
.hero__edge { position: absolute; right: 0; bottom: -1px; left: 0; height: 32px; background: linear-gradient(135deg, transparent 0 14px, #0e141a 14px) 0 0 / 30px 32px repeat-x; opacity: .96; }

.overview { padding-top: 58px; }
.section-heading, .roster__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section-kicker { margin-bottom: 9px; color: var(--gold); font-family: Cinzel, Georgia, serif; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
h2 { margin: 0; color: #e7ece6; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.updated { margin: 0 0 3px; color: #8b9996; font-size: 11px; }
.updated .status-dot { margin-right: 7px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 23px; }
.stat-card { min-height: 114px; display: flex; align-items: center; gap: 16px; padding: 20px 18px; background: linear-gradient(132deg, rgba(29, 39, 47, .82), rgba(16, 23, 30, .88)); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 14px 32px rgba(0,0,0,.08); }
.stat-card__icon { flex: 0 0 38px; height: 38px; display: grid; place-items: center; font-size: 22px; border: 1px solid currentColor; border-radius: 3px; }
.icon--gold { color: var(--gold); background: rgba(210,172,86,.08); }.icon--violet { color: #ba9adc; background: rgba(164,112,214,.08); }.icon--blue { color: #77c1db; background: rgba(80,160,205,.08); }.icon--green { color: #80c99a; background: rgba(76,172,111,.08); }
.stat-card small, .stat-card span { display: block; }.stat-card small { color: #899592; font-size: 10px; }.stat-card strong { display: block; margin: 4px 0; color: #edf0eb; font-family: Cinzel, Georgia, serif; font-size: 22px; font-weight: 600; }.stat-card span:last-child { color: #788583; font-size: 10px; }

.roster { padding: 83px 0 86px; }
.mode-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.filter { padding: 8px 12px; color: #879391; font-size: 11px; background: transparent; border: 1px solid transparent; border-radius: 3px; transition: .2s; }
.filter:hover { color: #d6dfd8; border-color: var(--line); }.filter.active { color: var(--gold-bright); background: rgba(205,168,87,.08); border-color: rgba(205,168,87,.25); }
.table-shell { margin-top: 23px; overflow: hidden; background: rgba(14, 21, 28, .82); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 24px 48px rgba(0,0,0,.13); }
.table-toolbar { height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 0 21px; border-bottom: 1px solid var(--line); }
.table-toolbar p { margin: 0; color: #8d9a97; font-size: 11px; }.table-toolbar strong { color: #dce3dd; font-weight: 600; }.table-hint span { color: var(--gold); font-size: 15px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 870px; border-collapse: collapse; }
th { height: 43px; padding: 0 16px; color: #788682; font-size: 9px; font-weight: 600; letter-spacing: .11em; text-align: left; text-transform: uppercase; background: rgba(9, 14, 19, .38); }
td { height: 69px; padding: 8px 16px; color: #a7b0ad; font-size: 11px; border-top: 1px solid rgba(190, 211, 205, .075); }.align-right { text-align: right; }
.character-row { outline: 0; transition: background .16s; }.character-row:hover, .character-row:focus-visible { background: linear-gradient(90deg, rgba(66, 127, 141, .13), rgba(61, 74, 70, .04)); }.character-row:hover td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
.character-cell { display: flex; align-items: center; gap: 11px; min-width: 138px; }.portrait { position: relative; width: 37px; height: 37px; display: grid; place-items: center; overflow: hidden; color: #f4e7c4; font-family: Cinzel, serif; font-size: 13px; font-weight: 700; border: 1px solid rgba(232, 223, 185, .32); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(5,9,13,.6); }.portrait::after { content: ""; position: absolute; width: 50%; height: 50%; border-radius: 50%; background: rgba(255, 255, 255, .13); filter: blur(6px); top: 5px; left: 8px; }.portrait > span { position: relative; z-index: 1; }.portrait--large { width: 94px; height: 94px; font-size: 32px; border-width: 2px; }
.class-name { color: #d9dfd9; font-size: 12px; font-weight: 600; }.class-role { display: block; margin-top: 3px; color: #77837f; font-size: 9px; }
.name { color: #e2e8e1; font-size: 12px; font-weight: 600; }.realm { color: #94a19e; }.expansion { display: inline-block; padding: 3px 7px; color: #94bdce; font-size: 9px; background: rgba(83, 143, 160, .1); border: 1px solid rgba(111, 178, 197, .17); border-radius: 2px; }.expansion--classic { color: #d2b176; background: rgba(205, 159, 75, .08); border-color: rgba(205, 159, 75, .18); }
.mode { font-size: 10px; font-weight: 600; }.mode--Retail { color: #83b9ce; }.mode--Hardcore { color: #ed9c73; }.mode--Classic { color: #d7bc74; }.mode--Seasonal { color: #b397db; }
.level { color: #e4ca84; font-family: Cinzel, serif; font-size: 14px; font-weight: 700; }.score { color: #8ac6c7; font-weight: 600; }.open-arrow { color: #687571; font-size: 16px; transition: transform .16s, color .16s; }.character-row:hover .open-arrow { color: var(--gold); transform: translateX(3px); }
.empty-state td { height: 150px; color: #8c9895; text-align: center; }

footer { padding: 28px 0; background: rgba(6, 10, 14, .62); border-top: 1px solid var(--line); }.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }.brand--footer { transform: scale(.86); transform-origin: left center; }.footer__inner p { margin: 0; color: #697672; font-size: 10px; }.copyright { white-space: nowrap; }

.character-modal { width: min(820px, calc(100% - 34px)); max-height: min(790px, calc(100% - 34px)); padding: 0; overflow: auto; color: var(--ink); background: #111820; border: 1px solid rgba(210, 184, 112, .42); border-radius: 5px; box-shadow: 0 24px 80px rgba(0,0,0,.72); }.character-modal::backdrop { background: rgba(2, 6, 10, .79); backdrop-filter: blur(5px); }.modal-close { position: absolute; z-index: 3; top: 13px; right: 15px; width: 32px; height: 32px; color: #aeb9b3; font-size: 24px; line-height: 1; background: rgba(5,9,13,.52); border: 1px solid rgba(205, 219, 208, .18); border-radius: 3px; }.modal-close:hover { color: var(--gold-bright); border-color: rgba(216,185,111,.6); }
.modal-hero { position: relative; min-height: 205px; display: flex; align-items: center; gap: 23px; padding: 37px 45px; overflow: hidden; background: linear-gradient(105deg, rgba(11,16,22,.95) 14%, rgba(var(--hero-color), .24) 100%); border-bottom: 1px solid var(--line); }.modal-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(125deg, transparent 0 48px, rgba(255,255,255,.025) 49px 50px); }.modal-hero > * { position: relative; z-index: 1; }.modal-kicker { margin-bottom: 7px; color: var(--gold); font-family: Cinzel, serif; font-size: 10px; letter-spacing: .14em; }.modal-hero h2 { font-size: 32px; }.modal-class { margin: 8px 0 0; color: #b7c1ba; font-size: 13px; }.modal-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 15px; }.modal-tag { padding: 4px 8px; color: #aeb8b4; font-size: 9px; background: rgba(6,10,14,.35); border: 1px solid rgba(205,219,208,.17); border-radius: 2px; }
.modal-main { display: grid; grid-template-columns: 1.08fr .92fr; gap: 28px; padding: 29px 38px 36px; }.modal-section-title { margin-bottom: 15px; color: #c8d1cb; font-family: Cinzel, serif; font-size: 12px; font-weight: 600; letter-spacing: .06em; }.stat-panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.detail-stat { padding: 13px; background: rgba(29,39,47,.54); border: 1px solid rgba(190,211,205,.1); border-radius: 3px; }.detail-stat small { display: block; color: #81908c; font-size: 9px; text-transform: uppercase; }.detail-stat strong { display: block; margin-top: 5px; color: #e0e7df; font-family: Cinzel, serif; font-size: 17px; font-weight: 600; }.detail-stat strong.red { color: #e58d83; }.detail-stat strong.blue { color: #7fc2da; }.detail-stat strong.gold { color: #e3c37c; }
.item-list { display: grid; gap: 6px; }.item { display: flex; align-items: center; gap: 9px; padding: 8px; background: rgba(17,25,32,.76); border-left: 2px solid #827bc4; }.item-icon { width: 26px; height: 26px; display: grid; place-items: center; color: #dfc677; font-size: 13px; background: linear-gradient(135deg, #31415c, #101622); border: 1px solid #5d639a; }.item-name { display: block; color: #bdb6df; font-size: 10px; }.item-slot { display: block; margin-top: 2px; color: #72807b; font-size: 8px; }.item-level { margin-left: auto; color: #92a39f; font-size: 9px; }
.achievements { display: grid; gap: 8px; }.achievement { display: flex; align-items: center; gap: 10px; }.achievement__icon { width: 30px; height: 30px; display: grid; place-items: center; color: #e5c676; background: rgba(208,166,78,.11); border: 1px solid rgba(218,181,101,.32); border-radius: 50%; }.achievement strong { display: block; color: #cbd4cc; font-size: 10px; font-weight: 600; }.achievement span { color: #7c8984; font-size: 9px; }.character-modal::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { width: 7px; height: 7px; }.character-modal::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb { background: #475550; border-radius: 10px; }

@media (max-width: 800px) { .navigation { height: 75px; }.nav-links { display: none; }.hero { min-height: 465px; }.hero__content { padding-top: 62px; }.stat-grid { grid-template-columns: repeat(2, 1fr); }.roster { padding-top: 60px; }.modal-main { grid-template-columns: 1fr; }.modal-hero { padding: 34px 27px; }.modal-main { padding: 26px; } }
@media (max-width: 550px) { .container { width: min(100% - 28px, 1180px); }.region-select { padding: 8px; font-size: 0; }.region-select .chevron { font-size: 14px; }.hero__content { padding-top: 55px; }.eyebrow { font-size: 8px; }.hero__content > p { font-size: 12px; }.search kbd { display: none; }.section-heading, .roster__intro { display: block; }.updated { margin-top: 15px; }.mode-filters { justify-content: flex-start; margin-top: 18px; }.stat-grid { grid-template-columns: 1fr; }.stat-card { min-height: 86px; }.table-toolbar { padding: 0 14px; }.table-hint { display: none; } .footer__inner { display: grid; }.footer__inner p { line-height: 1.5; }.modal-hero { align-items: flex-start; gap: 15px; }.portrait--large { flex: 0 0 70px; width: 70px; height: 70px; font-size: 23px; }.modal-hero h2 { font-size: 22px; }.modal-tags { margin-top: 9px; }.modal-main { padding: 20px; }.stat-panels { grid-template-columns: 1fr 1fr; } }