.ft, .tip, .toast{--bg: #0b0d12;
  --surface-1: #11141b;
  --surface-2: #171b24;
  --surface-3: #1f2430;
  --line: rgba(233, 222, 196, .09);
  --line-strong: rgba(233, 222, 196, .18);
  --text: #ece6d8;
  --muted: #a39d90;
  --faint: #6f6a61;
  --gold: #d9a441;
  --gold-hi: #f2c96e;
  --gold-ink: #1a1305;
  --green: #5fd068;
  --red: #e0584f;
  --horde: #c2412f;
  --alliance: #4f7fd6;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --r1: 6px; --r2: 10px; --r3: 16px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);

  --shadow-1: 0 1px 0 rgba(255, 236, 196, .04) inset, 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(10, 6, 0, .25);
  --shadow-2: 0 1px 0 rgba(255, 236, 196, .06) inset, 0 6px 16px rgba(0, 0, 0, .35), 0 18px 40px rgba(20, 12, 0, .35);
  --shadow-3: 0 10px 24px rgba(0, 0, 0, .45), 0 28px 64px rgba(12, 8, 0, .55);

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;

  color-scheme: dark;}
.ft h1,.ft h2,.ft h3,.ft h4{margin:0;padding:0;border:0;color:inherit;scroll-margin-top:0}.ft p{margin:0}.ft ul,.ft ol{margin:0;padding:0}.ft li{margin:0}.ft strong,.ft b{color:inherit}.ft a{text-decoration:none}.ft img{max-width:none;height:auto;border:0;border-radius:0}.ft table{margin:0;width:auto;font-size:inherit}.ft th,.ft td{border:0;padding:0;background:none;color:inherit}.ft .panel{padding:0}

.ft, .ft *{box-sizing: border-box;}
.ft{-webkit-text-size-adjust: 100%;}
.ft{margin: 0;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(217, 164, 65, .10), transparent 60%),
    radial-gradient(900px 600px at 105% 10%, rgba(120, 70, 190, .07), transparent 55%),
    radial-gradient(1200px 700px at 50% 120%, rgba(40, 90, 120, .08), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 400 16px/1.7 var(--font-body);
  min-height: 100vh;}
.ft h1, .ft h2, .ft h3{font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0;}
.ft h1{font-size: clamp(28px, 5vw, 44px); letter-spacing: -0.03em;}
.ft h2{font-size: clamp(20px, 3vw, 26px);}
.ft h3{font-size: 17px; letter-spacing: 0;}
.ft p{margin: 0;}
.ft a{color: var(--gold-hi); text-decoration: none;}
.ft a:hover{text-decoration: underline;}
.ft img{display: block;}
.ft .muted{color: var(--muted);}
.ft .num{font-variant-numeric: tabular-nums;}
.ft .sr-only{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.ft :focus-visible{outline: 2px solid var(--gold-hi); outline-offset: 2px; border-radius: var(--r1);}
.ft .wrap{max-width: 1240px; margin: 0 auto; padding: 0 var(--s4);}
@media (min-width: 720px){.ft .wrap{padding: 0 var(--s5);}}
.ft .page-head{padding: var(--s7) 0 var(--s5); display: grid; gap: var(--s3);}
.ft .eyebrow{font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);}
.ft .lede{color: var(--muted); max-width: 64ch; font-size: 17px;}
.ft{padding-bottom: var(--s8);}
.ft .btn{display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 40px; padding: 0 var(--s4); border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  font: 600 15px/1 var(--font-body); cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: transform .25s var(--spring), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);}
.ft .btn:hover{background: var(--surface-3); border-color: rgba(242, 201, 110, .35); text-decoration: none;}
.ft .btn:active{transform: scale(.96);}
.ft .btn:disabled{opacity: .45; cursor: not-allowed; transform: none;}
.ft .btn-gold{background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--gold-ink); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 18px rgba(217,164,65,.25);}
.ft .btn-gold:hover{background: linear-gradient(180deg, #f7d68a, var(--gold-hi)); border-color: transparent;}
.ft .btn[aria-pressed="true"]{border-color: var(--red); color: #ffb3ad; background: rgba(224, 88, 79, .12);}
.ft .select, .ft .input{min-height: 40px; padding: 0 var(--s3); border-radius: var(--r1);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font: 500 15px var(--font-body);
  transition: border-color .2s var(--ease);}
.ft .select:hover, .ft .input:hover{border-color: rgba(242, 201, 110, .35);}
.ft .input{width: 100%;}
.ft .toolbar{display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface-1); box-shadow: var(--shadow-1);}
.ft .toolbar .spacer{flex: 1;}
.ft .field{display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: 14px; font-weight: 600;}
.ft .chips{display: flex; flex-wrap: wrap; gap: var(--s2);}
.ft .chip{display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s3) 0 var(--s2);
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface-1); color: var(--muted);
  font: 600 14px var(--font-body); cursor: pointer;
  transition: transform .25s var(--spring), border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);}
.ft .chip:hover{color: var(--text); border-color: var(--line-strong);}
.ft .chip:active{transform: scale(.95);}
.ft .chip[aria-pressed="true"]{color: var(--text); border-color: var(--c, var(--gold)); background: color-mix(in srgb, var(--c, var(--gold)) 16%, var(--surface-1));}
.ft .chip img{width: 22px; height: 22px; border-radius: 50%;}
.ft .panel{border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface-1); box-shadow: var(--shadow-2);}
.ft .icon{border-radius: var(--r1); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4); background: #000;}
.ft .stat{display: grid; gap: 2px;}
.ft .stat b{font: 700 22px/1.1 var(--font-display); color: var(--gold-hi);}
.ft .stat span{font-size: 13px; color: var(--muted); font-weight: 600;}
.toast{position: fixed; left: 50%; bottom: var(--s5); z-index: 50; transform: translate(-50%, 20px); opacity: 0;
  padding: var(--s2) var(--s4); border-radius: var(--r2); background: var(--surface-3); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-3); font-weight: 600; pointer-events: none;
  transition: opacity .2s var(--ease), transform .35s var(--spring);}
