:root {
    --sky-top: #6ecff5;
    --sky-mid: #4eb8e8;
    --sky-deep: #2a8fc4;
    --panel-bg: #f4ecd8;
    --panel-inner: #fff8ea;
    --panel-border: #2d2418;
    --text-dark: #2a2218;
    --text-muted: #6b5d48;
    --btn-play: #5dff9d;
    --btn-play-shadow: #1a8a4a;
    --pixel-shadow: #1a140e;
    --gold: #ffd966;
    --gold-shadow: #b8860b;
    --accent-cream: #fff8ea;
    --accent-mint: #5dff9d;
    /* Typography — pixel display scale */
    --lfont-xs: clamp(10px, 2.4vw, 12px);
    --lfont-sm: clamp(12px, 3vw, 15px);
    --lfont-md: clamp(14px, 3.4vw, 17px);
    --lfont-lg: clamp(16px, 3.8vw, 20px);
    --lfont-xl: clamp(18px, 4.5vw, 24px);
    --lfont-2xl: clamp(22px, 5.8vw, 32px);
    --lfont-3xl: clamp(26px, 7vw, 40px);
    --shadow-pixel: 2px 2px 0 var(--pixel-shadow);
    --shadow-pixel-lg: 3px 3px 0 var(--pixel-shadow);
    --shadow-gold: 2px 2px 0 var(--gold-shadow);
}

@font-face {
    font-family: "silkscreen";
    src: url("/fonts/silkscreen.ttf") format("truetype");
    font-display: swap;
}

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

html {
    scroll-behavior: smooth;
}

body.landing-body.landing-is-loading {
    overflow: hidden;
}

.landing-load-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-deep) 100%);
    transition: opacity 320ms steps(5, end), visibility 320ms steps(5, end);
}

.landing-load-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.landing-load-logo {
    width: min(230px, 78vw);
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(4px 4px 0 var(--pixel-shadow));
    animation: landing-load-bob 1.1s steps(2, end) infinite;
}

@keyframes landing-load-bob {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(3px); }
}

.landing-load-bar-track {
    width: min(240px, 72vw);
    height: 10px;
    border: 2px solid var(--panel-border);
    background: rgba(0, 0, 0, 0.25);
    box-shadow: 2px 2px 0 var(--pixel-shadow);
}

.landing-load-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(180deg, var(--btn-play), #3ecf7a);
    transition: width 0.2s steps(4);
}

.hidden {
    display: none !important;
}

.landing-app.hidden {
    display: none;
}

body.landing-body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--text-dark);
    font-family: silkscreen, "Courier New", monospace;
    font-size: var(--lfont-md);
    line-height: 1.65;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-deep) 100%);
    image-rendering: pixelated;
    -webkit-font-smoothing: none;
    font-smooth: never;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.landing-body a {
    color: inherit;
    text-decoration: none;
}

.landing-body img {
    max-width: 100%;
    height: auto;
    display: block;
}

.landing-sky {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.landing-cloud {
    position: absolute;
    width: 72px;
    height: 28px;
    background: #fff;
    border: 3px solid rgba(42, 34, 24, 0.12);
    border-radius: 2px;
    opacity: 0.92;
    animation: cloud-drift linear infinite;
}

.landing-cloud::before,
.landing-cloud::after {
    content: "";
    position: absolute;
    background: inherit;
    border: inherit;
    border-radius: inherit;
}

.landing-cloud::before {
    width: 34px;
    height: 34px;
    top: -18px;
    left: 10px;
}

.landing-cloud::after {
    width: 28px;
    height: 28px;
    top: -14px;
    right: 8px;
}

.landing-cloud-a { top: 12%; left: -90px; animation-duration: 38s; }
.landing-cloud-b { top: 22%; left: -120px; width: 60px; animation-duration: 52s; animation-delay: -12s; }
.landing-cloud-c { top: 8%; left: -70px; width: 84px; animation-duration: 44s; animation-delay: -24s; }

@keyframes cloud-drift {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw + 180px)); }
}

.landing-wrap {
    position: relative;
    z-index: 1;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 0 16px 56px;
}

.landing-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 0;
    margin-bottom: 4px;
    background: linear-gradient(180deg, rgba(110, 207, 245, 0.96) 70%, rgba(110, 207, 245, 0));
    backdrop-filter: blur(4px);
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.landing-nav--header a {
    font-size: var(--lfont-md);
    padding: 9px 12px;
    border: 2px solid var(--panel-border);
    background: rgba(255, 248, 234, 0.88);
    box-shadow: 2px 2px 0 var(--pixel-shadow);
    white-space: nowrap;
}

.landing-nav--header a:hover,
.landing-nav--header a:focus-visible {
    background: #fff;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--pixel-shadow);
}

.landing-menu-btn {
    display: none;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 11px 9px;
    border: 2px solid var(--panel-border);
    background: rgba(255, 248, 234, 0.95);
    box-shadow: 2px 2px 0 var(--pixel-shadow);
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.landing-menu-btn__bar {
    display: block;
    height: 3px;
    background: var(--text-dark);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.12s steps(2), opacity 0.12s steps(2);
}

.landing-menu-btn[aria-expanded="true"] .landing-menu-btn__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.landing-menu-btn[aria-expanded="true"] .landing-menu-btn__bar:nth-child(2) {
    opacity: 0;
}

.landing-menu-btn[aria-expanded="true"] .landing-menu-btn__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.landing-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
}

.landing-nav-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.landing-nav-scrim {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(26, 20, 14, 0.62);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.18s ease;
}

.landing-nav-drawer.is-open .landing-nav-scrim {
    opacity: 1;
}

.landing-nav-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(88vw, 320px);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fff8ea 0%, #f0e4c8 100%);
    border-left: 3px solid var(--panel-border);
    box-shadow: -5px 0 0 var(--pixel-shadow);
    transform: translateX(100%);
    transition: transform 0.2s steps(5, end);
}

.landing-nav-drawer.is-open .landing-nav-panel {
    transform: translateX(0);
}

.landing-nav-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 14px 12px;
    border-bottom: 2px dashed rgba(139, 115, 85, 0.45);
}

.landing-nav-panel-title {
    font-size: var(--lfont-xl);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dark);
    text-shadow: 1px 1px 0 rgba(255, 217, 102, 0.45);
}

.landing-nav-close {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 2px solid var(--panel-border);
    background: var(--panel-inner);
    box-shadow: 2px 2px 0 var(--pixel-shadow);
    font-family: inherit;
    font-size: var(--lfont-xl);
    line-height: 1;
    color: var(--text-dark);
    cursor: pointer;
}

.landing-nav-close:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--pixel-shadow);
}

.landing-nav--drawer {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    overflow-y: auto;
}

.landing-nav--drawer a {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 16px 14px;
    font-size: var(--lfont-lg);
    letter-spacing: 0.04em;
    text-align: left;
    border: 2px solid var(--panel-border);
    background: var(--panel-inner);
    box-shadow: 2px 2px 0 var(--pixel-shadow);
}

.landing-nav--drawer a:last-child {
    margin-bottom: 0;
}

.landing-nav--drawer a:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--pixel-shadow);
}

