/* Alpha Pairs — NES launch page (pages/alpha-pairs.php, js/alpha-pairs.js).
   Art is in img/alpha-pairs/ and is referenced from the page's HTML, not from
   here, so the asset-version filter can stamp it. Colors are the NES PPU's own,
   sampled from the game. Screens are drawn at the NES's 8:7 pixel aspect, the
   shape they had on a television (aspect-ratio 128/105 for a 256x240 frame). */

.ap {
    --ap-cyan: #3cbcfc;
    --ap-cyan-hi: #a4e4fc;
    --ap-purple: #4428bc;
    --ap-violet: #6844fc;
    --ap-red: #a80020;
    --ap-pink: #e40058;
    --ap-orange: #e45c10;
    --ap-rust: #881400;
    --ap-magenta: #d800cc;
    --ap-plum: #940084;
    --ap-teal: #008888;
    --ap-gold: #fca044;
    --ap-ink: #07060f;
    --ap-panel: #0f0d1c;
    --ap-px: 'Alpha Pairs NES', var(--display);
    --ap-nes: 128 / 105;
    --ap-ease: cubic-bezier(.2, .8, .2, 1);
    position: relative;
    color: var(--text);
}

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

.ap img {
    max-width: 100%;
}

.ap-pixel {
    font-family: var(--ap-px);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0;
    font-synthesis: none;
}

.ap-display {
    font-family: var(--display);
    font-weight: bold;
    letter-spacing: 0.06em;
}

.ap-em {
    color: #fff;
    font-weight: 600;
}

.ap-dim {
    color: var(--text-3);
}

/* Sprites: native-size sheets scaled by --s with hard pixel edges */
.ap-sprite {
    --s: 2;
    display: block;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

.ap-alphy-idle,
.ap-alphy-crossed {
    width: calc(64px * var(--s));
    height: calc(64px * var(--s));
    background-size: calc(192px * var(--s)) calc(64px * var(--s));
    animation: ap-frames3 1.8s steps(3) infinite;
}

.ap-atoz-front {
    width: calc(64px * var(--s));
    height: calc(128px * var(--s));
    background-size: 100% 100%;
}

@keyframes ap-frames3 { to { background-position-x: calc(-192px * var(--s)); } }

/* ═══════════════════════════ HERO ═══════════════════════════ */
.ap-hero {
    --floor: 150px;
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    isolation: isolate;
    background: #05040c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ap-hero-wall {
    position: absolute;
    inset: 0;
    background-size: 64px 64px;
    background-repeat: repeat;
    image-rendering: pixelated;
    opacity: 0.32;
    z-index: -3;
    -webkit-mask-image: radial-gradient(120% 90% at 65% 40%, #000 30%, transparent 85%);
    mask-image: radial-gradient(120% 90% at 65% 40%, #000 30%, transparent 85%);
    animation: ap-wall 40s linear infinite;
}

@keyframes ap-wall { to { background-position: 64px 64px; } }

.ap-hero-glow {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(40% 55% at 72% 42%, rgba(60, 188, 252, 0.28), transparent 70%),
        radial-gradient(35% 50% at 18% 30%, rgba(104, 68, 252, 0.30), transparent 70%),
        radial-gradient(60% 40% at 50% 110%, rgba(228, 0, 88, 0.22), transparent 70%),
        linear-gradient(180deg, rgba(5, 4, 12, 0.2), rgba(5, 4, 12, 0.85) 92%);
}

/* The stage floor: the game's black-and-white checker, in perspective */
.ap-hero-floor,
.ap-end-floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--floor, 120px);
    overflow: hidden;
    perspective: 260px;
    perspective-origin: 50% -40%;
    z-index: -1;
}

.ap-floor-plane {
    position: absolute;
    left: -60%;
    right: -60%;
    top: 0;
    height: 420px;
    transform-origin: 50% 0;
    transform: rotateX(62deg);
    /* The game's floor: about eight wide tiles across the stage, a seam at its
       centre. The plane is 220% of the stage, so one tile is 1/(8 x 2.2) of it
       and a two-tile repeat is 11.36%; two rows show, as in the game. */
    background: repeating-conic-gradient(#f4f4f4 0 25%, #0b0a12 0 50%) 50% 0 / 11.36% 160px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25), #000 35%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.25), #000 35%);
}

.ap-end-floor { height: 96px; }

.ap-hero-floor::after,
.ap-end-floor::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 4, 12, 0.9) 0%, rgba(5, 4, 12, 0.12) 40%, rgba(5, 4, 12, 0.22));
}

/* Curtains, from the game's own curtain tile (256x208) at 4x */
.ap-valance {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 44px;
    background-repeat: repeat-x;
    background-size: 512px 416px;
    background-position: 0 100%;
    image-rendering: pixelated;
    z-index: 2;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6));
}

/* The opening curtain: covers the stage, then rises like the game's */
.ap-curtain {
    position: absolute;
    inset: 0;
    z-index: 20;
    /* the hem along the bottom, and the drape stretched above it */
    background-size: 512px 416px, 512px 200%;
    background-repeat: repeat-x, repeat-x;
    background-position: 0 100%, 0 0;
    image-rendering: pixelated;
    pointer-events: none;
    transform: translateY(-100%);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.6);
}

.ap.is-raising .ap-curtain {
    animation: ap-raise 1.15s 0.25s cubic-bezier(.6, 0, .3, 1) both;
}

@keyframes ap-raise {
    from { transform: translateY(0); }
    to { transform: translateY(calc(-100% + 0px)); }
}

.ap-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: 48px;
    /* The set stands on the stage floor whatever the copy's height: its feet
       land inside the floor band (the bottom padding is less than --floor). */
    align-items: end;
    padding: 92px 72px 64px;
}

.ap-hero-copy {
    align-self: center;
    padding-bottom: calc(var(--floor) - 40px);   /* keep the copy off the floor */
}

.ap-eyebrow {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    background: rgba(60, 188, 252, 0.12);
    box-shadow: inset 0 0 0 1px rgba(60, 188, 252, 0.4), 0 0 30px rgba(60, 188, 252, 0.18);
    color: var(--ap-cyan-hi);
    font-size: 16px;
    line-height: 16px;
}

.ap-eyebrow .ap-display {
    font-size: 13px;
    text-transform: uppercase;
}

.ap-live {
    width: 10px;
    height: 10px;
    background: #4cff7a;
    box-shadow: 0 0 10px #4cff7a, 0 0 0 0 rgba(76, 255, 122, 0.6);
    animation: ap-live 1.6s infinite;
}

@keyframes ap-live {
    0%, 60% { box-shadow: 0 0 10px #4cff7a, 0 0 0 0 rgba(76, 255, 122, 0.55); }
    100% { box-shadow: 0 0 10px #4cff7a, 0 0 0 12px rgba(76, 255, 122, 0); }
}

.ap-logo {
    margin: 28px 0 0;
    line-height: 0;
}

.ap-logo img {
    width: 520px;
    height: auto;
    filter: drop-shadow(0 0 28px rgba(60, 188, 252, 0.45)) drop-shadow(0 18px 30px rgba(0, 0, 0, 0.6));
    animation: ap-float 6s ease-in-out infinite;
}

@keyframes ap-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.ap-tagline {
    margin: 26px 0 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.3;
    color: #fff;
    max-width: 30ch;
    text-wrap: balance;
}

.ap-lead {
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-2);
    max-width: 50ch;
}

.ap-buy {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 32px;
}

/* Back from Stripe: the download, with Alphy standing guard */
.ap-thanks {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 30px;
    padding: 20px 22px;
    border-radius: 18px;
    background: rgba(76, 255, 122, 0.08);
    box-shadow: inset 0 0 0 1px rgba(76, 255, 122, 0.4), 0 0 40px rgba(76, 255, 122, 0.12);
    text-align: left;
}

.ap-thanks p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-2);
}

.ap-thanks .ap-thanks-title {
    margin-bottom: 6px;
    font-family: var(--display);
    font-weight: bold;
    font-size: 20px;
    color: #fff;
}

