/*
 * EzySmashers landing page (templates/index.html).
 *
 * The look is the game's (ezysmashers-client, src/ui/Style.h): gold on navy
 * over a warm dark background, the pixel-art frames and buttons from
 * assets/ui/art/ nine-sliced with the client's edges, and the EzysPixel
 * font. Art comes from tools/gen_landing_assets.py and is drawn at whole
 * number scales with `image-rendering: pixelated`.
 *
 * Everything is scoped under .ezs because Bootstrap is on the page too.
 * EzysPixel's grid is 14 px to the em, so its sizes are multiples of 14px.
 */

@font-face {
    font-family: "EzysPixel";
    src: url("fonts/EzysPixel.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "EzysPixel";
    src: url("fonts/EzysPixel-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

:root {
    /* src/ui/Style.h, namespace palette */
    --ezs-back-top: #22141e;
    --ezs-back-bottom: #0a080e;
    --ezs-panel-top: #181c34;
    --ezs-panel-bottom: #090b16;
    --ezs-gold: #e2b65c;
    --ezs-gold-light: #ffeeb0;
    --ezs-gold-dark: #c48026;
    --ezs-gold-deep: #5c3a10;
    --ezs-silver: #5c6c96;
    --ezs-silver-light: #a8bae0;
    --ezs-cream: #eee4ce;
    --ezs-muted: #c4b088;
    --ezs-dim: #80869e;
    --ezs-good: #84e28c;
    --ezs-blue: #78baff;
    --ezs-navy: #0d1020;

    --ezs-pixel: "EzysPixel", ui-monospace, "Courier New", monospace;
    --ezs-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* One art pixel on screen for the frames and buttons (2 at 1280 x 720 in the game). */
    --ezs-px: 2px;
    --ezs-gutter: clamp(16px, 4vw, 40px);
    --ezs-max: 1160px;
    --ezs-nav-h: 64px;
}

/* ---- Page ---------------------------------------------------------------- */

html:has(body.ezs-body) {
    scroll-behavior: smooth;
    scroll-padding-top: var(--ezs-nav-h);
    color-scheme: dark;
}

body.ezs-body {
    margin: 0;
    background: var(--ezs-back-bottom);
}

.ezs {
    position: relative;
    min-height: 100vh;
    overflow-x: clip;
    color: var(--ezs-cream);
    background: var(--ezs-back-bottom);
    font-family: var(--ezs-sans);
    font-size: 1rem;
    line-height: 1.55;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* Resets at zero specificity (:where), so every component rule wins over
   them and over nothing else. */
:where(.ezs) *,
:where(.ezs) *::before,
:where(.ezs) *::after {
    box-sizing: border-box;
}

:where(.ezs) :is(h1, h2, h3, p, ul, ol, dl, dd) {
    margin: 0;
    padding: 0;
}

:where(.ezs) :is(ul, ol) {
    list-style: none;
}

:where(.ezs) img {
    display: block;
    max-width: 100%;
    height: auto;
}

:where(.ezs) a,
:where(.ezs) a:hover {
    color: inherit;
}

.ezs :focus-visible {
    outline: 3px solid var(--ezs-gold-light);
    outline-offset: 3px;
}

.ezs-skip {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 10px 16px;
    font: 700 14px/1 var(--ezs-pixel);
    color: var(--ezs-navy);
    text-transform: uppercase;
    background: var(--ezs-gold);
    transform: translateY(-200%);
}

.ezs-skip:focus {
    transform: none;
}

/* ---- Pixel art helpers ----------------------------------------------------- */

.ezs-btn,
.ezs-card,
.ezs-panel,
.ezs-sprite,
.ezs-logo img,
.ezs-nav__brand img,
.ezs-footer__logo,
.ezs-hero__world {
    image-rendering: pixelated;
}

/* ---- Buttons: the client's 20 x 20 frames, edge 6 (src/ui/Ui.cpp) ------- */

.ezs-btn {
    --ezs-btn-img: url("img/button-dark.png");
    --ezs-btn-hover: url("img/button-dark-hover.png");
    --ezs-btn-pressed: url("img/button-dark-pressed.png");
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    overflow: hidden;
    border: solid transparent;
    border-width: calc(6 * var(--ezs-px));
    border-image: var(--ezs-btn-img) 6 fill / calc(6 * var(--ezs-px)) stretch;
    font: 700 14px/1 var(--ezs-pixel);
    letter-spacing: .04em;
    color: var(--ezs-cream);
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, filter .12s ease;
}

.ezs-btn:hover {
    border-image-source: var(--ezs-btn-hover);
    color: #fff;
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}

.ezs-btn:active {
    border-image-source: var(--ezs-btn-pressed);
    transform: translateY(1px);
    filter: none;
}

.ezs-btn--gold {
    --ezs-btn-img: url("img/button-gold.png");
    --ezs-btn-hover: url("img/button-gold-hover.png");
    --ezs-btn-pressed: url("img/button-gold-pressed.png");
    color: #3a2208;
    text-shadow: 0 2px 0 rgba(255, 238, 176, .45);
}

.ezs-btn--gold:hover {
    color: #2a1804;
    filter: drop-shadow(0 6px 14px rgba(226, 182, 92, .45));
}

.ezs-btn--blue {
    --ezs-btn-img: url("img/button-blue.png");
    --ezs-btn-hover: url("img/button-blue-hover.png");
    --ezs-btn-pressed: url("img/button-blue-pressed.png");
    color: #fff;
    text-shadow: 0 2px 0 rgba(13, 28, 70, .6);
}

.ezs-btn--blue:hover {
    filter: drop-shadow(0 6px 14px rgba(120, 186, 255, .35));
}

.ezs-btn--sm {
    --ezs-px: 1px;
    min-height: 36px;
    padding: 0 14px;
}

.ezs-btn--lg {
    min-height: 64px;
    min-width: 220px;
    padding: 0 36px;
    font-size: 28px;
}

/* The bright band that sweeps across the main button (style::shimmer). */
.ezs-btn--shine::after {
    content: "";
    position: absolute;
    inset: -20px auto -20px 0;
    width: 40%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
    transform: translateX(-180%) skewX(-18deg);
    animation: ezs-shimmer 3.2s ease-in-out 1.2s infinite;
    pointer-events: none;
}

@keyframes ezs-shimmer {
    0% { transform: translateX(-180%) skewX(-18deg); }
    45%, 100% { transform: translateX(380%) skewX(-18deg); }
}

.ezs-link {
    font: 700 14px/1 var(--ezs-pixel);
    color: var(--ezs-gold);
    text-decoration: none;
    text-transform: uppercase;
}

.ezs-link::after {
    content: " \203A";
}

.ezs-link:hover {
    color: var(--ezs-gold-light);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---- Navigation ------------------------------------------------------------ */

.ezs-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--ezs-nav-h);
    background: linear-gradient(rgba(10, 8, 14, .85), rgba(10, 8, 14, .55));
    border-bottom: 2px solid rgba(226, 182, 92, .35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ezs-nav__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: var(--ezs-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--ezs-gutter);
}

.ezs-nav__brand img {
    width: 144px;
}

.ezs-nav__links {
    display: flex;
    gap: 28px;
    margin-left: auto;
}

.ezs-nav__links a {
    position: relative;
    padding: 8px 0;
    font: 700 14px/1 var(--ezs-pixel);
    color: var(--ezs-muted);
    text-decoration: none;
    text-transform: uppercase;
}

.ezs-nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--ezs-gold);
    transform: scaleX(0);
    transition: transform .2s ease;
}

.ezs-nav__links a:hover {
    color: var(--ezs-gold-light);
}

.ezs-nav__links a:hover::after {
    transform: scaleX(1);
}

@media (max-width: 760px) {
    .ezs-nav__links {
        display: none;
    }

    .ezs-nav__inner > .ezs-btn {
        margin-left: auto;
    }
}

/* ---- Hero: the title screen (TitleDemo) ------------------------------------ */

.ezs-hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--ezs-nav-h) + 32px) var(--ezs-gutter) 96px;
    overflow: hidden;
    isolation: isolate;
    background: #4f6b23;
}