body.landing-body.landing-nav-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .landing-nav--header {
        display: none;
    }

    .landing-menu-btn {
        display: flex;
    }
}

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    border: 3px solid var(--panel-border);
    background: var(--btn-play);
    color: var(--text-dark);
    font-family: inherit;
    font-size: var(--lfont-lg);
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--btn-play-shadow);
    text-align: center;
    line-height: 1.3;
    max-width: 100%;
    word-break: break-word;
    transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
}

.landing-btn:hover,
.landing-btn:focus-visible {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--btn-play-shadow);
}

.landing-btn--pulse {
    animation: btn-pulse 2.4s steps(2) infinite;
}

@keyframes btn-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.08); }
}

.landing-hero {
    text-align: center;
    padding: 8px 0 32px;
}

.landing-hero-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0 auto 22px;
}

@keyframes landing-hero-logo-bob {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(4px); }
}

.landing-hero-logo-link {
    display: block;
    line-height: 0;
    animation: landing-hero-logo-bob 2.4s steps(2, end) infinite;
}

.landing-hero-logo {
    width: min(280px, 82vw);
    height: auto;
    display: block;
    image-rendering: pixelated;
    filter: drop-shadow(4px 4px 0 var(--pixel-shadow));
}

.landing-hero-kicker {
    margin: 0;
    padding: 0 10px;
    max-width: min(100%, 42ch);
    font-size: var(--lfont-sm);
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: #1a140e;
    text-shadow: none;
    overflow-wrap: anywhere;
}

.landing-hero-cta {
    margin: 16px auto 0;
    padding: 0 10px;
    width: min(360px, 100%);
}

a.play-btn {
    text-decoration: none;
}

.landing-hero-cta .play-btn {
    width: 100%;
}

.play-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 12px 18px;
    border: 3px solid var(--panel-border);
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 80ms steps(2, end), filter 80ms steps(2, end);
    image-rendering: pixelated;
}

.play-btn:active:not(:disabled) {
    transform: translate(2px, 2px);
}

.play-btn--primary {
    color: #123a24;
    background: linear-gradient(180deg, #7dffb8 0%, var(--accent-mint) 55%, #35c974 100%);
    box-shadow: 0 4px 0 #1a8a4a, 0 0 24px rgba(93, 255, 157, 0.35);
}

.play-btn--primary:hover:not(:disabled) {
    filter: brightness(1.06);
}

.landing-ca-wrap--hero {
    width: fit-content;
    max-width: min(100%, 320px);
    margin: 14px auto 0;
}

.landing-ca-wrap--hero .landing-copy-toast {
    color: #c8ffe0;
    text-shadow: 1px 1px 0 var(--pixel-shadow);
}

.landing-party {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(8px, 3vw, 24px);
    min-height: 88px;
    margin: 0 auto 14px;
    padding: 8px 4px 0;
    max-width: 100%;
}

.landing-sprite {
    width: 72px;
    height: 72px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.landing-sprite--walk {
    background-size: 288px 288px;
    animation: sprite-walk 0.55s steps(4) infinite;
}

.landing-sprite--bob {
    animation: sprite-walk 0.55s steps(4) infinite, sprite-bob 1.2s steps(2) infinite;
}

.landing-sprite--delay {
    animation-delay: -0.15s, -0.3s;
}

.landing-sprite--delay2 {
    animation-delay: -0.28s, -0.55s;
}

@keyframes sprite-walk {
    from { background-position: 0 0; }
    to { background-position: -288px 0; }
}

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

.landing-gif-slot {
    margin: 0;
    padding: 0;
    border: 3px solid var(--panel-border);
    background: var(--panel-inner);
    box-shadow: 3px 3px 0 var(--pixel-shadow);
    overflow: hidden;
    max-width: 100%;
    flex-shrink: 1;
    min-width: 0;
}

.landing-gif-slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
}

.landing-gif-slot video,
.landing-hero-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0a0c10;
}

.landing-gif-slot--hero {
    width: min(100%, 520px);
    aspect-ratio: 16 / 9;
    margin: 0 auto 14px;
}

.landing-gif-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 72px;
    background: repeating-linear-gradient(
        -45deg,
        #e8dcc4,
        #e8dcc4 6px,
        #ddd0b4 6px,
        #ddd0b4 12px
    );
    color: var(--text-muted);
    font-size: clamp(14px, 4vw, 22px);
}

.landing-gif-placeholder--wide {
    min-height: 56px;
}

.landing-panel {
    background: var(--panel-bg);
    border: 3px solid var(--panel-border);
    box-shadow: 5px 5px 0 var(--pixel-shadow);
    padding: clamp(20px, 5vw, 32px);
    margin-bottom: 24px;
}

.landing-panel--live {
    background: linear-gradient(180deg, #2a2218 0%, #1a140e 100%);
    color: #fff8ea;
    border-color: #5c4a32;
}

.landing-panel--live .landing-lb-label {
    color: #ffe9a8;
    font-size: var(--lfont-lg);
}

.landing-live-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.landing-section-title--inline {
    margin: 0;
}

.landing-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid #ff4466;
    background: rgba(255, 40, 60, 0.15);
    font-size: var(--lfont-lg);
    letter-spacing: 0.12em;
    color: #ff8899;
    box-shadow: 0 0 12px rgba(255, 50, 80, 0.5);
}

.landing-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff2244;
    box-shadow:
        0 0 4px #fff,
        0 0 8px #ff2244,
        0 0 16px #ff2244,
        0 0 28px #ff4466;
    animation: led-blind 0.7s steps(2) infinite;
}

@keyframes led-blind {
    0%, 45% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 4px #fff,
            0 0 10px #ff2244,
            0 0 20px #ff2244,
            0 0 36px #ff6688;
    }
    50%, 100% {
        opacity: 0.15;
        transform: scale(0.85);
        box-shadow: 0 0 2px #ff2244;
    }
}

.landing-stats-folder {
    margin-top: 4px;
}

.landing-stats-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-end;
    gap: 6px;
    padding: 0 4px;
    position: relative;
    z-index: 2;
}

.landing-stats-tab {
    font-family: inherit;
    font-size: var(--lfont-lg);
    line-height: 1.25;
    padding: 12px 10px;
    min-height: 52px;
    width: 100%;
    border: 3px solid #8a7048;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #3d3228 0%, #2a2218 100%);
    color: rgba(255, 248, 234, 0.55);
    cursor: pointer;
    letter-spacing: 0.04em;
    overflow: visible;
    text-align: center;
    position: relative;
    margin-bottom: -3px;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35);
    transition: transform 0.1s steps(2), color 0.1s steps(2);
}