.ap-thanks-alphy {
    --s: 1.25;
}

.ap-thanks-note {
    grid-template-columns: minmax(0, 1fr);
    background: rgba(252, 160, 68, 0.08);
    box-shadow: inset 0 0 0 1px rgba(252, 160, 68, 0.4);
}

.ap-thanks-note p {
    margin: 0;
}

.ap-buy-center {
    justify-content: center;
}

.ap-buy-form {
    margin: 0;
}

.ap-btn,
.ap-btn:hover,
.ap-btn:visited {
    text-decoration: none;
}

.ap-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 64px;
    padding: 0 26px;
    border: 0;
    border-radius: 16px;
    font-family: var(--display);
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s var(--ap-ease), box-shadow 0.25s var(--ap-ease), background 0.25s;
}

.ap-btn-buy {
    color: #08101a;
    background: linear-gradient(180deg, #8fe0ff 0%, var(--ap-cyan) 55%, #1d9fe0 100%);
    box-shadow: 0 6px 0 #0b5f8f, 0 16px 40px rgba(60, 188, 252, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

/* A Buy-style button can be a link (the press kit zip): keep its dark text
   whatever the site's link colours say for hover, focus and visited */
.ap-btn-buy,
a.ap-btn-buy:link,
a.ap-btn-buy:visited,
a.ap-btn-buy:hover,
a.ap-btn-buy:focus,
a.ap-btn-buy:active {
    color: #08101a;
}

.ap-btn-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #0b5f8f, 0 22px 54px rgba(60, 188, 252, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.ap-btn-buy:active {
    transform: translateY(5px);
    box-shadow: 0 1px 0 #0b5f8f, 0 8px 24px rgba(60, 188, 252, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.ap-btn-buy::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, transparent 60%);
    background-size: 250% 100%;
    background-position: 130% 0;
    animation: ap-sheen 4.5s 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ap-sheen {
    0%, 70% { background-position: 130% 0; }
    100% { background-position: -40% 0; }
}

/* A cartridge-shaped glyph in the button */
.ap-btn-cart {
    width: 24px;
    height: 26px;
    border-radius: 3px 3px 2px 2px;
    background:
        linear-gradient(#08101a, #08101a) 4px 5px / 16px 10px no-repeat,
        repeating-linear-gradient(90deg, rgba(8,16,26,.9) 0 2px, transparent 2px 4px) 4px 19px / 16px 4px no-repeat,
        rgba(8, 16, 26, 0.18);
    box-shadow: inset 0 0 0 2px #08101a;
}

.ap-btn-price {
    padding: 8px 10px;
    margin-right: -8px;
    border-radius: 10px;
    background: #08101a;
    color: var(--ap-cyan);
    font-size: 16px;
    line-height: 16px;
}

.ap-btn-itch,
.ap-btn-itch:visited {
    gap: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    font-size: 16px;
    height: 56px;
}

.ap-btn-itch-logo {
    width: 22px;
    height: 22px;
    flex: none;
    color: #fa5c5c;
    transition: transform 0.25s var(--ap-ease);
}

.ap-btn-itch:hover,
.ap-btn-itch:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(250, 92, 92, 0.16), rgba(250, 92, 92, 0.06));
    box-shadow: inset 0 0 0 1px rgba(250, 92, 92, 0.75), 0 14px 34px rgba(250, 92, 92, 0.22);
}

.ap-btn-itch:hover .ap-btn-itch-logo {
    transform: rotate(-8deg) scale(1.08);
}

.ap-btn-itch:active {
    transform: translateY(1px);
}

.ap-buy-note {
    margin: 22px 0 0;
    color: var(--ap-cyan-hi);
    font-size: 8px;
    line-height: 16px;
    opacity: 0.9;
}

.ap-buy-note .ap-pixel {
    font-size: 8px;
}

.ap-buy-note .ap-display {
    font-size: 12px;
}

.ap-plays {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-2);
    max-width: 52ch;
}

/* ── The set: a CRT television ── */
.ap-hero-set {
    position: relative;
    padding-top: 24px;
}

.ap-tv {
    position: relative;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.7));
}

.ap-tv-body {
    position: relative;
    padding: 26px 26px 0;
    border-radius: 34px 34px 28px 28px;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
        linear-gradient(180deg, #2b2a33 0%, #18171e 48%, #111016 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.14),
        inset 0 -3px 0 rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(0, 0, 0, 0.8);
}

.ap-tv-bezel {
    padding: 20px;
    border-radius: 26px;
    background: linear-gradient(180deg, #08080b, #121117);
    box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ap-screen {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 6% / 8%;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 2px #000, 0 0 60px rgba(60, 188, 252, 0.25);
    transform-origin: 50% 50%;
    transition: box-shadow 0.4s;
}

.ap-screen-video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4.3%;
    width: 91.4%;
    height: 100%;
    object-fit: fill;
    filter: saturate(1.15) contrast(1.05);
}

.ap-screen-gl {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
}

/* A video shows only once it is playing; until then the <img> under it does.
   (A video's own poster is drawn at a different size in some browsers, and
   snapped when the first frame arrived.) */
.ap-mini-crt video,
#ap-video {
    opacity: 0;
    transition: opacity 0.25s;
}

.ap-mini-crt video.is-ready,
#ap-video.is-ready {
    opacity: 1;
}

/* The shader takes over once it has a frame; until then the poster shows */
.ap.gl-live .ap-screen-gl { display: block; }
.ap.gl-live .ap-screen-video,
.ap.gl-live #ap-video.is-ready { opacity: 0; }

/* CSS stand-in for the shader: scanlines, a glow and a vignette */
.ap-screen-fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.75) 100%),
        linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.4) 55%) 0 0 / 100% calc(100% / 240);
    mix-blend-mode: multiply;
}

.ap.gl-live .ap-screen-fx,
.ap.crt-off .ap-screen-fx {
    background: radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.55) 100%);
}

.ap-glass {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(90% 60% at 30% 8%, rgba(255, 255, 255, 0.16), transparent 50%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.07), transparent 35%);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85), inset 0 0 2px rgba(255, 255, 255, 0.25);
}

.ap.crt-off .ap-glass {
    background: none;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6);
}

/* Power on: the beam opens from a line, as a tube does */
.ap-screen.is-off > :not(.ap-glass) {
    opacity: 0;
}

