:root {
    --vgnw-pekka-void: #0a0d12;
    --vgnw-pekka-panel: #121720;
    --vgnw-pekka-panel-raised: #171e29;
    --vgnw-pekka-line: #2a3442;
    --vgnw-pekka-steel: #8994a5;
    --vgnw-pekka-frost: #edf4f7;
    --vgnw-pekka-signal: #79f2c0;
    --vgnw-pekka-royal: #56a8ff;
    --vgnw-pekka-clan: #ffbd59;
    --vgnw-pekka-brawl: #ff5fa2;
    --vgnw-pekka-hay-day: #8ed65f;
    --vgnw-pekka-danger: #ff6b6b;
    --vgnw-pekka-page: min(100% - 2rem, 1240px);
    --vgnw-pekka-cut: 12px;
    --vgnw-pekka-display: "Arial Narrow", "Bahnschrift Condensed", sans-serif;
    --vgnw-pekka-body: Inter, Aptos, "Segoe UI", sans-serif;
    --vgnw-pekka-mono: "IBM Plex Mono", "Cascadia Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.vgnw-pekka-site {
    margin: 0;
    background-color: var(--vgnw-pekka-void);
    color: var(--vgnw-pekka-frost);
    font-family: var(--vgnw-pekka-body);
    line-height: 1.6;
}

body.vgnw-pekka-site::before {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--vgnw-pekka-signal);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left;
}

body.vgnw-pekka-site[data-vgnw-pekka-navigating]::before {
    animation: vgnw-pekka-navigation-progress 1.4s ease-out infinite;
    opacity: 1;
}

.vgnw-pekka-navigation-status {
    position: fixed;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

#vgnw-pekka-main { view-transition-name: vgnw-pekka-main; }

::view-transition-old(vgnw-pekka-main),
::view-transition-new(vgnw-pekka-main) {
    animation-duration: 160ms;
    animation-timing-function: ease-out;
}

@keyframes vgnw-pekka-navigation-progress {
    0% { transform: scaleX(0); }
    55% { transform: scaleX(.72); }
    100% { transform: scaleX(.94); }
}

a { color: inherit; }

.vgnw-pekka-skip-link {
    position: fixed;
    z-index: 1000;
    top: .5rem;
    left: .5rem;
    padding: .75rem 1rem;
    background: var(--vgnw-pekka-signal);
    color: var(--vgnw-pekka-void);
    transform: translateY(-150%);
}

.vgnw-pekka-skip-link:focus { transform: translateY(0); }

.vgnw-pekka-header {
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid var(--vgnw-pekka-line);
    background: rgba(10, 13, 18, .96);
}

.vgnw-pekka-header__bar {
    width: var(--vgnw-pekka-page);
    min-height: 72px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vgnw-pekka-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
}

.vgnw-pekka-brand__mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--vgnw-pekka-signal);
    background: var(--vgnw-pekka-signal);
    color: var(--vgnw-pekka-void);
    clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%);
    font-family: var(--vgnw-pekka-display);
    font-size: 1.6rem;
    font-weight: 900;
}

.vgnw-pekka-brand__text { display: grid; line-height: 1; }
.vgnw-pekka-brand__text strong { font-family: var(--vgnw-pekka-display); font-size: 1.4rem; letter-spacing: .12em; }
.vgnw-pekka-brand__text small { margin-top: .35rem; color: var(--vgnw-pekka-steel); font-family: var(--vgnw-pekka-mono); font-size: .65rem; text-transform: uppercase; }

.vgnw-pekka-primary-navigation { display: flex; align-items: center; gap: 1.25rem; }
.vgnw-pekka-primary-menu, .vgnw-pekka-footer-menu { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.vgnw-pekka-primary-menu a, .vgnw-pekka-account-link { color: var(--vgnw-pekka-steel); font-size: .875rem; font-weight: 700; text-decoration: none; }
.vgnw-pekka-primary-menu a:hover, .vgnw-pekka-primary-menu a:focus-visible { color: var(--vgnw-pekka-frost); }
.vgnw-pekka-account-link { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 1rem; border: 1px solid var(--vgnw-pekka-line); color: var(--vgnw-pekka-frost); }

.vgnw-pekka-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: none;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--vgnw-pekka-line);
    background: transparent;
    color: var(--vgnw-pekka-frost);
}

