html:not(.has-js) #pw-preloader, html.pw-preloader-seen #pw-preloader { display: none; }

:root {
    color-scheme: dark;
    --pw-ink: #0b0b0d;
    --pw-panel: #111114;
    --pw-panel-soft: #17171b;
    --pw-paper: #f3eee7;
    --pw-muted: #a29ba0;
    --pw-line: rgba(243, 238, 231, .13);
    --pw-red: #c84351;
    --pw-red-light: #e1646d;
    --pw-gold: #c6a875;
    --pw-serif: 'Forum', Georgia, serif;
    --pw-sans: 'Hanken Grotesk', sans-serif;
    --pw-mono: 'Spline Sans Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body.pw-site { margin: 0; background: var(--pw-ink); color: var(--pw-paper); font: 16px/1.55 var(--pw-sans); -webkit-font-smoothing: antialiased; }
body.pw-site::selection { background: var(--pw-red); color: white; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--pw-gold); outline-offset: 4px; }
img { display: block; max-width: 100%; }
.pw-container { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }

/* Preloader: the app name is written in from left to right, a gold line fills once, then the
   whole cover lifts away like a curtain to reveal the hero underneath. */
#pw-preloader { position: fixed; z-index: 1000; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; background: radial-gradient(ellipse at 50% 120%, rgba(130,39,63,.32), transparent 60%), var(--pw-ink); transition: transform .8s cubic-bezier(.7,0,.2,1), visibility 0s linear .8s; }
#pw-preloader::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--pw-gold); content: ''; opacity: .5; }
#pw-preloader.is-done { transform: translateY(-100%); visibility: hidden; }
.pw-loader-mark { max-width: calc(100vw - 40px); color: var(--pw-paper); font: clamp(36px, 8vw, 72px)/1.1 var(--pw-serif); letter-spacing: -.02em; text-align: center; animation: pw-loader-write .7s cubic-bezier(.2,.7,.2,1) .1s both; }
.pw-loader-line { width: 120px; height: 1px; overflow: hidden; background: var(--pw-line); }
.pw-loader-line::after { display: block; width: 100%; height: 100%; background: var(--pw-red-light); content: ''; transform-origin: left; animation: pw-loader-fill .9s cubic-bezier(.4,0,.2,1) .15s both; }
@keyframes pw-loader-write { from { clip-path: inset(0 100% 0 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes pw-loader-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Reduced motion: the site-wide rule near the end of this file already cuts every animation and transition short. */
@media (prefers-reduced-motion: reduce) { #pw-preloader.is-done { transform: none; opacity: 0; } }

.pw-header { position: absolute; z-index: 20; inset: 0 0 auto; color: white; }
.pw-header-inner { display: flex; min-height: 92px; align-items: center; justify-content: space-between; width: min(1360px, calc(100% - 80px)); margin-inline: auto; border-bottom: 1px solid rgba(255,255,255,.2); }
.pw-brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.pw-brand img { width: 38px; height: 38px; object-fit: contain; }
.pw-brand span { display: grid; line-height: 1.08; }
.pw-brand strong { font-size: 15px; letter-spacing: .18em; }
.pw-brand small { margin-top: 5px; color: rgba(255,255,255,.66); font: 9px/1 var(--pw-mono); letter-spacing: .2em; }
.pw-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 46px); margin-left: 5vw; }
.pw-nav a, .pw-login { color: rgba(255,255,255,.78); font-size: 13px; transition: color .2s ease; }
.pw-nav a:hover, .pw-login:hover { color: white; }
.pw-logout { margin: 0; }
button.pw-login { padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; cursor: pointer; }
.pw-nav a[aria-current="page"] { position: relative; color: white; }
.pw-nav a[aria-current="page"]::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; background: var(--pw-red); content: ""; }
.pw-mobile-nav a[aria-current="page"] { color: var(--pw-red-light); }
.pw-header-actions { display: flex; align-items: center; gap: 25px; }
.pw-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 30px; padding: 0 23px; border: 1px solid var(--pw-red); background: var(--pw-red); color: white; font-size: 13px; font-weight: 600; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.pw-button:hover { transform: translateY(-2px); border-color: var(--pw-red-light); background: var(--pw-red-light); }
.pw-button span { font-size: 18px; line-height: 1; }
.pw-button-small { min-height: 42px; gap: 17px; padding-inline: 17px; font-size: 12px; }
.pw-nav-toggle { display: none; width: 42px; height: 42px; padding: 11px 8px; border: 1px solid rgba(255,255,255,.34); background: transparent; cursor: pointer; }
.pw-nav-toggle span { display: block; width: 100%; height: 1px; margin: 5px 0; background: white; transition: transform .2s ease; }
.pw-nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.pw-nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.pw-mobile-nav { position: absolute; top: calc(100% - 1px); right: 24px; left: 24px; padding: 12px 20px; border: 1px solid var(--pw-line); background: rgba(14,13,16,.98); box-shadow: 0 16px 44px rgba(0,0,0,.4); }
.pw-mobile-nav[hidden] { display: none; }
.pw-mobile-nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--pw-line); font-size: 14px; }
.pw-mobile-nav a:last-child { border-bottom: 0; }
.pw-mobile-nav .pw-login { display: block; width: 100%; padding: 13px 0; font-size: 14px; text-align: left; }