.ap-screen.is-powering > :not(.ap-glass):not(.ap-osd) {
    animation: ap-power 0.7s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes ap-power {
    0% { opacity: 1; transform: scale(1.02, 0.004); filter: brightness(6); }
    35% { opacity: 1; transform: scale(1.02, 0.02); filter: brightness(4); }
    70% { transform: scale(1, 1.02); filter: brightness(1.6); }
    100% { opacity: 1; transform: none; filter: none; }
}

.ap.gl-live .ap-screen.is-powering .ap-screen-video { animation: none; }

.ap-osd {
    position: absolute;
    top: 7%;
    right: 7%;
    color: #6cff7a;
    font-size: 16px;
    line-height: 16px;
    text-align: right;
    text-shadow: 0 0 8px rgba(108, 255, 122, 0.8), 2px 2px 0 rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    white-space: pre;
}

.ap-osd.is-on {
    opacity: 1;
}

.ap-tv-panel {
    position: relative;
    z-index: 5;          /* above the bezel, so the SOUND bubble that overlaps it takes the tap */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 16px;
    padding: 18px 8px 20px;
}

.ap-tv-brand {
    font-size: 8px;
    line-height: 8px;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0;
    margin-right: auto;
}

.ap-tv-channels {
    display: flex;
    gap: 6px;
}

.ap-ch,
.ap-knob {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    color: rgba(255, 255, 255, 0.6);
    background: linear-gradient(180deg, #34333c, #1d1c23);
    box-shadow: 0 3px 0 #0a0a0d, inset 0 1px 0 rgba(255, 255, 255, 0.14);
    cursor: pointer;
    font-size: 8px;
    line-height: 8px;
    transition: transform 0.12s, color 0.2s, box-shadow 0.2s;
}

.ap-ch:hover,
.ap-knob:hover {
    color: #fff;
}

.ap-ch:active,
.ap-knob:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #0a0a0d, inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ap-ch.is-on {
    color: #08101a;
    background: linear-gradient(180deg, #a4e4fc, var(--ap-cyan));
    box-shadow: 0 3px 0 #0b5f8f, 0 0 16px rgba(60, 188, 252, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ap-ch:focus-visible,
.ap-knob:focus-visible,
.ap-tab:focus-visible,
.ap-switch:focus-visible,
.ap-btn:focus-visible,
.ap-shot:focus-visible {
    outline: 2px solid var(--ap-cyan);
    outline-offset: 3px;
}

.ap-tv-knobs {
    display: flex;
    gap: 6px;
}

.ap-knob svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ap-knob .ap-ico-spk { fill: currentColor; stroke: none; }
.ap-knob .ap-ico-on { display: none; }
.ap-knob[aria-pressed="true"] .ap-ico-on { display: inline; }
.ap-knob[aria-pressed="true"] .ap-ico-off { display: none; }

.ap-knob[aria-pressed="true"] {
    color: #6cff7a;
    text-shadow: 0 0 8px rgba(108, 255, 122, 0.7);
}

/* SOUND asks to be pressed: a pulsing ring and a speech bubble, until it is */
.ap-sound-wrap {
    position: relative;
    display: inline-flex;
}

#ap-sound.is-calling {
    color: #fff;
    animation: ap-call 1.5s ease-out infinite;
}

#ap-sound.is-calling svg {
    animation: ap-wiggle 1.5s ease-in-out infinite;
}

@keyframes ap-call {
    0% { box-shadow: 0 3px 0 #0a0a0d, 0 0 0 0 rgba(108, 255, 122, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
    70% { box-shadow: 0 3px 0 #0a0a0d, 0 0 0 12px rgba(108, 255, 122, 0), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
    100% { box-shadow: 0 3px 0 #0a0a0d, 0 0 0 0 rgba(108, 255, 122, 0), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
}

@keyframes ap-wiggle {
    0%, 60%, 100% { transform: none; }
    70% { transform: rotate(-14deg); }
    80% { transform: rotate(12deg); }
    90% { transform: rotate(-6deg); }
}

.ap-sound-callout {
    position: absolute;
    right: -6px;
    bottom: calc(100% + 16px);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    white-space: nowrap;
    color: #fff;
    background: #000;
    box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px #000, 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 30px rgba(108, 255, 122, 0.25);
    font-size: 8px;
    line-height: 8px;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    transform-origin: 85% 100%;
    transition: opacity 0.35s var(--ap-ease), transform 0.35s var(--ap-ease);
}

.ap-sound-callout .ap-display {
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.04em;
}

.ap-sound-callout.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    animation: ap-bob 1.6s 0.4s ease-in-out infinite;
}

/* the tail, pointing down at the button */
.ap-sound-callout::before,
.ap-sound-callout::after {
    content: "";
    position: absolute;
    right: 34px;
    border-style: solid;
}

.ap-sound-callout::before {
    bottom: -14px;
    border-width: 14px 10px 0 10px;
    border-color: #fff transparent transparent transparent;
}

.ap-sound-callout::after {
    /* the black fill reaches 3px up into the bubble, over its white border, so the
       tail and the bubble are one shape; its edges sit 3px inside the white tail */
    bottom: -10px;
    right: 34.5px;
    border-width: 13px 9.5px 0 9.5px;
    border-color: #000 transparent transparent transparent;
}

.ap-callout-note {
    color: #6cff7a;
    font-size: 16px;
    line-height: 16px;
    text-shadow: 0 0 10px rgba(108, 255, 122, 0.8);
    animation: ap-note 0.8s steps(2) infinite;
}

@keyframes ap-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes ap-note {
    50% { transform: translateY(-3px); }
}

.ap-tv-feet {
    display: flex;
    justify-content: space-between;
    padding: 0 18%;
}

.ap-tv-feet span {
    width: 64px;
    height: 12px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #121117, #08080b);
}

/* ═══════════════════════════ BUY BAR ═══════════════════════════ */
.ap-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    padding: 10px var(--gutter);
    background: linear-gradient(180deg, rgba(10, 9, 20, 0.92), rgba(10, 9, 20, 0.82));
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(60, 188, 252, 0.25), 0 18px 40px rgba(0, 0, 0, 0.45);
    /* Hidden: far enough up that its shadow and the Buy glow clear the
       viewport too, and invisible once it has slid away. */
    transform: translateY(calc(-100% - 80px));
    visibility: hidden;
    transition: transform 0.45s var(--ap-ease), visibility 0s linear 0.45s;
}

.ap-bar.is-on {
    transform: none;
    visibility: visible;
    transition: transform 0.45s var(--ap-ease), visibility 0s linear 0s;
}

.ap-bar-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.ap-bar-brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    margin-right: auto;
    text-decoration: none;
}

.ap-bar-brand img {
    height: 40px;
    width: auto;
    flex: none;
}

.ap-bar-tag {
    color: var(--ap-cyan-hi);
    font-size: 8px;
    line-height: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-bar-tag.ap-display {
    font-size: 12px;
    line-height: 1.2;
}

.ap-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.ap-bar .ap-btn {
    height: 46px;
    padding: 0 18px;
    gap: 10px;
    border-radius: 12px;
    font-size: 15px;
}

.ap-bar .ap-btn-buy {
    box-shadow: 0 4px 0 #0b5f8f, 0 10px 26px rgba(60, 188, 252, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.ap-bar .ap-btn-buy:active {
    box-shadow: 0 1px 0 #0b5f8f, 0 6px 16px rgba(60, 188, 252, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.7);
}

.ap-bar .ap-btn-cart {
    transform: scale(0.85);
}

.ap-bar .ap-btn-price {
    font-size: 8px;
    line-height: 8px;
    padding: 6px 8px;
}

@media (max-width: 720px) {
    .ap-bar { padding: 8px 12px; }
    .ap-bar-inner { gap: 10px; }
    .ap-bar-tag { display: none; }
    .ap-bar-brand img { height: 32px; }
    .ap-bar .ap-btn { height: 42px; padding: 0 14px; font-size: 14px; }
    /* itch.io keeps just its logo on a phone */
    .ap-bar .ap-btn-itch span { display: none; }
    .ap-bar .ap-btn-itch { padding: 0 12px; }
}

@media (max-width: 380px) {
    .ap-bar .ap-btn-cart { display: none; }
}

/* ═══════════════════════════ TICKER ═══════════════════════════ */
.ap-ticker {
    position: relative;
    margin: 28px 0 0;
    border-radius: 999px;
    background: #000;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px #000, 0 0 0 2px #000;
    overflow: hidden;
    height: 52px;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ap-ticker-track {
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    font-size: 16px;
    line-height: 16px;
    color: var(--ap-cyan);
    animation: ap-tick 38s linear infinite;
    padding-left: 28px;
}

.ap-ticker-track span:nth-of-type(3n+2) { color: #fff; }
.ap-ticker-track span:nth-of-type(3n) { color: var(--ap-gold); }

.ap-ticker-track i {
    width: 8px;
    height: 8px;
    background: var(--ap-pink);
    flex: none;
}

@keyframes ap-tick { to { transform: translateX(-50%); } }

/* ═══════════════════════════ SECTIONS ═══════════════════════════ */
.ap-section {
    position: relative;
    margin-top: 120px;
}

.ap-head {
    max-width: 860px;
    margin-bottom: 44px;
}

.ap-head-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ap-head-row {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.ap-kicker {
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    color: var(--ap-pink);
    margin-bottom: 18px;
}

.ap-h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: bold;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: #fff;
    text-wrap: balance;
}

.ap-h3 {
    margin: 0 0 10px;
    font-family: var(--display);
    font-weight: bold;
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
}

.ap-h3.ap-pixel {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 14px;
}

.ap-intro {
    margin: 20px 0 0;
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-2);
}

.ap-section p,
.ap-rush p,
.ap-cast p,
.ap-genesis p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-2);
}

/* Little CRT: any of the game's clips, at the NES's shape */
.ap-mini-crt {
    position: relative;
    aspect-ratio: var(--ap-nes);
    border-radius: 18px / 20px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 10px #121117, 0 0 0 11px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.55);
}

.ap-mini-crt video,
.ap-mini-crt img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: saturate(1.12) contrast(1.04);
}