.toast.show{opacity: 1; transform: translate(-50%, 0);}
.ft .notice{padding: var(--s3) var(--s4); border-radius: var(--r2); border: 1px solid rgba(224, 88, 79, .4); background: rgba(224, 88, 79, .08);}
.tip{position: fixed; z-index: 60; max-width: 320px; padding: var(--s3) var(--s4);
  background: rgba(8, 10, 16, .97); border: 1px solid rgba(242, 201, 110, .28); border-radius: var(--r2);
  box-shadow: var(--shadow-3); font-size: 14px; line-height: 1.55; pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .12s var(--ease), transform .2s var(--ease);}
.tip.show{opacity: 1; transform: none;}
.tip h4{margin: 0 0 2px; font: 700 16px/1.3 var(--font-body); color: var(--text);}
.tip .tip-sub{color: var(--muted); font-size: 13px; margin-bottom: var(--s2);}
.tip .tip-next{color: var(--muted); margin-top: var(--s2);}
.tip .tip-next b{color: var(--text); font-weight: 600;}
.tip .tip-desc{color: #f1d98a; white-space: pre-line;}
.tip .tip-next{white-space: pre-line;}
.tip .tip-req{color: var(--red); margin-top: var(--s2);}
.tip .tip-classic{margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); color: var(--faint); font-size: 13px;}
.tip .tip-hint{margin-top: var(--s2); color: var(--faint); font-size: 12px;}
.ft .tool-grid{display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.ft .tool-card{display: grid; gap: var(--s3); padding: var(--s5); border-radius: var(--r3); color: var(--text);
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: var(--shadow-2);
  transition: transform .35s var(--spring), border-color .2s var(--ease);}
.ft .tool-card:hover{transform: translateY(-3px); border-color: rgba(242, 201, 110, .35); text-decoration: none;}
.ft .tool-card:active{transform: translateY(-1px) scale(.99);}
.ft .tool-card .icons{display: flex; gap: var(--s1);}
.ft .tool-card .icons img{width: 36px; height: 36px;}
.ft .tool-card p{color: var(--muted);}
.ft .tool-card .go{color: var(--gold-hi); font-weight: 700; font-size: 15px;}
.ft .trees, .ft .ltrees, .ft .tree-tabs, .ft .toolbar, .ft .chips, .ft .node, .ft .lnode, .ft .btn{-webkit-user-select: none; user-select: none;}
.ft .toolbar input{-webkit-user-select: text; user-select: text;}
.ft .node img, .ft .lnode img, .ft .chip img, .ft .tree-tab img{-webkit-user-drag: none; pointer-events: none;}
.ft .beta-bar{display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s5);
  margin-bottom: var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-1);
  font-size: 13px; line-height: 1.5; color: var(--muted); box-shadow: var(--shadow-1);}
