/* Retro mode: an early-2000s console FIFA menu (PS2 era). Applies when
   html has data-theme="ps2", set by the Retro switch. */

.hub[data-theme="ps2"],
.case-page[data-theme="ps2"] {
    --font: "Exo 2", Verdana, sans-serif;
    --ps2-navy: #04123a;
    --ps2-blue: #0f4fc4;
    --ps2-sky: #4fa3ff;
    --ps2-yellow: #ffd21f;
    --ps2-orange: #ff8a00;
    --ps2-chrome: linear-gradient(180deg, #ffffff 0%, #dfe6f0 45%, #9aa7ba 50%, #c4cedb 75%, #eef2f7 100%);
}

.hub[data-theme="ps2"] body,
.case-page[data-theme="ps2"] body {
    color: #fff;
    background:
        linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.07) 30% 34%, transparent 34% 37%, rgba(255, 255, 255, 0.05) 37% 46%, transparent 46%),
        radial-gradient(ellipse 80% 70% at 50% 35%, #1d6bea 0%, #0b3a9e 45%, var(--ps2-navy) 100%);
}

/* Scan lines and a slow light sweep over the whole screen. */
.hub[data-theme="ps2"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.13) 0 1px, transparent 1px 3px),
        linear-gradient(100deg, transparent 40%, rgba(160, 210, 255, 0.1) 50%, transparent 60%) -100% 0 / 200% 100% no-repeat;
    animation: ps2-sweep 9s ease-in-out infinite;
}

@keyframes ps2-sweep {
    0%,
    30% {
        background-position: 0 0, -100% 0;
    }
    70%,
    100% {
        background-position: 0 0, 200% 0;
    }
}

.hub[data-theme="ps2"] .masthead,
.hub[data-theme="ps2"] .home,
.case-page[data-theme="ps2"] .masthead {
    font-family: "Exo 2", Verdana, sans-serif;
}

/* Top bar: a chrome strip */

.hub[data-theme="ps2"] .masthead,
.case-page[data-theme="ps2"] .masthead {
    color: var(--ps2-navy);
    background: var(--ps2-chrome);
    border-bottom: 3px solid var(--ps2-navy);
    box-shadow: 0 4px 0 rgba(79, 163, 255, 0.5);
}

.hub[data-theme="ps2"] .wordmark,
.case-page[data-theme="ps2"] .wordmark {
    font-family: "Exo 2", sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ps2-blue);
    text-shadow: 1px 1px 0 #fff, 2px 2px 0 var(--ps2-navy);
}