.pw-hero { position: relative; display: flex; min-height: max(720px, 100svh); align-items: center; overflow: hidden; background: #0b0b11; }
.pw-hero-image { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(8,8,13,.995) 0%, rgba(8,8,13,.995) 48%, rgba(8,8,13,.82) 62%, rgba(8,8,13,.22) 100%), linear-gradient(0deg, rgba(8,8,13,.8), transparent 42%), url('/assets/img/home-2/hero/hero-bg.jpg'); background-size: cover; background-position: right center; }
.pw-hero::after { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 82% 55%, rgba(127,36,62,.15), transparent 36%); content: ''; }
/* Hero emblem: the game logo fills the empty right half. It arrives once after the preloader,
   a single light sweep crosses it, and on mouse devices it drifts with the cursor. No loop. */
.pw-hero-emblem { position: absolute; z-index: 1; top: 50%; right: max(32px, calc((100% - 1240px) / 2 - 20px)); width: min(44vw, 640px); aspect-ratio: 1050 / 600; translate: calc(var(--pw-hx, 0) * -14px) calc(-50% + var(--pw-hy, 0) * -10px); transition: translate .6s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.pw-hero-emblem img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(8,8,13,.75)); }
.pw-hero-emblem-halo { position: absolute; inset: -12% 4%; background: radial-gradient(ellipse at 50% 48%, rgba(124,92,255,.28), rgba(200,67,81,.12) 40%, transparent 68%); translate: calc(var(--pw-hx, 0) * 10px) calc(var(--pw-hy, 0) * 8px); transition: translate .8s cubic-bezier(.2,.7,.2,1); }
.pw-hero-emblem-shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255,245,235,.55) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: -50% 0; -webkit-mask: url('/assets/img/logo/logokecil.svg') center / contain no-repeat; mask: url('/assets/img/logo/logokecil.svg') center / contain no-repeat; mix-blend-mode: overlay; }
html.has-js:not(.is-ready) .pw-hero-emblem { opacity: 0; }
html.has-js.is-ready .pw-hero-emblem img { animation: pw-emblem-in 1.4s cubic-bezier(.2,.7,.2,1) .1s both; }
html.has-js.is-ready .pw-hero-emblem-halo { animation: pw-emblem-halo 1.8s ease both; }
html.has-js.is-ready .pw-hero-emblem-shine { animation: pw-emblem-shine 1.6s ease-in-out 1.2s both; }
@keyframes pw-emblem-in { from { opacity: 0; transform: translateY(26px) scale(.92); filter: blur(10px) drop-shadow(0 24px 40px rgba(8,8,13,.75)); } to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 24px 40px rgba(8,8,13,.75)); } }
@keyframes pw-emblem-halo { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes pw-emblem-shine { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@media (max-width: 1050px) { .pw-hero-emblem { display: none; } }
@media (prefers-reduced-motion: reduce) { .pw-hero-emblem-shine { display: none; } }
.pw-hero-content { position: relative; z-index: 1; padding-top: 145px; padding-bottom: 105px; }
.pw-hero-content > * { max-width: 640px; margin-left: 0; }
.pw-eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 19px; color: var(--pw-gold); font: 10px/1.4 var(--pw-mono); letter-spacing: .17em; text-transform: uppercase; }
.pw-eyebrow > span { display: inline-block; width: 22px; height: 1px; background: var(--pw-red-light); }
.pw-hero-title { margin-top: 0; margin-bottom: 22px; font: clamp(68px, 8vw, 116px)/.91 var(--pw-serif); letter-spacing: -.035em; }
.pw-hero-title em { color: var(--pw-red); font-weight: 400; }
.pw-section-heading h2 em, .pw-cta h2 em { color: var(--pw-red-light); font-weight: 400; }
.pw-hero-subtitle { display: flex; align-items: center; gap: 11px; margin: 0 0 17px; color: var(--pw-red-light); font: 10px/1.4 var(--pw-mono); letter-spacing: .16em; }
.pw-hero-subtitle > span { width: 24px; height: 1px; background: var(--pw-red); }
.pw-hero-content > .pw-hero-tagline { max-width: 480px; margin: 0 0 29px; color: rgba(255,255,255,.78); font-size: 16px; }
.pw-hero-actions { display: flex; align-items: center; gap: 22px; }
.pw-text-link { color: var(--pw-paper); font-size: 13px; }
.pw-text-link span { padding-left: 8px; color: var(--pw-red-light); }
.pw-hero-divider { width: 1px; height: 37px; background: rgba(243,238,231,.35); }
.pw-social-button { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(243,238,231,.42); color: var(--pw-paper); transition: border-color .2s ease, color .2s ease, background .2s ease; }
.pw-social-button:hover { border-color: var(--pw-red); background: var(--pw-red); color: white; }
.pw-social-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }

