@font-face {
    font-family: 'Segoe UI';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/SegoeUI.ttf') format('truetype');
}

@font-face {
    font-family: 'Proxima Nova';
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/Proxima-Nova-Semibold.ttf') format('truetype');
}

:root {
    --gp-background: #161718;
    --gp-background-top: #121314;
    --gp-surface: #181b1d;
    --gp-surface-raised: #202426;
    --gp-surface-recessed: #111415;
    --gp-form-readonly: #151819;
    --gp-green: #96d823;
    --gp-green-bright: #a9e243;
    --gp-green-fill: var(--gp-green);
    --gp-green-fill-bright: var(--gp-green-bright);
    --gp-green-rgb: 150 216 35;
    --gp-twitch: #6442a6;
    --gp-muted: #9aa39a;
    --gp-text: #f4f6ef;
    --gp-border: #303638;
    --gp-card-border: #2b3032;
    --gp-danger-accent: #c64e59;
    --gp-danger-background: rgb(113 52 58 / 42%);
    --gp-danger-border: rgb(198 78 89 / 40%);
    --gp-danger-solid: #71343a;
    --gp-danger-solid-hover: #8b4149;
    --gp-danger-text: #f7e6e8;
    --gp-shadow: rgb(0 0 0 / 35%);
    --gp-gutter: clamp(1rem, 4vw, 3rem);
    --gp-content-width: 74rem;
    --pico-font-family-sans-serif: 'Segoe UI', system-ui, sans-serif;
    --pico-font-family: var(--pico-font-family-sans-serif);
    --pico-border-radius: 0.25rem;
    --pico-form-element-spacing-vertical: 0.75rem;
    --pico-form-element-spacing-horizontal: 0.9rem;
}

:root[data-theme] {
    --pico-background-color: var(--gp-background);
    --pico-card-background-color: var(--gp-surface);
    --pico-card-border-color: var(--gp-card-border);
    --pico-card-sectioning-background-color: var(--gp-surface-raised);
    --pico-color: var(--gp-text);
    --pico-muted-color: var(--gp-muted);
    --pico-muted-border-color: var(--gp-border);
    --pico-primary: var(--gp-green);
    --pico-primary-background: var(--gp-green-fill);
    --pico-primary-border: var(--gp-green-fill);
    --pico-primary-underline: rgb(var(--gp-green-rgb) / 50%);
    --pico-primary-hover: var(--gp-green-bright);
    --pico-primary-hover-background: var(--gp-green-fill-bright);
    --pico-primary-hover-border: var(--gp-green-fill-bright);
}

:root[data-theme='dark'] {
    color-scheme: dark;
    --pico-primary-focus: rgb(var(--gp-green-rgb) / 37.5%);
    --pico-primary-inverse: #000;
}

