/* Spec page (class.html) */
:root { --cc: var(--gold); }
.cg-hero { position: relative; overflow: hidden; border-bottom: 1px solid #232a40;
  background: radial-gradient(700px 260px at 20% 0%, color-mix(in srgb, var(--cc) 22%, transparent), transparent 70%),
    linear-gradient(180deg, #121729, #0b0d14); }
.cg-hero-in { max-width: 1100px; margin: 0 auto; padding: 34px 16px 26px; display: flex; align-items: center; gap: 22px; }
.cg-crest { flex: none; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; color: var(--cc);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--cc) 25%, #151a2c), #0c0f1a 72%);
  border: 2px solid color-mix(in srgb, var(--cc) 75%, transparent);
  box-shadow: 0 0 0 5px #0c0f1a, 0 0 0 6px color-mix(in srgb, var(--cc) 30%, transparent), 0 0 34px color-mix(in srgb, var(--cc) 30%, transparent); }
.cg-crest svg { width: 54px; height: 54px; }
.cg-eyebrow { margin: 0 0 4px; color: var(--cc); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 12.5px; }
.cg-hero h1 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: 1px; color: #f6efd8; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; }
.cg-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cg-specs a { text-decoration: none; font-weight: 700; padding: 7px 14px; border-radius: 999px; color: #c9cfdf; background: #151a2b; border: 1px solid #2c3350; }
.cg-specs a:hover { border-color: color-mix(in srgb, var(--cc) 60%, transparent); color: #fff; }
.cg-specs a[aria-selected="true"] { color: #10131c; background: var(--cc); border-color: var(--cc); }

/* anchor buttons */
.cg-nav { position: sticky; top: 62px; z-index: 9; background: rgba(11, 13, 20, .94); backdrop-filter: blur(6px); border-bottom: 1px solid #232a40; }
.cg-nav-in { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.cg-nav a { flex: none; text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 9px; color: #d9d4c3;
  background: #151a2b; border: 1px solid #2c3350; transition: border-color .15s, color .15s; }
.cg-nav a:hover { border-color: var(--gold-dim); color: #fff; }
.cg-nav a.on { color: #1b1300; background: linear-gradient(#ffcc33, #e0a000); border-color: var(--gold); }

.cg { max-width: 1100px; margin: 0 auto; padding: 8px 16px 10px; }
.cg-sec { padding: 40px 0 6px; scroll-margin-top: 130px; }
.cg-sec h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 800; letter-spacing: 1px; color: #f3ead0; font-size: clamp(24px, 3.4vw, 32px); }
.cg-sec h2::after { content: ""; display: block; width: 70px; height: 2px; margin-top: 10px; background: linear-gradient(90deg, var(--cc), transparent); }
.cg-sub { margin: 10px 0 18px; color: var(--muted); }
.cg-sec h3 { margin: 22px 0 10px; font-size: 16px; color: #f3ead0; }
.cg-intro { margin: 16px 0 18px; font-size: 16.5px; line-height: 1.7; color: #d7dbe7; max-width: 880px; }
.cg-links { display: flex; flex-wrap: wrap; gap: 10px; }
.cg-btn { text-decoration: none; font-weight: 700; padding: 10px 18px; border-radius: 10px; color: #e9e2c8; background: #1d2338; border: 1px solid #343b57; }
.cg-btn:hover { border-color: var(--gold-dim); }
.cg-btn.primary { color: #1b1300; border: 0; background: linear-gradient(#ffcc33, #e0a000); }
.cg-empty { color: var(--muted); } .cg-empty.err { color: #ff9b8a; padding: 40px 0; text-align: center; }
.cg-empty a, .cg-note a { color: var(--gold); }
.cg-note { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }

/* stat priority */
.cg-prio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cg-prio li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #11151f; border: 1px solid #232a40; }
.cg-prio .n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; color: #1b1300;
  background: linear-gradient(#ffcc33, #e0a000); }
.cg-prio b { color: #f3ead0; } .cg-prio p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }

/* stat weights */
.cg-weights { display: grid; gap: 8px; max-width: 760px; }
.w-row { display: grid; grid-template-columns: 170px 1fr 52px; align-items: center; gap: 12px; }
.w-name { color: #d9d4c3; font-weight: 600; }
.w-bar { height: 12px; border-radius: 6px; background: #161b2b; overflow: hidden; box-shadow: 0 0 0 1px #232a40 inset; }
.w-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 55%, #000), var(--cc)); }
.w-val { text-align: right; font-weight: 800; color: #f3ead0; font-variant-numeric: tabular-nums; }

/* icons (game icons, same treatment as the talent calculator) */
.ic { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 5px; overflow: hidden;
  background: #0b0b0b; border: 2px solid #e9b81d; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.ic img, .ic .ic-letter { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; }
.ic .ic-letter { font-family: var(--display); font-weight: 800; font-size: 20px; color: #cfc6a6; background: radial-gradient(circle at 40% 30%, #3a3f55, #15182a); }
.ic.small { width: 38px; height: 38px; border-width: 1px; border-color: #5a4a14; }
.ic.item { width: 42px; height: 42px; border-width: 1px; }
.ic.item.q1 { border-color: #9d9d9d; } .ic.item.q2 { border-color: #1eff00; } .ic.item.q3 { border-color: #0070dd; } .ic.item.q4 { border-color: #a335ee; }
b.q1 { color: #fff; } b.q2 { color: #1eff00; } b.q3 { color: #4aa3ff; } b.q4 { color: #c77dff; }

/* rotation */
.cg-rot { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: s; }
.cg-rot li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; background: #11151f; border: 1px solid #232a40; }
.cg-rot .step { flex: none; width: 26px; text-align: center; font-family: var(--display); font-weight: 800; font-size: 20px; color: #4a5276; }
.cg-rot b { color: #f3ead0; font-size: 16px; } .cg-rot p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

/* sim */
.sim-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1100px; }
.sim-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 14px; background: linear-gradient(180deg, #151a2b, #10131f);
  border: 1px solid #262c44; }
.sim-tile .lv { color: var(--cc); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12.5px; }
.sim-tile b { font-family: var(--display); font-size: 40px; color: #f6efd8; line-height: 1.1; }
.sim-tile b small { font-family: inherit; font-size: 16px; color: var(--muted); }
.sim-tile .rk { color: #d9d4c3; font-weight: 600; }
.sim-tile .bar { height: 6px; border-radius: 3px; background: #1a1f31; overflow: hidden; margin-top: 4px; }
.sim-tile .bar i { display: block; height: 100%; background: var(--cc); }
.sim-tile .vs { color: var(--muted); font-size: 13px; }

/* consumables */
.cg-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cg-cons h3 { margin-top: 0; }
.cg-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cg-items li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; background: #11151f; border: 1px solid #232a40; }
.cg-items li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cg-items .eff { color: var(--muted); font-size: 13.5px; }
.cg-items .tag { font-size: 11.5px; font-weight: 700; color: #c3c8d6; background: #1f2438; border: 1px solid #333b58; border-radius: 999px; padding: 2px 8px; }
.cg-items .lvl { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* changes */
.cg-changes { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #d7dbe7; max-width: 900px; }
.cg-changes li::marker { color: var(--cc); }
.cg-tchanges { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cg-tchanges li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #11151f; border: 1px solid #232a40; }
.cg-tchanges b { color: #f3ead0; } .cg-tchanges p { margin: 3px 0 0; color: #b6bccd; font-size: 14px; }
.cg-tchanges .classic { color: var(--muted); font-size: 13px; }
.badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 999px; vertical-align: 2px; }
.badge.new { color: #9dffa0; background: #0f2a14; border: 1px solid #1f6a2a; }
.badge.changed { color: #ffd479; background: #2a2210; border: 1px solid #6a5414; }
.badge.moved { color: #9cc8ff; background: #10203a; border: 1px solid #1f4a7a; }
.badge.removed { color: #ffaaa0; background: #2a1210; border: 1px solid #7a2a1f; }
.was { color: var(--muted); font-size: 13px; }
.cg-credit { margin: 28px 0 0; text-align: center; color: #7d8398; font-size: 12.5px; } .cg-credit a { color: #b9a46a; }

@media (max-width: 800px) {
  .cg-prio, .cg-cons, .sim-grid { grid-template-columns: 1fr; }
  .w-row { grid-template-columns: 120px 1fr 44px; gap: 8px; }
  .cg-hero-in { gap: 14px; padding-top: 24px; }
  .cg-crest { width: 70px; height: 70px; } .cg-crest svg { width: 40px; height: 40px; }
  .cg-nav { top: 0; }
}

a.sim-tile { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.sim-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cc) 60%, transparent); }
.sim-tile .go { margin-top: 4px; color: var(--gold); font-size: 13px; font-weight: 700; }
/* the longer guide text under the introduction */
.cg-text { max-width: 880px; margin-top: 22px; }
.cg-text h3 { margin: 22px 0 8px; font-family: var(--display); font-size: 20px; color: #f3ead0; }
.cg-text p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.75; color: #c8cdda; }
@media (max-width: 900px) { .sim-grid { grid-template-columns: minmax(0, 1fr); } }