.hub[data-theme="ps2"] .hub-resume,
.hub[data-theme="ps2"] .sound-toggle {
    color: var(--ps2-navy);
    background: linear-gradient(180deg, #ffe680 0%, var(--ps2-yellow) 48%, #f0a800 52%, #ffc93a 100%);
    border: 2px solid var(--ps2-navy);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hub[data-theme="ps2"] .hub-resume {
    padding: 0.15rem 1rem;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 0.5rem;
}

.hub[data-theme="ps2"] .hub-resume:hover {
    color: var(--ps2-navy);
    background: linear-gradient(180deg, #ffd08a 0%, var(--ps2-orange) 48%, #e06a00 52%, #ffa640 100%);
}

.hub[data-theme="ps2"] .sound-toggle {
    border-radius: 50%;
}

.hub[data-theme="ps2"] .theme-toggle,
.case-page[data-theme="ps2"] .theme-toggle {
    font-family: "Exo 2", sans-serif;
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--ps2-blue);
}

.hub[data-theme="ps2"] .theme-switch,
.case-page[data-theme="ps2"] .theme-switch {
    background: var(--ps2-navy);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}

.hub[data-theme="ps2"] .theme-switch::after,
.case-page[data-theme="ps2"] .theme-switch::after {
    background: linear-gradient(180deg, #ffe680, var(--ps2-yellow) 49%, #f0a800 51%, #ffc93a);
}

/* Tiles: glossy gel buttons */

.hub[data-theme="ps2"] .tiles {
    gap: 0.8rem;
}

.hub[data-theme="ps2"] .tile {
    color: #fff;
    background: linear-gradient(180deg, #3f86f2 0%, #1f5fd6 49%, #1149b8 51%, #1a5ad0 100%);
    border: 2px solid #cfe0ff;
    border-radius: 0.9rem;
    box-shadow: 0 0 0 2px var(--ps2-navy), inset 0 -0.6rem 1.4rem rgba(0, 20, 80, 0.45), 0 8px 16px rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* The glassy shine across the top half. */
.hub[data-theme="ps2"] .tile::before {
    content: "";
    position: absolute;
    left: 3%;
    right: 3%;
    top: 2px;
    height: 46%;
    border-radius: 0.7rem 0.7rem 2.5rem 2.5rem / 0.7rem 0.7rem 1rem 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06));
    pointer-events: none;
}

.hub[data-theme="ps2"] .tile.is-selected,
.hub[data-theme="ps2"] .tile:focus-visible {
    color: var(--ps2-navy);
    background: linear-gradient(180deg, #ffe680 0%, var(--ps2-yellow) 49%, #f5a300 51%, var(--ps2-orange) 100%);
    border-color: #fff;
    transform: scale(1.03);
    animation: ps2-pulse 1.1s ease-in-out infinite;
}

@keyframes ps2-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 2px var(--ps2-navy), 0 0 0.8rem 0.2rem rgba(255, 210, 31, 0.55), 0 10px 18px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 0 2px var(--ps2-navy), 0 0 1.8rem 0.5rem rgba(255, 180, 0, 0.85), 0 10px 18px rgba(0, 0, 0, 0.5);
    }
}

.hub[data-theme="ps2"] .tile::after {
    content: "\2715  Select";
    padding: 0.05rem 0.7rem;
    font-style: italic;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #fff;
    background: var(--ps2-navy);
    border-radius: 0.4rem;
}

.hub[data-theme="ps2"] .tile-kicker {
    font-style: italic;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ps2-yellow);
    text-shadow: 1px 1px 0 var(--ps2-navy);
}

.hub[data-theme="ps2"] .tile-title {
    font-family: "Exo 2", sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: clamp(1.25rem, 2.3vw, 2.1rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--ps2-navy);
}

.hub[data-theme="ps2"] .tile-sub {
    font-size: 0.95rem;
    color: #d6e6ff;
}

.hub[data-theme="ps2"] .tile.is-selected .tile-kicker {
    color: var(--ps2-navy);
    text-shadow: none;
}

.hub[data-theme="ps2"] .tile.is-selected .tile-title {
    color: #fff;
    text-shadow: 2px 2px 0 var(--ps2-navy), -1px -1px 0 var(--ps2-navy), 1px -1px 0 var(--ps2-navy), -1px 1px 0 var(--ps2-navy);
}

.hub[data-theme="ps2"] .tile.is-selected .tile-sub {
    color: var(--ps2-navy);
}

/* Squad: the big button, deeper blue with the cards fanned out. */
.hub[data-theme="ps2"] .tile-squad {
    background:
        radial-gradient(ellipse 60% 50% at 70% 25%, rgba(120, 200, 255, 0.45), transparent 70%),
        linear-gradient(180deg, #2a6fe4 0%, #0d3fa6 49%, #072d82 51%, #0f45b0 100%);
}

.hub[data-theme="ps2"] .tile-squad .tile-title {
    font-size: clamp(2.3rem, 4.4vw, 3.6rem);
}

.hub[data-theme="ps2"] .tile-squad .tile-sub {
    color: #d6e6ff;
}

.hub[data-theme="ps2"] .tile-squad .tile-art img {
    border: 3px solid #fff;
    border-radius: 0.4rem;
}

/* Small tile art */
.hub[data-theme="ps2"] .tile-crest,
.hub[data-theme="ps2"] .tile-crests i {
    font-family: "Exo 2", sans-serif;
    font-style: italic;
    font-weight: 900;
    color: var(--ps2-navy);
    background: var(--ps2-chrome);
    border-color: var(--ps2-navy);
    box-shadow: inset 0 0 0 2px #fff;
}

.hub[data-theme="ps2"] .tile-crest,
.hub[data-theme="ps2"] .tile-crests i:last-child {
    background: linear-gradient(180deg, #ffe680, var(--ps2-yellow) 49%, #f0a800 51%, #ffc93a);
}

.hub[data-theme="ps2"] .tile-trophies .t-fill {
    fill: var(--ps2-yellow);
}

.hub[data-theme="ps2"] .tile-trophies .trophy-icon path,
.hub[data-theme="ps2"] .tile-trophies .trophy-icon circle {
    stroke: var(--ps2-navy);
}

.hub[data-theme="ps2"] .tile-pitch {
    background:
        linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) 50% 0 / 1.5px 100% no-repeat,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 0.7rem, transparent 0.7rem 1.4rem),
        #1f9a3c;
    border: 2px solid #fff;
    border-radius: 0.3rem;
    box-shadow: 0 0 0 2px var(--ps2-navy);
}

.hub[data-theme="ps2"] .tile-car {
    background: var(--ps2-yellow);
    border-color: var(--ps2-navy);
}

/* Hero: the player card in a chrome frame */

.hub[data-theme="ps2"] .hero .player-wrap::before {
    background: radial-gradient(closest-side, rgba(140, 210, 255, 0.55), rgba(15, 79, 196, 0.25) 60%, transparent);
}

.hub[data-theme="ps2"] .card.player .face {
    border: 1.6cqw solid #c4cedb;
    border-radius: 4cqw;
    box-shadow: inset 0 0 0 0.6cqw #fff, 0 0 0 0.6cqw var(--ps2-navy);
}

.hub[data-theme="ps2"] .card.player .face * {
    font-family: "Exo 2", sans-serif;
}

.hub[data-theme="ps2"] .card.player .c-head h3 {
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}

.hub[data-theme="ps2"] .card.player .c-type {
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: var(--ps2-blue);
    border-radius: 0.6cqw;
}

.hub[data-theme="ps2"] .player-cap {
    font-family: "Exo 2", sans-serif;
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    color: #d6e6ff;
    text-shadow: 1px 1px 0 var(--ps2-navy);
    animation: ps2-blink 1.6s steps(2, start) infinite;
}

.hub[data-theme="ps2"] .player-cap .label {
    display: none;
}

@keyframes ps2-blink {
    to {
        visibility: hidden;
    }
}

.hub[data-theme="ps2"] .hero .c-flip.is-selected {
    outline-color: var(--ps2-yellow);
}

/* Footer: a news band and console button prompts */

.hub[data-theme="ps2"] .home {
    padding-bottom: 0;
}

.hub[data-theme="ps2"] .home-foot {
    gap: 1rem;
    margin-inline: calc(-1 * clamp(1rem, 3vw, 2.4rem));
    padding: 0.5rem clamp(1rem, 3vw, 2.4rem) 0.6rem;
    font-size: 0.95rem;
    color: #d6e6ff;
    background: linear-gradient(180deg, rgba(2, 11, 38, 0.6), rgba(2, 11, 38, 0.95));
    border-top: 2px solid var(--ps2-sky);
}

.hub[data-theme="ps2"] .home-foot::before {
    content: "News";
    flex: none;
    padding: 0 0.7rem;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--ps2-navy);
    background: linear-gradient(180deg, #ffe680, var(--ps2-yellow) 49%, #f0a800 51%, #ffc93a);
    border-radius: 0.3rem;
}

.hub[data-theme="ps2"] .ticker-track li {
    font-style: italic;
    font-weight: 600;
    color: #fff;
}

.hub[data-theme="ps2"] .ticker-track li::before {
    content: "\25B6";
    font-size: 0.7em;
    vertical-align: 0.15em;
    color: var(--ps2-yellow);
}

.hub[data-theme="ps2"] .hub-keys {
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.hub[data-theme="ps2"] .hub-keys kbd {
    font-family: "Exo 2", sans-serif;
    font-style: normal;
    font-weight: 800;
    color: var(--ps2-navy);
    background: var(--ps2-chrome);
    border: 1px solid var(--ps2-navy);
    border-radius: 0.6em;
    opacity: 1;
}

.hub[data-theme="ps2"] .pack-replay {
    font-family: "Exo 2", sans-serif;
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--ps2-yellow);
}

@media (prefers-reduced-motion: reduce) {
    .hub[data-theme="ps2"] body::after,
    .hub[data-theme="ps2"] .tile.is-selected,
    .hub[data-theme="ps2"] .player-cap {
        animation: none;
    }
}

/* Screens: blue sheets in a chrome frame. The shared tokens flip to
   light-on-blue here, and every card goes back to its own light tokens. */

.hub[data-theme="ps2"] main > section:not(.home) {
    --paper: #0d3a9e;
    --paper-light: #0a2a78;
    --paper-deep: #072062;
    --ink: #ffffff;
    --ink-soft: #c9dcff;
    --rule: rgba(201, 220, 255, 0.45);
    --accent: var(--ps2-yellow);
    color: #fff;
    background:
        linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, 0.06) 55% 60%, transparent 60%),
        linear-gradient(180deg, #1552c4 0%, #0b3592 60%, #082a7a 100%);
    border: 3px solid #c4cedb;
    border-radius: 1rem;
    box-shadow: 0 0 0 3px var(--ps2-navy), inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 20px 40px rgba(0, 0, 0, 0.5);
}

