:root {
  color-scheme: dark;
  --ink: #f1e5c8;
  --muted: #a99b82;
  --gold: #d9a93b;
  --gold-light: #f2d17d;
  --ember: #9d342b;
  --green: #78a856;
  --panel: rgba(24, 18, 12, 0.94);
  --line: rgba(218, 170, 62, 0.27);
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 5%, rgba(133, 82, 31, 0.28), transparent 34rem),
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 8px),
    #0d0a07;
}

button, input { font: inherit; }
a { color: inherit; }

.site-header {
  height: 76px;
  display: flex;
  align-items: center;
  padding: 0 clamp(20px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 7, 5, .82);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 22px; }
.brand small { color: var(--ember); font: 700 10px Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.brand-rune {
  display: grid; place-items: center; width: 38px; height: 38px; color: #171006;
  border: 2px solid var(--gold-light); border-radius: 50%; background: var(--gold); font-weight: 900;
  box-shadow: 0 0 18px rgba(217,169,59,.2);
}

main { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 42px 0 70px; }
.panel { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.eyebrow { margin: 0 0 8px; color: var(--gold); font: 700 11px Arial, sans-serif; letter-spacing: .19em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 14px; font-size: clamp(40px, 6vw, 72px); line-height: .98; font-weight: 500; }
h1 span { color: var(--gold-light); }
.intro { max-width: 680px; color: var(--muted); font: 18px/1.65 Arial, sans-serif; }

.hero { min-height: 650px; padding: clamp(32px, 6vw, 76px); background: linear-gradient(90deg, rgba(19,14,9,.98), rgba(19,14,9,.75)), var(--panel); }
.class-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 430px)); gap: 18px; }
.class-card {
  --class-accent: var(--green);
  --class-accent-rgb: 120, 168, 86;
  position: relative;
  display: grid;
  grid-template-areas: "eyebrow emblem" "title emblem" "description description" "specializations specializations";
  grid-template-columns: minmax(0, 1fr) 104px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(var(--class-accent-rgb), .68);
  background: linear-gradient(145deg, rgba(var(--class-accent-rgb), .28), rgba(20,17,11,.94) 68%);
  box-shadow: inset 0 1px rgba(var(--class-accent-rgb), .16), 0 14px 30px rgba(0,0,0,.2);
}
.class-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--class-accent); }
.class-card--druid { --class-accent: #FF7C0A; --class-accent-rgb: 255, 124, 10; }
.class-card--warrior { --class-accent: #C69B6D; --class-accent-rgb: 198, 155, 109; }
.class-card > .eyebrow { grid-area: eyebrow; color: var(--class-accent); }
.class-card h2 { grid-area: title; align-self: start; font-size: 32px; margin-bottom: 8px; }
.class-card > p:not(.eyebrow) { grid-area: description; color: var(--muted); font: 14px Arial, sans-serif; }
.class-emblem {
  grid-area: emblem;
  place-self: start end;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  padding: 8px;
  border: 1px solid rgba(var(--class-accent-rgb), .62);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--class-accent-rgb), .24), rgba(10,7,5,.82) 70%);
  box-shadow: 0 0 24px rgba(var(--class-accent-rgb), .16);
}
.class-emblem img { display: block; width: 100%; height: 100%; object-fit: contain; }
.class-emblem-fallback { color: var(--class-accent); font-size: 48px; font-weight: 700; }
.specializations { grid-area: specializations; }
.primary-button { display: inline-block; margin-top: 18px; padding: 13px 20px; color: #171006; background: linear-gradient(#f1d27f, #c4932d); border: 1px solid #f6d985; font: 700 13px Arial, sans-serif; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.empty-callout { margin-top: 40px; padding: 24px; border-left: 3px solid var(--ember); background: rgba(157,52,43,.12); }

.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px clamp(20px, 5vw, 72px); color: var(--muted); border-top: 1px solid var(--line); background: rgba(10,7,5,.82); font: 12px/1.5 Arial, sans-serif; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--gold-light); white-space: nowrap; }
.credits-panel { max-width: 840px; padding: clamp(28px, 5vw, 56px); }
.credits-panel h1 { font-size: clamp(38px, 6vw, 60px); }
.credits-panel h2 { margin-top: 32px; color: var(--gold-light); }
.credits-panel p, .credits-panel li { color: var(--muted); font: 15px/1.7 Arial, sans-serif; }
.credits-panel a { color: var(--gold-light); }