.ap-mini-crt::after,
.ap-shot::after,
.ap-board::after,
.ap-lb-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* glass and vignette only: scanlines at thumbnail size beat against the
       picture's 240 lines and band */
    background:
        radial-gradient(90% 60% at 30% 6%, rgba(255, 255, 255, 0.12), transparent 50%),
        radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.6) 100%);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
    transition: opacity 0.3s;
}

/* Big screens get scanlines, one per NES line so they never beat */
.ap-mini-crt-lg::after,
.ap-lb-screen::after {
    background:
        radial-gradient(90% 60% at 30% 6%, rgba(255, 255, 255, 0.12), transparent 50%),
        radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.34) 55%) 0 0 / 100% calc(100% / 240);
}

.ap.crt-off .ap-mini-crt::after,
.ap.crt-off .ap-shot::after,
.ap.crt-off .ap-board::after,
.ap.crt-off .ap-lb-screen::after {
    opacity: 0;
}

.ap-mini-crt-lg {
    border-radius: 24px / 26px;
    box-shadow: 0 0 0 14px #121117, 0 0 0 15px rgba(255, 255, 255, 0.08), 0 40px 80px rgba(0, 0, 0, 0.6);
}

/* Steps, each in its level's colors */
.ap-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.ap-step {
    --lv-a: var(--ap-purple);
    --lv-b: var(--ap-violet);
    position: relative;
    padding: 28px 28px 30px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(7, 6, 15, 0) 0%, rgba(7, 6, 15, 0.92) 58%),
        repeating-conic-gradient(var(--lv-a) 0 25%, var(--lv-b) 0 50%) 0 0 / 48px 48px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: transform 0.4s var(--ap-ease);
}

.ap-step:hover {
    transform: translateY(-6px);
}

.ap-lv-blue { --lv-a: var(--ap-purple); --lv-b: var(--ap-violet); }
.ap-lv-pink { --lv-a: var(--ap-red); --lv-b: var(--ap-pink); }
.ap-lv-orange { --lv-a: var(--ap-rust); --lv-b: var(--ap-orange); }

.ap-step .ap-mini-crt {
    box-shadow: 0 0 0 6px #000, 0 0 0 8px #fff, 0 20px 40px rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    margin: 8px 8px 30px;
}

.ap-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-size: 24px;
    line-height: 24px;
    box-shadow: 0 0 0 3px #000, 0 0 0 5px #fff;
}

.ap-step p {
    margin: 0;
    font-size: 16px;
}

/* The energy meter */
.ap-meter-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 44px;
    align-items: center;
    margin-top: 44px;
    padding: 36px 40px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px var(--line);
}

.ap-meter-copy p {
    margin: 0;
}

.ap-meter {
    padding: 6px;
    border-radius: 999px;
    background: #000;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #000;
}

.ap-meter-tube {
    position: relative;
    width: 24px;
    height: 220px;
    border-radius: 999px;
    overflow: hidden;
    background: #000;
}

.ap-meter-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 999px;
    background: var(--ap-cyan);
    animation: ap-meter 7s ease-in-out infinite;
}

@keyframes ap-meter {
    0% { height: 92%; background: var(--ap-cyan); }
    40% { height: 34%; background: var(--ap-cyan); }
    52% { height: 14%; background: #fff; }
    58% { height: 14%; background: var(--ap-pink); }
    64% { height: 64%; background: var(--ap-cyan); }
    100% { height: 92%; background: var(--ap-cyan); }
}

.ap-meter-clip {
    max-width: 360px;
    justify-self: end;
    width: 100%;
}

/* Split layouts */
.ap-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 72px;
    align-items: center;
}

.ap-split-copy p {
    margin: 22px 0 0;
}

.ap-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.ap-tab {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: #000;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25);
    cursor: pointer;
    font-size: 16px;
    line-height: 16px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.ap-tab:hover {
    transform: translateY(-2px);
}

.ap-tab.is-on {
    box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px var(--ap-pink), 0 12px 30px rgba(228, 0, 88, 0.35);
}

.ap-tab-ico {
    height: 32px;
    width: auto;
    image-rendering: pixelated;
}

/* ═══════════════════════════ WORD RUSH ═══════════════════════════ */
.ap-rush {
    position: relative;
    margin-top: 120px;
    border-radius: var(--r-lg);
    overflow: hidden;
    isolation: isolate;
}

.ap-rush-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 80% at 80% 50%, rgba(255, 255, 255, 0.12), transparent 60%),
        linear-gradient(90deg, rgba(20, 0, 22, 0.92) 0%, rgba(20, 0, 22, 0.55) 55%, rgba(20, 0, 22, 0.2) 100%),
        repeating-conic-gradient(var(--ap-plum) 0 25%, var(--ap-magenta) 0 50%) 0 0 / 64px 64px;
    animation: ap-rushbg 18s linear infinite;
}

@keyframes ap-rushbg { to { background-position: 0 0, 0 0, 64px 0; } }

.ap-rush-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 64px;
    align-items: center;
    padding: 80px 72px;
}

.ap-rush .ap-kicker {
    color: #fff;
    opacity: 0.85;
}

.ap-rush-title {
    margin: 0;
    font-size: 96px;
    line-height: 96px;
    color: #fff;
    /* glow only: a hard shadow fills the 1px gaps in the game's letters */
    text-shadow: 0 0 2px #fff, 0 0 40px rgba(216, 0, 204, 0.9), 0 0 90px rgba(216, 0, 204, 0.6);
}

.ap-rush-tag {
    margin: 28px 0 0 !important;
    font-family: var(--display);
    font-weight: bold;
    font-size: 24px !important;
    line-height: 1.3 !important;
    color: #fff !important;
}

.ap-rush p {
    color: rgba(255, 255, 255, 0.85);
}

.ap-rush-clock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 26px;
    width: 120px;
    height: 72px;
    border-radius: 14px;
    background: #000;
    color: #fff;
    font-size: 48px;
    line-height: 48px;
    box-shadow: inset 0 0 0 4px #fff, 0 0 0 3px #000;
}

.ap-rush-clock.is-low {
    color: var(--ap-pink);
    animation: ap-blink 0.5s steps(2) infinite;
}

@keyframes ap-blink { 50% { opacity: 0.3; } }

.ap-rush-media {
    position: relative;
}

.ap-rush-stills {
    position: absolute;
    right: -40px;
    bottom: -48px;
    display: flex;
    gap: 14px;
    transform: rotate(-4deg);
}

.ap-rush-stills img {
    width: 170px;
    aspect-ratio: var(--ap-nes);
    height: auto;
    object-fit: fill;
    border-radius: 10px;
    box-shadow: 0 0 0 5px #000, 0 0 0 7px #fff, 0 20px 40px rgba(0, 0, 0, 0.6);
    image-rendering: pixelated;
}

.ap-rush-stills img + img {
    transform: translateY(-30px) rotate(6deg);
}

/* ═══════════════════════════ BOARDS ═══════════════════════════ */
.ap-boards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
}

.ap-board {
    position: relative;
    margin: 0;
    aspect-ratio: var(--ap-nes);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 40px rgba(0, 0, 0, 0.45);
    transform: rotate(calc((var(--i) - 4.5) * 0.35deg));
    transition: transform 0.45s var(--ap-ease), box-shadow 0.45s var(--ap-ease);
}

.ap-board:hover {
    transform: translateY(-8px) scale(1.04) rotate(0deg);
    box-shadow: 0 0 0 3px #fff, 0 30px 60px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.ap-board img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.ap-board figcaption {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 6px 8px;
    border-radius: 6px;
    background: #000;
    color: #fff;
    font-size: 8px;
    line-height: 8px;
    box-shadow: 0 0 0 2px #fff;
}