.landing-stats-tab-label {
    display: inline-block;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.landing-stats-tab:not(.active) {
    padding: 8px 6px 8px;
    min-height: 40px;
    margin-bottom: 0;
    transform: translateY(6px);
    border-color: #5c4a32;
    z-index: 1;
}

.landing-stats-tab:hover:not(.active) {
    color: rgba(255, 248, 234, 0.78);
}

.landing-stats-tab.active {
    background: linear-gradient(180deg, #4a3c2a 0%, #1a140e 100%);
    color: #ffe9a8;
    border-color: #c8a050;
    z-index: 3;
    min-height: 46px;
    padding: 10px 8px 14px;
    box-shadow:
        inset 0 3px 0 #ffd76a,
        0 -2px 8px rgba(255, 215, 100, 0.15);
    text-shadow: 1px 1px 0 #2a1808;
}

.landing-stats-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    height: 3px;
    background: #ffd76a;
    opacity: 0.9;
}

.landing-stats-folder-body {
    border: 3px solid #c8a050;
    background: linear-gradient(180deg, rgba(26, 20, 14, 0.95) 0%, rgba(0, 0, 0, 0.35) 100%);
    padding: clamp(14px, 3vw, 18px);
    position: relative;
    z-index: 1;
    box-shadow: inset 0 2px 0 rgba(255, 215, 100, 0.08);
}

.landing-stats-panel.hidden {
    display: none;
}

.landing-pulse-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.landing-rev-hero {
    text-align: center;
    margin-bottom: 14px;
}

.landing-rev-headline {
    font-size: var(--lfont-3xl);
    line-height: 1.15;
    letter-spacing: 0.08em;
    color: #ffe566;
    text-shadow: var(--shadow-pixel-lg);
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

.landing-rev-sub {
    font-size: var(--lfont-md);
    color: rgba(255, 248, 234, 0.78);
    line-height: 1.55;
    margin: 0;
    overflow-wrap: anywhere;
}

.landing-rev-pool-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 72px;
    padding: 16px 12px;
    margin-bottom: 10px;
    border: 3px solid rgba(255, 215, 100, 0.45);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1px rgba(255, 215, 100, 0.12);
}

.landing-rev-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.landing-rev-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 56px;
    padding: 12px 8px;
    border: 2px solid rgba(255, 215, 100, 0.28);
    background: rgba(0, 0, 0, 0.32);
    min-width: 0;
}

.landing-rev-box-val {
    display: block;
    font-size: var(--lfont-xl);
    color: #ffe566;
    text-shadow: var(--shadow-pixel);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.landing-rev-pool-box .landing-rev-box-val {
    font-size: var(--lfont-3xl);
}

.landing-rev-box-label {
    display: block;
    font-size: var(--lfont-md);
    letter-spacing: 0.08em;
    color: rgba(255, 248, 234, 0.72);
    text-align: center;
    overflow-wrap: anywhere;
}

.landing-rev-copy {
    margin-bottom: 14px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 2px solid rgba(255, 215, 100, 0.2);
}

.landing-rev-list {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: var(--lfont-md);
    color: rgba(255, 248, 234, 0.82);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.landing-rev-list li + li {
    margin-top: 6px;
}

.landing-rev-table-wrap {
    overflow-x: auto;
    border: 2px solid rgba(255, 215, 100, 0.25);
    background: rgba(0, 0, 0, 0.3);
}

.landing-rev-table-label {
    font-size: var(--lfont-sm);
    letter-spacing: 0.08em;
    color: rgba(255, 248, 234, 0.75);
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 215, 100, 0.15);
}

.landing-rev-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lfont-sm);
    min-width: 280px;
}

.landing-rev-table th,
.landing-rev-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 215, 100, 0.12);
    overflow-wrap: anywhere;
}

.landing-rev-table th {
    color: #ffe9a8;
    letter-spacing: 0.06em;
    font-weight: normal;
}

.landing-rev-table td {
    color: rgba(255, 248, 234, 0.85);
}

.landing-rev-table-empty td {
    text-align: center;
    color: rgba(255, 248, 234, 0.55);
    font-style: italic;
    padding: 16px 10px;
}

.landing-pulse-card {
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 215, 100, 0.28);
    padding: 10px 6px;
    text-align: center;
    min-width: 0;
}

.landing-pulse-val {
    display: block;
    font-size: var(--lfont-lg);
    color: #ffe566;
    text-shadow: var(--shadow-pixel);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-pulse-label {
    display: block;
    font-size: var(--lfont-sm);
    letter-spacing: 0.06em;
    color: rgba(255, 248, 234, 0.72);
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.landing-lb-label {
    font-size: var(--lfont-lg);
    letter-spacing: 0.08em;
    margin: 0 0 10px;
}

.landing-lb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 215, 100, 0.15);
}

.landing-lb-tab {
    flex: 1 1 calc(33% - 4px);
    min-width: 0;
    font-family: inherit;
    font-size: var(--lfont-sm);
    padding: 8px 6px;
    border: 1px solid rgba(255, 215, 100, 0.22);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 248, 234, 0.7);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    letter-spacing: 0.02em;
}

.landing-lb-tab.active {
    background: rgba(255, 215, 100, 0.22);
    color: #ffe9a8;
    border-color: rgba(255, 215, 100, 0.45);
    box-shadow: none;
}

.landing-lb-head {
    text-align: center;
    margin-bottom: 10px;
    min-width: 0;
}

.landing-lb-cat-title {
    font-size: var(--lfont-xl);
    color: #ffe9a8;
}

.landing-lb-cat-tag {
    font-size: var(--lfont-sm);
    color: rgba(255, 248, 234, 0.72);
    margin-top: 4px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.landing-lb-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
    margin-bottom: 10px;
    min-height: 72px;
}

.landing-lb-podium--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-size: var(--lfont-sm);
    color: rgba(255, 248, 234, 0.65);
    text-align: center;
    overflow-wrap: anywhere;
    padding: 8px;
}

.landing-lb-slot {
    text-align: center;
    min-width: 0;
    padding: 6px 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 215, 100, 0.2);
}

.landing-lb-slot.rank-1 {
    border-color: #ffd76a;
    min-height: 64px;
}

.landing-lb-slot.rank-2,
.landing-lb-slot.rank-3 {
    min-height: 52px;
}

.landing-lb-rank {
    font-size: var(--lfont-lg);
    color: #ffe566;
}

.landing-lb-name {
    font-size: var(--lfont-sm);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-lb-val {
    font-size: var(--lfont-sm);
    color: rgba(255, 248, 234, 0.78);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-lb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.landing-lb-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 215, 100, 0.15);
    font-size: var(--lfont-sm);
    min-width: 0;
}

.landing-lb-row span:last-child {
    color: #ffe566;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 42%;
}

.landing-lb-row span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.landing-cards-tagline {
    margin: 0 0 10px;
    font-size: var(--lfont-lg);
    line-height: 1.55;
    color: var(--text-dark);
    overflow-wrap: anywhere;
}

.landing-cards-disclaimer {
    margin: 0 0 16px;
    font-size: var(--lfont-md);
    line-height: 1.5;
    color: #b71c1c;
    overflow-wrap: anywhere;
}

.landing-cards-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 4vw, 24px);
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.landing-card-show {
    text-align: center;
    min-width: 0;
    flex: 1 1 180px;
    max-width: 260px;
}

.landing-card-frame {
    position: relative;
    margin: 0 auto;
    width: min(200px, 52vw);
    aspect-ratio: 5 / 7;
    border: 4px solid var(--panel-border);
    background: #1a140e;
    box-shadow: 4px 4px 0 var(--pixel-shadow);
    overflow: hidden;
}

.landing-card-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    transition: opacity 0.5s steps(4);
}

.landing-card-frame img.is-fading {
    opacity: 0.2;
}