.ft .beta-bar b{display: inline-flex; align-items: center; gap: var(--s2); color: var(--text); font-weight: 700;}
.ft .beta-dot{width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(95, 208, 104, .18);}
.ft .trees{display: grid; gap: var(--s4); margin-top: var(--s4); grid-template-columns: 1fr;}
@media (min-width: 640px) and (max-width: 979px){.ft .trees{grid-template-columns: repeat(2, 1fr);}}
@media (min-width: 980px){.ft .trees{grid-template-columns: repeat(3, 1fr);}}
.ft .tree{overflow: hidden; display: flex; flex-direction: column;}
.ft .tree-head{display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line); background: var(--surface-2);}
.ft .tree-head img{width: 32px; height: 32px;}
.ft .tree-head h2{font-size: 18px; flex: 1;}
.ft .tree-head .pts{font: 700 18px var(--font-display); color: var(--gold-hi);}
.ft .tree-head .btn{min-height: 30px; padding: 0 var(--s2); font-size: 13px;}
.ft .tree-body{position: relative; padding: var(--s3); isolation: isolate;}
.ft .tree-body::before{content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-img) center / cover no-repeat; opacity: .28; filter: saturate(.7);}
.ft .tree-body::after{content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,13,18,.2), rgba(11,13,18,.75));}
.ft .grid{position: relative; aspect-ratio: 400 / 620; max-width: 360px; margin: 0 auto;}
.ft .links{position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(160, 150, 130, .5); pointer-events: none;}
.ft .links path{fill: none; stroke: currentColor; stroke-width: 5;}
.ft .links .on{color: var(--green);}
.ft .links .done{color: var(--gold);}
.ft .links path{marker-end: url(#ah);}
.ft .links path.on{marker-end: url(#ah-on);}
.ft .links path.done{marker-end: url(#ah-done);}
.ft .ah{fill: rgba(160, 150, 130, .5);}
.ft .ah-on{fill: var(--green);}
.ft .ah-done{fill: var(--gold);}
.ft .node{position: absolute; width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%);
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 9px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;}
.ft .node img{width: 100%; height: 100%; border-radius: 9px;
  box-shadow: 0 0 0 2px #3a3a3a, 0 3px 8px rgba(0,0,0,.6);
  filter: grayscale(1) brightness(.55);
  transition: filter .2s var(--ease), transform .3s var(--spring);}
.ft .node .rank{position: absolute; right: -8px; bottom: -8px; min-width: 30px; padding: 0 5px;
  font: 700 12px/19px var(--font-body); text-align: center; border-radius: 6px;
  background: #0b0d12; color: #8a857b; box-shadow: 0 0 0 1px #3a3a3a;}
.ft .node .mark{position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px #0b0d12;}
.ft .node:hover img{transform: scale(1.07);}
.ft .node:active img{transform: scale(.94);}
.ft .node:focus-visible{outline-offset: 4px;}
.ft .node.can img{filter: none; box-shadow: 0 0 0 2px var(--green), 0 3px 8px rgba(0,0,0,.6);}
.ft .node.can .rank{color: var(--green); box-shadow: 0 0 0 1px var(--green);}
.ft .node.some img{filter: none; box-shadow: 0 0 0 2px var(--green), 0 0 14px rgba(95, 208, 104, .35);}
.ft .node.some .rank{color: var(--green); box-shadow: 0 0 0 1px var(--green);}
.ft .node.max img{filter: none; box-shadow: 0 0 0 2px var(--gold-hi), 0 0 16px rgba(242, 201, 110, .4);}
.ft .node.max .rank{color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi);}
.ft .node.active-ability img{border-radius: 50%;}
.ft .node.active-ability{border-radius: 50%;}
.ft .dot{display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px;}
.ft .dot-new, .ft .mark-new{background: #56c1ff;}
.ft .legend{display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s4); font-size: 14px;}
.ft .tree-tabs{display: none;}
@media (max-width: 639px){.ft #classes{flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;}
.ft #classes::-webkit-scrollbar{display: none;}
.ft #classes .chip{flex: none;}
.ft .toolbar .stat b{font-size: 18px;}
.ft .toolbar .stat:has(#split){display: none;}
.ft .toolbar{gap: var(--s2);}
.ft .toolbar .spacer{flex-basis: 100%; height: 0;}
.ft .toolbar .btn{flex: 1; min-height: 36px; padding: 0 var(--s2); font-size: 14px;}
.ft .tree-tabs{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin-top: var(--s4);
    padding: var(--s1); border-radius: var(--r2); background: var(--surface-1); border: 1px solid var(--line);}
.ft .tree-tab{display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 var(--s2);
    border: 0; border-radius: var(--r1); background: none; color: var(--muted); font: 600 14px var(--font-body); cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease), transform .25s var(--spring);}
.ft .tree-tab img{width: 20px; height: 20px; border-radius: 4px;}
.ft .tree-tab b{color: var(--gold-hi);}
.ft .tree-tab:hover{color: var(--text); background: var(--surface-2);}
.ft .tree-tab:active{transform: scale(.96);}
.ft .tree-tab[aria-selected="true"]{color: var(--text); background: var(--surface-3); box-shadow: var(--shadow-1);}
.ft .trees{margin-top: var(--s2);}
.ft .tree:not(.is-active){display: none;}}
@media (max-width: 379px){.ft .tree-tab img{display: none;}}
.ft .ltrees{display: grid; gap: var(--s4); margin-top: var(--s4); grid-template-columns: 1fr;}
@media (min-width: 900px){.ft .ltrees{grid-template-columns: repeat(3, 1fr);}}
.ft .ltree{overflow: hidden;}
.ft .ltree-head{display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); background: var(--surface-2); border-bottom: 1px solid var(--line);}
.ft .ltree-head img{width: 36px; height: 36px;}
.ft .ltree-head div{flex: 1; min-width: 0;}
.ft .ltree-head h2{font-size: 18px;}
.ft .ltree-head p{font-size: 13px; color: var(--muted); line-height: 1.4;}
.ft .ltree-head .pts{font: 700 18px var(--font-display); color: var(--gold-hi);}
.ft .lgrid{display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, auto);
  gap: var(--s5) var(--s3); padding: var(--s5) var(--s4) var(--s6); max-width: 340px; margin: 0 auto;
  background: radial-gradient(260px 200px at 50% 30%, rgba(217, 164, 65, .06), transparent 70%);}
.ft .lnode{position: relative; justify-self: center; width: 100%; max-width: 54px; aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 9px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;}
.ft .lnode img{width: 100%; height: 100%; border-radius: 9px; box-shadow: 0 0 0 2px #3a3a3a, 0 3px 8px rgba(0,0,0,.6); filter: grayscale(1) brightness(.55); transition: filter .2s var(--ease), transform .3s var(--spring);}
.ft .lnode .rank{position: absolute; right: -8px; bottom: -8px; min-width: 30px; padding: 0 5px; font: 700 12px/19px var(--font-body); text-align: center; border-radius: 6px; background: #0b0d12; color: #8a857b; box-shadow: 0 0 0 1px #3a3a3a;}
.ft .lnode:hover img{transform: scale(1.07);}
.ft .lnode:active img{transform: scale(.94);}
.ft .lnode.can img, .ft .lnode.some img{filter: none; box-shadow: 0 0 0 2px var(--green), 0 3px 8px rgba(0,0,0,.6);}
.ft .lnode.can .rank, .ft .lnode.some .rank{color: var(--green); box-shadow: 0 0 0 1px var(--green);}
.ft .lnode.max img{filter: none; box-shadow: 0 0 0 2px var(--gold-hi), 0 0 16px rgba(242, 201, 110, .4);}
.ft .lnode.max .rank{color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi);}
.ft .lnode.unknown{cursor: help; display: grid; place-items: center; border: 2px dashed var(--line-strong); color: var(--faint); font: 700 20px var(--font-display);}
.ft .lnode.unknown:active{transform: none;}
.ft .pre-line{align-self: center; height: 3px; border-radius: 2px; background: rgba(160, 150, 130, .35);}
.ft .pre-line.on{background: var(--gold);}
.ft .rewards{margin-top: var(--s5); padding: var(--s5); display: grid; gap: var(--s2);}
.ft .track{list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
.ft .track li{display: grid; grid-template-columns: 44px 1fr; gap: 2px var(--s3); align-items: center;
  padding: var(--s3); border-radius: var(--r2); border: 1px solid var(--line); background: var(--surface-2);}
.ft .track img{width: 44px; height: 44px; grid-row: span 2; filter: grayscale(1) brightness(.6); transition: filter .3s var(--ease);}
.ft .track b{font-weight: 700; line-height: 1.3;}
.ft .track span{font-size: 13px; color: var(--muted);}
.ft .track li.got{border-color: rgba(242, 201, 110, .4); box-shadow: 0 0 0 1px rgba(242, 201, 110, .1) inset, 0 8px 24px rgba(217, 164, 65, .08);}
.ft .track li.got img{filter: none;}
.ft .track li.got span{color: var(--gold-hi);}
.ft .countdown{position: relative; overflow: hidden; text-align: center;
  padding: var(--s6) var(--s5); display: grid; gap: var(--s4); justify-items: center;
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(217, 164, 65, .16), transparent 70%),
    radial-gradient(420px 260px at 90% 100%, rgba(79, 127, 214, .10), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));}
.ft .cd-title{font: 700 clamp(18px, 2.6vw, 24px)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--text);}
.ft .cd-grid{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); width: min(100%, 560px);}
.ft .cd-cell{display: grid; gap: 2px; padding: var(--s4) var(--s2) var(--s3); border-radius: var(--r2);
  background: rgba(8, 10, 16, .55); border: 1px solid rgba(242, 201, 110, .18);
  box-shadow: 0 1px 0 rgba(255, 236, 196, .05) inset, 0 10px 24px rgba(0, 0, 0, .35);}
.ft .cd-cell b{display: block; font: 700 clamp(30px, 6vw, 52px)/1 var(--font-display); color: var(--gold-hi);
  text-shadow: 0 0 24px rgba(242, 201, 110, .25);}
.ft .cd-cell b.tick{animation: cd-tick .45s var(--spring);}
@keyframes cd-tick { from { transform: translateY(-6px); opacity: .35; } to { transform: none; opacity: 1; } }
.ft .cd-cell span{font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);}
.ft .cd-when{color: var(--muted); font-size: 15px; display: grid; gap: 2px;}
.ft .cd-when span{font-size: 13px; color: var(--faint);}
.ft .countdown.is-live .cd-title{font-size: clamp(24px, 4vw, 36px); color: var(--gold-hi);}
@media (max-width: 420px){.ft .cd-grid{gap: var(--s2);}
.ft .cd-cell{padding: var(--s3) 4px var(--s2);}
.ft .cd-cell span{font-size: 10px; letter-spacing: .06em;}}
@media (prefers-reduced-motion: reduce){.ft .cd-cell b.tick{animation: none;}}
.ft .roadmap-countdown{margin-bottom: var(--s5);}
.ft .page-countdown main .wrap{max-width: 760px;}
.ft .rp-scroll{overflow-x: auto; border-radius: var(--r3); box-shadow: var(--shadow-2);}
.ft .rp{--u: calc(100cqw / 800);
  --poster-font: 'Marcellus', 'Cinzel', serif;
  position: relative; aspect-ratio: 16 / 9; min-width: 760px; container-type: inline-size;
  overflow: hidden; border-radius: var(--r3); isolation: isolate; color: #fff;}
.ft .rp-sky{position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #2b3450;}
.ft .rp-sky::before{content: ''; position: absolute; inset: 0;
  background: url("/tools/forever/assets/roadmap/backdrop.webp") center 30% / cover no-repeat;
  filter: blur(calc(var(--u) * 3)) saturate(.85) brightness(.92);
  transform: scale(1.08);}
.ft .rp-sky::after{content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 16, 34, .5) 0%, rgba(18, 16, 34, .14) 32%, rgba(18, 16, 34, .08) 50%, rgba(14, 12, 26, .45) 88%, rgba(14, 12, 26, .7) 100%);}
.ft .rp-head{position: absolute; inset: 0 0 auto; height: calc(var(--u) * 120); pointer-events: none;}
.ft .rp-years, .ft .rp-word{position: absolute; top: calc(var(--u) * 50); font: 400 calc(var(--u) * 25)/1 var(--poster-font);
  letter-spacing: .16em; color: #fff; text-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(90, 40, 60, .35);}
.ft .rp-years{right: calc(var(--u) * 476);}
.ft .rp-word{left: calc(var(--u) * 476); letter-spacing: .32em;}
.ft .rp-word.is-long{font-size: calc(var(--u) * 19); top: calc(var(--u) * 54); letter-spacing: .16em;}
.ft .rp-emblem{position: absolute; left: calc(var(--u) * 342); top: calc(var(--u) * 4); width: calc(var(--u) * 116); height: auto;}
.ft .rp-band{position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 230, 190, .18) 0, rgba(255, 230, 190, .18) calc(var(--u) * .8), transparent calc(var(--u) * .8)),
    linear-gradient(180deg, #735a3d 0%, #5f4830 45%, #4a3824 100%);
  box-shadow: 0 calc(var(--u) * 1) 0 rgba(20, 12, 4, .6), 0 calc(var(--u) * -1) 0 rgba(120, 95, 60, .35) inset, 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(20, 10, 20, .35);}
.ft .rp-band span, .ft .rp-band i{position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  font: 400 calc(var(--u) * 9.5)/1 var(--poster-font); letter-spacing: .5em; color: #d8bf93;}
.ft .rp-band span{padding-left: .5em;}
.ft .rp-band i{font-style: italic; letter-spacing: 0; font-size: calc(var(--u) * 12); color: #a88a62;}
.ft .rb-logo{position: absolute; z-index: 1; max-width: none; pointer-events: none;}
.ft .rp-foot{position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 9); text-align: center; pointer-events: none;
  font: 400 calc(var(--u) * 4.6)/1.3 var(--poster-font); letter-spacing: .06em; color: rgba(255, 255, 255, .45);
  padding: 0 calc(var(--u) * 150);}
.ft .rb{position: absolute; z-index: 1; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  font-family: var(--poster-font); -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--spring), filter .25s var(--ease);}
.ft .rb::before{content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));}
.ft .rb:hover{transform: translateY(calc(var(--u) * -2)); filter: brightness(1.08);}
.ft .rb:active{transform: translateY(0) scale(.99);}
.ft .rb[aria-selected="true"], .ft .rb:focus-visible{outline: none;
  filter: drop-shadow(0 0 calc(var(--u) * 3) rgba(255, 228, 160, .95)) drop-shadow(0 0 calc(var(--u) * 10) rgba(255, 200, 110, .5));}