/* The arena's middle at 2 screen pixels per art pixel; the camera drifts. */
.ezs-hero__world {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -3;
    width: 2560px;
    height: 1600px;
    margin: -800px 0 0 -1280px;
    background: url("img/arena.png") center / 100% 100% no-repeat;
    animation: ezs-drift 48s ease-in-out infinite alternate;
}

@keyframes ezs-drift {
    from { transform: translate3d(-56px, -24px, 0); }
    to { transform: translate3d(56px, 24px, 0); }
}

/* Dusk: a navy wash, darker at the top and bottom, warm light behind the title. */
.ezs-hero__dusk {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 46% 36% at 50% 30%, rgba(255, 196, 108, .24), transparent 70%),
        radial-gradient(ellipse 48% 42% at 50% 56%, rgba(8, 9, 22, .7), transparent 100%),
        linear-gradient(rgba(10, 8, 20, .86) 0%, rgba(18, 22, 48, .42) 34%, rgba(18, 22, 48, .38) 64%, rgba(10, 8, 14, .96) 100%);
    pointer-events: none;
}

.ezs-hero__fighters {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.ezs-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
    text-align: center;
}

/* The pixel logo: 287 x 35 art at a whole number scale. */
.ezs-logo {
    position: relative;
    width: 861px;
    max-width: 100%;
    animation: ezs-drop 1s cubic-bezier(.34, 1.56, .64, 1) both, ezs-float 5s ease-in-out 1s infinite;
}