.hub[data-theme="ps2"] .card {
    --paper: #f1ead9;
    --paper-light: #f8f3e6;
    --paper-deep: #e7dec7;
    --ink: #1b1812;
    --ink-soft: #4d4737;
    --rule: #1b1812;
    --accent: #c8391f;
}

/* The pitch keeps a light surface so the game's drawn lines still read. */
.hub[data-theme="ps2"] .pitch-stage {
    --paper-light: #d9ecd2;
    --ink: #1b1812;
    --accent: #c8391f;
}

/* Type inside screens: yellow italic labels, chunky shadowed titles. */

.hub[data-theme="ps2"] main > section:not(.home) .label,
.hub[data-theme="ps2"] .screen-name {
    font-size: 0.9rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ps2-yellow);
    text-shadow: 1px 1px 0 var(--ps2-navy);
}

.hub[data-theme="ps2"] main > section:not(.home) h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}

.hub[data-theme="ps2"] main > section:not(.home) h2,
.hub[data-theme="ps2"] .tx-club {
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--ps2-navy);
}

/* Screen chrome */

.hub[data-theme="ps2"] .screen-bar {
    background: linear-gradient(180deg, rgba(4, 18, 58, 0.75), rgba(4, 18, 58, 0.95));
    border-bottom: 2px solid var(--ps2-sky);
}