.ft .rb-top, .ft .rb-bottom{position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(var(--u) * 9);}
.ft .rb-top{top: 0; justify-content: center; gap: calc(var(--u) * 2.5); padding: 0 calc(var(--u) * 3) calc(var(--u) * 2);}
.ft .rb-bottom{bottom: 0; justify-content: flex-start; padding-top: calc(var(--u) * 12);}
.ft .rb-title{text-wrap: balance; font-weight: 400; letter-spacing: .03em; text-shadow: 0 0 .4px currentColor; font-size: calc(var(--u) * 12 * var(--fit, 1)); line-height: 1.05; letter-spacing: .01em;}
.ft .rb-date{font-weight: 400; font-size: calc(var(--u) * 7.2 * var(--fit, 1)); letter-spacing: .04em; opacity: .95;}
.ft .rb ul{list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 7.5 * var(--fit, 1));}
.ft .rb li{text-wrap: balance; font-weight: 400; text-shadow: 0 0 .3px currentColor; font-size: calc(var(--u) * 8.2 * var(--fit, 1)); line-height: 1.2; letter-spacing: .01em; hyphens: manual;}
.ft .rb li small{display: block; font-size: calc(var(--u) * 4.9 * var(--fit, 1)); font-weight: 400; letter-spacing: .04em; margin-top: calc(var(--u) * 1);}
.ft .rb-big{font: 400 calc(var(--u) * 19 * var(--fit, 1))/1 var(--poster-font); letter-spacing: .1em; white-space: nowrap;}
.ft .rb-blue::before{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255, 255, 255, .38) 0, rgba(255, 255, 255, .38) calc(var(--u) * .8), transparent calc(var(--u) * .8)),
    linear-gradient(90deg, rgba(0, 20, 40, .18), transparent 9%, transparent 91%, rgba(0, 20, 40, .18)),
    linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 18%),
    linear-gradient(180deg, #0c95c0 0%, #0b8cb5 34%, rgba(19, 128, 156, .9) 42%, rgba(24, 124, 150, .86) 100%);}
.ft .rb-blue .rb-bottom{padding-top: calc(var(--u) * 9);}
.ft .rb-parchment{color: #6b563d;}
.ft .rb-parchment::before{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(60% 40% at 50% 70%, rgba(120, 90, 50, .10), transparent 70%),
    linear-gradient(90deg, rgba(120, 90, 50, .14), transparent 12%, transparent 88%, rgba(120, 90, 50, .14)),
    linear-gradient(180deg, #dcb991 0%, #cfa982 25%, #bc9974 54%, #bfad8c 100%);}
.ft .rb-parchment .rb-top{justify-content: flex-end; padding-bottom: calc(var(--u) * 5);}
.ft .rb-parchment .rb-big{color: #fbf4e4; text-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(95, 65, 30, .55);}
.ft .rb-dark::before, .ft .rb-burnt::before{clip-path: polygon(0 0, 100% 0, 100% 92%, 94% 96%, 88% 93%, 80% 98%, 71% 94%, 63% 99%, 55% 95%, 47% 100%, 39% 95%, 30% 98%, 22% 94%, 13% 98%, 6% 94%, 0 97%);}
.ft .rb-dark::before{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70% 30% at 50% 78%, rgba(255, 255, 255, .05), transparent 70%),
    linear-gradient(180deg, #2c2c2c 0%, #1b1b1b 35%, #121212 100%);}
.ft .rb-burnt::before{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(90% 12% at 50% 100%, rgba(255, 110, 30, .85), rgba(160, 40, 10, .45) 45%, transparent 75%),
    linear-gradient(180deg, #0e0e0e 0%, #0b0b0b 85%, #2a0f08 100%);}
.ft .rb-burnt .rb-bottom{padding-top: calc(var(--u) * 12);}
.ft .rm-panel{margin-top: var(--s4); padding: var(--s5); display: grid; grid-template-columns: 64px 1fr; gap: var(--s4); align-content: start;}
.ft .rm-panel-icon{width: 64px; height: 64px; border-radius: var(--r2);}
.ft .rm-panel-head{display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);}
.ft .rm-panel-head h2{font-size: clamp(22px, 3vw, 28px);}
.ft .rm-panel-date{color: var(--muted); margin-top: 2px; font-size: 15px;}
.ft .rm-panel ul{margin: var(--s3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2) var(--s5);}
@media (min-width: 760px){.ft .rm-panel ul{grid-template-columns: repeat(2, minmax(0, 1fr));}}
.ft .rm-panel li{position: relative; padding-left: var(--s5); line-height: 1.5;}
.ft .rm-panel li::before{content: ''; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold);}
.ft .rm-pill{font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--muted);}
.ft .rm-pill.is-live{color: #0c1a0d; background: var(--green); border-color: transparent;}
.ft .rm-pill.is-soon{color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: transparent;}
@media (max-width: 559px){.ft .rm-panel{grid-template-columns: 1fr; padding: var(--s4);}
.ft .rm-panel-icon{width: 48px; height: 48px;}}
.ft .rb-art{position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;}
.ft .rb-art img{position: absolute; max-width: none; object-fit: cover;}
.ft .rb-parchment .rb-art{clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tip)), 50% 100%, 0 calc(100% - var(--tip)));}
.ft .rb-parchment .rb-art img{mix-blend-mode: multiply; opacity: .42; filter: blur(.45px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);}
.ft .rb-dark .rb-art{clip-path: polygon(0 0, 100% 0, 100% 92%, 94% 96%, 88% 93%, 80% 98%, 71% 94%, 63% 99%, 55% 95%, 47% 100%, 39% 95%, 30% 98%, 22% 94%, 13% 98%, 6% 94%, 0 97%);}
.ft .rb-dark .rb-art img{opacity: .9; filter: blur(.6px);}
.ft .rb-top, .ft .rb-bottom, .ft .rb-logo{z-index: 1;}
.ft .countdown.has-art{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: center;
  padding: var(--s6) 0 0 var(--s5); min-height: 340px; text-align: center;
  background:
    radial-gradient(260px 220px at 78% 55%, rgba(255, 196, 90, .28), transparent 70%),
    radial-gradient(520px 220px at 35% 0%, rgba(217, 164, 65, .14), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));}
.ft .cd-body{display: grid; gap: var(--s4); justify-items: center; padding-bottom: var(--s6);}
.ft .cd-art{grid-column: 2; grid-row: 1; align-self: end; justify-self: center;
  width: 100%; height: auto; max-height: 420px; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)) drop-shadow(0 0 40px rgba(255, 190, 90, .18));
  pointer-events: none; user-select: none;}