.ezs-logo img {
    width: 100%;
    filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 32px rgba(255, 196, 108, .35));
}

@media (max-width: 960px) {
    .ezs-logo { width: 574px; }
}

@media (max-width: 640px) {
    .ezs-logo { width: 287px; }
}

@keyframes ezs-drop {
    from { opacity: 0; transform: translateY(-80px) scale(.9); }
    to { opacity: 1; transform: none; }
}

@keyframes ezs-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

/* Sparkles that glint on the letters in turn (style::twinkle). */
.ezs-logo__glint {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: #fff;
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
    filter: drop-shadow(0 0 3px #fff);
    opacity: 0;
    animation: ezs-glint 4.5s ease-in-out infinite;
}

/* On letter corners: the E's top, the second S, the last S. */
.ezs-logo__glint:nth-of-type(1) { left: 3%; top: 12%; animation-delay: 1.6s; }
.ezs-logo__glint:nth-of-type(2) { left: 53%; top: 14%; animation-delay: 3.1s; }
.ezs-logo__glint:nth-of-type(3) { left: 96%; top: 70%; animation-delay: 4.6s; }

@keyframes ezs-glint {
    0%, 30%, 100% { opacity: 0; transform: scale(.2) rotate(-45deg); }
    15% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.ezs-kicker {
    margin-top: 28px;
    font: 700 28px/1.2 var(--ezs-pixel);
    letter-spacing: .06em;
    color: var(--ezs-gold-light);
    text-transform: uppercase;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .55);
    text-wrap: balance;
    animation: ezs-rise .7s ease-out .35s both;
}

@media (max-width: 640px) {
    .ezs-kicker { font-size: 14px; }

    .ezs-hero .ezs-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 320px;
    }
}

.ezs-hero__lede {
    max-width: 560px;
    margin-top: 14px;
    font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
    color: var(--ezs-cream);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
    animation: ezs-rise .7s ease-out .5s both;
}

.ezs-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
}

.ezs-hero .ezs-actions {
    animation: ezs-rise .7s ease-out .65s both;
}

.ezs-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    animation: ezs-rise .7s ease-out .8s both;
}

.ezs-chips li {
    padding: 7px 12px 6px;
    font: 400 14px/1 var(--ezs-pixel);
    color: var(--ezs-silver-light);
    text-transform: uppercase;
    background: rgba(9, 11, 22, .72);
    border: 2px solid rgba(92, 108, 150, .7);
}

.ezs-chips li::before {
    content: "\25C6";
    margin-right: 8px;
    color: var(--ezs-gold);
}

