/* The approved frost artwork stays visible through the site. Load after shell CSS. */
:root{--glass-surface:rgba(3,16,30,.38);--glass-line:rgba(152,221,250,.15);--glass-hover:rgba(145,227,255,.44)}
body{background-image:linear-gradient(180deg,rgba(3,9,17,.16),rgba(3,10,18,.14) 44%,rgba(3,10,18,.4)),radial-gradient(ellipse at 50% 14%,rgba(26,159,255,.12),transparent 62%),url("../img/season22-part2-background-v2.png");background-size:cover,cover,cover;background-position:center,center,center 38%;background-attachment:fixed,fixed,fixed}
.site-frame{padding:8px;background:rgba(3,14,26,.09);border:1px solid rgba(154,223,251,.17);box-shadow:0 20px 70px rgba(0,5,15,.19);border-radius:18px}
.site-frame:before{width:26px;height:26px;top:-10px;font-size:15px;border-color:rgba(190,240,255,.32);background:rgba(12,68,98,.44);box-shadow:0 0 18px rgba(45,191,255,.21)}
.topbar{position:relative;background:rgba(3,16,30,.38);border:0;border-bottom:1px solid rgba(157,226,255,.19);box-shadow:0 10px 35px rgba(0,7,20,.11);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:13px;overflow:hidden}
.topbar:after{content:"";position:absolute;bottom:0;left:-130px;width:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(173,238,255,.65),#edfbff,rgba(88,202,255,.6),transparent);box-shadow:0 0 9px rgba(47,188,255,.6);animation:glassEdgeTravel 12s ease-in-out infinite;pointer-events:none}
.site-frame .nav a{border:1px solid transparent;background:rgba(6,25,42,.16);box-shadow:none;text-shadow:0 1px 6px #00101f;transition:color .2s,background .2s,transform .2s,border-color .2s}
.site-frame .nav a:before{border:0;box-shadow:none}
.site-frame .nav a:hover,.site-frame .nav a.active{border-color:rgba(144,223,252,.18);background:linear-gradient(180deg,rgba(36,122,161,.26),rgba(5,28,48,.15));box-shadow:0 0 17px rgba(20,171,239,.09);color:#f0fbff;text-shadow:0 0 10px rgba(62,186,247,.4);transform:translateY(-1px)}
.site-frame .nav a.active:after{height:1px;left:29%;right:29%;bottom:5px;box-shadow:0 0 8px rgba(84,210,255,.75);opacity:.8}
.auth-nav a{background:rgba(10,42,63,.24);border-color:rgba(147,215,243,.2);box-shadow:none}
.auth-nav a:hover{background:rgba(24,86,118,.37);border-color:rgba(161,231,255,.4);box-shadow:0 0 15px rgba(39,176,235,.13)}
.auth-nav .register-link{background:linear-gradient(115deg,rgba(119,94,36,.18),rgba(10,42,63,.25));border-color:rgba(228,198,117,.32);color:#ffe7b3}
.rank-directory{background:rgba(3,16,30,.3);border:0;border-bottom:1px solid rgba(136,209,240,.12);box-shadow:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.rank-directory summary{color:#c5e5f6;text-shadow:0 1px 6px #00121f}.rank-directory summary span{color:#a6c5d7}
.site-frame .realm-ranking-tabs a,.site-frame .cms-content .rankings-menu a{border-color:transparent;background:rgba(4,20,35,.25);box-shadow:none}
.site-frame .realm-ranking-tabs a:hover,.site-frame .realm-ranking-tabs a[aria-current],.site-frame .cms-content .rankings-menu a:hover{border-color:rgba(154,226,250,.3);background:rgba(30,104,141,.28);box-shadow:0 0 14px rgba(27,170,228,.1)}
/* Keep the hero unblurred: the illustration is already behind the full page. */
.site-frame .hero{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden}
.site-frame .hero:before{inset:auto;left:7%;right:auto;bottom:0;width:21%;height:1px;border:0;border-radius:0;box-shadow:0 0 12px rgba(61,187,242,.25);background:linear-gradient(90deg,transparent,rgba(143,225,255,.53),transparent);animation:glassHeroEdge 7s ease-in-out infinite}
.site-frame .hero:after{display:none}
.site-frame .hero-copy{background:linear-gradient(90deg,rgba(2,11,22,.54),rgba(3,13,24,.2) 70%,transparent);border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:16px;padding-top:24px;padding-bottom:24px;text-shadow:0 2px 8px #000b,0 0 24px #001126}
.hero-copy .eyebrow,.hero-copy .tagline{text-shadow:0 2px 6px #000,0 0 16px #071a2c}
.hero-copy p{color:#d3e5ef;text-shadow:0 1px 6px #000,0 0 14px #03101e;line-height:1.65}
.hero-copy p strong{color:#f0faff}
.site-frame .play-button{border-color:rgba(178,236,255,.66);box-shadow:inset 0 1px rgba(232,251,255,.52),inset 0 -2px rgba(0,12,24,.6),0 0 20px rgba(15,171,245,.23);background:linear-gradient(145deg,rgba(90,202,247,.88),rgba(5,93,141,.91) 24%,rgba(6,37,67,.94) 70%,rgba(13,92,132,.86))}
.site-frame .play-button:hover{box-shadow:inset 0 1px rgba(255,255,255,.65),0 0 29px rgba(40,183,248,.38)}
.hero-client-sigil:before{background:radial-gradient(circle,rgba(3,19,34,.54),rgba(3,21,38,.38) 48%,rgba(8,81,120,.08) 69%,transparent 71%);box-shadow:0 0 45px rgba(16,158,225,.09)}
.hero-client-sigil:after{border-color:rgba(173,235,255,.11);box-shadow:inset 0 0 28px rgba(0,153,255,.06),0 0 16px rgba(22,186,255,.08)}
.hero-client-links a{background:rgba(3,16,30,.34);border-color:rgba(133,212,242,.17);box-shadow:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hero-client-links a:hover,.hero-client-links a:focus-visible{background:rgba(14,65,94,.45);border-color:rgba(151,227,252,.43);box-shadow:0 0 16px rgba(30,179,240,.13)}
/* A shared glass layer replaces the repeated metallic boxes and inset outlines. */
.site-frame .stats,.site-frame .content-grid{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-frame .stat,.site-frame .content-card,.site-frame .guides-strip,.site-frame .cms-content{background:var(--glass-surface);border:1px solid transparent;box-shadow:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.site-frame .stat{position:relative;border-radius:11px;min-height:78px;background:rgba(3,16,30,.34)}
.site-frame .stat:after{content:"";position:absolute;right:-8px;top:23%;height:54%;width:1px;background:linear-gradient(transparent,rgba(169,226,248,.22),transparent);pointer-events:none}.site-frame .stat:last-child:after{display:none}
.site-frame .stat:hover,.site-frame .content-card:hover,.site-frame .guides-strip:hover{background:rgba(4,24,42,.42);border-color:rgba(150,219,246,.2);box-shadow:0 10px 30px rgba(0,6,18,.13);transform:translateY(-2px)}
.site-frame .content-card:before{display:none}
.site-frame .card-head{background:rgba(8,38,60,.2);border-bottom:1px solid rgba(149,217,245,.12);text-shadow:0 1px 8px #00101f;color:#d2effc}
.site-frame .stat-icon{background:radial-gradient(circle,rgba(42,157,210,.3),rgba(6,38,62,.45) 70%);border-color:rgba(132,219,249,.3);box-shadow:0 0 17px rgba(17,166,229,.16);transform:none}
.site-frame .stat strong{color:#a2f4dc;text-shadow:0 0 13px rgba(39,213,163,.35)}
.site-frame .stat label,.site-frame .row-copy strong,.site-frame .empty-state strong{text-shadow:0 1px 7px #000b}
.site-frame .stat small,.site-frame .row-copy small,.site-frame .empty-state,.site-frame .guides-strip p{color:#afc5d5;text-shadow:0 1px 5px #0009}
.site-frame .thumb{border-color:rgba(170,225,247,.23);box-shadow:none}
.site-frame .list-row{border-bottom-color:rgba(149,213,240,.13)}
.site-frame .list-row:hover{background:rgba(33,104,139,.12)}
.site-frame .guide-link{background:rgba(11,63,92,.45);border:1px solid rgba(144,220,246,.3);box-shadow:none}
.site-frame .guide-link:hover{border-color:rgba(171,238,255,.57);box-shadow:0 0 17px rgba(20,171,229,.18)}
.site-frame .footer{background:rgba(3,16,30,.29);border:0;border-top:1px solid rgba(149,219,247,.13);box-shadow:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#b3ccdc}
.site-frame .frost-lit{background-image:none!important;background-color:rgba(3,16,30,.42)!important;border-color:rgba(151,224,252,.26)!important;box-shadow:0 0 23px rgba(26,168,235,.1),0 14px 34px rgba(0,5,18,.12)!important}
.site-frame .cms-content{background:rgba(3,16,30,.44);border-color:rgba(143,212,242,.13);box-shadow:0 15px 45px rgba(0,6,18,.12)}
.site-frame .cms-content .page-title{border-bottom-color:rgba(143,211,239,.16)}
.site-frame .cms-content .panel,.site-frame .cms-content .well,.site-frame .cms-content .panel-body{background:rgba(3,18,32,.35);border-color:rgba(149,214,243,.13);box-shadow:none}
.site-frame .cms-content .panel-heading,.site-frame .cms-content .panel-footer{background:rgba(23,67,94,.24);border-color:rgba(149,214,243,.15)}
.site-frame .cms-content input,.site-frame .cms-content select,.site-frame .cms-content textarea{background:rgba(3,19,34,.74);border-color:rgba(147,211,239,.27);box-shadow:none;color:#e6f3fb}
.site-frame .cms-content input:focus,.site-frame .cms-content select:focus,.site-frame .cms-content textarea:focus{background:rgba(4,25,42,.83);border-color:rgba(157,229,254,.64);box-shadow:0 0 0 3px rgba(60,183,232,.1)}
.site-frame .cms-content .btn{border-color:rgba(139,213,241,.35);background:linear-gradient(150deg,rgba(37,109,146,.61),rgba(4,34,58,.77));box-shadow:inset 0 1px rgba(196,239,255,.14)}
.site-frame .cms-content .btn:hover{border-color:rgba(174,234,255,.67);background:rgba(32,112,152,.63);box-shadow:0 0 17px rgba(21,174,231,.16)}
.site-frame .cms-content .table,.site-frame .realm-ranking-table{background:rgba(3,17,31,.4);border-radius:10px;overflow:hidden;color:#d9eaf5}
.site-frame .realm-ranking-table th,.site-frame .cms-content .table>tbody>tr:first-child{background:rgba(20,62,89,.44)}
.site-frame .realm-ranking-table th,.site-frame .realm-ranking-table td,.site-frame .cms-content .table>tbody>tr>td,.site-frame .cms-content .table>tbody>tr>th{border-bottom-color:rgba(156,215,241,.13)}
.site-frame .realm-ranking-table tr:hover,.site-frame .cms-content .table>tbody>tr:hover{background:rgba(28,101,137,.16)}
.site-frame .rank-medal{background:rgba(8,38,59,.3)}
.site-frame .rank-1{background:rgba(139,109,42,.22);box-shadow:none}.site-frame .rank-2{background:rgba(125,156,176,.16)}.site-frame .rank-3{background:rgba(136,89,48,.18)}
.auth-page .site-frame .cms-content{background:rgba(3,16,30,.57);border-color:rgba(161,224,247,.22);box-shadow:0 25px 65px rgba(0,6,18,.2);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.site-frame .download-steps{background:rgba(3,18,32,.3);border-color:rgba(145,217,245,.16);box-shadow:none}
.site-frame .download-art{border-color:rgba(145,217,245,.25)}
/* Module CSS is linked inside the document; these selectors intentionally outrank it. */
.cms-content .field-guide .fg-heading{background:radial-gradient(ellipse at 50% 0,rgba(39,142,194,.12),transparent 65%);border-bottom-color:rgba(155,218,243,.15)}
.cms-content .field-guide .fg-facts>span{background:rgba(3,18,32,.28);border-color:rgba(152,217,244,.16)}
.cms-content .field-guide .fg-nav a{background:transparent;border-color:transparent}
.cms-content .field-guide .fg-nav a:hover{background:rgba(28,102,139,.18);border-color:rgba(148,222,250,.19)}
.cms-content .field-guide .fg-nav a[aria-current=page]{background:rgba(21,82,118,.25);border-color:transparent;box-shadow:inset 2px 0 rgba(139,226,255,.8)}
.cms-content .field-guide .fg-pane-heading{border-bottom-color:rgba(149,215,241,.15)}
.cms-content .field-guide .fg-start-steps article,.cms-content .field-guide .fg-feature-grid>a,.cms-content .field-guide .fg-two-cards article,.cms-content .field-guide .fg-pair-grid article,.cms-content .field-guide .fg-world-grid article,.cms-content .field-guide .fg-pvp-grid article,.cms-content .field-guide .fg-raid-grid article,.cms-content .field-guide .fg-command-list article,.cms-content .field-guide .fg-stat-grid article{background:rgba(3,16,30,.32);border-color:rgba(151,220,245,.1);box-shadow:none}
.cms-content .field-guide .fg-feature-grid>a:hover,.cms-content .field-guide .fg-command-list article:hover,.cms-content .field-guide .fg-pvp-grid article:hover,.cms-content .field-guide .fg-raid-grid article:hover{background:rgba(9,45,68,.36);border-color:rgba(166,228,251,.25);box-shadow:0 8px 28px rgba(0,8,22,.12)}
.cms-content .field-guide .fg-start-steps article:before,.cms-content .field-guide .fg-raid-grid article:before,.cms-content .field-guide .fg-pvp-grid article:before{opacity:.25}
.cms-content .field-guide .fg-keyboard button{background:rgba(4,28,47,.47);border-color:rgba(141,209,238,.21);box-shadow:inset 0 -2px rgba(2,14,25,.55)}
.cms-content .field-guide .fg-keyboard button[aria-selected=true]{background:linear-gradient(rgba(34,116,158,.45),rgba(6,37,62,.58));border-color:rgba(156,226,252,.58);box-shadow:0 0 14px rgba(29,178,235,.15),inset 0 -2px rgba(2,15,27,.5)}
.cms-content .field-guide .fg-ui-illustration{background:radial-gradient(ellipse at 50% 0,rgba(28,110,155,.22),transparent 70%),rgba(3,18,33,.42);border-color:rgba(144,217,242,.36);box-shadow:0 0 25px rgba(22,157,223,.08)}
.cms-content .field-guide .fg-ui-chip{background:rgba(15,68,99,.33);border-color:rgba(130,212,244,.29);box-shadow:none}
.cms-content .field-guide .fg-callout{background:rgba(5,32,52,.34);border-top-color:transparent;border-bottom-color:transparent;border-left-color:rgba(137,224,253,.62)}
.cms-content .field-guide .fg-quest-flow,.cms-content .field-guide .fg-accordion,.cms-content .field-guide .fg-invasion,.cms-content .field-guide .fg-spawn-list>span,.cms-content .field-guide .fg-times>span{background:rgba(3,18,32,.31);border-color:rgba(149,216,242,.15);box-shadow:none}
.cms-content .field-guide .fg-invasion[open],.cms-content .field-guide .fg-accordion[open]{border-color:rgba(153,224,248,.3)}
.cms-content .field-guide .fg-invasion>div{background:rgba(3,18,32,.25);border-top-color:rgba(151,215,240,.12)}
.cms-content .field-guide .fg-invasion summary:hover{background:rgba(28,102,139,.13)}
.cms-content .field-guide .fg-table-wrap{border-color:rgba(149,217,245,.14)}
.cms-content .field-guide .fg-table{background:rgba(3,17,31,.56)}
.cms-content .field-guide .fg-table caption{background:rgba(18,57,83,.55)}
.cms-content .field-guide .fg-table th{background:rgba(8,32,52,.56);border-bottom-color:rgba(156,217,244,.18)}
.cms-content .field-guide .fg-table td{border-bottom-color:rgba(147,209,239,.12)}
.cms-content .field-guide .fg-table tr:nth-child(even){background:rgba(34,86,113,.1)}
.cms-content .field-guide .fg-icewind,.cms-content .field-guide .fg-performance-hero{background:radial-gradient(at 0 0,rgba(36,126,174,.13),transparent 70%),rgba(3,18,32,.38);border-color:rgba(150,221,245,.24);box-shadow:none}
.cms-content .field-guide .fg-skin-grid article{background:radial-gradient(ellipse at 50% 40%,rgba(31,112,154,.2),transparent 70%),rgba(3,17,30,.3);border-color:rgba(144,213,241,.12)}
.cms-content .field-guide .fg-skin-grid article:hover{background-color:rgba(8,36,56,.48);border-color:rgba(158,229,253,.34)}
.cms-content .field-guide .fg-search input,.cms-content .field-guide .fg-select select{background:rgba(3,19,34,.72);border-color:rgba(145,215,241,.28);box-shadow:none}
.cms-content .account-command-center .account-wallet article,.cms-content .account-command-center .account-section,.cms-content .account-command-center .account-shortcuts a,.cms-content .account-command-center .account-character{background:rgba(3,16,30,.31);border-color:rgba(145,213,240,.13);box-shadow:none}
.cms-content .account-command-center .account-shortcuts a:hover,.cms-content .account-command-center .account-character:hover{background:rgba(9,44,66,.38);border-color:rgba(152,226,249,.31);box-shadow:0 7px 24px rgba(4,13,25,.13)}
.cms-content .account-command-center .account-presence{background:rgba(11,53,76,.3);border-color:rgba(136,219,243,.2)}
.cms-content .account-command-center .account-section h2 small{border-color:rgba(141,211,241,.2);background:rgba(8,33,54,.23)}
.cms-content .account-command-center .account-section dl>div{border-bottom-color:rgba(147,215,241,.13)}
/* Keep long forms and guides legible while the surrounding artwork stays clear. */
.site-frame .cms-content{background:linear-gradient(115deg,rgba(3,16,30,.69),rgba(3,16,30,.58));backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border-color:transparent}
.auth-page .site-frame .cms-content{background:linear-gradient(115deg,rgba(3,16,30,.72),rgba(3,16,30,.59));backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.site-frame .cms-content .field-guide p,.site-frame .cms-content .field-guide li{font-size:13px;line-height:1.8;color:#c7dce8}
.site-frame .cms-content .field-guide .fg-nav{background:rgba(3,16,30,.18);border-radius:13px}
.site-frame .cms-content .field-guide .fg-pane-heading p{max-width:740px;color:#c5dbe9}
/* The moving highlights are fine lines, never a new frame around every card. */
.frost-ambience{opacity:.68}.ice-particles{opacity:.6}.spark-bolts{opacity:.74}
@keyframes glassEdgeTravel{0%,56%{left:-130px;opacity:0}60%{opacity:.9}80%{left:calc(100% + 130px);opacity:.9}81%,100%{left:calc(100% + 130px);opacity:0}}
@keyframes glassHeroEdge{0%,100%{opacity:.25;transform:scaleX(.65);transform-origin:left}45%{opacity:.8;transform:scaleX(1);transform-origin:left}55%{opacity:.5}}
@media(max-width:800px){.site-frame .hero-copy{background:linear-gradient(90deg,rgba(2,11,22,.56),rgba(3,13,24,.28) 76%,transparent)}.site-frame .cms-content{background:rgba(3,16,30,.53)}.site-frame .content-card{background:rgba(3,16,30,.43)}}
@media(max-width:650px){body{background-image:linear-gradient(180deg,rgba(3,9,17,.16),rgba(3,10,18,.17) 44%,rgba(3,10,18,.43)),radial-gradient(ellipse at 50% 14%,rgba(26,159,255,.1),transparent 62%),url("../img/season22-part2-background-v2.png");background-position:center,center,58% top}.site-frame{padding:4px;border-color:rgba(156,224,249,.13);background:rgba(3,14,26,.06)}.site-frame .topbar{background:rgba(3,16,30,.44)}.site-frame .stat{background:rgba(3,16,30,.42)}.site-frame .stat:after{width:auto;height:1px;left:18%;right:18%;top:auto;bottom:-5px;background:linear-gradient(90deg,transparent,rgba(169,226,248,.16),transparent)}.site-frame .hero-copy{background:linear-gradient(90deg,rgba(2,11,22,.61),rgba(3,13,24,.25) 85%,transparent);padding-right:15px}.site-frame .hero-copy p{max-width:350px}.site-frame .guides-strip{background:rgba(3,16,30,.44)}.auth-page .site-frame .cms-content{background:rgba(3,16,30,.64)}.cms-content .field-guide .fg-nav a[aria-current=page]{box-shadow:inset 0 -2px rgba(139,226,255,.75)}.cms-content .field-guide .fg-command-list article,.cms-content .field-guide .fg-start-steps article,.cms-content .field-guide .fg-pvp-grid article,.cms-content .field-guide .fg-raid-grid article{background:rgba(3,16,30,.38)}}
@media(prefers-reduced-motion:reduce){.topbar:after,.site-frame .hero:before{animation:none}.topbar:after{left:12%;opacity:.4}.site-frame .hero:before{opacity:.45;transform:none}.site-frame .nav a,.site-frame .content-card,.site-frame .stat{transition:none}}

/* Stable dark reading surfaces: no pointer-following light on content. */
:root{--glass-surface:rgba(3,13,25,.74)}
body{background-image:linear-gradient(180deg,rgba(2,8,17,.32),rgba(2,8,17,.35) 44%,rgba(2,8,17,.53)),radial-gradient(ellipse at 50% 14%,rgba(26,159,255,.08),transparent 62%),url("../img/season22-part2-background-v2.png")}
.site-frame .cms-content,.site-frame .cms-content.frost-lit{background:rgba(3,13,25,.79)!important;border-color:rgba(143,212,242,.13)!important;box-shadow:0 15px 45px rgba(0,6,18,.12)!important}
.site-frame .content-card,.site-frame .content-card:hover,.site-frame .content-card.frost-lit,.site-frame .guides-strip,.site-frame .guides-strip:hover,.site-frame .guides-strip.frost-lit{background:rgba(3,13,25,.74)!important;box-shadow:none!important;transform:none}
.site-frame .stat,.site-frame .stat:hover,.site-frame .stat.frost-lit{background:rgba(3,13,25,.72)!important;box-shadow:none!important;transform:none}
.site-frame .hero-copy{background:linear-gradient(90deg,rgba(2,10,20,.78),rgba(3,13,24,.48) 70%,transparent)}
.site-frame :is(.account-section,.account-character,.account-wallet article){background-color:rgba(2,12,24,.35)}

.site-frame .systems-expanded h2{font:800 11px/1.6 "Segoe UI",sans-serif;letter-spacing:.1em;margin:0;padding:15px 18px;color:#e4f5ff;display:flex;justify-content:space-between;gap:16px}.systems-expanded h2 span{font-size:10px;font-weight:500;letter-spacing:0;color:#c3dce9}.site-frame .systems-expanded .realm-ranking-tabs{display:flex;flex-wrap:wrap}.systems-expanded{min-width:0}