.vgnw-pekka-menu-toggle__icon, .vgnw-pekka-menu-toggle__icon::before, .vgnw-pekka-menu-toggle__icon::after { width: 16px; height: 1px; display: block; background: currentColor; content: ""; }
.vgnw-pekka-menu-toggle__icon::before { transform: translateY(-5px); }
.vgnw-pekka-menu-toggle__icon::after { transform: translateY(4px); }

.vgnw-pekka-game-switcher {
    width: var(--vgnw-pekka-page);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--vgnw-pekka-line);
}

.vgnw-pekka-game-switcher__item {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .9rem;
    border-right: 1px solid var(--vgnw-pekka-line);
    color: var(--vgnw-pekka-steel);
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
}

.vgnw-pekka-game-switcher__item:first-child { border-left: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-game-switcher__item[data-vgnw-pekka-game-status="active"]:hover { background: var(--vgnw-pekka-panel); color: var(--vgnw-pekka-frost); }
.vgnw-pekka-game-switcher__item[data-vgnw-pekka-game-status="soon"] { cursor: not-allowed; opacity: .52; }
.vgnw-pekka-game-switcher__item small { display: block; color: var(--vgnw-pekka-clan); font-family: var(--vgnw-pekka-mono); font-size: .58rem; text-transform: uppercase; }
.vgnw-pekka-game-switcher__sigil { width: 32px; height: 32px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--vgnw-pekka-line); font-family: var(--vgnw-pekka-mono); font-size: .65rem; }

.vgnw-pekka-main { width: var(--vgnw-pekka-page); margin-inline: auto; }
.vgnw-pekka-main--content { min-height: 65vh; padding-block: clamp(3rem, 7vw, 7rem); }