@keyframes ezs-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

.ezs-hero__scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -22px;
}

.ezs-hero__scroll span {
    width: 14px;
    height: 14px;
    border-right: 4px solid var(--ezs-gold);
    border-bottom: 4px solid var(--ezs-gold);
    transform: rotate(45deg);
    animation: ezs-bob 1.6s ease-in-out infinite;
}

@keyframes ezs-bob {
    0%, 100% { translate: 0 -4px; }
    50% { translate: 0 4px; }
}

/* Rising, flickering embers. */
.ezs-embers {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.ezs-embers i {
    position: absolute;
    bottom: -12px;
    width: 4px;
    height: 4px;
    background: #ffc46c;
    box-shadow: 0 0 6px 1px rgba(255, 166, 72, .8);
    opacity: 0;
    animation: ezs-ember 9s linear infinite;
}

.ezs-embers i:nth-child(1) { left: 6%; animation-delay: 0s; animation-duration: 10s; }
.ezs-embers i:nth-child(2) { left: 13%; animation-delay: 3.4s; animation-duration: 8s; }
.ezs-embers i:nth-child(3) { left: 21%; animation-delay: 6.1s; animation-duration: 11s; }
.ezs-embers i:nth-child(4) { left: 28%; animation-delay: 1.8s; animation-duration: 9s; }
.ezs-embers i:nth-child(5) { left: 36%; animation-delay: 7.5s; animation-duration: 12s; }
.ezs-embers i:nth-child(6) { left: 44%; animation-delay: 4.2s; animation-duration: 8.5s; }
.ezs-embers i:nth-child(7) { left: 52%; animation-delay: .9s; animation-duration: 10.5s; }
.ezs-embers i:nth-child(8) { left: 59%; animation-delay: 5.6s; animation-duration: 9.5s; }
.ezs-embers i:nth-child(9) { left: 66%; animation-delay: 2.7s; animation-duration: 11.5s; }
.ezs-embers i:nth-child(10) { left: 73%; animation-delay: 8.3s; animation-duration: 8s; }
.ezs-embers i:nth-child(11) { left: 80%; animation-delay: 3.9s; animation-duration: 10s; }
.ezs-embers i:nth-child(12) { left: 87%; animation-delay: 6.8s; animation-duration: 9s; }
.ezs-embers i:nth-child(13) { left: 93%; animation-delay: 1.2s; animation-duration: 12s; }
.ezs-embers i:nth-child(14) { left: 97%; animation-delay: 4.9s; animation-duration: 8.5s; }

.ezs-embers i:nth-child(3n) { width: 2px; height: 2px; }
.ezs-embers i:nth-child(4n) { background: var(--ezs-gold-light); }

@keyframes ezs-ember {
    0% { opacity: 0; transform: translate(0, 0); }
    10% { opacity: .9; }
    30% { opacity: .4; }
    45% { opacity: .9; }
    70% { opacity: .5; }
    100% { opacity: 0; transform: translate(40px, -78vh); }
}

/* ---- Fighters: sprite strips from tools/gen_landing_assets.py -------------- */

.ezs-fighter {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

/* .ezs-fighter is the world position; the sprite hangs from it and turns
   about it (landing.js sets the facing and the frame, as the game does). */
.ezs-fighter .ezs-sprite {
    position: absolute;
    left: 0;
    top: 0;
    animation: none;
}

.ezs-sprite--flip {
    scale: -1 1;
}

/* Footstep dust (fx.dust), under the fighters. */
.ezs-dust {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: calc(var(--ezs-w) * 1px);
    height: calc(var(--ezs-h) * 1px);
    margin: calc(var(--ezs-y) * -1px) 0 0 calc(var(--ezs-x) * -1px);
    background: url("img/dust-2x.png") 0 0 / calc(var(--ezs-w) * var(--ezs-frames) * 1px) 100% no-repeat;
    image-rendering: pixelated;
    pointer-events: none;
}

/* Hidden until landing.js places them; with no script the hero has none. */
.ezs-hero__fighters .ezs-fighter {
    visibility: hidden;
}

.ezs-hero__fighters .ezs-fighter.is-placed {
    visibility: visible;
}

/* A fighter strip from tools/gen_landing_assets.py; sprites.css (generated)
   sets each fighter's cell size and world position in CSS px. The world
   position lands on the element's origin, and a flip turns about it, so the
   feet stay put. */
.ezs-sprite {
    display: block;
    width: calc(var(--ezs-w) * 1px);
    height: calc(var(--ezs-h) * 1px);
    margin: calc(var(--ezs-y) * -1px) 0 0 calc(var(--ezs-x) * -1px);
    transform-origin: calc(var(--ezs-x) * 1px) calc(var(--ezs-y) * 1px);
    background-image: var(--ezs-idle);
    background-repeat: no-repeat;
    background-size: calc(var(--ezs-w) * var(--ezs-frames) * 1px) 100%;
    animation: ezs-frames calc(var(--ezs-frames) / 12 * 1s) steps(var(--ezs-frames)) infinite;
}

/* The walk strip is a second layer that landing.js adds beside the idle
   one, and walking only swaps which layer shows. Swapping background-image
   on one element let the browser drop the unused strip and fetch it again
   on the next swap (production serves the images with no cache headers),
   so the fighter went blank for a moment whenever it stopped or set off.
   Three classes, to outrank sprites.css (loaded later), whose per-fighter
   rules (two classes for --big) set the idle sizes. */
.ezs-fighter .ezs-sprite.ezs-sprite--walking {
    --ezs-w: var(--ezs-walk-w);
    --ezs-h: var(--ezs-walk-h);
    --ezs-x: var(--ezs-walk-x);
    --ezs-y: var(--ezs-walk-y);
    background-image: var(--ezs-walk);
}

.ezs-fighter .ezs-sprite--walking,
.ezs-fighter.is-walking .ezs-sprite:not(.ezs-sprite--walking) {
    opacity: 0;
}

.ezs-fighter.is-walking .ezs-sprite--walking {
    opacity: 1;
}

/* Whole cells: a percentage position would not land on frame edges. */
@keyframes ezs-frames {
    from { background-position: 0 0; }
    to { background-position: calc(var(--ezs-w) * var(--ezs-frames) * -1px) 0; }
}

/* ---- Sections on the menu background --------------------------------------- */

.ezs-menu-bg {
    position: relative;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 196, 108, .08), transparent 70%),
        linear-gradient(var(--ezs-back-bottom), var(--ezs-back-top) 30%, var(--ezs-back-top) 70%, var(--ezs-back-bottom));
}