.ft .countdown.has-art .cd-body{grid-column: 1; grid-row: 1;}
@media (max-width: 639px){.ft .countdown.has-art{grid-template-columns: 1fr; padding: var(--s5) var(--s4) 0;}
.ft .cd-art{grid-row: 2; grid-column: 1; max-height: 240px; width: auto; margin-top: calc(var(--s4) * -1);}
.ft .cd-body{padding-bottom: 0;}}
.ft .cd-art{pointer-events: auto; cursor: default; transform-origin: 50% 100%;
  transition: transform .45s var(--spring), filter .3s var(--ease);}
.ft .cd-art:hover{transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)) drop-shadow(0 0 3px rgba(255, 228, 160, .45)) drop-shadow(0 0 11px rgba(255, 200, 110, .28));}
@media (prefers-reduced-motion: reduce){.ft .cd-art:hover{transform: none;}}
.ft .countdown, .ft .countdown *{-webkit-user-select: none; user-select: none;}
.ft .cd-art{-webkit-user-drag: none;}
.ft .roadmap-compact{display: grid; gap: var(--s3); margin-bottom: var(--s5);}
.ft .cdbar{--gold-line: #d8c69c;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center;
  gap: var(--s5) clamp(var(--s5), 4vw, var(--s8)); padding: var(--s3) var(--s6);
  border: 2px solid var(--gold-line); border-radius: 8px; color: #fff;
  background:
    radial-gradient(1px 1px at 12% 30%, rgba(160, 230, 255, .45), transparent 2px),
    radial-gradient(1px 1px at 36% 74%, rgba(160, 230, 255, .35), transparent 2px),
    radial-gradient(1px 1px at 58% 22%, rgba(160, 230, 255, .4), transparent 2px),
    radial-gradient(1px 1px at 81% 66%, rgba(160, 230, 255, .35), transparent 2px),
    radial-gradient(1px 1px at 93% 18%, rgba(160, 230, 255, .4), transparent 2px),
    radial-gradient(60% 140% at 30% 50%, rgba(20, 110, 140, .55), transparent 70%),
    linear-gradient(90deg, #06364a 0%, #073b4f 50%, #05303f 100%);
  box-shadow: 0 1px 0 rgba(255, 240, 200, .12) inset, 0 8px 24px rgba(0, 0, 0, .35);
  -webkit-user-select: none; user-select: none;}
.ft .cdbar-logo{width: 84px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); -webkit-user-drag: none;}
.ft .cdbar-timer{display: flex; gap: clamp(var(--s4), 3vw, var(--s6));}
.ft .cdbar-unit{display: grid; justify-items: center; min-width: 3.2em;}
.ft .cdbar-unit b{font: 600 26px/1.1 var(--font-body); letter-spacing: .01em; text-shadow: 0 2px 8px rgba(0, 0, 0, .35);}
.ft .cdbar-unit span{font-size: 13px; color: rgba(255, 255, 255, .85); line-height: 1.3;}
.ft .cdbar-text{display: flex; align-items: center; gap: var(--s3); font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .92);}
.ft .cdbar-text b{color: #fff; font-weight: 700;}
.ft .cdbar-emblem{flex: none; width: 28px; height: 28px; border-radius: 50%;
  background:
    linear-gradient(var(--gold-line), #b89a5e) content-box,
    radial-gradient(circle, rgba(0, 0, 0, .25), transparent 70%);
  -webkit-mask: url("/tools/forever/assets/roadmap/emblem.png") center / 92% no-repeat; mask: url("/tools/forever/assets/roadmap/emblem.png") center / 92% no-repeat;}
.ft .cdbar.is-live .cdbar-timer{display: none;}
@media (max-width: 760px){.ft .cdbar{grid-template-columns: auto minmax(0, 1fr); padding: var(--s3) var(--s4); gap: var(--s3) var(--s4);}
.ft .cdbar-logo{width: 64px;}
.ft .cdbar-timer{justify-content: space-around;}
.ft .cdbar-text{grid-column: 1 / -1; justify-content: center; text-align: center; font-size: 14px; border-top: 1px solid rgba(216, 198, 156, .25); padding-top: var(--s3);}}
@media (max-width: 380px){.ft .cdbar-unit{min-width: 2.6em;}
.ft .cdbar-unit b{font-size: 21px;}
.ft .cdbar-unit span{font-size: 11px;}}
.ft .page-countdown main .wrap:has(.cdbar){max-width: 1240px;}
.ft .race-layout{display: grid; gap: var(--s5); grid-template-columns: 260px 1fr; align-items: stretch;}
.ft .race-card{align-content: start;}
.ft .race-menu{display: grid; gap: var(--s2);}
.ft .race-menu h3{font: 700 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fc); filter: brightness(1.35); margin: var(--s2) 0 0;}
.ft .race-menu h3:first-child{margin-top: 0;}
.ft .race-item{display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 50px; padding: var(--s1) var(--s3) var(--s1) var(--s1);
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-1); color: var(--muted);
  font: 600 16px var(--font-body); text-align: left; cursor: pointer; box-shadow: var(--shadow-1);
  -webkit-user-select: none; user-select: none;
  transition: transform .25s var(--spring), border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);}