.landing-card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 70%
    );
    transform: translateX(-120%);
    animation: card-shine 3.5s steps(8) infinite;
    pointer-events: none;
}

@keyframes card-shine {
    0%, 60% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

.landing-card-name {
    font-size: var(--lfont-lg);
    margin: 12px 0 8px;
    overflow-wrap: anywhere;
    min-height: 1.4em;
    text-shadow: 1px 1px 0 rgba(255, 217, 102, 0.35);
}

.landing-card-strip {
    overflow-x: auto;
    overflow-y: hidden;
    border: 2px solid var(--panel-border);
    background: var(--panel-inner);
    padding: 10px 8px;
    cursor: grab;
    -webkit-overflow-scrolling: auto;
    scroll-behavior: auto;
    scroll-snap-type: none;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--panel-inner);
    touch-action: pan-x;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.landing-card-strip.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.landing-card-strip::-webkit-scrollbar {
    height: 6px;
}

.landing-card-strip::-webkit-scrollbar-thumb {
    background: var(--gold);
    border: 1px solid var(--panel-border);
}

.landing-card-track {
    display: flex;
    gap: 10px;
    width: max-content;
    min-width: 100%;
    padding: 2px 4px;
}

.landing-card-thumb-btn {
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    border: 3px solid var(--panel-border);
    background: #1a140e;
    box-shadow: 2px 2px 0 var(--pixel-shadow);
    cursor: pointer;
    scroll-snap-align: center;
    transition: transform 0.08s steps(2), border-color 0.08s steps(2);
}

.landing-card-thumb-btn:hover {
    transform: translateY(-2px);
}

.landing-card-thumb-btn.is-selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold), 3px 3px 0 var(--gold-shadow);
    transform: translateY(-4px) scale(1.05);
}

.landing-card-thumb-btn img {
    display: block;
    width: 56px;
    height: 78px;
    object-fit: cover;
    image-rendering: auto;
    pointer-events: none;
}

.landing-section-title {
    position: relative;
    font-size: var(--lfont-2xl);
    margin: 0 0 18px;
    padding-bottom: 12px;
    letter-spacing: 0.1em;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--text-dark);
    text-shadow:
        2px 2px 0 rgba(255, 217, 102, 0.45),
        var(--shadow-pixel-lg);
    overflow-wrap: anywhere;
}

.landing-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(100%, 120px);
    height: 4px;
    background: linear-gradient(90deg, var(--gold) 0%, var(--accent-mint) 100%);
    border: 2px solid var(--panel-border);
    box-shadow: 2px 2px 0 var(--gold-shadow);
}

.landing-section-title span {
    display: block;
    margin-top: 10px;
    font-size: var(--lfont-md);
    font-weight: normal;
    letter-spacing: 0.03em;
    line-height: 1.55;
    text-transform: none;
    color: var(--text-muted);
    text-shadow: none;
}

.landing-panel--live .landing-section-title {
    color: #ffe566;
    text-shadow: var(--shadow-pixel-lg), 0 0 24px rgba(255, 229, 102, 0.15);
}

.landing-panel--live .landing-section-title::after {
    background: linear-gradient(90deg, #ffe566 0%, #ff8899 100%);
    border-color: #8a7048;
    box-shadow: 2px 2px 0 #2a1808;
}

.landing-panel--live .landing-section-title span {
    color: rgba(255, 248, 234, 0.72);
}

.landing-copy {
    font-size: var(--lfont-md);
    line-height: 1.7;
    color: var(--text-dark);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.landing-copy + .landing-copy {
    margin-top: 14px;
}

/* Intro — Pokémon Game Boy dialog typing */
.landing-panel--intro .landing-intro-dialog {
    position: relative;
    margin-top: 6px;
    padding: 14px 14px 24px;
    background: #f8f8f0;
    border: 3px solid var(--panel-border);
    box-shadow:
        inset 0 0 0 2px #fff8ea,
        4px 4px 0 var(--pixel-shadow);
    min-height: 92px;
}

.landing-intro-type {
    margin: 0;
    font-size: var(--lfont-md);
    line-height: 1.65;
    color: var(--text-dark);
    min-height: 2.8em;
}

.landing-intro-type-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.landing-intro-cursor {
    position: absolute;
    right: 10px;
    bottom: 7px;
    font-size: 11px;
    line-height: 1;
    color: var(--text-dark);
    animation: landing-intro-cursor-blink 0.55s steps(2, end) infinite;
}

.landing-intro-cursor.hidden {
    opacity: 0;
    visibility: hidden;
    animation: none;
}

@keyframes landing-intro-cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-intro-cursor {
        animation: none;
        opacity: 1;
        visibility: visible;
    }
}

/* ── How to play (visual) ── */
.landing-panel--play {
    position: relative;
    background:
        repeating-conic-gradient(#fff8ea 0% 25%, #f4ecd8 0% 50%) 50% / 6px 6px,
        var(--panel-bg);
    overflow: hidden;
}

.landing-panel--play::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 12% 8%, rgba(255, 217, 102, 0.22), transparent 42%);
    opacity: 0.9;
}

.landing-copy--play {
    margin: 0 0 14px;
    font-size: var(--lfont-sm);
    line-height: 1.65;
}