/* ═══════════════════════════ CAST ═══════════════════════════ */
.ap-cast {
    position: relative;
    margin-top: 120px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ap-panel);
    box-shadow: inset 0 0 0 1px var(--line);
}

.ap-cast-stage {
    display: flex;
    align-items: center;
    padding: 56px 48px;
    /* the card's own background, with a glow behind the screen */
    background: radial-gradient(70% 60% at 50% 45%, rgba(104, 68, 252, 0.24), transparent 70%);
}

.ap-cast-stage .ap-mini-crt {
    width: 100%;
}

.ap-cast-copy {
    padding: 64px 60px;
}

.ap-cast-cards {
    display: grid;
    gap: 20px;
    margin-top: 32px;
}

.ap-cast-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    padding: 20px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px var(--line);
}

.ap-cast-card p {
    margin: 0;
    font-size: 16px;
}

.ap-cast-portrait {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    overflow: hidden;
    background: repeating-conic-gradient(var(--ap-purple) 0 25%, #000 0 50%) 0 0 / 32px 32px;
    box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px #000;
}

.ap-cast-portrait .ap-atoz-front {
    --s: 1.5;
    transform: translateY(46%);
}

.ap-cast-portrait .ap-alphy-crossed {
    --s: 1.5;
    transform: translateY(6%);
}

/* ═══════════════════════════ GALLERY ═══════════════════════════ */
.ap-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    color: var(--text-2);
    font-family: var(--display);
    font-size: 14px;
    cursor: pointer;
}

.ap-switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.25s;
}

.ap-switch-dot {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.25s var(--ap-ease);
}

.ap-switch[aria-pressed="true"] .ap-switch-track { background: var(--ap-cyan); }
.ap-switch[aria-pressed="true"] .ap-switch-dot { transform: translateX(18px); }

.ap-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.ap-shot {
    position: relative;
    display: block;
    aspect-ratio: var(--ap-nes);
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s var(--ap-ease), box-shadow 0.4s var(--ap-ease);
}

.ap-shot:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 2px var(--ap-cyan), 0 26px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(60, 188, 252, 0.25);
}

.ap-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Lightbox */
.ap-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    align-items: center;
    padding: 32px;
    background: rgba(3, 3, 8, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.ap-lightbox[hidden] { display: none; }

.ap-lb-screen {
    position: relative;
    justify-self: center;
    width: min(100%, calc((100vh - 64px) * 128 / 105));
    aspect-ratio: var(--ap-nes);
    border-radius: 3% / 3.6%;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 14px #121117, 0 0 0 15px rgba(255, 255, 255, 0.1), 0 40px 100px rgba(0, 0, 0, 0.8);
}

.ap-lb-screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.ap-lb-close,
.ap-lb-prev,
.ap-lb-next {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.ap-lb-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
}

.ap-lb-prev:hover,
.ap-lb-next:hover,
.ap-lb-close:hover {
    background: var(--ap-cyan);
    color: #000;
}

/* ═══════════════════════════ INSIDE THE ROM ═══════════════════════════ */
.ap-split-cart {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.ap-rom-wrap {
    perspective: 1400px;
    display: flex;
    justify-content: center;
    padding: 20px 0 40px;
}

/* A ROM chip drawn as an NES cart: black epoxy body in the cart's outline,
   the cart's gold edge connector along the bottom. */
.ap-rom {
    position: relative;
    width: min(100%, 380px);
    transform: rotateY(-14deg) rotateX(7deg);
    transform-style: preserve-3d;
    transition: transform 0.8s var(--ap-ease);
    filter: drop-shadow(0 50px 50px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgba(60, 188, 252, 0.16));
}

.ap-rom-wrap:hover .ap-rom {
    transform: rotateY(-4deg) rotateX(2deg) translateY(-6px);
}

.ap-rom-body {
    position: relative;
    z-index: 1;
    aspect-ratio: 120 / 128;
    border-radius: 16px 16px 6px 6px;
    /* the cart's outline: full width above, stepped in where it meets the slot */
    clip-path: polygon(0 0, 100% 0, 100% 80%, 94% 80%, 94% 100%, 6% 100%, 6% 80%, 0 80%);
    background:
        radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, 0.09), transparent 60%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, #2a2930 0%, #17161c 55%, #0e0d12 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.6);
}

.ap-rom-notch {
    position: absolute;
    top: -22px;
    left: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #0a090d;
    box-shadow: inset 0 -3px 6px rgba(255, 255, 255, 0.06);
}

.ap-rom-dot {
    position: absolute;
    top: 5%;
    left: 6%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #2c2b33, #0b0a0e 70%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ap-rom-ridges {
    position: absolute;
    left: 20%;
    right: 20%;
    top: 4.5%;
    height: 6%;
    border-radius: 3px;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0 2px, rgba(255, 255, 255, 0.07) 2px 3px, transparent 3px 6px);
}

.ap-rom-label {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 13%;
    bottom: 27%;        /* the label art's own 630x500 shape */
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 2px #050507, 0 0 0 3px rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.5);
}

.ap-rom-label img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}

.ap-rom-label::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), transparent 35%);
}

/* laser-etched part marking */
.ap-rom-print {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 75.5%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 8px;
    line-height: 8px;
    color: rgba(255, 255, 255, 0.34);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
}

/* the edge connector, as on the cart's board */
.ap-rom-pins {
    position: relative;
    display: block;
    width: calc(88% - 0px);
    margin: -1px auto 0;
    height: 30px;
    border-radius: 0 0 8px 8px;
    background:
        repeating-linear-gradient(90deg, transparent 0 3px, #f7d774 3px 4px, #d7a93a 4px 9px, #9d7420 9px 10px, transparent 10px 13px) 0 6px / 100% 20px no-repeat,
        linear-gradient(180deg, #0f4a33, #0a3324);
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.4);
}

.ap-rom-shine {
    position: absolute;
    inset: 0 0 30px;
    z-index: 2;
    border-radius: 16px 16px 6px 6px;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.12) 48%, transparent 60%);
    background-size: 250% 100%;
    animation: ap-sheen 6s 1s ease-in-out infinite;
}

.ap-specs {
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--line);
    box-shadow: inset 0 0 0 1px var(--line);
}

.ap-specs > div {
    padding: 16px 20px;
    background: var(--bg);
}

.ap-specs > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.ap-specs dt {
    font-family: var(--display);
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ap-cyan);
    margin-bottom: 6px;
}

.ap-specs dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: #fff;
}

/* ═══════════════════════════ CREDITS ═══════════════════════════ */
.ap-credits {
    position: relative;
    padding: 56px 48px 60px;
    border-radius: var(--r-lg);
    background: #000;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px #000, 0 0 0 1px var(--line);
    text-align: center;
}

.ap-credits-title {
    margin: 0 0 40px;
    font-size: 32px;
    line-height: 32px;
    color: var(--ap-cyan);
    text-shadow: 4px 4px 0 var(--ap-purple);
}

.ap-credits-title.ap-display {
    font-size: 30px;
}

.ap-credits-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px 24px;
    font-size: 16px;
    line-height: 28px;
    color: #fff;
}

.ap-credits-grid > div {
    flex: 0 0 calc((100% - 48px) / 3);
}

.ap-credits-grid span {
    display: block;
    color: var(--ap-cyan);
    margin-bottom: 6px;
}

/* ═══════════════════════════ PRESS KIT ═══════════════════════════ */
/* The press kit's trigger: the NES controller's SELECT button — a black rubber
   pill in its grey well, with the controller's red lettering under it */
.ap-select,
.ap-select:visited,
.ap-select:hover {
    text-decoration: none;
}

.ap-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    max-width: 100%;
    margin-top: 22px;
    padding: 12px 22px 12px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #1f1f23, #121215);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(228, 0, 43, 0.35), 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(228, 0, 43, 0.4);
    cursor: pointer;
    transition: transform 0.2s var(--ap-ease), box-shadow 0.25s;
    animation: ap-select-glow 5s 3s ease-in-out infinite;
}