.ezs-section {
    max-width: var(--ezs-max);
    margin: 0 auto;
    padding: clamp(64px, 9vw, 112px) var(--ezs-gutter) 0;
}

.ezs-section--cta {
    padding-bottom: clamp(64px, 9vw, 112px);
}

/* The gold gradient title between diamond rules (style::title). */
.ezs-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 48px;
    text-align: center;
}

.ezs-title::before,
.ezs-title::after {
    content: "";
    flex: 1 1 0;
    max-width: 260px;
    height: 14px;
}

/* Rules that fade in toward the title. */
.ezs-title::before {
    background: linear-gradient(90deg, transparent, var(--ezs-gold-dark)) center / 100% 2px no-repeat;
}

.ezs-title::after {
    background: linear-gradient(270deg, transparent, var(--ezs-gold-dark)) center / 100% 2px no-repeat;
}

/* A diamond at each end of the title (style::diamond). */
.ezs-title span {
    position: relative;
    padding: 0 30px;
}

.ezs-title span::before,
.ezs-title span::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -8px;
    background: linear-gradient(135deg, var(--ezs-gold-light), var(--ezs-gold-dark));
    transform: rotate(45deg);
}

.ezs-title span::before { left: 2px; }
.ezs-title span::after { right: 2px; }

.ezs-title span,
.ezs-card h3,
.ezs-hero-card h3 {
    font-family: var(--ezs-pixel);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ezs-gold);
    background: linear-gradient(var(--ezs-gold-light) 15%, var(--ezs-gold) 55%, var(--ezs-gold-dark) 90%);
    /* One gradient per line where `lh` is known (a wrapped title stays bright). */
    background: linear-gradient(var(--ezs-gold-light) 15%, var(--ezs-gold) 55%, var(--ezs-gold-dark) 90%) 0 0 / 100% 1lh repeat-y;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ezs-title span {
    font-size: 42px;
    line-height: 1.1;
    /* A dark outline and a drop shadow under the gradient. */
    filter:
        drop-shadow(2px 0 0 #2a1606) drop-shadow(-2px 0 0 #2a1606)
        drop-shadow(0 2px 0 #2a1606) drop-shadow(0 -2px 0 #2a1606)
        drop-shadow(0 4px 0 rgba(0, 0, 0, .5));
}

@media (max-width: 640px) {
    .ezs-title span { font-size: 28px; }
    .ezs-title { gap: 12px; }
}

.ezs-title--plain {
    margin-bottom: 16px;
}

/* ---- Cards: frame-card(-gold).png, edge 5 ---------------------------------- */

.ezs-card {
    position: relative;
    border: solid transparent;
    border-width: calc(5 * var(--ezs-px));
    border-image: url("img/frame-card.png") 5 fill / calc(5 * var(--ezs-px)) stretch;
    transition: transform .2s ease, filter .2s ease;
}

.ezs-card--gold {
    border-image-source: url("img/frame-card-gold.png");
    filter: drop-shadow(0 0 18px rgba(226, 182, 92, .25));
}

.ezs-card:hover {
    transform: translateY(-6px);
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)) drop-shadow(0 0 18px rgba(226, 182, 92, .22));
}

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