:root[data-theme='light'] {
    color-scheme: light;
    --gp-background: #f0f2f1;
    --gp-background-top: #fff;
    --gp-surface: #f8f9f8;
    --gp-surface-raised: #fff;
    --gp-surface-recessed: #e4e8e6;
    --gp-form-readonly: #e9edeb;
    --gp-green: #4d7600;
    --gp-green-bright: #365700;
    --gp-green-rgb: 77 118 0;
    --gp-muted: #5d6762;
    --gp-text: #1b201d;
    --gp-border: #b8c1bc;
    --gp-card-border: #c9d0cc;
    --gp-danger-accent: #9b2f3a;
    --gp-danger-background: rgb(155 47 58 / 9%);
    --gp-danger-border: rgb(155 47 58 / 28%);
    --gp-danger-solid: #8f2f39;
    --gp-danger-solid-hover: #76232c;
    --gp-danger-text: #fff;
    --gp-shadow: rgb(27 32 29 / 15%);
    --pico-primary-focus: rgb(var(--gp-green-rgb) / 30%);
    --pico-primary-inverse: #f4f6ef;
    --pico-secondary: #525f7a;
    --pico-secondary-background: #525f7a;
    --pico-secondary-border: #525f7a;
    --pico-secondary-hover: #5d6b89;
    --pico-secondary-hover-background: #5d6b89;
    --pico-secondary-hover-border: #5d6b89;
    --pico-secondary-focus: rgb(144 158 190 / 25%);
    --pico-secondary-inverse: #fff;
    --pico-contrast: var(--gp-text);
    --pico-contrast-background: var(--gp-text);
    --pico-contrast-border: var(--gp-text);
    --pico-contrast-hover: #000;
    --pico-contrast-hover-background: #000;
    --pico-contrast-hover-border: #000;
    --pico-contrast-focus: rgb(27 32 29 / 20%);
    --pico-contrast-inverse: #fff;
    --pico-form-element-background-color: var(--gp-surface-raised);
    --pico-form-element-selected-background-color: var(--gp-green-fill);
    --pico-form-element-border-color: var(--gp-border);
    --pico-form-element-color: var(--gp-text);
    --pico-form-element-placeholder-color: var(--gp-muted);
    --pico-form-element-active-background-color: var(--gp-surface-raised);
    --pico-form-element-active-border-color: var(--gp-green);
    --pico-form-element-focus-color: var(--pico-primary-focus);
    --pico-dropdown-background-color: var(--gp-surface-raised);
    --pico-dropdown-border-color: var(--gp-border);
    --pico-dropdown-color: var(--gp-text);
    --pico-dropdown-hover-background-color: rgb(var(--gp-green-rgb) / 10%);
    --pico-code-background-color: var(--gp-surface-recessed);
    --pico-code-color: var(--gp-text);
    --pico-table-border-color: var(--gp-border);
    --pico-text-selection-color: rgb(var(--gp-green-rgb) / 22%);
}

@view-transition {
    navigation: auto;
}

/* Only incoming content moves; the background and shared chrome stay steady. */
::view-transition-group(root),
::view-transition-group(gp-content),
::view-transition-group(gp-nav),
::view-transition-group(gp-footer),
::view-transition-group(gp-breadcrumbs) {
    animation: none;
}

::view-transition-old(root),
::view-transition-old(gp-content),
::view-transition-old(gp-nav),
::view-transition-old(gp-footer),
::view-transition-old(gp-breadcrumbs) {
    display: none;
}

::view-transition-new(root),
::view-transition-new(gp-nav),
::view-transition-new(gp-footer),
::view-transition-new(gp-breadcrumbs) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-new(gp-content) {
    animation: gp-content-enter 150ms ease-out both;
    mix-blend-mode: normal;
}