.ft .race-thumb{flex: none; width: 42px; height: 42px; border-radius: var(--r1); overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--fc) 45%, #1a1f2b), #0d1017 75%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset;}
.ft .race-thumb img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.35); transform-origin: 50% 20%;}
.ft .race-thumb.is-icon img{transform: none; object-position: center;}
.ft .race-item:hover{color: var(--text); border-color: var(--line-strong); background: var(--surface-2);}
.ft .race-item:active{transform: scale(.98);}
.ft .race-item[aria-current="true"]{color: var(--text); border-color: var(--fc);
  background: color-mix(in srgb, var(--fc) 14%, var(--surface-1));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fc) 40%, transparent) inset, var(--shadow-2);}
.ft [data-faction="Horde"]{--fc: var(--horde);}
.ft [data-faction="Alliance"]{--fc: var(--alliance);}
.ft .race-card{display: grid; gap: var(--s5); padding: var(--s5); grid-template-columns: 160px 1fr;
  position: relative; overflow: hidden;}
.ft .race-card::before{content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 260px at 0% 0%, color-mix(in srgb, var(--fc) 16%, transparent), transparent 70%);}
.ft .race-portrait{width: 160px; height: 182px; border-radius: var(--r3); overflow: hidden; position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  background:
    radial-gradient(120px 110px at 50% 38%, color-mix(in srgb, var(--fc) 55%, transparent), transparent 75%),
    linear-gradient(180deg, #1b2130, #0c0f16);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-2);}
.ft .race-portrait img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;}
.ft .race-portrait::after{content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(11,13,18,.55), transparent 35%);}
.ft .race-portrait.is-icon{flex-direction: column; justify-content: center; gap: var(--s3); text-align: center;}
.ft .race-portrait.is-icon img{width: 72px; height: 72px; object-fit: contain; border-radius: var(--r2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc) 60%, transparent), 0 0 28px color-mix(in srgb, var(--fc) 45%, transparent);}
.ft .race-portrait.is-icon span{font-size: 11px; line-height: 1.3; color: var(--muted); padding: 0 var(--s3); position: relative; z-index: 1;}
.ft .race-main{display: grid; gap: var(--s5); min-width: 0; position: relative;}
.ft .race-title h2{font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.03em;}
.ft .race-title .fac{font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fc); filter: brightness(1.35);}
.ft .race-cols{display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start;}
.ft .race-cols h3{font: 700 15px var(--font-body); color: var(--muted); margin-bottom: var(--s3);}
.ft .race-side{display: grid; gap: var(--s5);}
.ft .abilities{list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4);}
.ft .abilities li{display: grid; grid-template-columns: 36px 1fr; gap: var(--s3); align-items: start;}
.ft .abilities img{width: 36px; height: 36px;}
.ft .abilities b, .ft .abilities .ab-name{display: block; font-weight: 700; line-height: 1.3; color: var(--text); width: fit-content;}
.ft .abilities .ab-name{text-decoration: underline; text-decoration-color: rgba(242, 201, 110, .3); text-underline-offset: 3px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease);}
.ft .abilities .ab-name:hover{color: var(--gold-hi); text-decoration-color: currentColor;}
.ft .abilities .ab-name:active{opacity: .8;}
.ft .ab-icon{display: block; border-radius: var(--r1); transition: transform .25s var(--spring);}
.ft a.ab-icon:hover{transform: scale(1.06);}
.ft a.ab-icon:active{transform: scale(.96);}
.ft .abilities span{display: block; color: var(--muted); font-size: 14px; line-height: 1.55;}
.ft .cls-chips{display: flex; flex-wrap: wrap; gap: var(--s2);}
.ft .cls-chip{display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s3) 0 var(--s2);
  border-radius: var(--r1); border: 1px solid var(--line); background: var(--surface-2);
  font-weight: 600; font-size: 14px; color: var(--c);}