.ap-select:hover {
    transform: translateY(-2px);
    animation: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(228, 0, 43, 0.8), 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 30px rgba(228, 0, 43, 0.3);
}

/* every few seconds the button presses itself, and the strip glows red */
@keyframes ap-select-glow {
    0%, 84%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(228, 0, 43, 0.35), 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(228, 0, 43, 0.4); }
    90% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(228, 0, 43, 0.9), 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 26px 2px rgba(228, 0, 43, 0.35); }
}

@keyframes ap-select-press {
    0%, 86%, 96%, 100% { transform: none; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.22); }
    90% { transform: translateY(2px); box-shadow: 0 0 0 #000, inset 0 2px 3px rgba(0, 0, 0, 0.7); }
}

.ap-select .ap-select-pill {
    animation: ap-select-press 5s 3s ease-in-out infinite;
}

.ap-select:hover .ap-select-pill {
    animation: none;
}

.ap-select-pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: none;
}

.ap-select-copy {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-2);
    max-width: 30ch;
    text-align: left;
}

.ap-select-arrow {
    flex: none;
    font-size: 20px;
    color: #ff5a6e;
    transition: transform 0.25s var(--ap-ease);
}

.ap-select:hover .ap-select-arrow {
    transform: translateX(4px);
}

.ap-select:hover .ap-select-copy {
    color: #fff;
}

.ap-select-center {
    display: flex;
    width: max-content;
    margin: 30px auto 0;
}

/* in the buy bar: just the button and its label */
.ap-select-mini {
    margin: 0;
    padding: 6px 12px;
    gap: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #1f1f23, #121215);
}

.ap-select-mini .ap-select-copy,
.ap-select-mini .ap-select-arrow {
    display: none;
}

.ap-select-mini .ap-select-pad {
    gap: 5px;
}

.ap-select-mini .ap-select-well {
    width: 58px;
    height: 20px;
}

.ap-select-mini .ap-select-pill {
    width: 44px;
    height: 11px;
}

.ap-select-mini .ap-select-label {
    font-size: 10px;
}

@media (max-width: 1080px) {
    .ap-select-copy { max-width: 26ch; }
}

@media (max-width: 720px) {
    .ap-bar .ap-select-mini { display: none; }
    .ap-select { padding: 12px 16px 12px 12px; gap: 14px; }
    .ap-select-copy { font-size: 13px; }
}

.ap-select-well {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, #8f8f94, #c4c4c8);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.18);
}

.ap-select-pill {
    width: 60px;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3a3a3f 0%, #121214 70%, #0a0a0c 100%);
    box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.1s, box-shadow 0.1s;
}

.ap-select:hover .ap-select-pill {
    box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 10px rgba(255, 255, 255, 0.12);
}

.ap-select:active .ap-select-pill,
.ap-select.is-pressed .ap-select-pill {
    transform: translateY(2px);
    box-shadow: 0 0 0 #000, inset 0 2px 3px rgba(0, 0, 0, 0.7);
}

.ap-select-label {
    font-family: var(--display);
    font-weight: bold;
    font-style: italic;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e4002b;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.ap-select:focus-visible {
    outline: 2px solid var(--ap-cyan);
    outline-offset: 4px;
}

/* ── The press kit dialog ── */
dialog.ap-pk {
    width: min(1280px, calc(100% - 40px));
    max-width: none;
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 0;
    border-radius: 26px;
    overflow: hidden;
    color: var(--text);
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(60, 188, 252, 0.12), transparent 70%),
        var(--bg);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 120px rgba(0, 0, 0, 0.75);
}

dialog.ap-pk[open] {
    animation: ap-pk-in 0.45s var(--ap-ease) both;
}

dialog.ap-pk.is-closing {
    animation: ap-pk-out 0.25s ease-in both;
}

dialog.ap-pk::backdrop {
    background: rgba(3, 3, 8, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@keyframes ap-pk-in {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
}

@keyframes ap-pk-out {
    to { opacity: 0; transform: translateY(12px) scale(0.98); }
}

.ap-pk-scroll {
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 48px 52px 56px;
}

.ap-presskit p {
    color: var(--text-2);
}

.ap-presskit .ap-head {
    padding-right: 56px;
}

.ap-pk-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ap-pk-close:hover {
    color: #08101a;
    background: var(--ap-cyan);
}

/* The game's curtain covers the panel and rises to reveal it */
.ap-pk-curtain {
    position: absolute;
    inset: 0;
    z-index: 4;
    background-size: 512px 416px, 512px 200%;
    background-repeat: repeat-x, repeat-x;
    background-position: 0 100%, 0 0;
    image-rendering: pixelated;
    pointer-events: none;
    transform: translateY(-100%);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.6);
}

dialog.ap-pk.is-raising .ap-pk-curtain {
    animation: ap-pk-raise 0.95s 0.15s cubic-bezier(.6, 0, .3, 1) both;
}

@keyframes ap-pk-raise {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

@media (max-width: 720px) {
    /* phones: a full-screen sheet */
    dialog.ap-pk {
        width: 100%;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }
    .ap-pk-scroll {
        height: 100dvh;
        max-height: none;
        padding: 64px 18px 40px;
    }
    .ap-pk-close { top: 12px; right: 12px; width: 44px; height: 44px; }
    .ap-presskit .ap-head { padding-right: 0; }
}

/* ── The purchase result (back from Stripe Checkout) ── */
dialog.ap-pk.ap-pd {
    width: min(560px, calc(100% - 32px));
    height: fit-content;
    margin: auto;
    border-radius: 26px;
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(76, 255, 122, 0.16), transparent 70%),
        var(--bg);
    box-shadow: 0 0 0 1px rgba(76, 255, 122, 0.45), 0 0 80px rgba(76, 255, 122, 0.14), 0 40px 120px rgba(0, 0, 0, 0.75);
}

dialog.ap-pk.ap-pd-error,
dialog.ap-pk.ap-pd-pending {
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(252, 160, 68, 0.14), transparent 70%),
        var(--bg);
    box-shadow: 0 0 0 1px rgba(252, 160, 68, 0.45), 0 40px 120px rgba(0, 0, 0, 0.75);
}

.ap-pd-body:focus {
    outline: none;
}

.ap-pd-body {
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 40px 40px 44px;
    text-align: center;
}

.ap-pd-stage {
    position: relative;
    display: grid;
    place-items: center;
    height: 150px;
    margin-bottom: 14px;
}

/* a slow sunburst behind Alphy */
.ap-pd-rays {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(76, 255, 122, 0.16) 0 10deg, transparent 10deg 20deg);
    -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent);
    mask-image: radial-gradient(closest-side, #000 25%, transparent);
    animation: ap-pd-spin 24s linear infinite;
}

@keyframes ap-pd-spin {
    to { transform: rotate(360deg); }
}

.ap-pd-alphy {
    position: relative;
    --s: 2;
}

.ap-pd .ap-kicker {
    display: block;
    margin-bottom: 10px;
}

.ap-pd-title {
    margin: 0 0 12px;
    font-family: var(--display);
    font-weight: bold;
    font-size: 28px;
    line-height: 1.2;
    color: #fff;
}

.ap-pd-title-note {
    font-size: 19px;
    line-height: 1.45;
    font-weight: normal;
    color: var(--text);
}

.ap-pd-body p {
    margin: 0 auto 26px;
    max-width: 40ch;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-2);
}

.ap-pd-download,
.ap-pd-ok {
    margin: 0 auto;
}

.ap-pd-ok {
    margin-top: 12px;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 720px) {
    /* phones: a centred card, not the press kit's full-screen sheet */
    dialog.ap-pk.ap-pd {
        width: calc(100% - 24px);
        height: fit-content;
        max-height: calc(100dvh - 24px);
        margin: auto;
        border-radius: 22px;
    }
    .ap-pd-body { padding: 36px 20px 32px; }
    .ap-pd-title { font-size: 23px; }
    .ap-pd-title-note { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    dialog.ap-pk[open],
    dialog.ap-pk.is-closing,
    dialog.ap-pk.is-raising .ap-pk-curtain,
    .ap-pd-rays { animation: none; }
}

.ap-press-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}