@media (max-width: 1000px) {
    .ezs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .ezs-cards { grid-template-columns: 1fr; }
}

.ezs-cards .ezs-card {
    padding: 24px 18px 26px;
    text-align: center;
}

.ezs-cards .ezs-card img {
    width: 96px;
    margin: 0 auto 16px;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.ezs-cards .ezs-card:hover img {
    transform: translateY(-4px) scale(1.06) rotate(-3deg);
}

.ezs-card h3 {
    font-size: 28px;
    line-height: 1.05;
}

.ezs-cards .ezs-card p {
    margin-top: 10px;
    font-size: .95rem;
    color: var(--ezs-muted);
}

/* ---- Panel: frame-panel.png, edge 8, with a header strip ------------------- */

.ezs-panel {
    position: relative;
    padding: 0 clamp(20px, 4vw, 48px) 32px;
    border: solid transparent;
    border-width: calc(8 * var(--ezs-px));
    border-image: url("img/frame-panel.png") 8 fill / calc(8 * var(--ezs-px)) stretch;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .55));
}

/* The diamond on the top edge (style::panel). */
.ezs-panel::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    background: linear-gradient(135deg, var(--ezs-gold-light), var(--ezs-gold-dark));
    border: 2px solid var(--ezs-gold-deep);
    transform: rotate(45deg);
}

.ezs-panel__header {
    margin: 0 calc(-1 * clamp(20px, 4vw, 48px)) 36px;
    padding: 18px 16px 14px;
    font: 700 28px/1 var(--ezs-pixel);
    text-align: center;
    text-transform: uppercase;
    color: var(--ezs-gold);
    background: linear-gradient(#1f2546, #141a34);
    border-bottom: 2px solid var(--ezs-gold-dark);
    text-shadow: 0 3px 0 rgba(0, 0, 0, .55);
}

.ezs-panel__foot {
    margin-top: 32px;
    text-align: center;
}

.ezs-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    counter-reset: none;
}

@media (max-width: 820px) {
    .ezs-steps { grid-template-columns: 1fr; }
}

.ezs-step {
    position: relative;
    padding: 0 0 0 64px;
}

