:root {
  --class-origin: 178, 139, 91;
  --class-knight: 206, 211, 216;
  --class-hunter: 101, 153, 92;
  --class-scholar: 151, 112, 203;
  --class-guild: 216, 168, 79;
  --class-current: 241, 201, 109;
}

body { overflow-x: hidden; }
.page-shell { width: min(1600px, calc(100% - 30px)); margin: 0 auto; padding: 26px 0 64px; }
.eyebrow { margin: 0 0 8px; color: var(--k-gold); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

.classes-hero {
  min-height: 325px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 285px;
  align-items: center;
  gap: 34px;
  padding: clamp(30px,5vw,56px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,9,10,.94), rgba(9,11,12,.56) 58%, rgba(8,9,10,.78)),
    radial-gradient(circle at 76% 42%, rgba(115,145,87,.13), transparent 25rem),
    radial-gradient(circle at 42% 22%, rgba(196,202,210,.10), transparent 24rem),
    radial-gradient(circle at 91% 35%, rgba(138,101,189,.14), transparent 22rem),
    url('/assets/classes/banner.png') center / cover no-repeat;
}
.classes-hero::after {
  content:'';
  position:absolute;
  right:-95px;
  bottom:-170px;
  width:440px;
  height:440px;
  border:1px solid rgba(214,168,79,.18);
  border-radius:50%;
  box-shadow:0 0 0 30px rgba(214,168,79,.02),0 0 0 62px rgba(214,168,79,.012);
}
.hero-copy { position:relative; z-index:1; }
.hero-copy h1 { max-width:930px; margin:0 0 14px; font-size:clamp(3rem,7vw,6.6rem); line-height:.9; letter-spacing:-.047em; }
.hero-copy > p:not(.eyebrow) { max-width:850px; color:var(--k-muted); line-height:1.7; }

.class-tree { margin-top: 26px; }
.path-section { position:relative; }
.path-section + .path-section { margin-top:34px; }
.section-heading { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:18px; }
.section-heading h2 { margin:0; font-size:clamp(1.9rem,4vw,3.15rem); line-height:1; }
.section-note { max-width:520px; margin:0; color:var(--k-muted); line-height:1.55; text-align:right; }
.loading-card { padding:30px; color:var(--k-muted); text-align:center; }

.origin-node { width:min(650px,100%); margin:0 auto; }
.origin-section::after {
  content:'';
  display:block;
  width:1px;
  height:34px;
  margin:0 auto -34px;
  background:linear-gradient(rgba(var(--class-origin),.65), rgba(214,168,79,.18));
  box-shadow:0 0 12px rgba(var(--class-origin),.16);
}

.root-bridge { position:relative; height:36px; margin:0 8.33%; }
.root-bridge::before { content:''; position:absolute; left:16.66%; right:16.66%; top:16px; height:1px; background:linear-gradient(90deg, rgba(var(--class-knight),.46), rgba(var(--class-hunter),.46), rgba(var(--class-scholar),.46)); }
.root-bridge::after { content:''; position:absolute; left:50%; top:0; width:1px; height:17px; background:rgba(214,168,79,.42); }
.root-bridge i { position:absolute; top:16px; width:1px; height:20px; }
.root-bridge i:nth-child(1) { left:16.66%; background:rgba(var(--class-knight),.5); }
.root-bridge i:nth-child(2) { left:50%; background:rgba(var(--class-hunter),.5); }
.root-bridge i:nth-child(3) { left:83.33%; background:rgba(var(--class-scholar),.5); }

.branch-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.branch-column { --branch-rgb: var(--class-origin); position:relative; min-width:0; transition:opacity .28s ease, filter .28s ease; }
.branch-column.branch-knight { --branch-rgb:var(--class-knight); }
.branch-column.branch-hunter { --branch-rgb:var(--class-hunter); }
.branch-column.branch-scholar { --branch-rgb:var(--class-scholar); }