.ft .cls-chip img{width: 22px; height: 22px; border-radius: 4px;}
.ft .cls-chip .new{font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--gold-ink); background: var(--gold-hi); border-radius: 4px; padding: 1px 5px;}
.ft .whats-new{padding: var(--s4); border-radius: var(--r2);
  border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent);
  background: color-mix(in srgb, var(--fc) 9%, var(--surface-1));}
.ft .whats-new h3{color: var(--text); margin-bottom: var(--s2);}
.ft .whats-new p{color: var(--muted); font-size: 15px; line-height: 1.6;}
.ft .whats-new p + p{margin-top: var(--s2);}
.ft .class-spells{border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-2);}
.ft .class-spells summary{display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); cursor: pointer; list-style: none;
  font-weight: 700; font-size: 15px; border-radius: var(--r2); -webkit-user-select: none; user-select: none;
  transition: background-color .2s var(--ease);}
.ft .class-spells summary::-webkit-details-marker{display: none;}
.ft .class-spells summary img{width: 22px; height: 22px; border-radius: 4px;}
.ft .class-spells summary .num{margin-left: auto; color: var(--muted); font-weight: 600; font-size: 13px;}
.ft .class-spells summary::after{content: ''; width: 7px; height: 7px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -4px 2px 0 var(--s2); transition: transform .3s var(--spring);}
.ft .class-spells[open] summary::after{transform: rotate(-135deg); margin-top: 4px;}
.ft .class-spells summary:hover{background: var(--surface-3);}
.ft .class-spells summary:focus-visible{outline: 2px solid var(--gold-hi); outline-offset: 2px;}
.ft .class-spells > p{color: var(--faint); font-size: 13px; padding: 0 var(--s4); margin-bottom: var(--s3);}
.ft .class-spells .abilities{padding: 0 var(--s4) var(--s4);}
.ft .matrix-wrap{margin-top: var(--s5); padding: var(--s5);}
.ft .matrix-scroll{overflow-x: auto; margin-top: var(--s3);}
.ft .matrix{border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px;}
.ft .matrix th, .ft .matrix td{padding: var(--s2); text-align: center; border-bottom: 1px solid var(--line);}
.ft .matrix thead th{color: var(--muted); font-weight: 600;}
.ft .matrix thead img{width: 26px; height: 26px; margin: 0 auto 2px; border-radius: 6px;}
.ft .matrix tbody th{text-align: left; white-space: nowrap; font-weight: 600;}
.ft .matrix tbody th i{display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--s2); background: var(--fc);}
.ft .matrix tbody tr{cursor: pointer; transition: background-color .15s var(--ease);}
.ft .matrix tbody tr:hover{background: var(--surface-2);}
.ft .matrix tbody tr[aria-current="true"]{background: rgba(217, 164, 65, .08);}
.ft .matrix .yes{color: var(--gold-hi); font-weight: 700;}
.ft .matrix .yes.new{color: var(--green);}
.ft .matrix .no{color: var(--faint);}
.ft .matrix tfoot td{color: var(--muted); font-weight: 700;}
.ft .matrix-note{margin-top: var(--s3); font-size: 13px; color: var(--faint);}
.ft .matrix-note b{color: var(--green);}
@media (max-width: 859px){.ft .race-layout{grid-template-columns: 1fr; gap: var(--s4);}
.ft .race-menu{display: flex; overflow-x: auto; scrollbar-width: none; gap: var(--s2); padding-bottom: 2px;}
.ft .race-menu::-webkit-scrollbar{display: none;}
.ft .race-menu h3{display: none;}
.ft .race-item{flex: none; width: auto; min-height: 44px; font-size: 15px;}
.ft .race-thumb{width: 34px; height: 34px;}
.ft .race-cols{grid-template-columns: 1fr;}}
@media (max-width: 559px){.ft .race-card{grid-template-columns: 1fr; padding: var(--s4);}
.ft .race-portrait{width: 120px; height: 137px;}}
.ft .ab-title{display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;}
.ft .abilities .badge-new{display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 5px;
  font: 800 10px/1 var(--font-body); letter-spacing: .1em; color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 8px rgba(217,164,65,.3);}