.pw-stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--pw-line); border-bottom: 1px solid var(--pw-line); }
.pw-stat { display: grid; gap: 7px; padding: 23px 24px 25px; border-left: 1px solid var(--pw-line); }
.pw-stat:last-child { border-right: 1px solid var(--pw-line); }
.pw-stat-value { font: 30px/1.15 var(--pw-serif); }
.pw-stat-label { color: var(--pw-muted); font: 9px/1.4 var(--pw-mono); letter-spacing: .1em; text-transform: uppercase; }
.pw-stat-label-online { display: flex; align-items: center; }
.pw-stat-label-online i { width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #68bd89; }
.pw-stat-label-online.is-offline i { background: var(--pw-red-light); }

.pw-section { padding: 118px 0; }
.pw-news-section { padding-top: 134px; }
.pw-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 39px; }
.pw-section-heading .pw-eyebrow { margin-bottom: 13px; }
.pw-section-heading h2 { margin: 0; font: clamp(42px, 5.1vw, 67px)/1 var(--pw-serif); letter-spacing: -.02em; }
.pw-section-heading > p { max-width: 335px; margin: 0 0 3px; color: var(--pw-muted); font-size: 14px; }
.pw-news-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.pw-news-card { min-width: 0; border: 1px solid var(--pw-line); background: var(--pw-panel); }
.pw-news-image { position: relative; display: block; aspect-ratio: 1.45; overflow: hidden; background: var(--pw-panel-soft); }
.pw-news-image::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.5), transparent 45%); content: ''; }
.pw-news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pw-news-card:hover .pw-news-image img { transform: scale(1.045); }
.pw-news-category { position: absolute; z-index: 1; bottom: 13px; left: 14px; padding: 5px 8px; background: var(--pw-red); color: white; font: 9px/1.2 var(--pw-mono); letter-spacing: .09em; text-transform: uppercase; }
.pw-news-copy { padding: 20px 18px 22px; }
.pw-news-copy time { color: var(--pw-gold); font: 9px/1.4 var(--pw-mono); letter-spacing: .08em; text-transform: uppercase; }
.pw-news-copy h3 { margin: 11px 0 9px; font: 23px/1.13 var(--pw-serif); }
.pw-news-copy h3 a:hover { color: var(--pw-red-light); }
.pw-news-copy p { min-height: 43px; margin: 0 0 20px; color: var(--pw-muted); font-size: 12px; line-height: 1.6; }
.pw-read-link { display: inline-flex; align-items: center; gap: 11px; color: var(--pw-paper); font-size: 11px; }
.pw-read-link span { color: var(--pw-red-light); }
.pw-empty { grid-column: 1 / -1; padding: 24px; border: 1px solid var(--pw-line); color: var(--pw-muted); text-align: center; }