.hub[data-theme="ps2"] .screen-back,
.hub[data-theme="ps2"] main > section:not(.home) .btn {
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--ps2-navy);
    background: linear-gradient(180deg, #ffe680 0%, var(--ps2-yellow) 48%, #f0a800 52%, #ffc93a 100%);
    border: 2px solid var(--ps2-navy);
    border-radius: 0.6rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.hub[data-theme="ps2"] .screen-back:hover,
.hub[data-theme="ps2"] main > section:not(.home) .btn:hover {
    color: var(--ps2-navy);
    background: linear-gradient(180deg, #ffd08a 0%, var(--ps2-orange) 48%, #e06a00 52%, #ffa640 100%);
}

.hub[data-theme="ps2"] .screen-back kbd {
    border-color: var(--ps2-navy);
}

/* Tab bars: Profile, Squad, the Kick off level picker */

.hub[data-theme="ps2"] .pf-tabs,
.hub[data-theme="ps2"] .squad-views {
    background: linear-gradient(180deg, #020b26, #0a2264);
    border: 2px solid #c4cedb;
    border-radius: 0.8rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.hub[data-theme="ps2"] .pf-tabs button,
.hub[data-theme="ps2"] .squad-views button,
.hub[data-theme="ps2"] .pitch-seg span {
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: #c9dcff;
    border-radius: 0.5rem;
}

.hub[data-theme="ps2"] .pitch-seg span {
    background: linear-gradient(180deg, #3f86f2 0%, #1f5fd6 49%, #1149b8 51%, #1a5ad0 100%);
    border: 2px solid #cfe0ff;
    color: #fff;
}

.hub[data-theme="ps2"] .pf-tabs button[aria-selected="true"],
.hub[data-theme="ps2"] .squad-views button[aria-selected="true"],
.hub[data-theme="ps2"] .pitch-seg input:checked + span {
    color: var(--ps2-navy);
    background: linear-gradient(180deg, #ffe680 0%, var(--ps2-yellow) 49%, #f5a300 51%, var(--ps2-orange) 100%);
}

/* Panels: blue gel */

.hub[data-theme="ps2"] #about .glance > div {
    background: linear-gradient(180deg, #3f86f2 0%, #1f5fd6 49%, #1149b8 51%, #1a5ad0 100%);
    border: 2px solid #cfe0ff;
    border-radius: 0.8rem;
    box-shadow: 0 0 0 2px var(--ps2-navy), 0 6px 12px rgba(0, 0, 0, 0.35);
}

.hub[data-theme="ps2"] #about .glance dd {
    color: #e3edff;
}

.hub[data-theme="ps2"] .glance-big {
    font-weight: 900;
    font-style: italic;
    text-shadow: 2px 2px 0 var(--ps2-navy);
}

.hub[data-theme="ps2"] .tx-card {
    color: #fff;
    border: 3px solid #c4cedb;
    box-shadow: 0 0 0 3px var(--ps2-navy), 0 14px 26px rgba(0, 0, 0, 0.5);
}

.hub[data-theme="ps2"] .tx-meta {
    color: var(--ps2-yellow);
}

.hub[data-theme="ps2"] .tx-stamp {
    color: var(--ps2-yellow);
    border-color: var(--ps2-yellow);
}

.hub[data-theme="ps2"] .tx-meta span + span,
.hub[data-theme="ps2"] .tx-role,
.hub[data-theme="ps2"] .tx-text {
    color: #e3edff;
}

.hub[data-theme="ps2"] .book-status {
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
}

.hub[data-theme="ps2"] .book-name {
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}

/* Pack opening: blue rays, a chrome pack, yellow shadowed walkout text. */

.hub[data-theme="ps2"] .pack-intro {
    background:
        repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 255, 255, 0.05) 0deg 8deg, transparent 8deg 20deg),
        radial-gradient(ellipse 70% 65% at 50% 45%, #1d6bea 0%, #0b3a9e 45%, var(--ps2-navy) 100%);
}

.hub[data-theme="ps2"] .pack {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 45%),
        linear-gradient(160deg, #ffe680 0%, var(--ps2-yellow) 40%, var(--ps2-orange) 100%);
    border-radius: 1rem;
    box-shadow: 0 0 0 3px var(--ps2-navy), inset 0 0 0 3px #fff, 0 34px 60px -18px rgba(0, 0, 0, 0.85);
}

.hub[data-theme="ps2"] .pack-strip {
    background: repeating-linear-gradient(90deg, rgba(4, 18, 58, 0.25) 0 3px, transparent 3px 7px), #c4cedb;
    border-bottom-color: var(--ps2-navy);
    border-radius: 1rem 1rem 0 0;
}

.hub[data-theme="ps2"] .pack-face {
    color: var(--ps2-navy);
    background: rgba(255, 255, 255, 0.35);
    border-color: var(--ps2-navy);
}

.hub[data-theme="ps2"] .pack-mark,
.hub[data-theme="ps2"] .walkout-step {
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}

.hub[data-theme="ps2"] .walkout-step {
    color: var(--ps2-yellow);
    text-shadow: 3px 3px 0 var(--ps2-navy), 0 4px 30px rgba(0, 0, 0, 0.6);
}

.hub[data-theme="ps2"] .pack-name,
.hub[data-theme="ps2"] .pack-sub,
.hub[data-theme="ps2"] .pack-hint,
.hub[data-theme="ps2"] .pack-skip {
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
}

.hub[data-theme="ps2"] .pack-hint {
    color: #fff;
    text-shadow: 1px 1px 0 var(--ps2-navy);
    animation: ps2-blink 1.6s steps(2, start) infinite;
}

.hub[data-theme="ps2"] .pack-skip {
    color: var(--ps2-navy);
    background: var(--ps2-chrome);
    border: 2px solid var(--ps2-navy);
    border-radius: 0.5rem;
}

.hub[data-theme="ps2"] .pack-continue {
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--ps2-navy);
    background: linear-gradient(180deg, #ffe680 0%, var(--ps2-yellow) 48%, #f0a800 52%, #ffc93a 100%);
    border: 2px solid var(--ps2-navy);
    border-radius: 0.6rem;
}

.hub[data-theme="ps2"] .pack-continue:hover {
    color: var(--ps2-navy);
}

.hub[data-theme="ps2"] .walkout-crest {
    color: var(--ps2-navy);
    background: var(--ps2-chrome);
    border-color: var(--ps2-navy);
    box-shadow: inset 0 0 0 2px #fff;
}

.hub[data-theme="ps2"] #about .book-name {
    font-size: 12.5cqi;
}

@media (prefers-reduced-motion: reduce) {
    .hub[data-theme="ps2"] .pack-hint {
        animation: none;
    }
}

@media (max-width: 480px) {
    .hub[data-theme="ps2"] .wordmark,
.case-page[data-theme="ps2"] .wordmark {
        font-size: 1.1rem;
    }

    .hub[data-theme="ps2"] .tile-squad .tile-title {
        font-size: 2rem;
    }

    .hub[data-theme="ps2"] .tile-squad .tile-kicker,
    .hub[data-theme="ps2"] .tile-squad .tile-title {
        position: relative;
        z-index: 1;
        max-width: 55%;
    }

    .hub[data-theme="ps2"] .pf-tabs button {
        font-size: 0.85rem;
    }
}

/* Player photo: the cut-out portrait against a floodlit blue. */
.hub[data-theme="ps2"] .card.player .c-art {
    flex-basis: 60%;
    background:
        radial-gradient(ellipse 60% 45% at 50% 30%, rgba(190, 225, 255, 0.85), transparent 70%),
        linear-gradient(180deg, #4f9bff, #1552c4 55%, #072062);
}

.hub[data-theme="ps2"] .card.player .c-art img {
    object-fit: cover;
    object-position: 50% 0;
}

/* Case files: the blue menu, long-form. No scan lines over reading text. */

.case-page[data-theme="ps2"] {
    --paper: #0d3a9e;
    --paper-light: #0a2a78;
    --paper-deep: #072062;
    --ink: #ffffff;
    --ink-soft: #d3e3ff;
    --rule: rgba(201, 220, 255, 0.45);
    --accent: var(--ps2-yellow);
}

.case-page[data-theme="ps2"] body {
    background-attachment: fixed;
}

.case-page[data-theme="ps2"] .masthead-row {
    align-items: center;
}

.case-page[data-theme="ps2"] .masthead-meta,
.case-page[data-theme="ps2"] .masthead-nav a {
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--ps2-blue);
}

.case-page[data-theme="ps2"] .masthead-meta {
    color: #4b5a74;
}

.case-page[data-theme="ps2"] .masthead-nav a:hover {
    color: var(--ps2-navy);
    border-color: var(--ps2-orange);
}

.case-page[data-theme="ps2"] main .label,
.case-page[data-theme="ps2"] .when {
    font-size: 0.9rem;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ps2-yellow);
    text-shadow: 1px 1px 0 var(--ps2-navy);
}

.case-page[data-theme="ps2"] main *:not(.label, .when, h1, h2) {
    font-style: normal;
}

.case-page[data-theme="ps2"] .case-hero h1,
.case-page[data-theme="ps2"] main h2 {
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 var(--ps2-navy);
}

.case-page[data-theme="ps2"] .case-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    text-shadow: 3px 3px 0 var(--ps2-navy);
}

.case-page[data-theme="ps2"] main h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.case-page[data-theme="ps2"] .link-arrow {
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--ps2-yellow);
    border-bottom: 2px solid var(--ps2-yellow);
}

