/* Fantasy MMO - design-system tokens (from the claude.ai/design project). */
:root {
  --color-bg-1: #2a1d12;
  --color-bg-2: #0e0906;
  --color-panel: #1a120b;
  --color-border: #a8812f;
  --color-border-dim: #5a4318;
  --color-text: #e9d9b0;
  --color-lede: #d8c69a;
  --color-gold: #ffd100;
  --color-rare: #4da8ff;
  --color-epic: #c77dff;
  --color-legendary: #ff8000;

  --font-heading: "Cinzel Decorative", serif;
  --font-body: "Cinzel", serif;
}

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

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  color: var(--color-text);
  background: radial-gradient(ellipse at 30% 40%, var(--color-bg-1), var(--color-bg-2) 75%);
  text-wrap: pretty;
}

a { color: inherit; text-underline-offset: 3px; }
a:hover { opacity: .75; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* - page - */
.page {
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(24px, 5vw, 56px);
  display: flex;
  align-items: center;
}

.hero {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 400px) 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

/* - character card - */
.card {
  border: 3px solid var(--color-border);
  outline: 1px solid var(--color-border-dim);
  outline-offset: 6px;
  background: var(--color-panel);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.portrait-frame {
  border: 2px solid var(--color-border-dim);
  filter: sepia(.5) contrast(1.1);
  aspect-ratio: 4 / 5;
  min-height: 0;
  overflow: hidden;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  font: 700 14px var(--font-body);
  letter-spacing: .1em;
}
.level { color: var(--color-gold); }

.xp-bar {
  height: 12px;
  background: #2b1c10;
  border: 1px solid var(--color-border-dim);
}
.xp-fill {
  width: 82%;
  height: 100%;
  background: linear-gradient(#7a2bd1, #4b178a);
}

/* - content - */
.content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 28px);
  min-width: 0;
}

.eyebrow {
  font: 700 15px var(--font-body);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-border);
}

.title {
  font: 900 clamp(44px, 8vw, 104px)/1 var(--font-heading);
  margin: 0;
  color: var(--color-gold);
  text-shadow: 0 3px 0 #6b4a10, 0 0 30px rgba(255, 180, 0, .25);
  text-wrap: balance;
}

.lede {
  font: italic 400 clamp(17px, 2vw, 22px)/1.55 var(--font-body);
  margin: 0;
  max-width: 40ch;
  color: var(--color-lede);
}

.badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 620px;
}
.badge {
  border: 1px solid var(--color-border-dim);
  background: rgba(0, 0, 0, .3);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.badge-rarity { font: 700 13px var(--font-body); }
.badge-rare { color: var(--color-rare); }
.badge-epic { color: var(--color-epic); }
.badge-legendary { color: var(--color-legendary); }
.badge-name { font: 700 16px var(--font-body); }

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta {
  background: linear-gradient(#8b1a10, #4d0c06);
  border: 2px solid var(--color-border);
  color: var(--color-gold);
  padding: 14px 28px;
  text-decoration: none;
  font: 700 17px var(--font-body);
  letter-spacing: .08em;
}
.cta:hover { opacity: .75; }
.cta-secondary { background: rgba(0, 0, 0, .35); color: var(--color-text); }

/* - tablet - */
@media (max-width: 1023px) {
  .hero {
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 32px;
  }
}

/* - mobile - */
@media (max-width: 759px) {
  .page { padding: 20px; display: block; }
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .card { max-width: 320px; margin: 0 auto; }
  .content { text-align: left; }
  .badges { grid-template-columns: 1fr; max-width: none; }
  .cta { flex: 1; text-align: center; padding: 14px 12px; font-size: 15px; letter-spacing: .04em; white-space: nowrap; }
}