.pw-world-section { border-top: 1px solid var(--pw-line); background: #0e0e11; }
.pw-feature-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--pw-line); border-left: 1px solid var(--pw-line); }
.pw-feature-card { position: relative; min-height: 263px; padding: 23px 20px; border-right: 1px solid var(--pw-line); border-bottom: 1px solid var(--pw-line); transition: background .25s ease; }
.pw-feature-card:hover { background: #191518; }
.pw-feature-number { color: var(--pw-gold); font: 10px/1 var(--pw-mono); }
.pw-feature-icon { display: block; margin: 35px 0 18px; color: var(--pw-red-light); font: 32px/1 var(--pw-serif); }
.pw-feature-card h3 { margin: 0 0 8px; font: 24px/1.1 var(--pw-serif); }
.pw-feature-card p { max-width: 190px; margin: 0; color: var(--pw-muted); font-size: 12px; }
.pw-feature-arrow { position: absolute; right: 20px; bottom: 20px; color: var(--pw-red-light); }

.pw-characters-section { overflow: hidden; border-top: 1px solid var(--pw-line); background: radial-gradient(ellipse at 50% 55%, rgba(75,38,77,.12), transparent 58%), #0b0b0d; }
.pw-carousel-controls { display: flex; gap: 9px; }
.pw-carousel-button { width: 48px; height: 48px; padding: 0; background: transparent; cursor: pointer; }
.pw-carousel-button:disabled { opacity: .35; cursor: default; }
.pw-carousel-button:not(:disabled):hover { border-color: var(--pw-red); background: var(--pw-red); }
.pw-carousel-button span { font-size: 20px; }
.pw-character-carousel { overflow: hidden; }
.pw-character-track { display: grid; grid-auto-columns: calc((100% - 54px) / 4); grid-auto-flow: column; gap: 18px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 10px 1px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pw-character-track::-webkit-scrollbar { display: none; }
.pw-character-card { position: relative; display: grid; min-width: 0; height: 392px; place-items: end center; overflow: hidden; border: 1px solid var(--pw-line); background: linear-gradient(145deg, rgba(130,39,63,.13), transparent 62%), #111114; scroll-snap-align: start; transition: border-color .25s ease, transform .25s ease; }
.pw-character-card::before { position: absolute; inset: 28% 8% 0; background: radial-gradient(ellipse, rgba(181,48,77,.18), rgba(91,47,123,.11) 43%, transparent 72%); content: ''; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.pw-character-card:hover, .pw-character-card:focus-within { transform: translateY(-6px); border-color: rgba(225,100,109,.72); }
.pw-character-logo { position: absolute; top: 8%; left: 50%; width: 83%; height: auto; opacity: .14; transform: translate3d(calc(-50% - var(--pw-tilt-x, 0) * 6px), calc(var(--pw-tilt-y, 0) * -4px), 0); transition: opacity .45s ease, filter .45s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.pw-character-art { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; transform: translate3d(calc(var(--pw-tilt-x, 0) * 10px), 0, 0); transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .45s ease; }
.pw-character-card:hover .pw-character-art, .pw-character-card:focus-within .pw-character-art { transform: translate3d(calc(var(--pw-tilt-x, 0) * 10px), -4px, 0) scale(1.03); filter: drop-shadow(0 18px 26px rgba(181, 48, 77, .35)); }
.pw-character-card:hover::before, .pw-character-card:focus-within::before { transform: scale(1.18); background: radial-gradient(ellipse, rgba(200,67,81,.34), rgba(110,58,180,.2) 43%, transparent 72%); }
.pw-character-card:hover .pw-character-logo { opacity: .3; filter: drop-shadow(0 0 14px rgba(170, 130, 255, .45)); }
/* Light sweep across the card on hover: marks the active card without a permanent glow. */
.pw-character-card::after { position: absolute; z-index: 2; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 235, 225, .12) 50%, transparent 62%); content: ''; pointer-events: none; transform: translateX(-120%); }
.pw-character-card:hover::after { transform: translateX(120%); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
/* Entrance: cards rise in sequence once the section is on screen (class set by aura-landing.js). */
.pw-character-carousel.is-armed .pw-character-card { opacity: 0; transform: translateY(34px); }
.pw-character-carousel.is-armed .pw-character-art { transform: translateY(14%); }
.pw-character-carousel.is-armed.is-in .pw-character-card { opacity: 1; transform: none; transition: opacity .7s ease var(--pw-delay, 0s), transform .8s cubic-bezier(.2,.7,.2,1) var(--pw-delay, 0s), border-color .25s ease; }
.pw-character-carousel.is-armed.is-in .pw-character-art { transform: none; transition: transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--pw-delay, 0s) + .12s), filter .45s ease; }
.pw-character-carousel.is-armed.is-in .pw-character-card:hover { transform: translateY(-6px); transition-delay: 0s; }
.pw-character-carousel.is-armed.is-in .pw-character-card:hover .pw-character-art { transform: translate3d(calc(var(--pw-tilt-x, 0) * 10px), -4px, 0) scale(1.03); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
    .pw-character-card, .pw-character-card::before, .pw-character-card::after, .pw-character-art, .pw-character-logo { transition: none !important; }
    .pw-character-card::after { display: none; }
    .pw-character-carousel.is-armed .pw-character-card, .pw-character-carousel.is-armed .pw-character-art { opacity: 1; transform: none; }
}
.pw-carousel-progress { height: 2px; margin-top: 14px; overflow: hidden; background: rgba(243,238,231,.12); }
.pw-carousel-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--pw-red), #8d5a9d); transition: width .2s ease; }
.pw-rankings-section { background: linear-gradient(180deg, #101014, #0b0b0d); }
.pw-list-heading, .pw-rank-row, .pw-spender-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(120px, .7fr) minmax(145px, .65fr); align-items: center; gap: 20px; }
.pw-list-heading { padding: 12px 18px; border-bottom: 1px solid var(--pw-line); color: var(--pw-muted); font: 9px/1.4 var(--pw-mono); letter-spacing: .12em; }
.pw-list-heading > :last-child { text-align: right; }
.pw-rankings { border: 1px solid var(--pw-line); background: rgba(255,255,255,.018); }
.pw-rank-row, .pw-spender-row { min-height: 69px; padding: 12px 18px; border-top: 1px solid var(--pw-line); }
.pw-list-heading + .pw-rank-row, .pw-list-heading + .pw-empty-row { border-top: 0; }
.pw-empty-row { display: flex; min-height: 69px; align-items: center; justify-content: center; margin: 0; padding: 12px 18px; border: 0; color: var(--pw-muted); text-align: center; }
.pw-pvp-heading, .pw-pvp-row { grid-template-columns: 26px minmax(120px, 1.15fr) minmax(150px, 1fr) 44px minmax(110px, .9fr) minmax(95px, .7fr) minmax(110px, .9fr); gap: 12px; }
.pw-pvp-heading > :last-child { text-align: left; }
.pw-pvp-row .pw-rank-class { gap: 8px; }
.pw-pvp-row .pw-rank-class img { width: 24px; height: 24px; }
.pw-rank-gender { display: flex; align-items: center; justify-content: center; }
.pw-rank-gender img { width: 20px; height: 20px; object-fit: contain; }
.pw-rank-spouse, .pw-rank-faction { overflow: hidden; color: var(--pw-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pw-rank-player { display: flex; min-width: 0; align-items: center; gap: 17px; }
.pw-rank-number { color: var(--pw-red-light); font: 11px/1 var(--pw-mono); }
.pw-rank-name { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pw-rank-class { display: flex; align-items: center; gap: 10px; color: var(--pw-muted); font-size: 12px; }
.pw-rank-class img { width: 29px; height: 29px; object-fit: contain; }
.pw-rank-score { color: var(--pw-paper); font: 17px/1.2 var(--pw-serif); text-align: right; }
.pw-rankings-section .pw-section-heading > .pw-text-link { margin-bottom: 4px; }

.pw-supporters-section { border-top: 1px solid var(--pw-line); }
.pw-supporters-layout { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.5fr); align-items: start; gap: 20px; }
.pw-supporters-note { position: relative; display: flex; min-height: 370px; flex-direction: column; overflow: hidden; padding: 30px; border: 1px solid var(--pw-line); background: linear-gradient(145deg, rgba(154,48,61,.27), transparent 64%), #121215; }
.pw-supporters-mark { position: absolute; right: -4px; bottom: -28px; z-index: 0; color: rgba(255,255,255,.025); font: 230px/.9 var(--pw-serif); }
.pw-supporters-note > :not(.pw-supporters-mark) { position: relative; z-index: 1; }
.pw-supporters-note .pw-eyebrow { position: relative; }
.pw-supporters-note h3 { position: relative; margin: 15px 0; font: clamp(39px,4vw,53px)/.98 var(--pw-serif); }
.pw-supporters-note > p:not(.pw-eyebrow) { position: relative; max-width: 240px; margin: 0; color: var(--pw-muted); font-size: 13px; }
.pw-support-total { display: grid; gap: 4px; margin-top: auto; padding-top: 28px; border-top: 1px solid var(--pw-line); }
.pw-support-total span { color: var(--pw-muted); font: 9px/1.4 var(--pw-mono); letter-spacing: .1em; text-transform: uppercase; }
.pw-support-total strong { font: 28px/1.2 var(--pw-serif); }
.pw-supporters-list .pw-list-heading, .pw-supporters-list .pw-spender-row { grid-template-columns: minmax(0, 1.2fr) minmax(90px, .7fr) minmax(145px, .85fr); }
.pw-supporters-section .pw-section-heading > p { text-align: right; }
.pw-spender-streamer { overflow: hidden; color: var(--pw-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.pw-cta { position: relative; min-height: 510px; overflow: hidden; background: #121014; }
.pw-cta-art { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(10,9,12,.97) 0%, rgba(10,9,12,.78) 45%, rgba(10,9,12,.25) 100%), url('/assets/img/home-6/hero/hero-bg.png'); background-size: cover; background-position: center 46%; opacity: .8; }
.pw-cta-content { position: relative; z-index: 1; display: flex; min-height: 510px; flex-direction: column; align-items: flex-start; justify-content: center; }
.pw-cta h2 { margin: 0 0 27px; font: clamp(59px, 7vw, 91px)/.93 var(--pw-serif); letter-spacing: -.02em; }

.pw-footer { background: #080809; }
.pw-footer-main { display: grid; grid-template-columns: 1fr 1fr 1.4fr; align-items: center; gap: 30px; padding-top: 45px; padding-bottom: 42px; }
.pw-footer-main > p { margin: 0; color: var(--pw-muted); font-size: 12px; }
.pw-footer-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 22px; }
.pw-footer-links a { color: var(--pw-muted); font-size: 11px; }
.pw-footer-links a:hover, .pw-back-top:hover { color: var(--pw-paper); }
.pw-footer-bottom { display: flex; justify-content: space-between; padding-top: 17px; padding-bottom: 20px; border-top: 1px solid var(--pw-line); color: var(--pw-muted); font: 9px/1.4 var(--pw-mono); letter-spacing: .06em; }
.pw-back-top { color: var(--pw-muted); }
.pw-top { position: fixed; z-index: 10; right: 22px; bottom: 22px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.3); background: rgba(12,11,14,.8); color: white; font-size: 18px; opacity: .75; transition: opacity .2s ease, background .2s ease; }
.pw-top:hover { background: var(--pw-red); opacity: 1; }
html.has-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
html.has-js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
    .pw-nav { gap: 20px; margin-left: 1vw; }
    .pw-header-inner { width: calc(100% - 48px); }
    .pw-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pw-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pw-feature-card:first-child { grid-column: span 2; }
    .pw-feature-card:first-child p { max-width: 320px; }
    .pw-feature-card { min-height: 235px; }
    .pw-pvp-heading, .pw-pvp-row { grid-template-columns: 24px minmax(85px, 1.1fr) minmax(95px, 1fr) 30px minmax(85px, .9fr) minmax(68px, .65fr) minmax(80px, .9fr); gap: 8px; }
    .pw-character-track { grid-auto-columns: calc((100% - 18px) / 2); }
    .pw-character-card { height: 350px; }
}
@media (max-width: 760px) {
    html { scroll-padding-top: 72px; }
    .pw-container { width: calc(100% - 40px); }
    .pw-header-inner { min-height: 75px; width: calc(100% - 40px); }
    .pw-brand img { width: 34px; height: 34px; }
    .pw-brand strong { font-size: 13px; }
    .pw-brand small { font-size: 8px; }
    .pw-nav, .pw-login { display: none; }
    .pw-header-actions { gap: 14px; }
    .pw-button-small { min-height: 39px; padding-inline: 12px; }
    .pw-nav-toggle { display: block; }
    .pw-hero { min-height: max(760px, 100svh); max-height: 900px; }
    .pw-hero-image { background-image: linear-gradient(90deg, rgba(8,8,13,.995) 0%, rgba(8,8,13,.97) 72%, rgba(8,8,13,.62) 100%), linear-gradient(0deg, rgba(8,8,13,.88), rgba(8,8,13,.16) 75%), url('/assets/img/home-2/hero/hero-bg.jpg'); background-position: right center; }
    .pw-hero-content { padding-top: 125px; padding-bottom: 58px; }
    .pw-hero-content > * { max-width: 100%; margin-left: 0; }
    .pw-hero-title { font-size: clamp(64px, 16vw, 94px); }
    .pw-hero-content > .pw-hero-tagline { max-width: 390px; font-size: 14px; }
    .pw-hero-actions { gap: 16px; }
    .pw-hero-divider { height: 34px; }
    .pw-social-button { width: 48px; height: 48px; }
    .pw-stat { padding: 19px 12px 20px; }
    .pw-stat-value { font-size: 24px; }
    .pw-section { padding: 80px 0; }
    .pw-news-section { padding-top: 88px; }
    .pw-section-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 27px; }
    .pw-section-heading h2 { font-size: clamp(42px, 12vw, 59px); }
    .pw-section-heading > p { max-width: 420px; }
    .pw-news-grid { gap: 12px; }
    .pw-news-copy { padding: 15px 13px 17px; }
    .pw-news-copy h3 { font-size: 20px; }
    .pw-news-copy p { min-height: 58px; font-size: 11px; }
    .pw-news-category { bottom: 9px; left: 9px; font-size: 8px; }
    .pw-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pw-feature-card:first-child { grid-column: span 2; }
    .pw-feature-card { min-height: 220px; padding: 18px 15px; }
    .pw-feature-icon { margin-top: 24px; }
    .pw-list-heading, .pw-rank-row, .pw-spender-row { grid-template-columns: minmax(0, 1fr) minmax(92px, .72fr) minmax(84px, .5fr); gap: 10px; }
    .pw-list-heading { padding-inline: 12px; font-size: 8px; letter-spacing: .05em; }
    .pw-rank-row, .pw-spender-row { min-height: 62px; padding: 10px 12px; }
    .pw-empty-row { min-height: 62px; padding: 10px 12px; }
    .pw-rank-player { gap: 9px; }
    .pw-rank-name { font-size: 12px; }
    .pw-rank-class { gap: 5px; font-size: 10px; }
    .pw-rank-class img { width: 23px; height: 23px; }
    .pw-rank-score { font-size: 14px; }
    .pw-pvp-heading { display: none; }
    .pw-pvp-row { grid-template-columns: 23px minmax(0, 1fr) minmax(66px, .42fr); grid-template-areas: "rank name score" "rank class gender" "rank spouse faction"; align-items: start; gap: 10px 8px; min-height: 0; padding: 12px; }
    .pw-pvp-row .pw-rank-number { grid-area: rank; align-self: start; padding-top: 13px; }
    .pw-pvp-row .pw-rank-name { grid-area: name; align-self: center; }
    .pw-pvp-row .pw-rank-class { position: relative; display: grid; grid-area: class; grid-template-columns: 20px minmax(0, 1fr); gap: 0 6px; min-width: 0; padding-top: 12px; font-size: 10px; }
    .pw-pvp-row .pw-rank-class::before { position: absolute; top: 0; left: 0; color: var(--pw-muted); content: attr(data-label); font: 8px/1.2 var(--pw-mono); letter-spacing: .05em; }
    .pw-pvp-row .pw-rank-class img { width: 20px; height: 20px; }
    .pw-pvp-row .pw-rank-class > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pw-pvp-row .pw-rank-gender, .pw-pvp-row .pw-rank-spouse, .pw-pvp-row .pw-rank-score, .pw-pvp-row .pw-rank-faction { position: relative; padding-top: 12px; font-size: 10px; }
    .pw-pvp-row .pw-rank-gender::before, .pw-pvp-row .pw-rank-spouse::before, .pw-pvp-row .pw-rank-score::before, .pw-pvp-row .pw-rank-faction::before { position: absolute; top: 0; left: 0; color: var(--pw-muted); content: attr(data-label); font: 8px/1.2 var(--pw-mono); letter-spacing: .05em; }
    .pw-pvp-row .pw-rank-gender { grid-area: gender; justify-self: end; padding-right: 2px; text-align: right; }
    .pw-pvp-row .pw-rank-spouse { grid-area: spouse; }
    .pw-pvp-row .pw-rank-score { grid-area: score; font-size: 14px; }
    .pw-pvp-row .pw-rank-faction { grid-area: faction; text-align: right; }
    .pw-supporters-layout { grid-template-columns: 1fr; }
    .pw-supporters-note { min-height: 320px; }
    .pw-supporters-list .pw-list-heading, .pw-supporters-list .pw-spender-row { grid-template-columns: minmax(0, 1fr) minmax(75px, .55fr) minmax(95px, .7fr); }
    .pw-spender-streamer { font-size: 10px; }
    .pw-cta, .pw-cta-content { min-height: 430px; }
    .pw-cta-art { background-position: 62% center; }
    .pw-footer-main { grid-template-columns: 1fr 1fr; gap: 22px 15px; padding-top: 34px; padding-bottom: 28px; }
    .pw-footer-main > p { text-align: right; }
    .pw-footer-links { grid-column: 1 / -1; justify-content: flex-start; gap: 18px; }
    .pw-footer-bottom { font-size: 8px; }
    .pw-top { right: 12px; bottom: 12px; width: 38px; height: 38px; }
}
@media (max-width: 420px) {
    .pw-container { width: calc(100% - 32px); }
    .pw-header-inner { width: calc(100% - 32px); }
    .pw-header-actions { gap: 9px; }
    .pw-button-small { gap: 8px; font-size: 10px; }
    .pw-button-small span { font-size: 14px; }
    .pw-character-track { grid-auto-columns: 82%; }
    .pw-character-card { height: 330px; }
    .pw-nav-toggle { width: 38px; height: 38px; }
    .pw-hero-title { font-size: 62px; }
    .pw-hero-actions { gap: 14px; }
    .pw-stat-label { font-size: 8px; }
    .pw-news-copy h3 { font-size: 18px; }
    .pw-news-copy p { min-height: 74px; }
    .pw-feature-card h3 { font-size: 21px; }
    .pw-list-heading, .pw-rank-row, .pw-spender-row { grid-template-columns: minmax(0, 1fr) minmax(76px, .68fr) minmax(76px, .48fr); gap: 7px; }
    .pw-rank-number { font-size: 9px; }
    .pw-rank-player { gap: 7px; }
    .pw-rank-name { font-size: 11px; }
    .pw-rank-class { font-size: 9px; }
    .pw-rank-class img { width: 20px; height: 20px; }
    .pw-rank-score { font-size: 12px; }
    .pw-pvp-row { grid-template-columns: 23px minmax(0, 1fr) minmax(64px, .4fr); gap: 10px 7px; }
    .pw-supporters-list .pw-list-heading, .pw-supporters-list .pw-spender-row { grid-template-columns: minmax(0, 1fr) minmax(62px, .52fr) minmax(85px, .7fr); }
    .pw-support-total strong { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html.has-js [data-reveal] { opacity: 1; transform: none; }
}

/* ---- Colour atmosphere: mixed crimson / violet / gold glows so sections aren't flat black ---- */
.pw-news-section, .pw-world-section, .pw-rankings-section, .pw-supporters-section { position: relative; isolation: isolate; overflow: hidden; }
.pw-news-section {
    background:
        radial-gradient(ellipse 55% 45% at 8% 0%, rgba(120, 60, 190, .32), transparent 70%),
        radial-gradient(ellipse 45% 40% at 95% 85%, rgba(200, 67, 81, .22), transparent 70%),
        var(--pw-ink);
}
.pw-world-section {
    background:
        radial-gradient(ellipse 50% 55% at 100% 10%, rgba(200, 67, 81, .27), transparent 70%),
        radial-gradient(ellipse 45% 50% at 0% 100%, rgba(98, 54, 170, .32), transparent 70%),
        linear-gradient(180deg, #0f0d14, #0c0b10);
}
.pw-rankings-section {
    background:
        radial-gradient(ellipse 50% 50% at 15% 20%, rgba(198, 168, 117, .16), transparent 70%),
        radial-gradient(ellipse 55% 55% at 90% 60%, rgba(120, 60, 190, .30), transparent 72%),
        linear-gradient(180deg, #100f15, #0b0b0d);
}
.pw-supporters-section {
    background:
        radial-gradient(ellipse 45% 55% at 0% 50%, rgba(200, 67, 81, .32), transparent 70%),
        radial-gradient(ellipse 50% 50% at 85% 15%, rgba(110, 58, 180, .32), transparent 70%),
        radial-gradient(ellipse 35% 35% at 70% 100%, rgba(198, 168, 117, .13), transparent 70%),
        var(--pw-ink);
}
/* faint star dust over the glows */
.pw-news-section::before, .pw-world-section::before, .pw-rankings-section::before, .pw-supporters-section::before {
    position: absolute; z-index: -1; inset: 0; pointer-events: none; content: "";
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.35), transparent 60%),
        radial-gradient(1px 1px at 67% 14%, rgba(255,255,255,.25), transparent 60%),
        radial-gradient(1px 1px at 38% 78%, rgba(255,255,255,.22), transparent 60%),
        radial-gradient(1.5px 1.5px at 86% 66%, rgba(225,100,109,.45), transparent 60%),
        radial-gradient(1.5px 1.5px at 22% 58%, rgba(170,130,255,.40), transparent 60%);
    background-size: 420px 420px;
    opacity: .7;
}

/* tables and cards: tinted glass instead of flat black */
.pw-rankings {
    background:
        linear-gradient(160deg, rgba(120, 60, 190, .10), transparent 45%),
        linear-gradient(340deg, rgba(200, 67, 81, .09), transparent 50%),
        rgba(16, 15, 21, .78);
    backdrop-filter: blur(6px);
}
.pw-list-heading { background: linear-gradient(90deg, rgba(200, 67, 81, .10), rgba(120, 60, 190, .08)); }

/* supporters: list fills the card height, empty state is a proper panel */
.pw-supporters-layout { align-items: stretch; }
.pw-supporters-list { display: flex; flex-direction: column; }
.pw-supporters-empty {
    position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center;
    min-height: 300px; padding: 40px 28px; overflow: hidden; text-align: center;
    background:
        radial-gradient(circle at 50% 38%, rgba(200, 67, 81, .22), transparent 42%),
        radial-gradient(circle at 50% 70%, rgba(120, 60, 190, .16), transparent 55%);
}
.pw-supporters-empty::before {
    position: absolute; top: 50%; left: 50%; width: 260px; height: 260px; border: 1px solid rgba(198, 168, 117, .16);
    border-radius: 50%; transform: translate(-50%, -58%); content: ""; box-shadow: 0 0 0 38px rgba(198, 168, 117, .03), 0 0 0 76px rgba(198, 168, 117, .02);
}
.pw-supporters-empty > * { position: relative; }
.pw-supporters-empty-crest { display: grid; width: 82px; height: 82px; place-items: center; margin-bottom: 20px; border: 1px solid rgba(198, 168, 117, .4); color: var(--pw-gold); background: radial-gradient(circle, rgba(200, 67, 81, .25), rgba(16, 15, 21, .9)); transform: rotate(45deg); }
.pw-supporters-empty-crest svg { transform: rotate(-45deg); }
.pw-supporters-empty .pw-eyebrow { justify-content: center; margin-bottom: 10px; }
.pw-supporters-empty h3 { margin: 0 0 8px; font: clamp(26px, 2.6vw, 34px)/1.1 var(--pw-serif); }
.pw-supporters-empty p:last-child { margin: 0; color: var(--pw-muted); font-size: 14px; }

@media (max-width: 760px) {
    .pw-supporters-empty { min-height: 260px; padding: 32px 18px; }
    .pw-supporters-empty::before { width: 200px; height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .pw-rankings { backdrop-filter: none; }
}