.case-page[data-theme="ps2"] .link-arrow:hover {
    color: #fff;
    border-color: #fff;
}

.case-page[data-theme="ps2"] .case-prose a:hover {
    color: var(--ps2-yellow);
}

/* Fact strip and feature lists as gel panels */

.case-page[data-theme="ps2"] .case-meta {
    gap: 0.8rem;
    padding-top: 0;
    border-top: 0;
}

.case-page[data-theme="ps2"] .case-meta > div,
.case-page[data-theme="ps2"] .case-features li {
    padding: 1rem 1.1rem 1.1rem;
    background: linear-gradient(180deg, #3f86f2 0%, #1f5fd6 49%, #1149b8 51%, #1a5ad0 100%);
    border: 2px solid #cfe0ff;
    border-radius: 0.8rem;
    box-shadow: 0 0 0 2px var(--ps2-navy), 0 6px 12px rgba(0, 0, 0, 0.35);
}

.case-page[data-theme="ps2"] .case-features {
    gap: 0.9rem;
    border-top: 0;
}

.case-page[data-theme="ps2"] .case-features p {
    color: #e3edff;
}

.case-page[data-theme="ps2"] .case-shots img {
    border: 3px solid #c4cedb;
    border-radius: 0.8rem;
    box-shadow: 0 0 0 3px var(--ps2-navy), 0 14px 24px rgba(0, 0, 0, 0.45);
}

.case-page[data-theme="ps2"] .case-shots figcaption {
    color: #d3e3ff;
}

/* Closing call to action: a yellow gel panel */

.case-page[data-theme="ps2"] .case-cta .wrap {
    padding: clamp(1.6rem, 4vw, 2.6rem);
    color: var(--ps2-navy);
    background: linear-gradient(180deg, #ffe680 0%, var(--ps2-yellow) 49%, #f5a300 51%, var(--ps2-orange) 100%);
    border: 3px solid #fff;
    border-radius: 1rem;
    box-shadow: 0 0 0 3px var(--ps2-navy), 0 16px 30px rgba(0, 0, 0, 0.45);
}

.case-page[data-theme="ps2"] .case-cta h2 {
    color: #fff;
}

.case-page[data-theme="ps2"] .case-cta .link-arrow {
    color: var(--ps2-navy);
    border-color: var(--ps2-navy);
}

.case-page[data-theme="ps2"] .colophon {
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #d3e3ff;
    border-top: 2px solid var(--ps2-sky);
}

.case-page[data-theme="ps2"] :focus-visible {
    outline-color: var(--ps2-yellow);
}