.ft .ab-variants{display: inline-flex !important; align-items: center; gap: 4px; margin-left: 2px;}
.ft .ab-variants > span{margin-right: 2px;}
.ft .ab-variant{display: block; border-radius: 5px; transition: transform .25s var(--spring), box-shadow .2s var(--ease);}
.ft .ab-variant img{width: 22px; height: 22px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0,0,0,.6);}
.ft .ab-variant:hover{transform: translateY(-2px) scale(1.08); box-shadow: 0 0 0 2px var(--gold-hi);}
.ft .ab-variant:active{transform: scale(.94);}
.ft .ab-body{display: grid; gap: 6px; min-width: 0;}
.ft .ab-meta{display: flex; flex-wrap: wrap; gap: 4px;}
.ft .ab-meta i{font-style: normal; font-size: 12px; font-weight: 600; line-height: 20px; padding: 0 7px;
  border-radius: 5px; background: var(--surface-3); color: var(--muted); border: 1px solid var(--line);}
.ft .ab-text{font-size: 14.5px; line-height: 1.55; color: #cfc8b8;}
.ft .ab-classic{font-size: 13px; line-height: 1.5; color: var(--faint);}
.ft .abilities .badge-changed{display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 5px;
  font: 800 10px/1 var(--font-body); letter-spacing: .1em; color: var(--gold-hi);
  border: 1px solid rgba(242, 201, 110, .45);}
.ft .abilities li{align-items: start;}
.ft .race-portrait.is-shot img{transform: scale(1.3); transform-origin: 50% 12%;}
.ft .race-thumb.is-shot img{transform: scale(2.1); transform-origin: 48% 26%;}
.ft .race-lore{max-width: 68ch; margin-top: calc(var(--s3) * -1); color: #cfc8b8; font-size: 15.5px; line-height: 1.65; font-style: italic;}
.ft .abilities{gap: var(--s3);}
.ft .abilities li{grid-template-columns: 36px 1fr; align-items: center;}
.ft .abilities li .ab-text{grid-column: 2; margin-top: -6px; font-size: 14px; color: var(--muted);}
.ft .ab-group{display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0 var(--s3);
  font: 700 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);}
.ft .ab-group img{width: 18px; height: 18px; border-radius: 4px;}
.ft .ab-group::after{content: ''; flex: 1; height: 1px; background: var(--line);}
.ft, .tip, .toast{--font-display: Cinzel, 'Times New Roman', serif; --font-body: Inter, system-ui, sans-serif;}
.ft{padding:0;margin:24px 0;min-width:0;min-height:0;background:none}.ft .wrap{padding:0;max-width:none}
.ft .page-head,.ft .roadmap-compact,.ft #fromChallenges,.ft .hide-in-embed:not(.countdown):not(.matrix-wrap){display:none}
.ft .btn{color:var(--text)!important}.ft .btn-gold{color:var(--gold-ink)!important}.ft .btn:hover{opacity:1;transform:none}.ft .btn:active{transform:scale(.96)}