.class-card {
  --branch-rgb: var(--class-origin);
  position:relative;
  min-height:470px;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(var(--branch-rgb),.34);
  border-radius:16px;
  background:
    radial-gradient(circle at 78% 16%, rgba(var(--branch-rgb),.11), transparent 19rem),
    linear-gradient(155deg, rgba(24,25,25,.96), rgba(11,12,13,.98));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015),0 16px 36px rgba(0,0,0,.32);
  cursor:pointer;
  isolation:isolate;
  transition:transform .22s ease, border-color .25s ease, box-shadow .25s ease, filter .25s ease, opacity .25s ease;
}
.class-card::before {
  content:'';
  position:absolute;
  inset:8px;
  z-index:0;
  border:1px solid rgba(var(--branch-rgb),.12);
  border-radius:11px;
  pointer-events:none;
}
.class-card::after {
  content:'';
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--branch-rgb),.8),transparent);
  opacity:.55;
}
.class-card.branch-origin { --branch-rgb:var(--class-origin); }
.class-card.branch-knight { --branch-rgb:var(--class-knight); }
.class-card.branch-hunter { --branch-rgb:var(--class-hunter); }
.class-card.branch-scholar { --branch-rgb:var(--class-scholar); }
.class-card.branch-guild { --branch-rgb:var(--class-guild); }
.class-card:hover,
.class-card:focus-visible {
  transform:translateY(-4px);
  border-color:rgba(var(--branch-rgb),.8);
  box-shadow:0 0 0 1px rgba(var(--branch-rgb),.13),0 0 30px rgba(var(--branch-rgb),.14),0 20px 42px rgba(0,0,0,.45);
  outline:none;
}
.class-card:active { transform:translateY(-1px) scale(.997); }
.class-card.state-current { border-color:rgba(var(--class-current),.86); box-shadow:0 0 0 1px rgba(var(--class-current),.12),0 0 30px rgba(var(--class-current),.16),0 18px 38px rgba(0,0,0,.42); }
.class-card.state-completed { box-shadow:0 0 22px rgba(118,174,91,.07),0 16px 34px rgba(0,0,0,.32); }
.class-card.state-level_locked,.class-card.state-other_path { filter:saturate(.72); }