.ap-press-actions .ap-btn,
.ap-press-actions .ap-btn:visited {
    height: 56px;
    font-size: 16px;
    text-decoration: none;
}

.ap-press-actions .ap-btn-buy .ap-btn-price {
    font-size: 8px;
    line-height: 8px;
}

.ap-press-ico,
.ap-asset-dl svg,
.ap-press-shot-dl svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.ap-press-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 20px;
    align-items: start;
}

.ap-press-texts {
    display: grid;
    gap: 20px;
}

.ap-press-card {
    padding: 24px 26px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px var(--line);
}

.ap-press-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
}

.ap-press-card p + p {
    margin-top: 12px;
}

.ap-press-card a {
    color: var(--ap-cyan);
}

.ap-press-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ap-press-card-head .ap-h3 {
    margin: 0;
}

.ap-copy {
    flex: none;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    font-family: var(--display);
    font-size: 13px;
    font-weight: bold;
    color: var(--ap-cyan-hi);
    background: rgba(60, 188, 252, 0.12);
    box-shadow: inset 0 0 0 1px rgba(60, 188, 252, 0.35);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ap-copy:hover {
    background: rgba(60, 188, 252, 0.22);
    color: #fff;
}

.ap-copy.is-done {
    color: #08101a;
    background: #6cff7a;
    box-shadow: none;
}

.ap-press-facts {
    margin: 0;
    display: grid;
}

.ap-press-facts > div {
    display: grid;
    grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1fr);
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
}

.ap-press-facts > div:first-child {
    border-top: 0;
}

.ap-press-facts dt {
    font-family: var(--display);
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ap-cyan);
    padding-top: 3px;
}

.ap-press-facts dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: #fff;
}

.ap-press-feat {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.ap-press-feat li {
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-2);
}

.ap-press-feat li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: var(--ap-pink);
}

.ap-press-sub {
    margin: 56px 0 18px;
    font-family: var(--display);
    font-weight: bold;
    font-size: 24px;
    color: #fff;
}

.ap-press-sub-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ap-press-sub-row .ap-press-sub {
    margin-bottom: 6px;
}

.ap-press-all {
    font-size: 14px;
    color: var(--ap-cyan);
    text-decoration: none;
}

.ap-press-all:hover {
    color: #fff;
}

.ap-press-note {
    margin: 0 0 18px;
    font-size: 14px !important;
    color: var(--text-3) !important;
}

.ap-press-assets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.ap-asset {
    display: grid;
    gap: 6px;
    padding: 12px 12px 16px;
    border-radius: 18px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: transform 0.3s var(--ap-ease), box-shadow 0.3s var(--ap-ease), background 0.3s;
}

.ap-asset:hover {
    transform: translateY(-4px);
    background: rgba(60, 188, 252, 0.06);
    box-shadow: inset 0 0 0 1px rgba(60, 188, 252, 0.5), 0 18px 40px rgba(0, 0, 0, 0.4);
}

.ap-asset-preview {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
    background: #05040c;
}

.ap-asset-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ap-asset-preview.is-logo {
    background:
        repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0 25%, transparent 0 50%) 0 0 / 16px 16px,
        #0b0a14;
}

.ap-asset-preview.is-logo img {
    object-fit: contain;
    padding: 14%;
}

.ap-asset-preview.is-pixel img {
    image-rendering: pixelated;
}

.ap-asset-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: rgba(5, 4, 12, 0.7);
    box-shadow: inset 0 0 0 2px #fff;
}

.ap-asset-play::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 16px;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
}

.ap-asset-name {
    padding: 0 4px;
    font-family: var(--display);
    font-weight: bold;
    font-size: 15px;
    color: #fff;
}

.ap-asset-meta {
    padding: 0 4px;
    font-size: 12px;
    color: var(--text-3);
}

.ap-asset-dl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ap-cyan);
}

.ap-asset-dl svg {
    width: 16px;
    height: 16px;
}

.ap-press-shots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ap-press-shot {
    position: relative;
    display: block;
    aspect-ratio: var(--ap-nes);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.ap-press-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.ap-press-shot-dl {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #08101a;
    background: var(--ap-cyan);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s, transform 0.25s var(--ap-ease);
}

.ap-press-shot:hover .ap-press-shot-dl,
.ap-press-shot:focus-visible .ap-press-shot-dl {
    opacity: 1;
    transform: none;
}

.ap-press-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: 20px;
    margin-top: 56px;
    align-items: start;
}

.ap-press-side {
    display: grid;
    gap: 20px;
}

.ap-press-form .ap-press-form-intro {
    margin: 0 0 20px;
    color: var(--text-2);
}

.ap-press-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.ap-press-fields label {
    display: grid;
    gap: 6px;
}

.ap-press-fields label.is-wide {
    grid-column: 1 / -1;
}

.ap-press-fields label > span {
    font-family: var(--display);
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
}

.ap-press-fields input,
.ap-press-fields select,
.ap-press-fields textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 16px;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    transition: box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.ap-press-fields select {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.35);
    padding-right: 36px;
}

.ap-press-fields textarea {
    resize: vertical;
    min-height: 90px;
}

.ap-press-fields input:focus,
.ap-press-fields select:focus,
.ap-press-fields textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ap-cyan);
}

.ap-press-fields .is-invalid input {
    box-shadow: inset 0 0 0 2px var(--ap-pink);
}

.ap-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ap-press-form-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
}

.ap-press-form-foot .ap-btn {
    height: 54px;
    font-size: 16px;
}

.ap-press-status {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--text-2);
}

.ap-press-status.is-error {
    color: #ff8aa8;
}

.ap-press-status.is-ok {
    color: #6cff7a;
}

.ap-press-form.is-sent .ap-press-fields,
.ap-press-form.is-sent .ap-press-form-foot .ap-btn {
    display: none;
}

@media (max-width: 1080px) {
    .ap-press-grid,
    .ap-press-bottom { grid-template-columns: minmax(0, 1fr); }
    .ap-press-actions { justify-content: flex-start; }
    .ap-press-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .ap-press-card { padding: 20px 18px; }
    .ap-press-fields { grid-template-columns: minmax(0, 1fr); }
    .ap-press-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .ap-press-assets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ap-asset-name { font-size: 14px; }
    .ap-press-shot-dl { opacity: 1; transform: none; width: 34px; height: 34px; }
    .ap-press-sub { font-size: 20px; margin-top: 44px; }
    .ap-press-actions .ap-btn { width: 100%; justify-content: center; white-space: nowrap; }
    .ap-press-actions .ap-btn-price { display: none; }
}

/* ═══════════════════════════ GENESIS TEASER ═══════════════════════════ */
.ap-genesis {
    position: relative;
    margin-top: 120px;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 60px;
    align-items: center;
    padding: 64px;
    border-radius: var(--r-lg);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(60% 80% at 85% 20%, rgba(0, 120, 255, 0.28), transparent 60%),
        radial-gradient(50% 70% at 0% 100%, rgba(150, 40, 210, 0.25), transparent 60%),
        linear-gradient(180deg, #0b0d18, #07080f);
    box-shadow: inset 0 0 0 1px rgba(120, 160, 255, 0.18);
}

.ap-genesis::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 80px),
                repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 80px);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
    mask-image: linear-gradient(180deg, #000, transparent);
}