.vgnw-pekka-game-hub { padding-bottom: clamp(4rem, 8vw, 8rem); }
.vgnw-pekka-game-hero { min-height: 420px; display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-block: clamp(4rem, 8vw, 7rem); border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-game-hero > div { max-width: 800px; }
.vgnw-pekka-game-hero h1 { max-width: 13ch; margin: 0; font-family: var(--vgnw-pekka-display); font-size: clamp(3rem, 7vw, 6.8rem); letter-spacing: -.045em; line-height: .88; text-transform: uppercase; }
.vgnw-pekka-game-hero p:not(.vgnw-pekka-eyebrow) { max-width: 650px; color: #bdc6d1; }
.vgnw-pekka-game-hero--royale { border-top: 3px solid var(--vgnw-pekka-royal); }
.vgnw-pekka-game-hero--clans { border-top: 3px solid var(--vgnw-pekka-clan); }
.vgnw-pekka-game-hero--brawl { border-top: 3px solid var(--vgnw-pekka-brawl); }
.vgnw-pekka-game-hero--hay-day { border-top: 3px solid var(--vgnw-pekka-hay-day); }
.vgnw-pekka-game-hero__code { color: var(--vgnw-pekka-royal); font-family: var(--vgnw-pekka-mono); font-size: clamp(2rem, 6vw, 5rem); font-weight: 900; opacity: .65; }

.vgnw-pekka-lookup-panel { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-lookup-panel h2 { margin: 0; font-family: var(--vgnw-pekka-display); font-size: clamp(2.2rem, 5vw, 4rem); line-height: .95; text-transform: uppercase; }
.vgnw-pekka-lookup-panel__intro > p:last-child { color: var(--vgnw-pekka-steel); }
.vgnw-pekka-player-search label { display: block; margin-bottom: .55rem; color: var(--vgnw-pekka-steel); font-family: var(--vgnw-pekka-mono); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.vgnw-pekka-player-search__controls { min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; border: 1px solid var(--vgnw-pekka-line); background: var(--vgnw-pekka-panel); }
.vgnw-pekka-player-search__controls > span { padding-left: 1rem; color: var(--vgnw-pekka-royal); font-family: var(--vgnw-pekka-mono); font-size: 1.25rem; font-weight: 900; }
.vgnw-pekka-player-search input { width: 100%; min-height: 56px; border: 0; background: transparent; color: var(--vgnw-pekka-frost); font-family: var(--vgnw-pekka-mono); font-size: 1.1rem; font-weight: 800; outline: 0; text-transform: uppercase; }
.vgnw-pekka-player-search input:focus-visible { box-shadow: inset 0 -2px var(--vgnw-pekka-signal); }
.vgnw-pekka-player-search button { min-height: 56px; border-top: 0; border-right: 0; border-bottom: 0; }
.vgnw-pekka-player-search button:disabled { cursor: wait; opacity: .65; }

.vgnw-pekka-player-result { min-height: 260px; padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-player-result > .vgnw-pekka-empty-state { min-height: 180px; display: grid; place-content: center; padding: 2rem; border: 1px dashed var(--vgnw-pekka-line); color: var(--vgnw-pekka-steel); text-align: center; }
.vgnw-pekka-player-card { border: 1px solid var(--vgnw-pekka-line); border-top: 3px solid var(--vgnw-pekka-royal); background: var(--vgnw-pekka-panel); }
.vgnw-pekka-player-card__warning { margin: 0; padding: .75rem 1.25rem; border-bottom: 1px solid #6a542c; background: #2c2518; color: var(--vgnw-pekka-clan); font-size: .78rem; }
.vgnw-pekka-player-card__heading { display: flex; align-items: start; justify-content: space-between; gap: 2rem; padding: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-player-card__identity h2 { margin: 0; font-family: var(--vgnw-pekka-display); font-size: clamp(2.6rem, 6vw, 5rem); line-height: .9; text-transform: uppercase; }
.vgnw-pekka-player-card__game { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--vgnw-pekka-royal); color: var(--vgnw-pekka-royal); font-family: var(--vgnw-pekka-mono); font-weight: 900; }
.vgnw-pekka-player-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; }
.vgnw-pekka-player-metrics__item { min-width: 0; padding: 1.25rem; border-right: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-player-metrics__item:last-child { border: 0; }
.vgnw-pekka-player-metrics dt { min-height: 2.5em; color: var(--vgnw-pekka-steel); font-size: .7rem; text-transform: uppercase; }
.vgnw-pekka-player-metrics dd { margin: .5rem 0 0; font-family: var(--vgnw-pekka-mono); font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 900; }
.vgnw-pekka-player-card__details { display: flex; flex-wrap: wrap; gap: .75rem 2rem; padding: 1rem 1.25rem; border-top: 1px solid var(--vgnw-pekka-line); color: var(--vgnw-pekka-steel); font-family: var(--vgnw-pekka-mono); font-size: .72rem; }
.vgnw-pekka-player-card__details p { margin: 0; }
.vgnw-pekka-player-error { padding: 1.5rem; border: 1px solid var(--vgnw-pekka-danger); background: #251417; color: #ffc8c8; }
.vgnw-pekka-player-error p { margin-bottom: 0; }

.vgnw-pekka-coc-lookups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-block: clamp(3rem, 6vw, 5rem); }
.vgnw-pekka-lookup-card { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--vgnw-pekka-line); background: var(--vgnw-pekka-panel); }
.vgnw-pekka-lookup-card h2 { margin: 0; font-family: var(--vgnw-pekka-display); font-size: clamp(2rem, 4vw, 3.5rem); line-height: .95; text-transform: uppercase; }
.vgnw-pekka-lookup-card > p:not(.vgnw-pekka-eyebrow) { min-height: 3.2em; color: var(--vgnw-pekka-steel); }
.vgnw-pekka-coc-result { min-height: 220px; margin-top: 1rem; padding: 1rem; border: 1px solid var(--vgnw-pekka-line); background: var(--vgnw-pekka-void); color: var(--vgnw-pekka-steel); }
.vgnw-pekka-coc-profile { margin: -1rem; color: var(--vgnw-pekka-frost); }
.vgnw-pekka-coc-profile__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-coc-profile__heading > div { font-family: var(--vgnw-pekka-display); font-size: 2rem; font-weight: 900; line-height: 1; text-transform: uppercase; }
.vgnw-pekka-coc-profile__heading > span { color: var(--vgnw-pekka-clan); font-family: var(--vgnw-pekka-mono); font-size: .75rem; }
.vgnw-pekka-coc-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.vgnw-pekka-coc-metrics__item { padding: 1rem 1.25rem; border-right: 1px solid var(--vgnw-pekka-line); border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-coc-metrics__item:nth-child(2n) { border-right: 0; }
.vgnw-pekka-coc-metrics__item dt { color: var(--vgnw-pekka-steel); font-size: .68rem; text-transform: uppercase; }
.vgnw-pekka-coc-metrics__item dd { margin: .4rem 0 0; font-family: var(--vgnw-pekka-mono); font-size: 1.2rem; font-weight: 900; }
.vgnw-pekka-privacy-note { margin-bottom: clamp(4rem, 7vw, 7rem); padding: 1.25rem; border: 1px solid #6a542c; background: #2c2518; color: #ead6a5; }
.vgnw-pekka-privacy-note p { margin-bottom: 0; }
.vgnw-pekka-brawl-profile { border-top: 3px solid var(--vgnw-pekka-brawl); }
.vgnw-pekka-brawl-profile__club { margin: 0; padding: 1rem 1.25rem; color: var(--vgnw-pekka-steel); }
.vgnw-pekka-hay-day-planner { padding-block: clamp(3rem, 6vw, 5rem); }
.vgnw-pekka-hay-day-planner > .vgnw-pekka-empty-state { padding: 2rem; border: 1px dashed var(--vgnw-pekka-line); color: var(--vgnw-pekka-steel); }

.vgnw-pekka-hero {
    min-height: min(680px, calc(100vh - 128px));
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
    align-items: center;
    gap: clamp(2rem, 7vw, 7rem);
    padding-block: clamp(4rem, 9vw, 8rem);
    border-bottom: 1px solid var(--vgnw-pekka-line);
}

.vgnw-pekka-eyebrow { margin: 0 0 .75rem; color: var(--vgnw-pekka-signal); font-family: var(--vgnw-pekka-mono); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.vgnw-pekka-hero h1, .vgnw-pekka-section h2, .vgnw-pekka-archive-header h1 { margin: 0; max-width: 13ch; font-family: var(--vgnw-pekka-display); font-size: clamp(3.2rem, 8vw, 7.4rem); font-stretch: condensed; letter-spacing: -.045em; line-height: .86; text-transform: uppercase; }
.vgnw-pekka-hero__copy > p:not(.vgnw-pekka-eyebrow) { max-width: 640px; margin: 1.75rem 0 0; color: #bdc6d1; font-size: clamp(1rem, 2vw, 1.2rem); }
.vgnw-pekka-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.vgnw-pekka-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.1rem; border: 1px solid var(--vgnw-pekka-line); font-size: .82rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }
.vgnw-pekka-button:hover, .vgnw-pekka-button:focus-visible { border-color: var(--vgnw-pekka-frost); }
.vgnw-pekka-button--primary { border-color: var(--vgnw-pekka-signal); background: var(--vgnw-pekka-signal); color: var(--vgnw-pekka-void); }

.vgnw-pekka-hero__telemetry, .vgnw-pekka-game-card, .vgnw-pekka-post-card {
    border: 1px solid var(--vgnw-pekka-line);
    background: var(--vgnw-pekka-panel);
    clip-path: polygon(0 0, calc(100% - var(--vgnw-pekka-cut)) 0, 100% var(--vgnw-pekka-cut), 100% 100%, var(--vgnw-pekka-cut) 100%, 0 calc(100% - var(--vgnw-pekka-cut)));
}

.vgnw-pekka-hero__telemetry { padding: 1.25rem; }
.vgnw-pekka-status { display: flex; align-items: center; gap: .6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--vgnw-pekka-line); color: var(--vgnw-pekka-signal); font-family: var(--vgnw-pekka-mono); font-size: .72rem; text-transform: uppercase; }
.vgnw-pekka-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--vgnw-pekka-signal); box-shadow: 0 0 14px var(--vgnw-pekka-signal); }
.vgnw-pekka-telemetry-list { margin: 0; }
.vgnw-pekka-telemetry-list div { display: flex; align-items: baseline; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-telemetry-list div:last-child { border: 0; }
.vgnw-pekka-telemetry-list dt { color: var(--vgnw-pekka-steel); font-size: .8rem; }
.vgnw-pekka-telemetry-list dd { margin: 0; font-family: var(--vgnw-pekka-mono); font-size: 1.1rem; font-weight: 800; }

.vgnw-pekka-section { padding-block: clamp(4rem, 8vw, 7rem); border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-section--compact { border-bottom: 0; }
.vgnw-pekka-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.vgnw-pekka-section h2, .vgnw-pekka-archive-header h1 { max-width: 15ch; font-size: clamp(2.5rem, 5vw, 5rem); }
.vgnw-pekka-section-heading > p { max-width: 420px; margin: 0; color: var(--vgnw-pekka-steel); }

.vgnw-pekka-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vgnw-pekka-game-card { min-height: 390px; display: flex; flex-direction: column; padding: clamp(1.4rem, 3vw, 2.25rem); }
.vgnw-pekka-game-card[data-vgnw-pekka-featured-game="clash-royale"] { border-top: 3px solid var(--vgnw-pekka-royal); }
.vgnw-pekka-game-card[data-vgnw-pekka-featured-game="clash-of-clans"] { border-top: 3px solid var(--vgnw-pekka-clan); }
.vgnw-pekka-game-card[data-vgnw-pekka-featured-game="brawl-stars"] { border-top: 3px solid var(--vgnw-pekka-brawl); }
.vgnw-pekka-game-card[data-vgnw-pekka-featured-game="hay-day"] { border-top: 3px solid var(--vgnw-pekka-hay-day); }
.vgnw-pekka-game-card__index { color: var(--vgnw-pekka-steel); font-family: var(--vgnw-pekka-mono); font-size: .7rem; letter-spacing: .12em; }
.vgnw-pekka-game-card h3 { margin: 1.1rem 0 .75rem; font-family: var(--vgnw-pekka-display); font-size: clamp(2.2rem, 4vw, 4.2rem); line-height: .95; text-transform: uppercase; }
.vgnw-pekka-game-card p, .vgnw-pekka-game-card li { color: #bdc6d1; }
.vgnw-pekka-game-card ul { margin: 1rem 0 2rem; padding-left: 1.2rem; }
.vgnw-pekka-game-card > a { min-height: 44px; display: inline-flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--vgnw-pekka-line); color: var(--vgnw-pekka-signal); font-size: .82rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }

.vgnw-pekka-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-principle-grid article { padding: 1.5rem; border-right: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-principle-grid article:last-child { border: 0; }
.vgnw-pekka-principle-grid strong { color: var(--vgnw-pekka-signal); font-family: var(--vgnw-pekka-mono); font-size: .7rem; }
.vgnw-pekka-principle-grid h3 { margin: 1.5rem 0 .5rem; font-family: var(--vgnw-pekka-display); font-size: 1.6rem; text-transform: uppercase; }
.vgnw-pekka-principle-grid p { margin: 0; color: var(--vgnw-pekka-steel); }

.vgnw-pekka-archive-header { margin-bottom: 2rem; }
.vgnw-pekka-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vgnw-pekka-post-card { padding: 1.5rem; }
.vgnw-pekka-post-card__meta { color: var(--vgnw-pekka-steel); font-family: var(--vgnw-pekka-mono); font-size: .7rem; }
.vgnw-pekka-post-card h2 { font-family: var(--vgnw-pekka-display); font-size: 2rem; line-height: 1.1; }
.vgnw-pekka-post-card h2 a { text-decoration: none; }
.vgnw-pekka-post-card__excerpt { color: #bdc6d1; }

.vgnw-pekka-editorial-hero { display: grid; gap: 1rem; padding: clamp(2rem, 6vw, 5rem) 0; border-top: 3px solid var(--vgnw-pekka-signal); border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-editorial-archive[data-vgnw-pekka-accent="royal"] .vgnw-pekka-editorial-hero,
.vgnw-pekka-editorial-single[data-vgnw-pekka-accent="royal"] .vgnw-pekka-editorial-hero { border-top-color: var(--vgnw-pekka-royal); }
.vgnw-pekka-editorial-archive[data-vgnw-pekka-accent="clan"] .vgnw-pekka-editorial-hero,
.vgnw-pekka-editorial-single[data-vgnw-pekka-accent="clan"] .vgnw-pekka-editorial-hero { border-top-color: var(--vgnw-pekka-clan); }
.vgnw-pekka-editorial-hero h1 { max-width: 15ch; margin: 0; font-family: var(--vgnw-pekka-display); font-size: clamp(3rem, 7vw, 6.5rem); letter-spacing: -.045em; line-height: .9; text-transform: uppercase; }
.vgnw-pekka-editorial-hero > p:not(.vgnw-pekka-eyebrow) { max-width: 720px; margin: 0; color: #bdc6d1; font-size: clamp(1rem, 2vw, 1.2rem); }
.vgnw-pekka-editorial-hero--single { padding-top: clamp(2rem, 5vw, 4rem); }
.vgnw-pekka-editorial-byline { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--vgnw-pekka-steel); font-family: var(--vgnw-pekka-mono); font-size: .72rem; text-transform: uppercase; }
.vgnw-pekka-breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; color: var(--vgnw-pekka-steel); font-size: .75rem; }
.vgnw-pekka-breadcrumbs a:hover { color: var(--vgnw-pekka-frost); }

.vgnw-pekka-editorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-block: clamp(2rem, 5vw, 4rem); }
.vgnw-pekka-editorial-card { min-width: 0; overflow: hidden; border: 1px solid var(--vgnw-pekka-line); border-top: 3px solid var(--vgnw-pekka-signal); background: var(--vgnw-pekka-panel); }
.vgnw-pekka-editorial-card[data-vgnw-pekka-accent="royal"] { border-top-color: var(--vgnw-pekka-royal); }
.vgnw-pekka-editorial-card[data-vgnw-pekka-accent="clan"] { border-top-color: var(--vgnw-pekka-clan); }
.vgnw-pekka-editorial-card__image { aspect-ratio: 16 / 9; display: block; overflow: hidden; border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-editorial-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.vgnw-pekka-editorial-card__body { display: flex; flex-direction: column; min-height: 310px; padding: clamp(1.25rem, 3vw, 2rem); }
.vgnw-pekka-editorial-card__meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--vgnw-pekka-steel); font-family: var(--vgnw-pekka-mono); font-size: .67rem; text-transform: uppercase; }
.vgnw-pekka-editorial-card h2 { margin: 1.2rem 0 .75rem; font-family: var(--vgnw-pekka-display); font-size: clamp(2rem, 4vw, 3.2rem); line-height: .95; text-transform: uppercase; }
.vgnw-pekka-editorial-card h2 a { text-decoration: none; }
.vgnw-pekka-editorial-card p { margin: 0; color: #bdc6d1; }
.vgnw-pekka-editorial-card__action { min-height: 44px; display: flex; align-items: end; justify-content: space-between; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--vgnw-pekka-line); color: var(--vgnw-pekka-signal); font-size: .78rem; font-weight: 800; text-decoration: none; text-transform: uppercase; }

.vgnw-pekka-editorial-cover { margin: 0; border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-editorial-cover img { width: 100%; height: auto; display: block; }
.vgnw-pekka-components { padding-block: clamp(2rem, 5vw, 4rem); border-bottom: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-components .vgnw-pekka-section-heading { margin-bottom: 1.25rem; }
.vgnw-pekka-components h2, .vgnw-pekka-related h2 { margin: 0; font-family: var(--vgnw-pekka-display); font-size: clamp(2rem, 4vw, 3.5rem); line-height: .95; text-transform: uppercase; }
.vgnw-pekka-component-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; background: var(--vgnw-pekka-line); list-style: none; }
.vgnw-pekka-component-grid li { min-width: 0; display: grid; gap: .35rem; padding: 1rem; background: var(--vgnw-pekka-panel); }
.vgnw-pekka-component-grid span, .vgnw-pekka-component-grid small { overflow-wrap: anywhere; color: var(--vgnw-pekka-steel); font-family: var(--vgnw-pekka-mono); font-size: .64rem; text-transform: uppercase; }
.vgnw-pekka-component-grid strong { overflow-wrap: anywhere; }
.vgnw-pekka-editorial-body { width: min(100%, 780px); margin-inline: auto; padding-block: clamp(3rem, 7vw, 6rem); font-size: clamp(1rem, 1.5vw, 1.12rem); }
.vgnw-pekka-editorial-body > :first-child { margin-top: 0; }
.vgnw-pekka-editorial-body h2, .vgnw-pekka-editorial-body h3 { margin-top: 2.2em; font-family: var(--vgnw-pekka-display); line-height: 1.05; text-transform: uppercase; }
.vgnw-pekka-editorial-body h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.vgnw-pekka-editorial-body img { max-width: 100%; height: auto; }
.vgnw-pekka-editorial-body a { color: var(--vgnw-pekka-signal); }
.vgnw-pekka-related { padding-block: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 1.5rem; padding: 1px; background: var(--vgnw-pekka-line); }
.vgnw-pekka-related__grid a { min-height: 140px; display: flex; flex-direction: column; gap: .6rem; padding: 1rem; background: var(--vgnw-pekka-panel); text-decoration: none; }
.vgnw-pekka-related__grid span { color: var(--vgnw-pekka-steel); font-family: var(--vgnw-pekka-mono); font-size: .64rem; text-transform: uppercase; }
.vgnw-pekka-empty-state { margin-block: 2rem; padding: 2rem; border: 1px dashed var(--vgnw-pekka-line); color: var(--vgnw-pekka-steel); }
.vgnw-pekka-empty-state strong { color: var(--vgnw-pekka-frost); font-family: var(--vgnw-pekka-display); font-size: 1.5rem; text-transform: uppercase; }
.navigation.pagination { margin-top: 1rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.page-numbers { min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid var(--vgnw-pekka-line); text-decoration: none; }
.page-numbers.current { border-color: var(--vgnw-pekka-signal); background: var(--vgnw-pekka-signal); color: var(--vgnw-pekka-void); }

.vgnw-pekka-footer { padding: 3rem max(1rem, calc((100% - 1240px) / 2)); border-top: 1px solid var(--vgnw-pekka-line); background: #07090d; color: var(--vgnw-pekka-steel); font-size: .78rem; }
.vgnw-pekka-footer__grid { display: flex; justify-content: space-between; gap: 2rem; }
.vgnw-pekka-footer__brand { color: var(--vgnw-pekka-frost); font-family: var(--vgnw-pekka-display); font-size: 1.6rem; letter-spacing: .12em; }
.vgnw-pekka-footer__legal { max-width: 920px; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--vgnw-pekka-line); }
.vgnw-pekka-footer__legal a { color: var(--vgnw-pekka-frost); }
.vgnw-pekka-footer__copyright { margin-bottom: 0; font-family: var(--vgnw-pekka-mono); }

.vgnw-pekka-editorial-grid > article:nth-child(n+5),
.vgnw-pekka-post-grid > article:nth-child(n+5),
.vgnw-pekka-related,
.vgnw-pekka-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}

:focus-visible { outline: 2px solid var(--vgnw-pekka-signal); outline-offset: 3px; }

@media (max-width: 780px) {
    :root { --vgnw-pekka-page: min(100% - 1.25rem, 1240px); }
    .vgnw-pekka-header__bar { min-height: 64px; }
    .vgnw-pekka-menu-toggle { display: inline-flex; }
    .vgnw-pekka-primary-navigation { position: absolute; top: 64px; right: .625rem; left: .625rem; display: none; align-items: stretch; padding: 1rem; border: 1px solid var(--vgnw-pekka-line); background: var(--vgnw-pekka-panel); }
    .vgnw-pekka-primary-navigation[data-vgnw-pekka-menu-open] { display: grid; }
    .vgnw-pekka-primary-menu, .vgnw-pekka-footer-menu { flex-direction: column; }
    .vgnw-pekka-game-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vgnw-pekka-game-switcher__item:nth-child(3) { border-left: 1px solid var(--vgnw-pekka-line); border-top: 1px solid var(--vgnw-pekka-line); }
    .vgnw-pekka-game-switcher__item:nth-child(4) { border-top: 1px solid var(--vgnw-pekka-line); }
    .vgnw-pekka-game-switcher__item { min-height: 48px; }
    .vgnw-pekka-hero { min-height: auto; grid-template-columns: 1fr; }
    .vgnw-pekka-hero h1 { font-size: clamp(3rem, 17vw, 5.5rem); }
    .vgnw-pekka-section-heading { align-items: start; flex-direction: column; }
    .vgnw-pekka-game-grid, .vgnw-pekka-post-grid { grid-template-columns: 1fr; }
    .vgnw-pekka-principle-grid { grid-template-columns: 1fr; }
    .vgnw-pekka-principle-grid article { border-right: 0; border-bottom: 1px solid var(--vgnw-pekka-line); }
    .vgnw-pekka-footer__grid { flex-direction: column; }
    .vgnw-pekka-game-hero { min-height: 360px; align-items: start; flex-direction: column-reverse; }
    .vgnw-pekka-game-hero__code { align-self: end; }
    .vgnw-pekka-lookup-panel { grid-template-columns: 1fr; }
    .vgnw-pekka-player-search__controls { grid-template-columns: auto minmax(0, 1fr); }
    .vgnw-pekka-player-search button { grid-column: 1 / -1; min-height: 50px; border-top: 1px solid var(--vgnw-pekka-line); border-left: 0; }
    .vgnw-pekka-player-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vgnw-pekka-player-metrics__item { border-bottom: 1px solid var(--vgnw-pekka-line); }
    .vgnw-pekka-player-metrics__item:nth-child(2n) { border-right: 0; }
    .vgnw-pekka-player-metrics__item:nth-last-child(-n+2) { border-bottom: 0; }
    .vgnw-pekka-coc-lookups { grid-template-columns: 1fr; }
    .vgnw-pekka-editorial-grid, .vgnw-pekka-related__grid { grid-template-columns: 1fr; }
    .vgnw-pekka-component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .vgnw-pekka-brand__text small { display: none; }
    .vgnw-pekka-game-switcher__item { padding-inline: .5rem; font-size: .7rem; }
    .vgnw-pekka-game-switcher__sigil { width: 28px; height: 28px; }
    .vgnw-pekka-component-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.vgnw-pekka-language-switcher {
    display: inline-flex;
    gap: .25rem;
    padding: .2rem;
    border: 1px solid var(--vgnw-pekka-line);
    border-radius: 999px;
}

.vgnw-pekka-language-switcher a {
    display: inline-grid;
    min-width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    border-radius: 999px;
    color: inherit;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}

.vgnw-pekka-language-switcher a[aria-current="page"] {
    background: var(--vgnw-pekka-signal);
    color: var(--vgnw-pekka-void);
}