.ezs-step__num {
    position: absolute;
    top: -2px;
    left: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font: 700 28px/1 var(--ezs-pixel);
    color: #3a2208;
    background: linear-gradient(var(--ezs-gold-light), var(--ezs-gold) 50%, var(--ezs-gold-dark));
    border: 3px solid var(--ezs-gold-deep);
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.ezs-step h3 {
    font: 700 28px/1.2 var(--ezs-pixel);
    color: var(--ezs-gold-light);
    text-transform: uppercase;
}

.ezs-step p {
    color: var(--ezs-muted);
    font-size: .95rem;
}

.ezs-keys {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 12px 0 10px;
    font: 400 14px/1 var(--ezs-pixel);
    text-transform: uppercase;
}

.ezs kbd {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font: 700 14px/1 var(--ezs-pixel);
    color: var(--ezs-cream);
    text-transform: uppercase;
    background: linear-gradient(#2a3158, #151a33);
    border: 2px solid var(--ezs-silver);
    border-bottom-width: 5px;
    border-radius: 0;
    box-shadow: none;
}

.ezs .ezs-kbd--wide {
    min-width: 120px;
}

.ezs .ezs-kbd--good {
    color: var(--ezs-good);
    border-color: #3f7a48;
}

/* ---- Fighters & hammers ---------------------------------------------------- */

.ezs-roster {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

@media (max-width: 900px) {
    .ezs-roster { grid-template-columns: 1fr; }
}

.ezs-heroes {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 4vw, 48px);
}

.ezs-hero-card {
    text-align: center;
}

.ezs-hero-card h3 {
    margin-top: 12px;
    font-size: 28px;
}

/* A glowing disc with orbiting motes (the lobby's pedestal). */
.ezs-pedestal {
    /* The disc's middle, from the bottom; the feet stand on it. */
    --ezs-disc: 42px;
    position: relative;
    width: 200px;
    height: 220px;
}

.ezs-pedestal::before {
    content: "";
    position: absolute;
    bottom: 18px;
    left: 50%;
    width: 168px;
    height: 48px;
    margin-left: -84px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 220, 140, .55), rgba(226, 182, 92, .18) 70%, transparent);
    border: 2px solid rgba(226, 182, 92, .65);
    box-shadow: 0 0 24px rgba(226, 182, 92, .35), inset 0 0 12px rgba(255, 238, 176, .4);
}

.ezs-pedestal::after {
    content: "";
    position: absolute;
    bottom: 38px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background: var(--ezs-gold-light);
    box-shadow: 0 0 8px var(--ezs-gold);
    animation: ezs-orbit 4s linear infinite;
}

@keyframes ezs-orbit {
    0% { transform: translate(-80px, 0) scale(.6); z-index: 0; }
    25% { transform: translate(0, 18px) scale(1); }
    50% { transform: translate(80px, 0) scale(.6); }
    75% { transform: translate(0, -18px) scale(.4); }
    100% { transform: translate(-80px, 0) scale(.6); }
}

/* The feet (--ezs-feet below the world position) land on the disc. */
.ezs-pedestal .ezs-sprite {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: calc(100% - var(--ezs-disc) - var(--ezs-feet) * 1px);
}

/* Two pedestals side by side on a phone. */
@media (max-width: 520px) {
    .ezs-pedestal {
        --ezs-disc: 37px;
        width: 150px;
        height: 170px;
    }

    .ezs-pedestal::before {
        width: 128px;
        height: 38px;
        margin-left: -64px;
    }


    @keyframes ezs-orbit {
        0% { transform: translate(-60px, 0) scale(.6); }
        25% { transform: translate(0, 14px) scale(1); }
        50% { transform: translate(60px, 0) scale(.6); }
        75% { transform: translate(0, -14px) scale(.4); }
        100% { transform: translate(-60px, 0) scale(.6); }
    }
}

.ezs-hammers {
    display: grid;
    gap: 20px;
}

.ezs-hammer {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
}