.class-visual {
  position:relative;
  height:255px;
  overflow:hidden;
  border-bottom:1px solid rgba(var(--branch-rgb),.2);
  background:
    radial-gradient(circle at 25% 42%, rgba(var(--branch-rgb),.20), transparent 44%),
    linear-gradient(180deg, rgba(34,34,31,.90), rgba(8,9,10,.98));
}
.class-visual::after { content:''; position:absolute; inset:auto 0 0; height:72px; background:linear-gradient(transparent,rgba(8,9,10,.9)); pointer-events:none; }
.portrait-medallion { position:absolute; left:18px; top:22px; width:54%; height:205px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(var(--branch-rgb),.33); border-radius:46% 46% 14px 14px; background:rgba(0,0,0,.23); box-shadow:inset 0 0 24px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.25); }
.portrait-medallion img { width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.portrait-medallion .class-symbol { font-size:5rem; }

.sprite-stage { position:absolute; right:-6px; bottom:-4px; width:47%; height:220px; display:grid; place-items:end center; z-index:2; pointer-events:none; }
.sprite-stage::before { content:''; position:absolute; left:12%; right:4%; bottom:12px; height:22px; border-radius:50%; background:radial-gradient(ellipse,rgba(var(--branch-rgb),.24),rgba(0,0,0,.48) 55%,transparent 75%); filter:blur(2px); }
.idle-sprite { width:196px; height:196px; flex:none; background-repeat:no-repeat; background-position:0 0; image-rendering:pixelated; transform:scale(.88); transform-origin:50% 100%; filter:drop-shadow(0 10px 9px rgba(0,0,0,.62)); }
.class-card:hover .idle-sprite,
.class-card:focus-visible .idle-sprite,
.class-card.state-current .idle-sprite,
.detail-panel .idle-sprite { animation:class-idle .96s steps(8) infinite; }
@keyframes class-idle { from { background-position:0 0; } to { background-position:-1568px 0; } }

.class-topline { position:absolute; inset:12px 12px auto; z-index:4; display:flex; justify-content:space-between; gap:8px; align-items:flex-start; pointer-events:none; }
.level-medallion { display:grid; place-items:center; min-width:48px; height:34px; padding:0 10px; border:1px solid rgba(var(--branch-rgb),.44); border-radius:999px; color:#eee3cf; background:rgba(7,8,9,.78); box-shadow:0 6px 18px rgba(0,0,0,.3); font-size:.75rem; font-weight:900; letter-spacing:.05em; }
.state-seal { display:inline-flex; align-items:center; gap:6px; max-width:190px; min-height:34px; padding:7px 10px; border:1px solid rgba(214,168,79,.28); border-radius:999px; color:var(--k-muted); background:rgba(7,8,9,.82); font-size:.72rem; font-weight:800; }
.state-seal.current { color:#1b1309; border-color:transparent; background:var(--k-gold-2); }
.state-seal.completed,.state-seal.available { color:#b9dda2; border-color:rgba(119,184,91,.35); }
.state-seal.special { color:#e1c8ff; border-color:rgba(154,111,209,.36); }
.state-seal.catalog { display:none; }

.class-body { position:relative; z-index:2; display:flex; flex-direction:column; min-height:214px; padding:20px 22px 21px; }
.class-title-row { display:flex; align-items:center; gap:10px; }
.class-icon { width:31px; height:31px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.36)); }
.class-icon-fallback { font-size:1.45rem; }
.class-body h3 { margin:0; font-size:clamp(1.55rem,2.4vw,2.15rem); line-height:1; }
.class-role { margin:8px 0 0; color:rgba(var(--branch-rgb),.95); font-size:.86rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.class-description { margin:12px 0 0; color:var(--k-muted); font-size:.92rem; line-height:1.58; }
.class-open { margin-top:auto; padding-top:18px; color:rgba(var(--branch-rgb),.88); font-size:.82rem; font-weight:800; letter-spacing:.04em; }

.class-tree[data-focus-branch] .branch-column { opacity:.48; filter:saturate(.7) brightness(.82); }
.class-tree[data-focus-branch="knight"] .branch-column.branch-knight,
.class-tree[data-focus-branch="hunter"] .branch-column.branch-hunter,
.class-tree[data-focus-branch="scholar"] .branch-column.branch-scholar { opacity:1; filter:none; }
.class-tree[data-focus-branch="knight"] .branch-column.branch-knight::after,
.class-tree[data-focus-branch="hunter"] .branch-column.branch-hunter::after,
.class-tree[data-focus-branch="scholar"] .branch-column.branch-scholar::after { content:''; position:absolute; left:50%; top:-36px; width:1px; height:36px; background:rgba(var(--branch-rgb),.9); box-shadow:0 0 16px rgba(var(--branch-rgb),.55); }

.future-section { padding:clamp(22px,3vw,32px); overflow:hidden; background:radial-gradient(circle at 50% 0%,rgba(214,168,79,.055),transparent 30rem),linear-gradient(155deg,rgba(20,20,19,.96),rgba(10,11,12,.98)); }
.future-section::before { content:''; position:absolute; inset:9px; border:1px solid rgba(214,168,79,.09); border-radius:12px; pointer-events:none; }
.future-heading { position:relative; z-index:1; }
.future-seal { flex:none; padding:8px 12px; border:1px solid rgba(214,168,79,.28); border-radius:999px; color:#d9bc82; background:rgba(214,168,79,.07); font-size:.78rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.future-intro { position:relative; z-index:1; max-width:920px; margin:-2px 0 24px; color:var(--k-muted); line-height:1.65; }
.future-primary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.future-hybrid-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; width:min(960px,100%); margin:14px auto 0; }
.future-divider { display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:#bda981; font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.future-divider::before,.future-divider::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,transparent,rgba(214,168,79,.22)); }
.future-divider::after { transform:scaleX(-1); }

.future-card { --future-a:var(--class-origin); --future-b:var(--future-a); position:relative; display:grid; grid-template-columns:132px minmax(0,1fr); min-height:180px; overflow:hidden; border:1px dashed rgba(var(--future-a),.36); border-radius:13px; background:radial-gradient(circle at 12% 20%,rgba(var(--future-a),.10),transparent 13rem),rgba(0,0,0,.19); transition:border-color .24s ease,box-shadow .24s ease,opacity .24s ease,filter .24s ease,transform .24s ease; }
.future-card[data-path~="knight"] { --future-a:var(--class-knight); }
.future-card[data-path~="hunter"] { --future-a:var(--class-hunter); }
.future-card[data-path~="scholar"] { --future-a:var(--class-scholar); }
.future-card.hybrid-knight-hunter { --future-a:var(--class-knight); --future-b:var(--class-hunter); background:linear-gradient(135deg,rgba(var(--class-knight),.07),transparent 45%,rgba(var(--class-hunter),.08)),rgba(0,0,0,.19); }
.future-card.hybrid-hunter-scholar { --future-a:var(--class-hunter); --future-b:var(--class-scholar); background:linear-gradient(135deg,rgba(var(--class-hunter),.08),transparent 45%,rgba(var(--class-scholar),.08)),rgba(0,0,0,.19); }
.future-art { position:relative; display:grid; place-items:center; min-height:180px; border-right:1px solid rgba(var(--future-a),.14); background:radial-gradient(circle,rgba(var(--future-a),.10),transparent 68%); }
.future-art img { width:112px; height:150px; object-fit:contain; filter:saturate(.72) brightness(.82) drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.future-fallback { display:grid; place-items:center; width:84px; height:112px; border:1px solid rgba(var(--future-a),.3); border-radius:42% 42% 14px 14px; color:rgba(var(--future-a),.72); background:rgba(0,0,0,.25); font-family:Georgia,serif; font-size:3rem; }
.future-copy { display:flex; flex-direction:column; padding:18px; }
.future-copy small { color:rgba(var(--future-a),.9); font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.future-copy h3 { margin:6px 0 0; font-size:1.35rem; }
.future-copy p { margin:9px 0 0; color:var(--k-muted); font-size:.87rem; line-height:1.5; }
.future-status { margin-top:auto; padding-top:12px; color:#c7ad78; font-size:.76rem; font-weight:800; }
.class-tree[data-focus-branch] .future-card { opacity:.42; filter:saturate(.7) brightness(.8); }
.class-tree[data-focus-branch="knight"] .future-card[data-path~="knight"],
.class-tree[data-focus-branch="hunter"] .future-card[data-path~="hunter"],
.class-tree[data-focus-branch="scholar"] .future-card[data-path~="scholar"] { opacity:1; filter:none; transform:translateY(-2px); border-color:rgba(var(--future-a),.67); box-shadow:0 0 22px rgba(var(--future-a),.09); }

.guild-section { padding:clamp(22px,3vw,30px); background:radial-gradient(circle at 50% 0%,rgba(var(--class-guild),.10),transparent 25rem),linear-gradient(155deg,rgba(30,24,15,.96),rgba(10,11,12,.98)); }
.guild-heading { margin-bottom:20px; }
.guild-branch { display:grid; grid-template-columns:minmax(0,520px) auto minmax(0,520px); gap:16px; align-items:center; justify-content:center; }
.guild-arrow { position:relative; width:54px; height:1px; background:rgba(var(--class-guild),.45); font-size:0; }
.guild-arrow::after { content:'›'; position:absolute; right:-2px; top:50%; transform:translateY(-53%); color:rgba(var(--class-guild),.9); font-size:2rem; }
.guild-branch .class-card { min-height:430px; }

.detail-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
.detail-modal[hidden] { display:none; }
.modal-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,0,.82); backdrop-filter:blur(6px); cursor:pointer; }
.detail-panel { --detail-rgb:var(--class-origin); position:relative; z-index:1; width:min(1040px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:24px; border-color:rgba(var(--detail-rgb),.48); background:radial-gradient(circle at 20% 10%,rgba(var(--detail-rgb),.09),transparent 26rem),var(--k-panel-2); box-shadow:0 0 44px rgba(var(--detail-rgb),.09),0 28px 70px rgba(0,0,0,.58); }
.detail-panel.branch-knight { --detail-rgb:var(--class-knight); }
.detail-panel.branch-hunter { --detail-rgb:var(--class-hunter); }
.detail-panel.branch-scholar { --detail-rgb:var(--class-scholar); }
.detail-panel.branch-guild { --detail-rgb:var(--class-guild); }
.modal-close { position:sticky; float:right; top:0; z-index:5; width:40px; height:40px; border:1px solid rgba(var(--detail-rgb),.35); border-radius:50%; color:var(--k-text); background:rgba(0,0,0,.62); cursor:pointer; font-size:1.5rem; }
.detail-layout { display:grid; grid-template-columns:minmax(300px,390px) minmax(0,1fr); gap:28px; clear:both; align-items:start; }
.detail-visual { position:sticky; top:0; min-height:490px; overflow:hidden; border:1px solid rgba(var(--detail-rgb),.28); border-radius:14px; background:radial-gradient(circle at 30% 28%,rgba(var(--detail-rgb),.17),transparent 45%),rgba(0,0,0,.25); box-shadow:inset 0 0 38px rgba(0,0,0,.32); }
.detail-portrait { position:absolute; inset:18px 68px 138px 18px; overflow:hidden; border:1px solid rgba(var(--detail-rgb),.25); border-radius:48% 48% 14px 14px; opacity:.88; }
.detail-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 16%; }
.detail-visual .sprite-stage { right:3px; bottom:6px; width:72%; height:300px; }
.detail-visual .idle-sprite { transform:scale(1.22); }
.detail-visual-title { position:absolute; left:22px; bottom:20px; z-index:4; max-width:60%; }
.detail-visual-title small { display:block; color:rgba(var(--detail-rgb),.9); font-size:.74rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.detail-visual-title strong { display:block; margin-top:3px; font-family:Georgia,serif; font-size:1.4rem; }
.detail-kicker { margin:4px 0 8px; color:rgba(var(--detail-rgb),.9); font-size:.78rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.detail-copy h2 { margin:0; font-size:clamp(2.6rem,5vw,4.5rem); line-height:.92; }
.detail-copy > p { margin:15px 0 0; color:var(--k-muted); line-height:1.68; }
.detail-meta { display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:16px; padding:12px 0; border-top:1px solid rgba(var(--detail-rgb),.16); border-bottom:1px solid rgba(var(--detail-rgb),.16); }
.detail-meta span { color:#cfc1aa; font-size:.82rem; }
.detail-meta strong { color:rgba(var(--detail-rgb),.96); }
.detail-boxes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.detail-box { padding:15px; border:1px solid rgba(var(--detail-rgb),.16); border-radius:10px; background:rgba(0,0,0,.18); }
.detail-box.full { grid-column:1 / -1; }
.detail-box h3 { margin:0 0 9px; color:rgba(var(--detail-rgb),.95); font-size:1rem; }
.detail-row { color:var(--k-muted); line-height:1.55; }
.detail-list { display:grid; gap:7px; }
.detail-list .detail-row { padding-left:13px; position:relative; }
.detail-list .detail-row::before { content:'◆'; position:absolute; left:0; top:.16em; color:rgba(var(--detail-rgb),.75); font-size:.58rem; }

@media (max-width:1180px) {
  .branch-grid { grid-template-columns:1fr; }
  .root-bridge { display:none; }
  .branch-column { width:min(760px,100%); margin:0 auto; }
  .future-primary-grid { grid-template-columns:1fr; }
  .future-hybrid-grid { grid-template-columns:1fr; width:100%; }
  .guild-branch { grid-template-columns:minmax(0,620px); }
  .guild-arrow { width:1px; height:34px; justify-self:center; }
  .guild-arrow::after { right:auto; left:50%; top:auto; bottom:-7px; transform:translateX(-50%) rotate(90deg); }
  .class-tree[data-focus-branch] .branch-column { opacity:1; filter:none; }
}
@media (max-width:900px) {
  .classes-hero { grid-template-columns:1fr; }
  .section-emblem { justify-self:center; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .section-note { text-align:left; }
  .detail-layout { grid-template-columns:1fr; }
  .detail-visual { position:relative; width:min(430px,100%); min-height:430px; justify-self:center; }
}
@media (max-width:700px) {
  .page-shell { width:min(100% - 18px,1600px); padding-top:14px; }
  .class-card { min-height:445px; }
  .class-visual { height:238px; }
  .portrait-medallion { left:12px; width:58%; height:192px; }
  .sprite-stage { right:-28px; width:55%; transform:scale(.92); transform-origin:100% 100%; }
  .class-body { min-height:207px; padding:18px; }
  .future-card { grid-template-columns:100px minmax(0,1fr); }
  .future-art { min-height:168px; }
  .future-art img { width:88px; height:130px; }
  .detail-panel { padding:16px; }
  .detail-boxes { grid-template-columns:1fr; }
  .detail-box.full { grid-column:auto; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}