.ap-gen-eyebrow {
    display: inline-block;
    font-family: var(--display);
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(90deg, #0a5cff, #8b2bd8);
}

.ap-gen-title {
    margin: 20px 0 0;
    font-family: var(--display);
    font-weight: bold;
    font-style: italic;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    background: linear-gradient(180deg, #ffffff 0%, #cfe0ff 45%, #6f8fd6 52%, #e8f0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
}

/* the section's own paragraphs only: not the launch-list card's */
.ap-gen-copy > p {
    margin: 18px 0 0;
}

.ap-gen-copy .notify {
    --app: #5b8cff;
}

.ap-steam {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 14px;
    color: var(--text-2);
    text-decoration: none;
}

.ap-steam svg {
    width: 20px;
    height: 20px;
}

.ap-steam:hover {
    color: #fff;
}

.ap-gen-media {
    position: relative;
}

.ap-gen-screen {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 1px rgba(160, 190, 255, 0.3), 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 80px rgba(40, 110, 255, 0.25);
    transform: perspective(1600px) rotateY(-8deg);
}

.ap-gen-screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.9s;
}

.ap-gen-screen img.is-on {
    opacity: 1;
}

.ap-gen-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.ap-gen-dots span {
    width: 26px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.3s;
}

.ap-gen-dots span.is-on {
    background: #7ea2ff;
}

/* ═══════════════════════════ PRESS START ═══════════════════════════ */
.ap-end {
    position: relative;
    margin-top: 120px;
    margin-bottom: 40px;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-lg);
    overflow: hidden;
    isolation: isolate;
    background: #05040c;
    text-align: center;
    box-shadow: inset 0 0 0 1px var(--line);
}

.ap-end-wall {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-size: 64px 64px;
    image-rendering: pixelated;
    opacity: 0.4;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 80%);
    mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 80%);
}

.ap-end-inner {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    width: 100%;   /* a flex item would otherwise grow to the press kit button's one-line width */
    padding: 110px 32px 150px;
}

.ap-press {
    margin: 0 0 26px;
    font-size: 32px;
    line-height: 32px;
    color: var(--ap-gold);
    text-shadow: 4px 4px 0 var(--ap-rust);
    animation: ap-blink 1.1s steps(2) infinite;
}

.ap-end-body {
    margin: 18px auto 0;
    max-width: 44ch;
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-2);
}

.ap-end .ap-buy {
    margin-top: 36px;
}

/* ═══════════════════════════ REVEAL ON SCROLL ═══════════════════════════ */
.ap-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ap-ease), transform 0.9s var(--ap-ease);
}

.ap-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width: 1280px) {
    .ap-hero-grid { padding: 88px 48px 64px; gap: 36px; }
    .ap-logo img { width: 420px; }
    .ap-eyebrow { font-size: 8px; line-height: 8px; }
    .ap-tv-brand { display: none; }
    .ap-tv-panel { justify-content: center; }
    .ap-tv-channels,
    .ap-tv-knobs { gap: 5px; }
    .ap-ch { min-width: 30px; padding: 0 8px; }
    .ap-h2 { font-size: 44px; }
    .ap-rush-title { font-size: 80px; line-height: 80px; }
    .ap-boards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ap-boards .ap-board:nth-child(n+9) { display: none; }
}

@media (max-width: 1080px) {
    .ap-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 84px 56px 56px;
        gap: 24px;
    }
    .ap-hero-copy { padding-bottom: 0; }
    .ap-hero-copy { text-align: center; }
    .ap-hero-copy .ap-tagline,
    .ap-hero-copy .ap-lead,
    .ap-hero-copy .ap-plays { margin-left: auto; margin-right: auto; }
    .ap-buy { justify-content: center; }
    .ap-hero-set { max-width: 720px; width: 100%; margin: 0 auto; }
    .ap-steps { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin: 0 auto; }
    .ap-meter-row { grid-template-columns: auto minmax(0, 1fr); }
    .ap-meter-clip { grid-column: 1 / -1; justify-self: center; max-width: 480px; }
    .ap-split,
    .ap-split-cart,
    .ap-rush-inner,
    .ap-genesis,
    .ap-cast { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .ap-rush-inner { padding: 64px 48px 96px; }
    .ap-rush-stills { right: 0; }
    .ap-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ap-gallery .ap-shot:nth-child(n+16) { display: none; }
    .ap-cast { gap: 0; }
    .ap-cast-stage { padding: 40px 32px 0; }
    .ap-genesis { padding: 48px; }
    .ap-gen-screen { transform: none; }
    .ap-rom { width: min(100%, 360px); }
}

@media (max-width: 720px) {
    .ap-section,
    .ap-rush,
    .ap-cast,
    .ap-genesis,
    .ap-end { margin-top: 80px; }
    .ap-hero { --floor: 110px; }
    .ap-hero-grid { padding: 64px 22px 44px; }
    .ap-valance { height: 30px; }
    .ap-logo img { width: min(100%, 340px); }
    .ap-tagline { font-size: 20px; }
    .ap-lead { font-size: 16px; }
    .ap-eyebrow { font-size: 8px; line-height: 8px; }
    .ap-hero-set { padding-top: 8px; }
    .ap-tv-body { padding: 14px 14px 0; border-radius: 24px 24px 20px 20px; }
    .ap-tv-bezel { padding: 10px; border-radius: 18px; }
    .ap-tv-panel { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px 0 14px; }
    .ap-tv-brand { display: none; }
    .ap-ch { min-width: 30px; height: 30px; padding: 0 6px; }
    /* phones: the channel buttons wrap above SOUND, so the bubble sits below it, pointing up */
    .ap-sound-callout { right: auto; left: 50%; bottom: auto; top: calc(100% + 16px); margin-left: -70px; transform: translateY(-8px) scale(0.92); transform-origin: 50% 0; }
    .ap-sound-callout::before { right: auto; left: 60px; bottom: auto; top: -14px; border-width: 0 10px 14px 10px; border-color: transparent transparent #fff transparent; }
    .ap-sound-callout::after { right: auto; left: 60.5px; bottom: auto; top: -10px; border-width: 0 9.5px 13px 9.5px; border-color: transparent transparent #000 transparent; }
    .ap-osd { font-size: 8px; line-height: 8px; }
    .ap-btn { height: 58px; font-size: 16px; padding: 0 20px; }
    /* phones: room for "Buy and download" on one line next to the price */
    .ap-btn-buy { gap: 10px; padding: 0 16px; }
    .ap-btn-price { font-size: 13px; line-height: 13px; padding: 7px 8px; margin-right: -4px; }
    .ap-btn-itch { height: 52px; }
    .ap-h2 { font-size: 34px; }
    .ap-intro { font-size: 17px; }
    .ap-ticker { height: 44px; }
    .ap-ticker-track { font-size: 8px; line-height: 8px; gap: 18px; }
    .ap-meter-row { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; gap: 28px; }
    .ap-meter { display: none; }
    .ap-rush-inner { padding: 48px 24px 120px; }
    .ap-rush-title { font-size: 56px; line-height: 56px; }
    .ap-rush-stills img { width: 120px; }
    .ap-rush-stills { bottom: -76px; }
    .ap-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .ap-boards .ap-board:nth-child(n+7) { display: none; }
    .ap-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ap-head-row { flex-direction: column; align-items: flex-start; }
    .ap-cast-copy { padding: 32px 24px 36px; }
    .ap-cast-stage { padding: 28px 22px 0; }
    .ap-cast-card { grid-template-columns: 72px minmax(0, 1fr); padding: 16px; gap: 16px; }
    .ap-cast-portrait { width: 72px; height: 72px; }
    .ap-cast-portrait .ap-sprite { --s: 1.125; }
    .ap-specs { grid-template-columns: minmax(0, 1fr); }
    .ap-credits { padding: 40px 20px 44px; }
    .ap-credits-title { font-size: 32px; line-height: 32px; }
    .ap-credits-grid { font-size: 16px; line-height: 26px; gap: 28px; }
    .ap-credits-grid > div { flex-basis: 100%; }
    .ap-genesis { padding: 32px 22px; }
    .ap-gen-title { font-size: 32px; }
    .ap-lightbox { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .ap-lb-prev, .ap-lb-next { display: none; }
    .ap-press { font-size: 24px; line-height: 24px; }
    .ap-end-inner { padding: 84px 22px 130px; }
}

@media (prefers-reduced-motion: reduce) {
    .ap *,
    .ap *::before,
    .ap *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .ap-ticker-track { animation: none; }
    .ap-reveal { opacity: 1; transform: none; }
}