.ezs-hammer > img {
    flex: none;
    width: 112px;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.ezs-hammer:hover > img {
    transform: rotate(-24deg);
}

@media (max-width: 520px) {
    .ezs-hammer { gap: 12px; padding: 14px 12px; }
    .ezs-hammer > img { width: 72px; }
}

.ezs-hammer__body {
    flex: 1;
    min-width: 0;
}

.ezs-hammer h3 {
    margin: 8px 0 10px;
}

/* A pointed label (style::pill). */
.ezs-pill {
    display: inline-block;
    padding: 6px 16px 5px;
    font: 700 14px/1 var(--ezs-pixel);
    color: var(--ezs-silver-light);
    text-transform: uppercase;
    background: #1a2040;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}

.ezs-pill--gold {
    color: #3a2208;
    background: linear-gradient(var(--ezs-gold-light), var(--ezs-gold));
}

.ezs-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    align-items: center;
    font: 400 14px/1 var(--ezs-pixel);
    text-transform: uppercase;
}

.ezs-stats dt {
    color: var(--ezs-dim);
    font-weight: 400;
}

.ezs-stats dd {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ezs-cream);
}

/* A thin progress bar with a moving glint (style::progressBar). */
.ezs-bar {
    position: relative;
    flex: 0 1 160px;
    min-width: 48px;
    height: 10px;
    overflow: hidden;
    background: #0b0e1e;
    border: 2px solid #2c3458;
}

.ezs-bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background: linear-gradient(var(--ezs-gold-light), var(--ezs-gold-dark));
    transform-origin: left;
}

.ezs-bar--half::before { transform: scaleX(.5); }
.ezs-bar--full::before { transform: scaleX(1); }

.ezs-price img {
    width: 20px;
}

/* ---- Call to action ------------------------------------------------------- */

.ezs-panel--cta {
    max-width: 760px;
    margin: 0 auto;
    padding-top: 56px;
    padding-bottom: 44px;
    text-align: center;
}

.ezs-panel--cta > p {
    max-width: 520px;
    margin: 0 auto;
    color: var(--ezs-muted);
}

.ezs-cta__medal {
    position: absolute;
    top: -58px;
    left: 50%;
    width: 88px;
    margin-left: -44px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
    animation: ezs-float 4s ease-in-out infinite;
}

.ezs-panel--cta::before {
    display: none;
}

/* ---- Footer ---------------------------------------------------------------- */

.ezs-footer {
    border-top: 2px solid rgba(226, 182, 92, .25);
    background: #07060a;
}

.ezs-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
    max-width: var(--ezs-max);
    margin: 0 auto;
    padding: 28px var(--ezs-gutter);
    font-size: .9rem;
    color: var(--ezs-dim);
}

.ezs-footer__logo {
    width: 144px;
}

.ezs-footer__links {
    display: flex;
    gap: 20px;
}

.ezs-footer__links a,
.ezs-footer__platform a,
.ezs-footer__copy a {
    color: var(--ezs-muted);
    text-decoration: none;
}

.ezs-footer__links a {
    font: 700 14px/1 var(--ezs-pixel);
    text-transform: uppercase;
}

.ezs-footer a:hover {
    color: var(--ezs-gold-light);
}

.ezs-footer__platform {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ezs-footer__platform img {
    width: 24px;
}

@media (max-width: 760px) {
    .ezs-footer__inner { flex-direction: column; text-align: center; }
    .ezs-footer__platform { margin-left: 0; }
}

/* ---- Reveal on scroll (landing.js marks what starts below the fold) -------- */

.ezs [data-reveal] {
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

.ezs [data-reveal].is-pending {
    opacity: 0;
    transform: translateY(32px);
}

.ezs-cards [data-reveal]:nth-child(2),
.ezs-hammers [data-reveal]:nth-child(2) { transition-delay: .08s; }
.ezs-cards [data-reveal]:nth-child(3) { transition-delay: .16s; }
.ezs-cards [data-reveal]:nth-child(4) { transition-delay: .24s; }

/* ---- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html:has(body.ezs-body) {
        scroll-behavior: auto;
    }

    .ezs *,
    .ezs *::before,
    .ezs *::after {
        animation: none !important;
        transition: none !important;
    }

    .ezs-embers,
    .ezs-logo__glint {
        display: none;
    }

    .ezs [data-reveal].is-pending {
        opacity: 1;
        transform: none;
    }
}