.character-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }
.character-heading h1 { margin: 0; font-size: 48px; }
.back-link { display: inline-block; margin-bottom: 28px; color: var(--muted); font: 13px Arial, sans-serif; }
.hardcore-badge { padding: 10px 14px; color: #e4a19a; border: 1px solid rgba(157,52,43,.65); background: rgba(157,52,43,.12); font: 700 11px Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.hardcore-badge span { color: var(--ember); margin-right: 6px; }

.control-bar { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 18px 22px; margin-bottom: 20px; }
.profile-control { display: flex; align-items: center; gap: 18px; }
.control-label { color: var(--muted); font: 12px Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.segmented { display: flex; padding: 3px; background: #0e0a06; border: 1px solid var(--line); }
.profile-button { padding: 10px 18px; color: var(--muted); border: 0; background: transparent; cursor: pointer; }
.profile-button.active { color: #171006; background: var(--gold); }
.strategy-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; font: 13px Arial, sans-serif; }
.strategy-toggle input { position: absolute; opacity: 0; }
.strategy-toggle small { display: block; margin-top: 3px; color: var(--muted); }
.toggle-track { width: 44px; height: 24px; border-radius: 20px; border: 1px solid #605642; background: #17120d; position: relative; }
.toggle-track::after { content: ""; position: absolute; width: 16px; height: 16px; top: 3px; left: 4px; border-radius: 50%; background: #81745e; transition: .18s; }
.strategy-toggle input:checked + .toggle-track { border-color: var(--gold); }
.strategy-toggle input:checked + .toggle-track::after { left: 22px; background: var(--gold); }
.strategy-toggle input:focus-visible + .toggle-track, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.loadout-layout { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: start; }
.level-panel { position: sticky; top: 20px; padding: 24px; }
.level-panel label { display: block; color: var(--muted); font: 13px Arial, sans-serif; }
#level-output { display: block; margin: 10px 0 18px; color: var(--gold-light); font-size: 72px; line-height: 1; }
.level-control { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
#level-slider { width: 100%; accent-color: var(--gold); cursor: pointer; }
.level-step { width: 36px; height: 36px; padding: 0; color: var(--gold-light); border: 1px solid var(--line); background: #151009; cursor: pointer; font: 700 20px Arial, sans-serif; }
.level-step:hover:not(:disabled) { border-color: var(--gold); background: #2a1e0e; }
.level-step:disabled { color: #5f5749; cursor: not-allowed; opacity: .55; }
.range-labels { display: flex; justify-content: space-between; color: var(--muted); font: 11px Arial, sans-serif; }
.strategy-status { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font: 12px/1.5 Arial, sans-serif; }

.paperdoll { min-height: 600px; padding: 22px; background: radial-gradient(circle at center, rgba(100,72,35,.23), transparent 45%), var(--panel); }
.paperdoll[aria-busy="true"] { opacity: .8; }
.paperdoll-title { display: flex; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.paperdoll-title span { color: var(--gold-light); font-size: 19px; }
.paperdoll-title small { color: var(--muted); font: 12px Arial, sans-serif; }
.equipment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding-top: 20px; }
.equipment-slot { min-width: 0; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 9px; border: 1px solid rgba(218,170,62,.16); background: rgba(9,7,5,.72); }
.equipment-slot:hover { border-color: rgba(218,170,62,.55); background: rgba(35,25,13,.8); }
.slot-icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; color: var(--gold); border: 1px solid #6f5525; background: radial-gradient(circle, #493817, #151008); }
.slot-icon.small { width: 34px; height: 34px; }
.item-icon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item-icon-link, .alternative-icon-link { display: block; }
.item-name { display: block; overflow: hidden; color: #a8d68a; font: 14px Arial, sans-serif; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.item-name:hover { color: #d1f1bc; text-decoration: underline; }
.item-copy { min-width: 0; }
.item-copy small { display: block; color: var(--muted); font: 10px Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.item-copy strong { display: block; overflow: hidden; color: #a8d68a; font: 14px Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.item-copy span { display: block; overflow: hidden; margin-top: 4px; font: 11px Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.guide-source { color: #7ca7d7; }
.wowhead-source { color: #c1aa7d; }
.equipment-slot.empty { opacity: .52; }
.equipment-slot.empty strong { color: var(--muted); font: 13px Arial, sans-serif; }
.alternatives { position: relative; }
.alternatives summary { display: grid; place-items: center; width: 30px; height: 30px; color: var(--gold); border: 1px solid var(--line); cursor: pointer; list-style: none; font: 12px Arial, sans-serif; }
.alternatives summary::-webkit-details-marker { display: none; }
.alternative-menu { position: absolute; z-index: 10; right: 0; top: 34px; width: 300px; padding: 14px; border: 1px solid var(--gold); background: #100c08; box-shadow: 0 14px 34px #000; }
.alternative-menu p { margin-bottom: 10px; color: var(--gold); font: 10px Arial, sans-serif; text-transform: uppercase; }
.alternative-menu > .alternative-item + .alternative-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.alternative-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; }
.alternative-item span { display: block; margin-top: 3px; font: 10px Arial, sans-serif; }
.alternative-menu strong, .alternative-menu small { display: block; font-family: Arial, sans-serif; }
.alternative-menu strong { color: #a8d68a; font-size: 13px; }
.alternative-menu small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.alternatives:not([open]):hover .alternative-menu { display: block; }
.loadout-error { padding: 20px; color: #efaaa3; background: rgba(157,52,43,.16); }

@media (max-width: 800px) {
  main { width: min(100% - 20px, 680px); padding-top: 24px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .character-heading, .control-bar { align-items: stretch; flex-direction: column; }
  .hardcore-badge { align-self: start; }
  .profile-control { align-items: stretch; flex-direction: column; }
  .loadout-layout { grid-template-columns: 1fr; }
  .level-panel { position: static; }
  .equipment-grid { grid-template-columns: 1fr; }
  .alternative-menu { right: -4px; width: min(300px, 72vw); }
}

@media (max-width: 420px) {
  .class-card { grid-template-columns: minmax(0, 1fr) 78px; padding: 24px; }
  .class-emblem { width: 70px; height: 70px; padding: 6px; }
}