.landing-play-steps-box,
.landing-play-skins-box,
.landing-play-loot-box,
.landing-play-cards-box,
.landing-play-revenue-box {
    margin-bottom: 14px;
    padding: 14px 14px 12px;
    background: linear-gradient(180deg, #fff8ea 0%, #f0e4c8 100%);
    border: 2px solid var(--panel-border);
    box-shadow:
        inset 0 0 0 1px #8b7355,
        2px 2px 0 var(--pixel-shadow);
    position: relative;
}

.landing-play-steps-head,
.landing-play-loot-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.landing-play-head-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.landing-play-steps-badge,
.landing-play-skins-badge,
.landing-play-loot-badge,
.landing-play-cards-badge,
.landing-play-revenue-badge {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 3px solid var(--panel-border);
    border-radius: 10px;
    box-shadow: none;
}

.landing-play-steps-badge {
    font-size: 12px;
    line-height: 1;
    color: #fff8ea;
    background: radial-gradient(circle at 35% 30%, #5cb85c, #2e7d32);
}

.landing-play-skins-badge {
    font-size: 14px;
    line-height: 1;
    color: #3d2a00;
    background: radial-gradient(circle at 35% 28%, #fff6c8 0%, #f0d050 45%, #c9940f 100%);
}

.landing-play-loot-badge {
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    color: #fff8ea;
    background: radial-gradient(circle at 35% 30%, #9c7bff, #5c3d99);
}

.landing-play-revenue-badge {
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    color: #14532d;
    background: radial-gradient(circle at 35% 28%, #e8ffe8 0%, #86efac 52%, #3d8f52 100%);
}

.landing-play-steps-title,
.landing-play-loot-title {
    margin: 0;
    min-width: 0;
    flex: 1;
    font-size: var(--lfont-xl);
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-shadow: 1px 1px 0 rgba(255, 217, 102, 0.55);
}

.landing-play-steps-lead,
.landing-play-loot-lead {
    font-size: var(--lfont-md);
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

.landing-play-line-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.landing-play-steps {
    list-style: none;
    counter-reset: play-step;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.landing-play-step {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 4px;
    align-items: start;
    padding: 10px;
    min-width: 0;
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(139, 115, 85, 0.38);
    border-radius: 10px;
    box-shadow: 1px 1px 0 rgba(26, 20, 14, 0.12);
}

.landing-play-step::before {
    counter-increment: play-step;
    content: counter(play-step);
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: center;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: var(--lfont-sm);
    font-weight: bold;
    color: var(--text-dark);
    line-height: 1;
    background: var(--gold);
    border: 2px solid var(--panel-border);
    box-shadow: 1px 1px 0 var(--gold-shadow);
}

.landing-play-step:last-child {
    margin-bottom: 0;
}

.landing-play-step-title {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--lfont-sm);
    font-weight: bold;
    color: var(--text-dark);
    line-height: 1.35;
    min-width: 0;
}

.landing-play-step-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--lfont-xs);
    color: var(--text-muted);
    line-height: 1.55;
    text-align: left;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Hidden items — same step boxes, icon instead of step number */
.landing-play-step--item::before {
    content: none;
    display: none;
}

.landing-play-step--item {
    grid-template-columns: 60px minmax(0, 1fr);
}

.landing-play-step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: center;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    background: repeating-conic-gradient(#e8dcc4 0% 25%, #ddd0b4 0% 50%) 50% / 3px 3px;
    border: 2px solid var(--panel-border);
    box-shadow: 1px 1px 0 rgba(26, 20, 14, 0.35);
    flex-shrink: 0;
}

.landing-play-step-icon img {
    display: block;
    max-width: 44px;
    max-height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

.landing-play-step-icon--more {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1;
    color: var(--text-muted);
    background: none;
    border: none;
    box-shadow: none;
}

.landing-play-step--more {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 4px 0 0;
}

.landing-play-step--more .landing-play-step-title {
    color: var(--text-muted);
}

/* Exclusive skins — compact cards + pixel-tier shine */
@keyframes landing-pixel-shine {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(330%); }
}

.landing-skin-showcase {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    justify-items: center;
    max-width: 360px;
    margin: 0 auto;
}

.landing-skin-showcase .profile-skin-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    width: 100%;
    max-width: 108px;
    min-height: 102px;
    padding: 6px 4px 5px;
    border: 2px solid var(--panel-border);
    border-radius: 4px;
    background: var(--panel-inner);
    box-shadow: 2px 2px 0 rgba(45, 36, 24, 0.12);
    overflow: hidden;
    isolation: isolate;
    cursor: default;
    list-style: none;
    image-rendering: pixelated;
    transition: transform 0.12s steps(2, end), box-shadow 0.12s steps(2, end);
}

.landing-skin-showcase .profile-skin-item:hover {
    transform: translateY(-1px);
    box-shadow: 2px 3px 0 rgba(45, 36, 24, 0.18);
}

.landing-skin-showcase .profile-skin-thumb {
    display: block;
    image-rendering: pixelated;
    background-repeat: no-repeat;
    flex-shrink: 0;
    transform: translateZ(0);
}

.landing-skin-showcase .profile-skin-thumb,
.landing-skin-showcase .profile-skin-id,
.landing-skin-showcase .profile-skin-cost {
    position: relative;
    z-index: 1;
}

.landing-skin-showcase .profile-skin-id {
    font-size: 9px;
    font-weight: bold;
    color: var(--text-dark);
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.landing-skin-showcase .profile-skin-cost {
    font-size: 8px;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

.landing-skin-showcase .profile-skin-item--tier-green {
    background-color: #6fbf82;
    background-image: repeating-linear-gradient(
        0deg,
        #a8ddb4 0px,
        #a8ddb4 4px,
        #6fbf82 4px,
        #6fbf82 8px
    );
    border-color: #3d8f52;
    box-shadow: 2px 2px 0 #225e30;
}

.landing-skin-showcase .profile-skin-item--tier-silver {
    background-color: #aeb9c6;
    background-image: repeating-linear-gradient(
        0deg,
        #d5dde6 0px,
        #d5dde6 4px,
        #aeb9c6 4px,
        #aeb9c6 8px
    );
    border-color: #8a97a6;
    box-shadow: 2px 2px 0 #4a5866;
}

.landing-skin-showcase .profile-skin-item--tier-bronze {
    background-color: #a66b3a;
    background-image: repeating-linear-gradient(
        0deg,
        #cd9a6b 0px,
        #cd9a6b 4px,
        #a66b3a 4px,
        #a66b3a 8px
    );
    border-color: #8b5a2b;
    box-shadow: 2px 2px 0 #5c3818;
}

.landing-skin-showcase .profile-skin-item--tier-gold {
    background-color: #d4a017;
    background-image:
        repeating-linear-gradient(
            0deg,
            #fff6c8 0px,
            #fff6c8 4px,
            #f0d050 4px,
            #f0d050 8px,
            #e6b800 8px,
            #e6b800 12px,
            #c9940f 12px,
            #c9940f 16px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 4px,
            rgba(255, 255, 255, 0.14) 4px,
            rgba(255, 255, 255, 0.14) 8px
        );
    border-color: #8b6914;
    box-shadow: 2px 2px 0 #5c4200;
}

.landing-skin-showcase .profile-skin-item[class*="--tier-"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(0, 0, 0, 0.07) 3px,
            rgba(0, 0, 0, 0.07) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 3px,
            rgba(255, 255, 255, 0.1) 3px,
            rgba(255, 255, 255, 0.1) 4px
        );
    image-rendering: pixelated;
}

.landing-skin-showcase .profile-skin-item--tier-gold::before {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(92, 66, 0, 0.12) 3px,
            rgba(92, 66, 0, 0.12) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 3px,
            rgba(255, 255, 255, 0.22) 3px,
            rgba(255, 255, 255, 0.22) 4px
        );
}

.landing-skin-showcase .profile-skin-item[class*="--tier-"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 44%;
    z-index: 0;
    pointer-events: none;
    image-rendering: pixelated;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 4px,
        rgba(255, 255, 255, 0.95) 4px,
        rgba(255, 255, 255, 0.95) 8px,
        rgba(255, 252, 200, 1) 8px,
        rgba(255, 252, 200, 1) 12px,
        rgba(255, 255, 255, 0.95) 12px,
        rgba(255, 255, 255, 0.95) 16px,
        transparent 16px,
        transparent 24px
    );
    background-size: 24px 100%;
    animation: landing-pixel-shine 1.4s steps(6, end) infinite;
}

.landing-skin-showcase .profile-skin-item--tier-silver::after {
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 4px,
        rgba(255, 255, 255, 1) 4px,
        rgba(255, 255, 255, 1) 8px,
        rgba(220, 232, 248, 1) 8px,
        rgba(220, 232, 248, 1) 12px,
        rgba(255, 255, 255, 1) 12px,
        rgba(255, 255, 255, 1) 16px,
        transparent 16px,
        transparent 24px
    );
    background-size: 24px 100%;
    animation-duration: 1.8s;
    animation-timing-function: steps(6, end);
}

.landing-skin-showcase .profile-skin-item--tier-bronze::after {
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 4px,
        rgba(255, 236, 200, 1) 4px,
        rgba(255, 236, 200, 1) 8px,
        rgba(255, 248, 228, 1) 8px,
        rgba(255, 248, 228, 1) 12px,
        rgba(255, 236, 200, 1) 12px,
        rgba(255, 236, 200, 1) 16px,
        transparent 16px,
        transparent 24px
    );
    background-size: 24px 100%;
    animation-duration: 1.6s;
    animation-timing-function: steps(6, end);
}

.landing-skin-showcase .profile-skin-item--tier-gold::after {
    width: 48%;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 4px,
        #ffffff 4px,
        #ffffff 8px,
        #fff080 8px,
        #fff080 12px,
        #ffffff 12px,
        #ffffff 16px,
        #fffce0 16px,
        #fffce0 20px,
        #ffffff 20px,
        #ffffff 24px,
        transparent 24px,
        transparent 32px
    );
    background-size: 32px 100%;
    animation: landing-pixel-shine 1s steps(5, end) infinite;
}