@keyframes gp-content-enter {
    from {
        transform: translateY(8px);
    }

    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

html {
    min-width: 20rem;
    overflow-y: scroll;
}

body {
    background-color: var(--gp-background);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.05'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--gp-background-top) 0, var(--gp-background) 24rem);
    background-repeat: repeat, no-repeat;
    background-size: 180px 180px, 100% 24rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.container {
    max-width: calc(100% - (var(--gp-gutter) * 2));
    min-width: 0;
    padding-inline: 0;
    width: min(calc(100% - (var(--gp-gutter) * 2)), var(--gp-content-width));
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Proxima Nova', 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.gp-nav {
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding-block: 1.15rem;
    view-transition-name: gp-nav;
}

.gp-nav ul {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gp-nav ul:first-child,
.gp-nav ul:last-child {
    margin-inline: 0;
}

.gp-nav > ul:first-child {
    flex-shrink: 0;
}

.gp-nav li {
    flex-shrink: 0;
    padding: 0;
}

.gp-nav li.gp-nav-auth {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.gp-nav-separator::before {
    background: currentColor;
    border-radius: 50%;
    content: '';
    display: block;
    float: none;
    height: 0.3rem;
    width: 0.3rem;
}

.gp-nav a:not(.gp-brand),
.gp-nav button.gp-theme-toggle[type='button'] {
    align-items: center;
    border-radius: var(--pico-border-radius);
    display: inline-flex;
    font-family: 'Proxima Nova', 'Segoe UI', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.075em;
    margin: 0;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    text-transform: uppercase;
}

.gp-nav button.gp-theme-toggle[type='button'] {
    background: transparent;
    border-color: var(--pico-muted-border-color);
    color: var(--gp-text);
    justify-content: center;
    min-width: 2.75rem;
    padding: 0;
    width: 2.75rem;
}

.gp-nav button.gp-theme-toggle[type='button']:is(:hover, :focus-visible) {
    background: var(--gp-surface-raised);
    border-color: var(--gp-green);
    color: var(--gp-green);
}

.gp-theme-icon {
    display: block;
    height: 1.25rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
    width: 1.25rem;
}

.gp-theme-icon-moon {
    display: none;
}

[data-theme='light'] .gp-theme-icon-sun {
    display: none;
}

[data-theme='light'] .gp-theme-icon-moon {
    display: block;
}

.gp-nav .gp-twitch-auth {
    align-items: center;
    background-color: var(--gp-twitch);
    border-color: var(--gp-twitch);
    display: inline-flex;
    gap: 0.5rem;
}

.gp-nav .gp-twitch-auth:is(:hover, :focus) {
    background-color: #7658b5;
    border-color: #7658b5;
}

.gp-twitch-auth img {
    height: 1rem;
    width: 1rem;
}

.gp-brand {
    margin: 0;
    padding-block: 0.3rem;
    position: relative;
}

.gp-brand img {
    display: block;
    height: 3.5rem;
    width: auto;
}

.gp-brand img.gp-brand-logo-light {
    display: none;
}

[data-theme='light'] .gp-brand img.gp-brand-logo-dark {
    display: none;
}

[data-theme='light'] .gp-brand img.gp-brand-logo-light {
    display: block;
}

.gp-brand span {
    border: 1px solid var(--gp-green);
    color: var(--gp-text);
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: calc(0.15rem + 1px) 0.2rem calc(0.15rem - 1px);
    position: absolute;
    right: 0.5rem;
    top: 0.85rem;
}

.gp-nav-separator {
    color: var(--pico-muted-color);
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    background: var(--pico-primary-background);
    border-radius: var(--pico-border-radius);
    color: var(--pico-primary-inverse);
    left: 1rem;
    padding: 0.5rem 1rem;
    top: 1rem;
    z-index: 10;
}

main.container {
    padding-block: clamp(2.75rem, 6vw, 5.5rem);
    view-transition-name: gp-content;
}

main.container.gp-public {
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
}

main > hgroup {
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    max-width: 48rem;
}

main > hgroup h1 {
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

main > hgroup p {
    color: var(--pico-muted-color);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.55;
    max-width: 40rem;
}

main > hgroup p + p {
    margin-top: 0.4rem;
}

main > hgroup code {
    background-color: var(--gp-surface-raised);
    color: var(--gp-text);
}

.gp-notice {
    --gp-notice-accent: var(--gp-danger-accent);
    --gp-notice-background: var(--gp-danger-background);
    --gp-notice-border: var(--gp-danger-border);
    align-content: center;
    align-items: center;
    background: var(--gp-notice-background);
    border: 1px solid var(--gp-notice-border);
    border-left: 0.35rem solid var(--gp-notice-accent);
    border-radius: var(--pico-border-radius);
    display: grid;
    gap: 0.25rem 1.5rem;
    grid-template-columns: max-content 1fr;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    padding: 1rem 3.75rem 1rem 1.25rem;
    position: relative;
}

.gp-notice-success {
    --gp-notice-accent: var(--gp-green);
    --gp-notice-background: rgb(var(--gp-green-rgb) / 12%);
    --gp-notice-border: rgb(var(--gp-green-rgb) / 32%);
}

.gp-notice-pending {
    --gp-notice-accent: var(--gp-muted);
    --gp-notice-background: var(--gp-surface-raised);
    --gp-notice-border: var(--gp-border);
}

.gp-pb-collision {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    overflow-wrap: anywhere;
    padding: 1.25rem;
}

.gp-pb-collision :is(p, ul, button) {
    margin-bottom: 0;
}

.gp-notice.gp-pb-collision strong {
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.gp-notice strong {
    color: var(--gp-notice-accent);
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.gp-notice > span {
    color: var(--gp-text);
    line-height: 1.25;
    transform: translateY(-0.1em);
}

button.gp-notice-close {
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--gp-notice-accent);
    display: inline-flex;
    font-size: 1.4rem;
    height: 2.25rem;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
}

button.gp-notice-close:is(:hover, :focus-visible) {
    background: var(--gp-notice-border);
    color: var(--gp-text);
}

button.gp-notice-close:focus-visible {
    outline: 2px solid var(--gp-notice-accent);
    outline-offset: 1px;
}

button.gp-notice-close span {
    line-height: 1;
    transform: translateY(-0.1em);
}

.gp-hero-copy {
    max-width: 68rem;
}

.gp-hero-copy > p:last-child {
    max-width: 52rem;
}

.gp-eyebrow {
    color: var(--gp-green);
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.gp-error {
    align-items: center;
    background: linear-gradient(135deg, rgb(var(--gp-green-rgb) / 9%), var(--gp-surface) 42%);
    display: grid;
    gap: clamp(2rem, 6vw, 5rem);
    grid-template-columns: minmax(10rem, 0.65fr) minmax(0, 1fr);
    margin-inline: auto;
    max-width: 64rem;
    overflow: hidden;
    padding: clamp(2rem, 6vw, 5rem);
    position: relative;
}

.gp-error::before {
    background: var(--gp-green);
    content: '';
    height: 0.25rem;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gp-error-code {
    color: rgb(var(--gp-green-rgb) / 24%);
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: clamp(6rem, 15vw, 11rem);
    font-weight: 700;
    letter-spacing: -0.09em;
    line-height: 0.75;
}

.gp-error-copy h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 0.95;
    margin-bottom: 1rem;
}

.gp-error-copy > p:not(.gp-eyebrow) {
    color: var(--pico-muted-color);
    font-size: 1.1rem;
    line-height: 1.55;
}

.gp-error-copy .gp-error-reason {
    border-left: 0.2rem solid var(--pico-muted-border-color);
    font-size: 0.9rem;
    padding-left: 0.85rem;
}

.gp-error-copy [role='button'] {
    margin: 0.75rem 0 0;
    width: fit-content;
}

.gp-player {
    scroll-margin-block: 1rem;
}

.gp-embed {
    background: var(--gp-surface);
    border-radius: var(--pico-border-radius);
    display: grid;
    margin-bottom: 1.25rem;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* The frame accommodates both 16:9 video and the full consent text. */
.gp-embed::before {
    align-self: start;
    aspect-ratio: 16 / 9;
    content: '';
    grid-area: 1 / 1;
    width: 100%;
}

.gp-embed::after {
    border: 1px solid rgb(244 246 239 / 22%);
    border-radius: inherit;
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.gp-embed iframe {
    border: 0;
    display: block;
    height: 100%;
    inset: 0;
    position: absolute;
    width: 100%;
}

.gp-player-placeholder {
    align-self: center;
    grid-area: 1 / 1;
    margin-inline: auto;
    max-width: 46rem;
    padding: clamp(3.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) 2rem;
}

.gp-player-placeholder[inert] {
    visibility: hidden;
}

@media (max-height: 36rem) {
    .gp-player-placeholder {
        /* Keep its load button near the action row when scrolling to the frame's end. */
        align-self: end;
    }
}

.gp-player-placeholder h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.gp-player-placeholder p {
    color: var(--gp-muted);
    font-size: 0.9rem;
}

.gp-player-placeholder button {
    margin-bottom: 0;
}

main.gp-legal {
    max-width: 46rem;
    overflow-wrap: anywhere;
}

.gp-legal section {
    margin-block: 2.5rem;
}

.gp-legal h2 {
    font-size: 1.4rem;
}

.gp-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    justify-content: flex-end;
}

.gp-feed-label {
    background: var(--gp-green-fill);
    color: var(--pico-primary-inverse);
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.55rem;
    pointer-events: none;
    position: absolute;
    right: 1rem;
    text-transform: uppercase;
    top: 1rem;
    z-index: 3;
}

.gp-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

a.gp-twitch-link {
    align-items: center;
    display: inline-flex;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    width: fit-content;
}

.gp-player-stop {
    margin: 0;
    max-width: 100%;
}

.gp-icon {
    background: currentColor;
    display: inline-block;
    mask: var(--gp-icon) center / contain no-repeat;
}

.gp-icon-discord {
    --gp-icon: url('/assets/images/discord.svg');
}

.gp-icon-instagram {
    --gp-icon: url('/assets/images/instagram.svg');
}

.gp-icon-twitch {
    --gp-icon: url('/assets/images/twitch-white.svg?mask');

    transform: translateY(0.125rem);
}

.gp-icon-youtube {
    --gp-icon: url('/assets/images/youtube.svg');
}

.gp-twitch-link .gp-icon {
    height: 1.5rem;
    width: 1.5rem;
}

.gp-about {
    border-top: 1px solid var(--pico-muted-border-color);
    display: grid;
    gap: clamp(2rem, 5vw, 5rem);
    grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr);
    margin-top: clamp(4.5rem, 9vw, 8rem);
    padding-top: clamp(2rem, 4vw, 3.5rem);
}

.gp-about h2 {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 0.95;
    margin: 0;
}

.gp-socials {
    display: flex;
    gap: 0.65rem;
    justify-content: flex-start;
    margin-top: 1.5rem;
}

.gp-socials a {
    align-items: center;
    background: var(--gp-surface-raised);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    color: var(--gp-muted);
    display: inline-flex;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}

.gp-socials a:is(:hover, :focus) {
    background: var(--gp-green-fill);
    border-color: var(--gp-green-fill);
    color: var(--pico-primary-inverse);
}

.gp-socials .gp-icon {
    height: 1.25rem;
    width: 1.25rem;
}

.gp-about-copy {
    max-width: 46rem;
}

.gp-about-lede {
    color: var(--gp-text);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.55;
}

.gp-about-links {
    display: flex;
    flex-wrap: wrap;
    font-family: 'Proxima Nova', 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    gap: 0.75rem 1.75rem;
    margin: 2rem 0 0;
}

.gp-about-links a {
    text-underline-offset: 0.25em;
}

.gp-table-shell {
    border: 1px solid var(--pico-muted-border-color);
    max-width: 100%;
    overflow-x: auto;
}

.gp-playlist {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    table-layout: fixed;
    width: 100%;
}

.gp-playlist th,
.gp-playlist td {
    border-bottom: 1px solid var(--pico-muted-border-color);
    padding: 1rem 1.25rem;
}

.gp-playlist thead th {
    background: var(--gp-surface-recessed);
    color: var(--pico-muted-color);
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.gp-playlist tbody th {
    color: var(--gp-text);
    font-weight: 600;
}

.gp-playlist .gp-playlist-boundary > th {
    background: var(--gp-surface-recessed);
    border-top: 1px solid var(--pico-muted-border-color);
    overflow-wrap: anywhere;
    padding: 0.65rem 1.25rem;
    text-align: center;
}

.gp-playlist-boundary > th > span {
    color: var(--pico-muted-color);
    font-weight: 400;
}

/* not :last-child, because Alpine's inline templates are children of the tbody too */
.gp-playlist tbody tr:last-of-type > * {
    border-bottom: 0;
}

.gp-playlist .is-current > * {
    background: rgb(var(--gp-green-rgb) / 10%);
}

.gp-playlist .is-current > :first-child {
    box-shadow: inset 0.25rem 0 var(--gp-green);
}

.gp-game-cell {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.gp-now,
.gp-next {
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.4rem;
    text-transform: uppercase;
}

.gp-now {
    background: var(--gp-green-fill);
    color: var(--pico-primary-inverse);
}

.gp-next {
    border: 1px solid var(--gp-green);
    color: var(--gp-green);
}

.gp-runtime {
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    text-align: right;
    white-space: nowrap;
}

article {
    border: 1px solid var(--pico-card-border-color);
    box-shadow: none;
}

.gp-footer {
    align-items: center;
    border-top: 1px solid var(--pico-muted-border-color);
    color: var(--pico-muted-color);
    display: flex;
    gap: 1rem;
    padding-block: 1.5rem;
    view-transition-name: gp-footer;
}

.gp-footer small:last-child {
    margin-left: auto;
    text-align: right;
}

@media (max-width: 64rem) {
    .gp-nav {
        align-items: stretch;
        flex-direction: column;
        gap: 0.85rem;
        padding-block: 1rem;
    }

    .gp-nav > ul {
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
    }
}

@media (max-width: 48rem) {
    .gp-brand img {
        height: 4rem;
    }

    .gp-brand span {
        font-size: 0.65rem;
        right: 0.5rem;
        top: 0.95rem;
    }

    main.container {
        padding-block: 2.5rem 4rem;
    }

    .gp-notice {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .gp-hero-copy h1 {
        overflow-wrap: normal;
    }

    .gp-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .gp-actions [role='button'] {
        text-align: center;
        width: 100%;
    }

    .gp-about {
        gap: 1.5rem;
        grid-template-columns: 1fr;
        margin-top: 4.5rem;
    }

    .gp-error {
        gap: 2rem;
        grid-template-columns: 1fr;
    }

    .gp-error-code {
        font-size: clamp(5rem, 30vw, 8rem);
    }

    .gp-error-copy [role='button'] {
        text-align: center;
        width: 100%;
    }
}

@media (max-width: 64rem) {
    .gp-game-cell {
        align-items: baseline;
    }

    .gp-table-shell {
        overflow: visible;
    }

    .gp-playlist {
        min-width: 0;
        width: 100%;
    }

    .gp-playlist thead {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .gp-playlist tbody {
        display: block;
    }

    .gp-playlist tbody tr {
        border-bottom: 1px solid var(--pico-muted-border-color);
        display: grid;
        gap: 0.2rem 1rem;
        grid-template-areas:
            'game runtime'
            'category runner';
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 0.8rem 1rem;
    }

    .gp-playlist tbody tr:last-of-type {
        border-bottom: 0;
    }

    .gp-playlist tbody th,
    .gp-playlist tbody td {
        background: transparent;
        border: 0;
        padding: 0;
    }

    .gp-playlist tbody th {
        grid-area: game;
    }

    .gp-playlist tbody tr.gp-playlist-boundary {
        background: var(--gp-surface-recessed);
        border-top: 1px solid var(--pico-muted-border-color);
        grid-template-areas: 'game';
        grid-template-columns: minmax(0, 1fr);
        padding: 0.65rem 1rem;
    }

    .gp-playlist .gp-playlist-boundary > th {
        background: transparent;
        border: 0;
        padding: 0;
    }

    .gp-playlist tbody td:nth-child(2) {
        color: var(--pico-muted-color);
        font-size: 0.9rem;
        grid-area: category;
    }

    .gp-playlist tbody td:nth-child(3) {
        color: var(--pico-muted-color);
        font-size: 0.9rem;
        grid-area: runner;
        max-width: 9rem;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .gp-playlist tbody .gp-runtime {
        grid-area: runtime;
    }

    .gp-playlist tbody tr.is-current {
        background: rgb(var(--gp-green-rgb) / 10%);
        box-shadow: inset 0.25rem 0 var(--gp-green);
    }

    .gp-playlist .is-current > * {
        background: transparent;
    }

    .gp-playlist .is-current > :first-child {
        box-shadow: none;
        padding-left: 0;
    }
}

@media (min-width: 64.01rem) {
    .gp-playlist th:nth-child(1) {
        width: 38%;
    }

    .gp-playlist th:nth-child(2) {
        width: 32%;
    }

    .gp-playlist th:nth-child(3) {
        width: 18%;
    }

    .gp-playlist th:nth-child(4) {
        width: 12%;
    }
}