/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */
/* Hallmark · macrostructure: Workbench · tone: cool-mineral · anchor hue: slate
 * theme: Cool Mineral Studio (#E8EDF2 · slate #2C3E50 · copper #C87941 · play #2563EB · Fraunces + Nunito Sans)
 * nav: N8 underlined ribbon · footer: Ft6 wave grid
 * audience: mid-core browser players · use: pick a short game · tone: restrained studio
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&display=swap");

:root {
    /* Cool Mineral Studio — field #E8EDF2, cards #FFFFFF */
    --pc-paper: #e8edf2;
    --pc-paper-2: #dde4eb;
    --pc-paper-3: #d1dae3;
    --pc-surface: #ffffff;
    --pc-ink: oklch(20% 0.03 260);
    --pc-ink-soft: oklch(45% 0.025 250);
    --pc-ink-muted: oklch(55% 0.02 250);
    --pc-accent: oklch(32% 0.04 250);
    --pc-accent-deep: oklch(24% 0.035 250);
    --pc-accent-soft: oklch(94% 0.015 240);
    --pc-berry: oklch(62% 0.1 55);
    --pc-berry-soft: oklch(94% 0.025 55);
    --pc-honey: oklch(65% 0.11 60);
    --pc-line: oklch(88% 0.015 240);
    --pc-line-strong: oklch(72% 0.02 250);
    --pc-focus: oklch(54% 0.2 264);
    --pc-void: oklch(28% 0.04 250);
    --pc-play-blue: #2563eb;
    --pc-play-blue-hover: #1d4ed8;
    --pc-gallery-bg: var(--pc-paper);
    --pc-on-accent: #ffffff;
    --pc-on-dark: #f1f5f9;
    --pc-header-glass: oklch(100% 0.002 240 / 0.92);
    --pc-overlay: oklch(15% 0.03 250 / 0.45);
    --pc-scrim: oklch(15% 0.03 250 / 0.82);
    --pc-scrim-soft: oklch(15% 0.03 250 / 0.55);
    --pc-footer-fg: oklch(92% 0.01 240);
    --pc-footer-fg-soft: oklch(78% 0.015 240);
    --pc-footer-fg-muted: oklch(70% 0.015 240);
    --pc-footer-link: oklch(88% 0.01 240);
    --pc-footer-border: oklch(38% 0.03 250);

    --pc-font-display: "Fraunces", Georgia, serif;
    --pc-font-body: "Nunito Sans", system-ui, sans-serif;
    --pc-font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --pc-space-2xs: 0.35rem;
    --pc-space-xs: 0.65rem;
    --pc-space-sm: 1rem;
    --pc-space-md: 1.6rem;
    --pc-space-lg: 2.6rem;
    --pc-space-xl: 4rem;
    --pc-space-2xl: 5.5rem;

    --pc-radius-sm: 8px;
    --pc-radius-md: 14px;
    --pc-radius-lg: 22px;
    --pc-radius-xl: 32px;
    --pc-radius-pill: 999px;

    --pc-max: 1160px;
    --pc-header-h: 64px;

    --pc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --pc-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --pc-dur-fast: 160ms;
    --pc-dur: 240ms;
    --pc-dur-slow: 420ms;

    --pc-shadow-sm: 0 2px 8px oklch(20% 0.03 260 / 0.08);
    --pc-shadow-md: 0 8px 24px oklch(20% 0.03 260 / 0.12);
    --pc-shadow-ticket: 4px 6px 0 oklch(32% 0.04 250 / 0.16);
}

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

html {
    overflow-x: clip;
    scroll-behavior: smooth;
    background-color: var(--pc-paper);
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: clip;
    font-family: var(--pc-font-body);
    font-size: 1rem;
    line-height: 1.62;
    color: var(--pc-ink);
    background-color: var(--pc-paper);
    background-image:
        radial-gradient(ellipse 130% 70% at 50% -25%, oklch(98% 0.006 240) 0%, transparent 58%),
        linear-gradient(180deg, var(--pc-paper) 0%, var(--pc-paper-2) 100%);
    background-attachment: fixed;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--pc-accent-deep);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--pc-berry);
}

button,
input,
select {
    font: inherit;
}

.pc-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.65rem 1rem;
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    border-radius: var(--pc-radius-sm);
}

.pc-skip:focus {
    left: 0.75rem;
    top: 0.75rem;
}

.pc-wrap {
    width: min(100% - 1.5rem, var(--pc-max));
    margin-inline: auto;
}

.pc-display {
    font-family: var(--pc-font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.12;
    overflow-wrap: anywhere;
    min-width: 0;
}

.pc-label {
    font-family: var(--pc-font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pc-ink-muted);
}

.pc-note {
    font-size: 0.875rem;
    color: var(--pc-ink-soft);
}

.pc-note--sm {
    font-size: 0.8rem;
}

.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.55rem 1.25rem;
    border: 2px solid transparent;
    border-radius: var(--pc-radius-pill);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--pc-dur) var(--pc-ease-out),
        background var(--pc-dur) var(--pc-ease-out),
        color var(--pc-dur) var(--pc-ease-out),
        border-color var(--pc-dur) var(--pc-ease-out);
}

.pc-btn:focus-visible {
    outline: 2px solid var(--pc-focus);
    outline-offset: 3px;
}

.pc-btn--primary {
    background: var(--pc-accent);
    color: var(--pc-on-accent);
    box-shadow: var(--pc-shadow-ticket);
}

.pc-btn--primary:hover {
    background: var(--pc-accent-deep);
    color: var(--pc-on-accent);
    transform: translateY(-1px);
}

.pc-btn--primary:active {
    transform: translateY(1px);
    box-shadow: none;
}

.pc-btn--ghost {
    background: var(--pc-surface);
    color: var(--pc-ink);
    border-color: var(--pc-line-strong);
}

.pc-btn--ghost:hover {
    border-color: var(--pc-accent);
    color: var(--pc-accent-deep);
}

.pc-btn--sm {
    min-height: 40px;
    padding: 0.4rem 0.95rem;
    font-size: 0.82rem;
}

.pc-btn--block {
    width: 100%;
}

.pc-btn:disabled,
.pc-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}