.landing-skin-showcase .profile-skin-item--tier-green .profile-skin-cost { color: #14532d; }
.landing-skin-showcase .profile-skin-item--tier-silver .profile-skin-cost { color: #334155; }
.landing-skin-showcase .profile-skin-item--tier-bronze .profile-skin-cost { color: #6b3e1c; }
.landing-skin-showcase .profile-skin-item--tier-gold .profile-skin-cost { color: #5c4200; }

.landing-play-line {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(139, 115, 85, 0.45);
}

.landing-play-line:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.landing-play-line:first-child {
    padding-top: 0;
}

.landing-play-line-frame {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    background: repeating-conic-gradient(#e8dcc4 0% 25%, #ddd0b4 0% 50%) 50% / 3px 3px;
    border: 2px solid var(--panel-border);
    box-shadow: 1px 1px 0 rgba(26, 20, 14, 0.35);
    flex-shrink: 0;
}

.landing-play-line-frame img {
    display: block;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

.landing-play-line-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.landing-play-line-body strong {
    font-size: var(--lfont-md);
    color: var(--text-dark);
    line-height: 1.35;
}

.landing-play-line-body span {
    font-size: var(--lfont-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

.landing-play-line--more {
    align-items: start;
}

.landing-play-line-more {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1;
    color: var(--text-muted);
    flex-shrink: 0;
}

.landing-play-line--more .landing-play-line-body strong {
    color: var(--text-muted);
}

.landing-play-loot-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-items: start;
}

.landing-play-loot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    padding: 0;
    background: none;
    border: none;
    min-width: 0;
}

.landing-play-chip-label {
    font-size: var(--lfont-sm);
    line-height: 1.3;
    color: var(--text-dark);
    max-width: 100%;
    overflow-wrap: anywhere;
}

.landing-play-chip-label--more {
    color: var(--text-muted);
}

.landing-play-loot-item--more {
    justify-content: flex-start;
    padding-top: 6px;
}

.landing-play-more-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1;
    color: var(--text-muted);
}

.landing-play-cards-badge {
    font-size: 12px;
    color: #fff8ea;
    background: radial-gradient(circle at 35% 30%, #ff8a80, #c62828);
}

.landing-play-card-frame {
    position: relative;
    width: 80px;
    height: 108px;
    display: grid;
    place-items: center;
    background: repeating-conic-gradient(#e8dcc4 0% 25%, #ddd0b4 0% 50%) 50% / 3px 3px;
    border: 2px solid var(--panel-border);
    box-shadow: 1px 1px 0 rgba(26, 20, 14, 0.35);
}

.landing-play-card-frame img {
    display: block;
    width: 68px;
    height: auto;
    max-height: 92px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

.landing-play-loot-row--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 10px 12px;
}

.landing-play-loot-row--cards .landing-play-loot-item {
    width: 100%;
    max-width: 120px;
}

.landing-play-loot-row--cards .landing-play-chip-label {
    width: 100%;
}

.landing-play-loot-row--cards .landing-play-loot-item--more {
    padding-top: 0;
}

.landing-play-loot-row--cards .landing-play-more-mark {
    width: 80px;
    height: 108px;
}

.landing-play-gallery {
    margin-bottom: 14px;
}

.landing-play-gallery-label {
    font-size: var(--lfont-sm);
    margin: 0 0 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.landing-play-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.landing-play-shot {
    margin: 0;
    min-width: 0;
}

.landing-play-shot--wide {
    grid-column: span 2;
}

.landing-play-shot-frame {
    border: 2px solid var(--panel-border);
    background: var(--panel-inner);
    box-shadow: 2px 2px 0 rgba(26, 20, 14, 0.35);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.landing-play-shot--wide .landing-play-shot-frame {
    aspect-ratio: 16 / 7;
}

.landing-gif-placeholder--shot {
    min-height: 0;
    height: 100%;
    font-size: clamp(14px, 4vw, 20px);
    opacity: 0.85;
}

.landing-play-shot figcaption {
    margin-top: 4px;
    font-size: var(--lfont-xs);
    color: var(--text-muted);
    text-align: center;
    line-height: 1.35;
}

.landing-panel--play .landing-cta-row {
    margin-top: 4px;
}

@media (max-width: 639px) {
    .landing-play-steps-box,
    .landing-play-skins-box,
    .landing-play-loot-box,
    .landing-play-cards-box,
    .landing-play-revenue-box {
        padding: 12px 10px;
        min-width: 0;
    }

    .landing-play-steps-head,
    .landing-play-loot-head {
        gap: 6px;
        margin-bottom: 10px;
    }

    .landing-play-head-row {
        gap: 10px;
    }

    .landing-play-steps-badge,
    .landing-play-skins-badge,
    .landing-play-loot-badge,
    .landing-play-cards-badge,
    .landing-play-revenue-badge {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .landing-play-steps-badge {
        font-size: 10px;
    }

    .landing-play-skins-badge {
        font-size: 12px;
    }

    .landing-play-loot-badge {
        font-size: 13px;
    }

    .landing-play-revenue-badge {
        font-size: 15px;
    }

    .landing-play-steps-title,
    .landing-play-loot-title {
        font-size: var(--lfont-lg);
    }

    .landing-play-steps-lead,
    .landing-play-loot-lead {
        font-size: var(--lfont-sm);
        line-height: 1.55;
    }
}

@media (min-width: 640px) {
    .landing-play-steps {
        gap: 10px;
    }

    .landing-play-step {
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 4px;
        align-items: start;
        padding: 12px;
    }

    .landing-play-step::before {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        justify-self: center;
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        font-size: var(--lfont-md);
        line-height: 1;
        background: var(--gold);
        border: 2px solid var(--panel-border);
        box-shadow: 1px 1px 0 var(--gold-shadow);
    }

    .landing-play-step-title {
        grid-column: 2;
        grid-row: 1;
        font-size: var(--lfont-md);
    }

    .landing-play-step-desc {
        grid-column: 2;
        grid-row: 2;
        font-size: var(--lfont-sm);
        text-align: left;
    }

    .landing-play-step--item {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .landing-play-step--item .landing-play-step-icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: start;
        width: 72px;
        height: 72px;
    }

    .landing-play-step--item .landing-play-step-icon img {
        max-width: 52px;
        max-height: 52px;
    }

    .landing-play-step-icon--more {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .landing-play-step--more {
        padding-top: 4px;
    }

    .landing-skin-showcase {
        gap: 8px;
        max-width: none;
    }

    .landing-skin-showcase .profile-skin-item {
        max-width: 112px;
        min-height: 106px;
    }

    .landing-play-head-row {
        gap: 12px;
    }

    .landing-play-steps-badge,
    .landing-play-skins-badge,
    .landing-play-loot-badge,
    .landing-play-cards-badge,
    .landing-play-revenue-badge {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .landing-play-steps-badge {
        font-size: 13px;
    }

    .landing-play-skins-badge {
        font-size: 15px;
    }

    .landing-play-loot-badge {
        font-size: 16px;
    }

    .landing-play-revenue-badge {
        font-size: 20px;
    }

    .landing-play-steps-lead,
    .landing-play-loot-lead {
        font-size: var(--lfont-md);
    }

    .landing-play-line {
        grid-template-columns: 44px 1fr;
        gap: 12px;
        padding: 8px 0;
    }

    .landing-play-line-frame,
    .landing-play-line-more {
        width: 44px;
        height: 44px;
    }

    .landing-play-line-frame img {
        max-width: 36px;
        max-height: 36px;
    }

    .landing-play-loot-row {
        gap: 8px;
    }

    .landing-play-loot-row--cards {
        gap: 12px 16px;
    }

    .landing-play-loot-row--cards .landing-play-loot-item {
        max-width: 132px;
    }

    .landing-play-card-frame {
        width: 88px;
        height: 120px;
    }

    .landing-play-card-frame img {
        width: 76px;
        max-height: 104px;
    }

    .landing-play-loot-row--cards .landing-play-more-mark {
        width: 88px;
        height: 120px;
    }
}

@media (max-width: 380px) {
    .landing-play-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-play-shot--wide {
        grid-column: span 2;
    }
}

.landing-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.landing-step {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px;
    background: var(--panel-inner);
    border: 2px solid var(--panel-border);
}

.landing-step-num {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: var(--gold);
    border: 2px solid var(--panel-border);
    box-shadow: 2px 2px 0 var(--gold-shadow);
    font-size: 11px;
}

.landing-step h3 {
    font-size: var(--lfont-md);
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}

.landing-step p {
    font-size: var(--lfont-sm);
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
    overflow-wrap: anywhere;
}

/* ── Roadmap — pixel quest trail ── */
.landing-panel--roadmap {
    position: relative;
    overflow: hidden;
    background:
        repeating-conic-gradient(#fff8ea 0% 25%, #f4ecd8 0% 50%) 50% / 8px 8px,
        var(--panel-bg);
}

.landing-panel--roadmap::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 248, 234, 0.72) 0%, transparent 28%, transparent 100%);
}

.landing-roadmap-lead {
    margin: 0 0 18px;
    font-size: var(--lfont-md);
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 52ch;
}

.landing-road-steps {
    list-style: none;
    margin: 0;
    padding: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.landing-road-step {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    position: relative;
}

.landing-road-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 31px;
    top: 56px;
    bottom: -18px;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #8b7355 0%, #c4a574 45%, #8b7355 100%);
    border-radius: 2px;
    z-index: 0;
    opacity: 0.45;
    box-shadow: 1px 0 0 rgba(255, 248, 234, 0.35);
}

.landing-road-step--live:not(:last-child)::after {
    background: linear-gradient(180deg, #3d8f52 0%, #86efac 50%, #3d8f52 100%);
    opacity: 0.55;
}

.landing-road-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
    padding-top: 0;
}

.landing-road-node-num {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    font-size: var(--lfont-sm);
    font-weight: bold;
    letter-spacing: 0.02em;
    color: var(--text-dark);
    background: radial-gradient(circle at 32% 28%, #fff8d0 0%, var(--gold) 58%, #c9940f 100%);
    border: 3px solid var(--panel-border);
    border-radius: 50%;
    box-shadow:
        inset 0 -3px 0 rgba(140, 98, 10, 0.22),
        2px 3px 0 var(--gold-shadow);
    flex-shrink: 0;
}

.landing-road-step--live .landing-road-node-num {
    background: radial-gradient(circle at 32% 28%, #e8ffe8 0%, #86efac 52%, #3d8f52 100%);
    border-color: #2e7d32;
    color: #14532d;
    box-shadow:
        0 0 0 4px rgba(134, 239, 172, 0.35),
        inset 0 -3px 0 rgba(34, 94, 48, 0.25),
        2px 3px 0 rgba(34, 94, 48, 0.28);
}

.landing-road-step--next .landing-road-node-num {
    background: radial-gradient(circle at 32% 26%, #fffce8 0%, #f0d050 50%, #d4a017 100%);
    border-color: #b8860b;
    color: #5c4200;
    box-shadow:
        0 0 0 4px rgba(253, 230, 138, 0.45),
        inset 0 -3px 0 rgba(140, 98, 10, 0.22),
        2px 3px 0 rgba(140, 98, 10, 0.28);
    animation: landing-road-node-pulse 2.4s steps(4, end) infinite;
}

.landing-road-step--soon .landing-road-node-num {
    background: radial-gradient(circle at 32% 28%, #ece4d4 0%, #d8cdb8 55%, #b8a88e 100%);
    border-color: #8b7355;
    box-shadow:
        inset 0 -2px 0 rgba(45, 36, 24, 0.12),
        2px 2px 0 rgba(45, 36, 24, 0.16);
    color: var(--text-muted);
}

@keyframes landing-road-node-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(253, 230, 138, 0.35), inset 0 -3px 0 rgba(140, 98, 10, 0.22), 2px 3px 0 rgba(140, 98, 10, 0.28); }
    50% { box-shadow: 0 0 0 7px rgba(253, 230, 138, 0.2), inset 0 -3px 0 rgba(140, 98, 10, 0.22), 2px 3px 0 rgba(140, 98, 10, 0.28); }
}

.landing-road-badge {
    display: inline-block;
    min-width: 52px;
    padding: 4px 10px;
    border: 2px solid var(--panel-border);
    border-radius: 999px;
    font-size: 8px;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-align: center;
    line-height: 1.2;
    background: #e8e0cc;
    box-shadow: 1px 1px 0 rgba(26, 20, 14, 0.14);
}

.landing-road-badge.is-live {
    background: linear-gradient(180deg, #bbf7d0 0%, #86efac 100%);
    border-color: #3d8f52;
    color: #14532d;
}

.landing-road-badge.is-next {
    background: linear-gradient(180deg, #fef08a 0%, #fde68a 100%);
    border-color: #b8860b;
    color: #5c4200;
    animation: landing-road-badge-pulse 1.8s steps(3, end) infinite;
}

@keyframes landing-road-badge-pulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

.landing-road-card {
    position: relative;
    padding: 14px 14px 14px 16px;
    border: 2px solid var(--panel-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 3px 3px 0 rgba(26, 20, 14, 0.1);
    overflow: hidden;
    isolation: isolate;
}

.landing-road-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: #c4a574;
    z-index: 1;
}

.landing-road-step--live .landing-road-card {
    background: linear-gradient(135deg, #e8fbeb 0%, #f8fff9 38%, #fff8ea 100%);
    border-color: #3d8f52;
    box-shadow: 3px 3px 0 rgba(34, 94, 48, 0.2);
}

.landing-road-step--live .landing-road-card::before {
    background: linear-gradient(180deg, #86efac 0%, #3d8f52 100%);
}

.landing-road-step--live .landing-road-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.32) 50%,
        transparent 62%
    );
    background-size: 220% 100%;
    animation: landing-road-shine 3.6s ease-in-out infinite;
}

.landing-road-step--next .landing-road-card {
    background: linear-gradient(135deg, #fff8d8 0%, #fff8ea 45%, #f0e4c8 100%);
    border-color: #b8860b;
    box-shadow: 3px 3px 0 rgba(140, 98, 10, 0.22);
}

.landing-road-step--next .landing-road-card::before {
    background: linear-gradient(180deg, #fde68a 0%, #d4a017 100%);
}

.landing-road-step--next .landing-road-card {
    outline: 2px dashed rgba(184, 134, 11, 0.35);
    outline-offset: 3px;
}

.landing-road-step--soon .landing-road-card {
    background: rgba(255, 248, 234, 0.5);
    border-style: dashed;
    border-color: rgba(139, 115, 85, 0.55);
    box-shadow: none;
    opacity: 0.94;
}

.landing-road-step--soon .landing-road-card::before {
    background: #d8cdb8;
}

@keyframes landing-road-shine {
    0% { background-position: 160% center; }
    100% { background-position: -160% center; }
}

.landing-road-phase {
    position: relative;
    z-index: 2;
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 5px;
}

.landing-road-card h3 {
    position: relative;
    z-index: 2;
    font-size: var(--lfont-lg);
    margin: 0 0 8px;
    letter-spacing: 0.03em;
    text-shadow: 1px 1px 0 rgba(255, 217, 102, 0.35);
    overflow-wrap: anywhere;
}

.landing-road-card > p {
    position: relative;
    z-index: 2;
    font-size: var(--lfont-sm);
    line-height: 1.62;
    color: var(--text-muted);
    margin: 0;
    overflow-wrap: anywhere;
}

.landing-road-tags {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.landing-road-tags li {
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border: 2px solid rgba(139, 115, 85, 0.38);
    border-radius: 999px;
    background: rgba(255, 248, 234, 0.92);
    color: var(--text-dark);
    box-shadow: 1px 1px 0 rgba(26, 20, 14, 0.08);
}

.landing-road-step--live .landing-road-tags li {
    border-color: rgba(61, 143, 82, 0.4);
    background: rgba(255, 255, 255, 0.78);
}

.landing-road-step--next .landing-road-tags li {
    border-color: rgba(184, 134, 11, 0.42);
    background: rgba(255, 252, 220, 0.88);
}

@media (prefers-reduced-motion: reduce) {
    .landing-road-step--live .landing-road-card::after,
    .landing-road-step--next .landing-road-node-num,
    .landing-road-badge.is-next {
        animation: none;
    }

    .landing-road-step--next .landing-road-card {
        outline: none;
    }
}

.landing-socials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.landing-social-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    background: var(--panel-inner);
    border: 2px solid var(--panel-border);
    min-width: 0;
    transition: transform 0.08s steps(2);
}

.landing-social-card:hover {
    transform: translate(2px, 2px);
}

.landing-social-card strong {
    font-size: clamp(11px, 2.7vw, 14px);
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.landing-social-card span {
    font-size: clamp(8px, 2.1vw, 11px);
    color: var(--text-muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.landing-ca-wrap {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.landing-copyable {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: 1px dashed var(--panel-border);
    border-radius: 999px;
    background: rgba(255, 248, 234, 0.92);
    box-shadow: 1px 1px 0 var(--pixel-shadow);
    font-family: inherit;
    color: var(--text-dark);
    text-align: left;
    cursor: pointer;
    transition: transform 0.08s steps(2), background 0.08s steps(2);
}

.landing-copyable:hover,
.landing-copyable:focus-visible {
    background: #fff;
    transform: translate(1px, 1px);
    outline: none;
}

.landing-copyable:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--pixel-shadow);
}

.landing-copyable.is-copied {
    border-style: solid;
    border-color: #3d8f52;
    background: #dff9e6;
    border-radius: 999px;
}

.landing-copyable-label {
    font-size: var(--lfont-xs);
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.landing-copyable-value {
    font-size: var(--lfont-xs);
    font-family: inherit;
    color: var(--text-dark);
    overflow-wrap: anywhere;
    word-break: break-all;
}

.landing-copyable-meta {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

.landing-copy-toast {
    margin: 0;
    text-align: center;
    font-size: var(--lfont-sm);
    color: #14532d;
    letter-spacing: 0.06em;
}

.landing-copy-toast.hidden {
    display: none;
}

.landing-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 18px;
}

.landing-footer {
    text-align: center;
    padding: 24px 8px 8px;
    font-size: clamp(8px, 2.1vw, 11px);
    color: #fff8ea;
    text-shadow: var(--shadow-pixel);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .landing-pulse-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-lb-tab {
        flex: 1 1 calc(50% - 6px);
    }

    .landing-party {
        gap: 4px;
    }

    .landing-sprite {
        width: 56px;
        height: 56px;
        background-size: 224px 224px;
    }

    .landing-sprite--walk {
        animation: sprite-walk-sm 0.55s steps(4) infinite;
    }

    .landing-sprite--bob {
        animation: sprite-walk-sm 0.55s steps(4) infinite, sprite-bob 1.2s steps(2) infinite;
    }
}

@media (min-width: 720px) {
    .landing-road-steps {
        gap: 22px;
    }

    .landing-road-step {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 20px;
    }

    .landing-road-step:not(:last-child)::after {
        left: 37px;
        top: 58px;
    }

    .landing-road-node-num {
        width: 58px;
        height: 58px;
        font-size: var(--lfont-md);
    }

    .landing-road-badge {
        min-width: 58px;
        font-size: 9px;
    }

    .landing-road-card {
        padding: 16px 18px 16px 20px;
        border-radius: 14px;
    }

    .landing-road-card h3 {
        font-size: var(--lfont-xl);
    }

    .landing-road-card > p {
        font-size: var(--lfont-md);
    }

    .landing-road-tags li {
        font-size: 10px;
    }
}

@keyframes sprite-walk-sm {
    from { background-position: 0 0; }
    to { background-position: -224px 0; }
}

@media (min-width: 720px) {
    .landing-wrap {
        padding: 0 24px 64px;
    }

    .landing-hero-logo {
        width: min(320px, 70vw);
    }

    .landing-hero-kicker {
        max-width: 48ch;
        font-size: var(--lfont-md);
    }

    .landing-section-title {
        font-size: var(--lfont-3xl);
    }

    .landing-section-title span {
        font-size: var(--lfont-lg);
    }

    .landing-play-steps-title,
    .landing-play-loot-title {
        font-size: var(--lfont-2xl);
    }

    .landing-play-steps-lead,
    .landing-play-loot-lead {
        font-size: var(--lfont-lg);
    }
}