/*
 * Apple HIG-inspired community visual layer
 * Loaded after community-v2.css and scoped to .community-hig.
 */

:root {
    --hig-accent: #0a84ff;
    --hig-accent-pressed: #0068d6;
    --hig-bg: #f5f5f7;
    --hig-surface: rgba(255, 255, 255, .92);
    --hig-surface-solid: #ffffff;
    --hig-sidebar: rgba(246, 246, 248, .82);
    --hig-text: #1d1d1f;
    --hig-text-secondary: #6e6e73;
    --hig-text-tertiary: #8e8e93;
    --hig-separator: rgba(60, 60, 67, .14);
    --hig-fill: rgba(120, 120, 128, .12);
    --hig-focus: 0 0 0 3px rgba(10, 132, 255, .28);
    --hig-shadow: 0 12px 38px rgba(0, 0, 0, .08);
    --hig-radius-sm: 10px;
    --hig-radius-md: 14px;
    --hig-radius-lg: 20px;
    --hig-glass-fill: rgba(244, 249, 252, .2);
    --hig-glass-edge: rgba(255, 255, 255, .42);
    --hig-glass-edge-soft: rgba(255, 255, 255, .14);
    --hig-glass-bottom: rgba(0, 0, 0, .2);
    --hig-glass-blur: 60px;
    --hig-glass-refraction-blur: 8px;
    --hig-glass-refraction-scale: 1.3;
    --hig-glass-displacement: 14;
    --hig-topbar: 64px;
    --hig-sidebar-width: 232px;
    --hig-sidebar-compact: 76px;
    --hig-right-rail: 300px;
    --hig-gap: 24px;
    --hig-ease: cubic-bezier(.2, .8, .2, 1);
    --hig-sidebar-motion-duration: 280ms;
    --hig-sidebar-motion-ease: cubic-bezier(.77, 0, .175, 1);
    --hig-sidebar-label-duration: 90ms;

    --hig-accent-soft: rgba(10, 132, 255, .12);
    --hig-accent-softer: rgba(10, 132, 255, .08);
    --hig-control-bg: rgba(118, 118, 128, .08);
    --hig-control-border: rgba(60, 60, 67, .18);
    --hig-control-hover: rgba(118, 118, 128, .16);
    --hig-success: #248a3d;
    --hig-success-soft: rgba(36, 138, 61, .12);
    --hig-warning: #b25000;
    --hig-warning-soft: rgba(178, 80, 0, .12);
    --hig-danger: #d70015;
    --hig-danger-soft: rgba(215, 0, 21, .1);
    --hig-image-outline: rgba(0, 0, 0, .1);
    --hig-shadow-sm:
        0 0 0 1px rgba(0, 0, 0, .04),
        0 1px 2px rgba(0, 0, 0, .04);
    --hig-shadow-control:
        0 0 0 1px rgba(0, 0, 0, .05),
        0 1px 2px -1px rgba(0, 0, 0, .06),
        0 2px 4px rgba(0, 0, 0, .04);
    --hig-shadow-control-hover:
        0 0 0 1px rgba(0, 0, 0, .08),
        0 1px 2px -1px rgba(0, 0, 0, .08),
        0 3px 8px rgba(0, 0, 0, .06);
    --hig-shadow-overlay:
        0 0 0 1px rgba(0, 0, 0, .06),
        0 8px 24px rgba(0, 0, 0, .1),
        0 24px 64px rgba(0, 0, 0, .12);
}

[data-theme="dark"] {
    --hig-bg: #101012;
    --hig-surface: rgba(35, 35, 38, .9);
    --hig-surface-solid: #1c1c1e;
    --hig-sidebar: rgba(28, 28, 30, .82);
    --hig-text: #f5f5f7;
    --hig-text-secondary: #aeaeb2;
    --hig-text-tertiary: #8e8e93;
    --hig-separator: rgba(255, 255, 255, .12);
    --hig-fill: rgba(120, 120, 128, .24);
    --hig-shadow: 0 16px 44px rgba(0, 0, 0, .32);
    --hig-glass-fill: rgba(8, 10, 12, .2);
    --hig-glass-edge: rgba(255, 255, 255, .16);
    --hig-glass-edge-soft: rgba(255, 255, 255, .06);
    --hig-glass-bottom: rgba(0, 0, 0, .78);

    --hig-accent-soft: rgba(10, 132, 255, .2);
    --hig-accent-softer: rgba(10, 132, 255, .13);
    --hig-control-bg: rgba(118, 118, 128, .18);
    --hig-control-border: rgba(255, 255, 255, .14);
    --hig-control-hover: rgba(118, 118, 128, .28);
    --hig-success: #30d158;
    --hig-success-soft: rgba(48, 209, 88, .16);
    --hig-warning: #ff9f0a;
    --hig-warning-soft: rgba(255, 159, 10, .16);
    --hig-danger: #ff453a;
    --hig-danger-soft: rgba(255, 69, 58, .16);
    --hig-image-outline: rgba(255, 255, 255, .1);
    --hig-shadow-sm: 0 0 0 1px rgba(255, 255, 255, .08);
    --hig-shadow-control: 0 0 0 1px rgba(255, 255, 255, .08);
    --hig-shadow-control-hover: 0 0 0 1px rgba(255, 255, 255, .13);
    --hig-shadow-overlay:
        0 0 0 1px rgba(255, 255, 255, .12),
        0 24px 64px rgba(0, 0, 0, .46);
}

/* Foundation */

.community-hig {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--hig-text);
    background: var(--hig-bg);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

.community-hig :where(h1, h2, h3, h4) {
    color: var(--hig-text);
    text-wrap: balance;
}

.community-hig :where(p, li, figcaption, blockquote) {
    text-wrap: pretty;
}

.community-hig :where(a) {
    color: inherit;
    text-decoration: none;
}

.community-hig :where(button, input, select, textarea) {
    font: inherit;
}

.community-hig :where(button, [role="button"], a, input, select, textarea) {
    -webkit-tap-highlight-color: transparent;
}

.community-hig :focus-visible {
    outline: 0;
    box-shadow: var(--hig-focus);
}

.community-hig :where(input, select, textarea):focus-visible {
    border-color: var(--hig-accent);
}

.community-hig :where(button, input, select, textarea):disabled,
.community-hig :where([aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: .46;
}

.community-hig :where([hidden]) {
    display: none !important;
}

.community-hig :where(img, video) {
    max-width: 100%;
    outline: 1px solid var(--hig-image-outline);
    outline-offset: -1px;
}

.community-hig :where(
    .c-thread-stats,
    .c-field-count,
    .c-floor-num,
    .c-game-plays,
    .stat-number,
    .gm-hero-rcount,
    .gm-rcount,
    .th-like-count,
    .capp-bell > span
) {
    font-variant-numeric: tabular-nums;
}

.community-hig > .navbar,
.community-hig > .footer {
    display: none !important;
}

/* Desktop split-view shell */

.community-hig .capp-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1200;
    height: var(--hig-topbar);
    border-bottom: 1px solid var(--hig-separator);
    color: var(--hig-text);
    background: var(--hig-surface-solid);
    background: var(--hig-sidebar);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
}

.community-hig .capp-topbar-inner {
    width: min(1440px, 100%);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    gap: 20px;
}

.community-hig .capp-brand {
    width: 208px;
    gap: 10px;
    color: var(--hig-text);
}

.community-hig .capp-brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    color: #fff;
    background: var(--hig-accent);
    box-shadow: var(--hig-shadow-control);
}

.community-hig .capp-brand b {
    font-size: .9375rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.community-hig .capp-brand small {
    margin-top: 2px;
    color: var(--hig-text-tertiary);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .055em;
}

.community-hig .capp-sidebar {
    position: sticky;
    top: calc(var(--hig-topbar) + 24px);
    width: var(--hig-sidebar-width);
    max-height: calc(100vh - var(--hig-topbar) - 48px);
    overflow: auto;
    padding: 8px;
    border: 0;
    border-radius: var(--hig-radius-lg);
    color: var(--hig-text);
    background: var(--hig-surface-solid);
    background: var(--hig-sidebar);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    scrollbar-width: none;
    transition:
        width var(--hig-sidebar-motion-duration) var(--hig-sidebar-motion-ease),
        transform 220ms var(--hig-ease);
}

.community-hig .capp-sidebar::-webkit-scrollbar,
.community-hig .capp-right-rail::-webkit-scrollbar {
    display: none;
}

.community-hig .capp-sidebar-tools {
    min-height: 36px;
    margin: 0 4px 8px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--hig-separator);
}

.community-hig .capp-sidebar-tools .capp-back-site {
    min-width: 0;
    min-height: 32px;
    margin: 0;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 550;
    white-space: nowrap;
    transition-property: color, background-color;
    transition-duration: 150ms;
    transition-timing-function: var(--hig-ease);
}

.community-hig .capp-sidebar-tools .capp-back-site:hover {
    color: var(--hig-text);
    background: var(--hig-fill);
}

.community-hig .capp-sidebar-tools .capp-sidebar-toggle {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 8px;
    color: var(--hig-text-tertiary);
    background: transparent;
    box-shadow: none;
}

.community-hig .capp-sidebar-tools .capp-sidebar-toggle:hover {
    color: var(--hig-text);
    background: var(--hig-fill);
    box-shadow: none;
}

.community-hig .capp-sidebar-toggle-icon {
    transition: transform 180ms var(--hig-ease);
}

.community-hig .capp-main {
    width: min(100%, 820px);
    min-width: 0;
    color: var(--hig-text);
    line-height: 1.6;
}

.community-hig .capp-right-rail {
    position: sticky;
    top: calc(var(--hig-topbar) + 24px);
    width: var(--hig-right-rail);
    max-height: calc(100vh - var(--hig-topbar) - 48px);
    overflow: auto;
    align-content: start;
    gap: 16px;
}

.community-hig .capp-layout,
.community-hig .capp-frame,
.community-hig .hig-shell {
    position: relative;
    inset: auto;
    width: min(1440px, 100%);
    height: auto;
    min-height: 100vh;
    margin: 0 auto;
    padding: calc(var(--hig-topbar) + 24px) 24px 48px;
    display: grid;
    grid-template-columns: var(--hig-sidebar-width) minmax(0, 820px) var(--hig-right-rail);
    justify-content: center;
    align-items: start;
    gap: var(--hig-gap);
    overflow: visible;
}

.community-hig.is-sidebar-collapsed .capp-layout,
.community-hig.is-sidebar-collapsed .capp-frame,
.community-hig.is-sidebar-collapsed .hig-shell {
    grid-template-columns: var(--hig-sidebar-compact) minmax(0, 820px) var(--hig-right-rail);
}

.community-hig.is-sidebar-collapsed .capp-sidebar {
    width: var(--hig-sidebar-compact);
}

.community-hig.is-sidebar-collapsed .capp-sidebar-tools {
    justify-content: center;
    margin-inline: 0;
}

.community-hig.is-sidebar-collapsed .capp-sidebar-toggle-icon {
    transform: rotate(180deg);
}

.community-hig.is-sidebar-collapsed .capp-sidebar :where(
    .capp-nav-item span,
    .capp-section-nav a span:nth-child(2),
    .capp-section-nav small,
    .capp-back-site
) {
    display: none;
}

.community-hig.is-sidebar-collapsed .capp-sidebar .capp-section-title {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}

.community-hig.is-sidebar-collapsed .capp-sidebar :where(.capp-nav-item, .capp-section-nav a) {
    display: flex;
    justify-content: center;
    padding-inline: 0;
}

@keyframes hig-sidebar-label-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-4px);
    }
}

@keyframes hig-sidebar-label-in {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (min-width: 1180px) {
    .community-hig .capp-layout,
    .community-hig .capp-frame,
    .community-hig .hig-shell,
    .community-hig .hig-reply-dock {
        transition-property: grid-template-columns;
        transition-duration: var(--hig-sidebar-motion-duration);
        transition-timing-function: var(--hig-sidebar-motion-ease);
    }

    .community-hig.is-sidebar-transitioning .capp-sidebar {
        overflow: hidden;
    }

    .community-hig.is-sidebar-transitioning
        .capp-sidebar
        :where(.capp-nav-item, .capp-section-nav a) {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        overflow: hidden;
    }

    .community-hig.is-sidebar-transitioning
        .capp-sidebar
        :where(
            .capp-nav-item span,
            .capp-section-title,
            .capp-section-nav a span:nth-child(2),
            .capp-section-nav small,
            .capp-back-site
        ) {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
    }

    .community-hig.is-sidebar-transitioning.is-sidebar-collapsing
        .capp-sidebar
        :where(.capp-nav-item span, .capp-section-nav a span:nth-child(2), .capp-section-nav small) {
        display: initial;
        animation: hig-sidebar-label-out var(--hig-sidebar-label-duration) var(--hig-ease) both;
    }

    .community-hig.is-sidebar-transitioning.is-sidebar-collapsing
        .capp-sidebar
        .capp-section-title {
        display: block;
        animation: hig-sidebar-label-out var(--hig-sidebar-label-duration) var(--hig-ease) both;
    }

    .community-hig.is-sidebar-transitioning.is-sidebar-collapsing
        .capp-sidebar
        .capp-back-site {
        display: inline-flex;
        animation: hig-sidebar-label-out var(--hig-sidebar-label-duration) var(--hig-ease) both;
    }

    .community-hig.is-sidebar-transitioning.is-sidebar-expanding
        .capp-sidebar
        :where(
            .capp-nav-item span,
            .capp-section-title,
            .capp-section-nav a span:nth-child(2),
            .capp-section-nav small,
            .capp-back-site
        ) {
        animation:
            hig-sidebar-label-in
            150ms
            var(--hig-ease)
            60ms
            both;
    }
}

/* Shell navigation */

.community-hig .capp-primary-nav {
    gap: 4px;
}

.community-hig :where(.capp-nav-item, .capp-section-nav a) {
    position: relative;
    min-height: 44px;
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text-secondary);
    transition-property: color, background-color, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--hig-ease);
}

.community-hig :where(.capp-nav-item, .capp-section-nav a):hover {
    color: var(--hig-text);
    background: var(--hig-fill);
}

.community-hig :where(.capp-nav-item, .capp-section-nav a):active {
    transform: scale(.96);
}

.community-hig :where(.capp-nav-item, .capp-section-nav a).is-active,
.community-hig :where(.capp-nav-item, .capp-section-nav a)[aria-current="page"] {
    color: var(--hig-accent);
    background: var(--hig-accent-soft);
    box-shadow: none;
}

.community-hig :where(.capp-nav-item, .capp-section-nav a).is-active::before,
.community-hig :where(.capp-nav-item, .capp-section-nav a)[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 99px;
    background: var(--hig-accent);
}

.community-hig .capp-section-title {
    margin: 24px 12px 8px;
    color: var(--hig-text-tertiary);
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: .08em;
}

.community-hig .capp-section-nav {
    gap: 2px;
}

.community-hig .capp-section-nav a {
    min-height: 44px;
    color: var(--hig-text-secondary);
}

.community-hig .capp-section-nav small,
.community-hig .capp-back-site {
    color: var(--hig-text-tertiary);
}

/* Topbar controls and search */

.community-hig .capp-search {
    width: min(460px, 40vw);
    height: 44px;
    border: 1px solid var(--hig-control-border);
    border-radius: 12px;
    color: var(--hig-text-tertiary);
    background: var(--hig-control-bg);
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: var(--hig-ease);
}

.community-hig .capp-search:hover {
    background: var(--hig-control-hover);
}

.community-hig .capp-search:focus-within {
    border-color: var(--hig-accent);
    box-shadow: var(--hig-focus);
}

.community-hig .capp-search input {
    color: var(--hig-text);
}

.community-hig .capp-search input::placeholder {
    color: var(--hig-text-tertiary);
    opacity: 1;
}

.community-hig .capp-search-toggle {
    position: relative;
    width: 32px;
    height: 44px;
    min-height: 44px;
    color: var(--hig-text-secondary);
    border-radius: 8px;
}

.community-hig .capp-search kbd {
    border: 0;
    color: var(--hig-text-tertiary);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.community-hig :where(
    .capp-create-btn,
    .capp-icon-btn,
    .capp-lang-btn,
    .capp-user
) {
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text-secondary);
    font: inherit;
    transition-property: color, background-color, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--hig-ease);
}

.community-hig .capp-create-btn {
    padding-inline: 16px;
    color: #fff;
    background: var(--hig-accent);
    box-shadow: none;
}

.community-hig :where(.capp-icon-btn, .capp-lang-btn) {
    width: 44px;
    border: 0;
    background: var(--hig-control-bg);
    box-shadow: var(--hig-shadow-sm);
}

.community-hig .capp-user {
    padding: 0 8px 0 3px;
    color: var(--hig-text);
    background: transparent;
}

.community-hig :where(
    .capp-create-btn,
    .capp-icon-btn,
    .capp-lang-btn,
    .capp-user
):hover {
    color: var(--hig-text);
    background-color: var(--hig-control-hover);
    box-shadow: var(--hig-shadow-control-hover);
}

.community-hig .capp-create-btn:hover {
    color: #fff;
    background-color: var(--hig-accent-pressed);
}

.community-hig :where(
    .capp-create-btn,
    .capp-icon-btn,
    .capp-lang-btn,
    .capp-user
):active {
    transform: scale(.96);
}

.community-hig .capp-bell > span {
    top: -2px;
    right: -2px;
    background: var(--hig-danger);
}

/* Shared pages, type and surfaces */

.hig-page {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 20px;
}

.hig-page-header {
    min-width: 0;
    margin-bottom: 4px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.hig-page-header > :first-child {
    min-width: 0;
}

.hig-eyebrow {
    margin: 0 0 6px;
    color: var(--hig-accent);
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.hig-title {
    margin: 0;
    color: var(--hig-text);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.hig-subtitle {
    max-width: 640px;
    margin: 10px 0 0;
    color: var(--hig-text-secondary);
    font-size: .9375rem;
    line-height: 1.55;
}

.hig-surface {
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-lg);
    background: var(--hig-surface-solid);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.hig-toolbar {
    min-height: 56px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-md);
    background: var(--hig-surface-solid);
    background: var(--hig-surface);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
}

.community-hig :where(
    .c-card,
    .c-thread-item,
    .c-floor,
    .c-side-card,
    .capp-side-card,
    .capp-feed-entry,
    .capp-composer,
    .game-card
) {
    border-color: var(--hig-separator);
    color: var(--hig-text);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.community-hig :where(.c-card, .capp-side-card, .c-side-card) {
    border-radius: var(--hig-radius-md);
}

.community-hig :where(.c-card, .c-thread-item, .game-card, .capp-side-card) {
    transition-property: transform, box-shadow, background-color;
    transition-duration: 180ms;
    transition-timing-function: var(--hig-ease);
}

.community-hig :where(.c-card--hover, .c-thread-item, .game-card):hover {
    transform: translateY(-1px);
    box-shadow: var(--hig-shadow-control-hover);
}

.community-hig :where(
    .c-thread-title,
    .game-title,
    .c-side-card-title,
    .capp-side-card h2,
    .c-block-label
) {
    color: var(--hig-text);
}

.community-hig :where(
    .c-thread-author,
    .c-thread-excerpt,
    .c-thread-stats,
    .c-floor-time,
    .game-desc,
    .game-genre,
    .c-game-meta,
    .c-field-count,
    .pn-hint,
    .pub-hint
) {
    color: var(--hig-text-secondary);
}

.community-hig :where(.c-block-label, .section-tag) {
    color: var(--hig-accent);
}

.community-hig .c-thread-list {
    gap: 12px;
}

.community-hig .c-thread-item {
    border-radius: var(--hig-radius-md);
}

.community-hig .c-thread-item:hover .c-thread-title {
    color: var(--hig-accent);
}

.community-hig :where(.c-thread-stats, .c-floor-actions) button,
.community-hig .c-like-btn {
    min-width: 44px;
    min-height: 44px;
}

.community-hig :where(.c-pill, .c-badge, .c-level-pill) {
    border-color: transparent;
    color: var(--hig-text-secondary);
    background: var(--hig-fill);
}

.community-hig :where(.c-pill--featured, .c-pill--game, .c-badge--official) {
    color: var(--hig-accent);
    background: var(--hig-accent-soft);
}

.community-hig .c-pill--pinned {
    color: var(--hig-warning);
    background: var(--hig-warning-soft);
}

.community-hig .c-avatar {
    outline: 1px solid var(--hig-image-outline);
    outline-offset: -1px;
}

/* Buttons and segmented controls */

.hig-icon-button,
.hig-primary-button,
.hig-secondary-button,
.hig-segment {
    min-height: 44px;
    border: 0;
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text);
    font: inherit;
    cursor: pointer;
}

.hig-icon-button,
.hig-primary-button,
.hig-secondary-button {
    min-width: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    transition-property: color, background-color, box-shadow, transform, opacity;
    transition-duration: 150ms;
    transition-timing-function: var(--hig-ease);
}

.hig-icon-button {
    width: 44px;
    padding: 0;
    color: var(--hig-text-secondary);
    background: var(--hig-control-bg);
    box-shadow: var(--hig-shadow-control);
}

.hig-primary-button {
    color: #fff;
    background: var(--hig-accent);
}

.hig-primary-button:hover {
    color: #fff;
    background: var(--hig-accent-pressed);
}

.hig-primary-button:active {
    background: var(--hig-accent-pressed);
    transform: scale(.98);
}

.hig-secondary-button {
    color: var(--hig-text);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-control);
}

.hig-icon-button:hover,
.hig-secondary-button:hover {
    color: var(--hig-text);
    background: var(--hig-control-hover);
    box-shadow: var(--hig-shadow-control-hover);
}

.hig-icon-button:active,
.hig-secondary-button:active {
    transform: scale(.96);
}

.hig-segmented {
    width: fit-content;
    min-height: 44px;
    padding: 3px;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(84px, 1fr);
    align-items: stretch;
    gap: 2px;
    border-radius: 12px;
    background: var(--hig-fill);
}

.hig-segment {
    position: relative;
    min-width: 0;
    padding: 0 14px;
    color: var(--hig-text-secondary);
    background: transparent;
    font-size: .8125rem;
    font-weight: 600;
    transition-property: color, background-color, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: var(--hig-ease);
}

.hig-segment:hover {
    color: var(--hig-text);
}

.hig-segment:active {
    transform: scale(.96);
}

.hig-segment.is-selected,
.hig-segment[aria-selected="true"] {
    color: var(--hig-text);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-control);
}

/* Search, menus, popovers and toast */

.hig-search-panel,
.hig-menu,
.community-hig .capp-search-panel,
.community-hig .capp-action-menu,
.community-hig .capp-popover {
    z-index: 1260;
    overflow: auto;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-md);
    color: var(--hig-text);
    background: var(--hig-surface-solid);
    background: var(--hig-surface);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    box-shadow: var(--hig-shadow-overlay);
    transform-origin: top right;
}

.hig-search-panel,
.community-hig .capp-search-panel {
    width: min(540px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 100px));
    padding: 10px;
    transform-origin: top left;
}

.hig-menu,
.community-hig .capp-action-menu {
    min-width: 220px;
    padding: 6px;
}

.community-hig .capp-popover {
    top: calc(var(--hig-topbar) + 8px);
    right: max(24px, calc((100vw - 1440px) / 2 + 24px));
    width: min(390px, calc(100vw - 32px));
    padding: 10px;
}

.community-hig :where(
    .capp-search-panel a,
    .capp-action-menu a,
    .capp-action-menu button,
    .capp-popover a
) {
    min-height: 44px;
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text-secondary);
    transition-property: color, background-color;
    transition-duration: 140ms;
    transition-timing-function: var(--hig-ease);
}

.community-hig :where(
    .capp-search-panel a,
    .capp-action-menu a,
    .capp-action-menu button,
    .capp-popover a
):hover {
    color: var(--hig-text);
    background: var(--hig-fill);
}

.community-hig .capp-search-panel section + section {
    border-top-color: var(--hig-separator);
}

.community-hig .capp-search-panel h3,
.community-hig .capp-search-panel > p,
.community-hig .capp-search-panel a small,
.community-hig .capp-action-menu small,
.community-hig .capp-popover a small {
    color: var(--hig-text-tertiary);
}

.community-hig .capp-popover a.is-unread {
    background: var(--hig-accent-softer);
    box-shadow: inset 3px 0 var(--hig-accent);
}

.hig-toast-region {
    position: fixed;
    inset: auto 24px 24px auto;
    z-index: 1500;
    width: min(380px, calc(100vw - 32px));
    display: grid;
    justify-items: end;
    gap: 8px;
    pointer-events: none;
}

.hig-toast {
    max-width: 100%;
    min-height: 44px;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-md);
    color: var(--hig-text);
    background: var(--hig-surface-solid);
    background: var(--hig-surface);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    box-shadow: var(--hig-shadow-overlay);
    font-size: .875rem;
    font-weight: 550;
    pointer-events: auto;
}

.hig-empty-state,
.community-hig .c-empty {
    min-height: 180px;
    padding: 32px 24px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    border: 1px dashed var(--hig-separator);
    border-radius: var(--hig-radius-md);
    color: var(--hig-text-secondary);
    background: var(--hig-control-bg);
    text-align: center;
}

.hig-empty-state > :where(svg, .hig-empty-icon),
.community-hig .c-empty svg {
    color: var(--hig-text-tertiary);
}

/* Forms and validation */

.hig-form,
.hig-form-section {
    display: grid;
    gap: 20px;
}

.hig-form-field,
.community-hig .form-group,
.community-hig .pn-field {
    display: grid;
    gap: 8px;
}

.hig-label,
.community-hig :where(.pn-label, .form-group > label) {
    color: var(--hig-text);
    font-size: .8125rem;
    font-weight: 600;
}

.hig-input,
.hig-select,
.hig-textarea,
.community-hig :where(.c-input, .c-select, .c-textarea) {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--hig-control-border);
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text);
    background: var(--hig-control-bg);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .02);
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: var(--hig-ease);
}

.hig-textarea,
.community-hig .c-textarea {
    min-height: 132px;
    line-height: 1.55;
    resize: vertical;
}

.hig-input:hover,
.hig-select:hover,
.hig-textarea:hover,
.community-hig :where(.c-input, .c-select, .c-textarea):hover {
    border-color: var(--hig-text-tertiary);
}

.hig-input:focus,
.hig-select:focus,
.hig-textarea:focus,
.community-hig :where(.c-input, .c-select, .c-textarea):focus {
    outline: 0;
    border-color: var(--hig-accent);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-focus);
}

.hig-post-app .hig-glass-select {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.hig-post-app .hig-glass-select[data-open="true"] {
    z-index: 20;
}

.hig-post-app .hig-glass-select > .hig-select-native {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.hig-post-app .hig-select-trigger {
    position: relative;
    inline-size: 100%;
    min-block-size: 44px;
    padding: 10px 40px 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--hig-control-border);
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text);
    background: var(--hig-control-bg);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .02);
    font: inherit;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition-property: background-color, border-color, box-shadow, transform;
    transition-duration: 160ms;
    transition-timing-function: var(--hig-ease);
}

.hig-post-app .hig-select-trigger:hover {
    border-color: var(--hig-text-tertiary);
}

.hig-post-app .hig-select-trigger:focus-visible,
.hig-post-app .hig-glass-select[data-open="true"] .hig-select-trigger {
    outline: 0;
    border-color: var(--hig-accent);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-focus);
}

.hig-post-app .hig-select-trigger:active {
    transform: scale(.985);
}

.hig-post-app .hig-select-chevron {
    position: absolute;
    inset-inline-end: 15px;
    inset-block-start: 50%;
    inline-size: 8px;
    block-size: 8px;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    color: var(--hig-text-secondary);
    transform: translateY(-65%) rotate(45deg);
    transform-origin: center;
    transition-property: transform, color;
    transition-duration: 180ms;
    transition-timing-function: var(--hig-ease);
}

.hig-post-app .hig-glass-select[data-open="true"] .hig-select-chevron {
    color: var(--hig-accent);
    transform: translateY(-25%) rotate(225deg);
}

.hig-post-app .hig-select-menu {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 8px);
    z-index: 10;
    inline-size: 100%;
    block-size: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px) scale(.985);
    transform-origin: top center;
    transition-property: opacity, transform, visibility;
    transition-duration: 180ms, 180ms, 0ms;
    transition-delay: 0ms, 0ms, 180ms;
    transition-timing-function: var(--hig-ease);
}

.hig-post-app .hig-select-menu-surface {
    --hig-glass-fill: rgba(244, 249, 252, .18);
    --hig-glass-refraction-blur: 8px;
    inline-size: 100%;
    border-radius: var(--hig-radius-md);
}

.hig-post-app[data-theme="dark"] .hig-select-menu-surface {
    --hig-glass-fill: rgba(8, 10, 12, .12);
}

.hig-post-app .hig-select-options {
    max-block-size: min(320px, 42vh);
    padding: 6px;
    display: grid;
    gap: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--hig-control-border) transparent;
    scrollbar-width: thin;
}

.hig-post-app .hig-select-options::-webkit-scrollbar {
    inline-size: 8px;
}

.hig-post-app .hig-select-options::-webkit-scrollbar-track {
    background: transparent;
}

.hig-post-app .hig-select-options::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--hig-control-border);
    background-clip: padding-box;
}

.hig-post-app .hig-glass-select[data-open="true"] .hig-select-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0ms;
}

.hig-post-app .hig-select-option {
    min-block-size: 40px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    color: var(--hig-text-secondary);
    background: transparent;
    box-shadow: inset 0 0 0 1px transparent;
    font-size: .875rem;
    line-height: 1.35;
    cursor: pointer;
    transition-property: color, box-shadow, transform;
    transition-duration: 140ms;
    transition-timing-function: var(--hig-ease);
}

.hig-post-app .hig-select-option[data-active="true"],
.hig-post-app .hig-select-option:hover {
    color: var(--hig-text);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--hig-glass-edge-soft);
    transform: translateX(2px);
}

.hig-post-app .hig-select-option.is-selected {
    color: var(--hig-accent);
    font-weight: 600;
}

.hig-post-app .hig-select-option[aria-disabled="true"] {
    color: var(--hig-text-tertiary);
    cursor: not-allowed;
    opacity: .62;
}

.hig-post-app .hig-select-option[aria-disabled="true"]:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.hig-post-app .hig-select-option-mark {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--hig-control-border);
    transition-property: background-color, box-shadow, transform;
    transition-duration: 140ms;
    transition-timing-function: var(--hig-ease);
}

.hig-post-app .hig-select-option.is-selected .hig-select-option-mark {
    background: var(--hig-accent);
    box-shadow: 0 0 0 3px var(--hig-accent-soft);
    transform: scale(1.05);
}

.community-hig :where(input, textarea)::placeholder {
    color: var(--hig-text-tertiary);
    opacity: 1;
}

.community-hig .c-tag-input {
    min-height: 44px;
    padding: 5px 8px;
    border-color: var(--hig-control-border);
    border-radius: var(--hig-radius-sm);
    background: var(--hig-control-bg);
}

.community-hig .c-tag-input:focus-within {
    border-color: var(--hig-accent);
    box-shadow: var(--hig-focus);
}

.community-hig .c-tag-pill {
    color: var(--hig-accent);
    background: var(--hig-accent-soft);
}

.hig-post-app .c-tag-pill {
    min-height: 40px;
    padding: 2px 4px 2px 10px;
}

.hig-post-app .c-tag-pill button {
    inline-size: 40px;
    block-size: 40px;
    margin: -2px -2px -2px 0;
    display: grid;
    place-items: center;
}

.hig-field-hint,
.hig-field-error,
.community-hig .pn-hint {
    margin: 0;
    color: var(--hig-text-secondary);
    font-size: .75rem;
    line-height: 1.45;
}

.hig-field-error {
    display: none;
    color: var(--hig-danger);
}

.community-hig :where(
    input,
    select,
    textarea,
    .hig-input,
    .hig-select,
    .hig-textarea
)[aria-invalid="true"] {
    border-color: var(--hig-danger);
    background: var(--hig-danger-soft);
}

.community-hig :where(
    input,
    select,
    textarea,
    .hig-input,
    .hig-select,
    .hig-textarea
)[aria-invalid="true"] + .hig-field-error,
.hig-form-field.is-invalid .hig-field-error {
    display: block;
}

.community-hig .c-field-count.is-over {
    color: var(--hig-danger);
}

.hig-form-success {
    padding: 12px 14px;
    border-radius: var(--hig-radius-sm);
    color: var(--hig-success);
    background: var(--hig-success-soft);
}

/* Home */

.hig-page--home {
    gap: 16px;
}

.hig-composer,
.community-hig .capp-composer {
    min-height: 84px;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-lg);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.hig-composer > a,
.community-hig .capp-composer-prompt {
    min-height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    border: 1px solid var(--hig-control-border);
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text-tertiary);
    background: var(--hig-control-bg);
}

.hig-composer > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hig-composer > div a,
.community-hig :where(.capp-composer-action, .capp-composer-publish) {
    min-height: 44px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hig-radius-sm);
    color: var(--hig-accent);
    background: var(--hig-accent-soft);
    font-size: .8125rem;
    font-weight: 600;
}

.hig-feed-card,
.community-hig .capp-feed-entry {
    overflow: hidden;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-lg);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.hig-feed-card .c-thread-item,
.community-hig .capp-feed-entry .c-thread-item {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.community-hig .capp-feed-entry:hover {
    box-shadow: var(--hig-shadow-control-hover);
}

.community-hig .capp-main .c-feed-bar {
    top: calc(var(--hig-topbar) + 10px);
    min-height: 56px;
    border-color: var(--hig-separator);
    border-radius: var(--hig-radius-md);
    background: var(--hig-surface-solid);
    background: var(--hig-surface);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
}

.community-hig .capp-feed-tabs button {
    min-height: 44px;
    color: var(--hig-text-secondary);
}

.community-hig .capp-feed-tabs button:hover,
.community-hig .capp-feed-tabs button.is-active {
    color: var(--hig-text);
    background: var(--hig-surface-solid);
}

.community-hig .capp-feed-tabs button.is-active {
    box-shadow: var(--hig-shadow-control);
}

.community-hig .capp-feed-game {
    border-color: var(--hig-separator);
    background: var(--hig-control-bg);
}

.community-hig .capp-load-more {
    min-height: 44px;
    border-color: var(--hig-separator);
    color: var(--hig-text-secondary);
    background: var(--hig-surface-solid);
}

.hig-rail-section {
    padding: 16px;
}

.hig-rail-section > h2 {
    margin: 0 0 12px;
    font-size: .875rem;
    font-weight: 650;
}

.community-hig .capp-rank-row {
    border-top-color: var(--hig-separator);
}

.community-hig .capp-rank-row:nth-of-type(-n+3) > b,
.community-hig :where(.capp-creator-row strong, .capp-feed-context a) {
    color: var(--hig-accent);
}

.hig-home-app .capp-layout::before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 48px;
    left: clamp(180px, 22vw, 340px);
    width: min(680px, 56vw);
    height: 440px;
    pointer-events: none;
    background:
        radial-gradient(circle at 32% 20%, rgb(10 132 255 / .09), transparent 52%),
        radial-gradient(circle at 72% 24%, rgb(94 92 230 / .07), transparent 46%);
    filter: blur(18px);
}

.hig-page--home .hig-home-intro {
    min-height: 0;
    padding-block: 4px 0;
}

.hig-page--home .hig-home-intro .hig-title {
    max-width: 16ch;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.hig-page--home .hig-home-intro .hig-subtitle {
    margin-top: 4px;
    text-wrap: pretty;
}

.hig-page--home .hig-home-composer {
    min-height: 64px;
    padding: 10px 12px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    border-color: color-mix(in srgb, var(--hig-separator) 76%, transparent);
    background: color-mix(in srgb, var(--hig-surface-solid) 86%, transparent);
}

.hig-page--home .hig-home-composer-avatar {
    width: 36px;
    height: 36px;
    font-size: .75rem;
}

.hig-page--home .hig-home-composer-prompt {
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border: 0;
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text-tertiary);
    background: var(--hig-control-bg);
}

.hig-page--home .hig-home-composer-actions {
    display: flex;
    gap: 4px;
}

.hig-page--home .hig-home-composer-actions a {
    min-width: 52px;
    min-height: 44px;
    padding-inline: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hig-radius-sm);
    color: var(--hig-accent);
    font-size: .8125rem;
    font-weight: 650;
    transition-property: scale, background-color;
    transition-duration: 120ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

.hig-page--home .hig-home-composer-actions a:hover {
    background: var(--hig-accent-soft);
}

.hig-page--home .hig-home-composer-actions a:active {
    scale: .96;
}

.hig-page--home .hig-home-feed-head {
    min-height: 52px;
    padding: 0;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.hig-page--home .hig-home-feed-head h2 {
    margin: 2px 0 0;
    font-size: 1.25rem;
    letter-spacing: -.02em;
}

.hig-page--home .hig-home-feed-head .hig-segmented {
    width: auto;
    min-width: 258px;
}

.hig-page--home .hig-community-card {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-md);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
    transition-property: transform, border-color, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: var(--hig-ease);
}

.hig-page--home .hig-community-card-main {
    min-width: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition-property: scale, box-shadow;
    transition-duration: 120ms;
    transition-timing-function: var(--hig-ease);
}

.hig-page--home .hig-community-card-main:active {
    scale: .995;
}

.hig-page--home .hig-community-card-meta {
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hig-page--home .hig-community-card-time {
    margin-left: auto;
}

.hig-page--home .hig-community-card .c-thread-author {
    font-weight: 650;
}

.hig-page--home .hig-community-card .c-thread-title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.35;
    letter-spacing: -.012em;
    text-wrap: balance;
}

.hig-page--home .hig-community-card .hig-post-hook {
    margin: 0;
    color: var(--hig-text);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.45;
    text-wrap: balance;
}

.hig-page--home .hig-community-card .c-thread-excerpt {
    margin: 0;
    width: 100%;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--hig-text-secondary);
    font-size: .875rem;
    line-height: 1.65;
    text-wrap: pretty;
}

.hig-page--home .hig-community-card .capp-feed-game {
    min-height: 68px;
    margin: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--hig-separator);
    border-radius: 10px;
    color: var(--hig-text);
    background: var(--hig-control-bg);
    transition-property: background-color, border-color, box-shadow, scale;
    transition-duration: 160ms;
    transition-timing-function: var(--hig-ease);
}

.hig-page--home .hig-community-card .capp-feed-game-cover {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--game-c1), var(--game-c2));
    font-size: .75rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
}

.hig-page--home .hig-community-card .capp-feed-game > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.hig-page--home .hig-community-card .capp-feed-game b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hig-page--home .hig-community-card .capp-feed-game small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: var(--hig-text-secondary);
    line-height: 1.4;
}

.hig-page--home .hig-community-card-game-cta {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-radius: 10px;
    color: var(--hig-accent);
    background: var(--hig-accent-soft);
    font-size: .8125rem;
    font-weight: 650;
    transition-property: background-color, color, scale;
    transition-duration: 120ms;
    transition-timing-function: var(--hig-ease);
}

.hig-page--home .hig-community-card .capp-feed-game:hover {
    border-color: color-mix(in srgb, var(--hig-accent) 28%, var(--hig-separator));
    background: var(--hig-accent-softer);
}

.hig-page--home .hig-community-card-game-cta:active,
.hig-page--home .hig-community-card .capp-feed-game:active {
    scale: .96;
}

.hig-page--home .hig-community-card :where(.hig-community-card-main, .capp-feed-game):focus-visible {
    outline: 0;
    box-shadow: var(--hig-focus);
}

.hig-page--home .hig-community-card-top-reply {
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-radius: var(--hig-radius-sm);
    background: var(--hig-control-bg);
}

.hig-page--home .hig-community-card-top-reply[hidden] {
    display: none;
}

.hig-page--home .hig-community-card-top-reply-label {
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--hig-accent);
    background: var(--hig-accent-soft);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.hig-page--home .hig-community-card-top-reply-author {
    min-width: 0;
    overflow: hidden;
    color: var(--hig-text);
    font-size: .75rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hig-page--home .hig-community-card-top-reply-content {
    min-width: 0;
    overflow: hidden;
    color: var(--hig-text-secondary);
    font-size: .75rem;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hig-page--home .hig-community-card-top-reply-content::before,
.hig-page--home .hig-community-card-top-reply-content::after {
    content: none;
}

.hig-page--home .hig-community-card-top-reply-likes {
    color: var(--hig-text-tertiary);
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hig-page--home .hig-community-card-footer {
    min-width: 0;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--hig-separator);
    color: var(--hig-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.hig-page--home .hig-community-card-feedback {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hig-page--home .hig-community-card-footer .c-stat {
    white-space: nowrap;
}

.hig-page--home .hig-community-card-views {
    flex: 0 0 auto;
    margin-left: auto;
}

.hig-page--home .hig-feed-entry--featured {
    border-color: color-mix(in srgb, var(--hig-accent) 22%, var(--hig-separator));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hig-accent) 16%, transparent);
}

.hig-page--home .hig-feed-entry--compact .c-thread-excerpt {
    -webkit-line-clamp: 2;
}

.hig-home-app .capp-right-rail {
    gap: 12px;
}

.hig-home-app .capp-right-rail .capp-side-card {
    border-color: color-mix(in srgb, var(--hig-separator) 62%, transparent);
    background: color-mix(in srgb, var(--hig-surface-solid) 88%, transparent);
    box-shadow: none;
}

.hig-home-app .capp-right-rail :where(.capp-rank-row, .capp-creator-row) {
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
    .hig-page--home .hig-community-card:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--hig-accent) 28%, var(--hig-separator));
        box-shadow: var(--hig-shadow-control-hover);
    }
}

/* Games and game detail */

.hig-games-app {
    color-scheme: light;
    --hig-bg: #f4f9fc;
    --hig-surface: rgba(255, 255, 255, .84);
    --hig-surface-solid: #ffffff;
    --hig-surface-raised: #ffffff;
    --hig-sidebar: rgba(246, 250, 253, .96);
    --hig-text: #10202d;
    --hig-text-secondary: #526675;
    --hig-text-tertiary: #7b8d99;
    --hig-separator: rgba(16, 56, 84, .11);
    --hig-accent: #0788e6;
    --hig-accent-pressed: #006fbd;
    --hig-accent-bright: #3bc7ff;
    --hig-accent-soft: rgba(7, 136, 230, .11);
    --hig-accent-softer: rgba(7, 136, 230, .07);
    --hig-control-bg: rgba(31, 95, 136, .065);
    --hig-control-border: rgba(16, 56, 84, .14);
    --hig-control-hover: rgba(7, 136, 230, .1);
    --hig-image-outline: rgba(0, 0, 0, .1);
    --hig-shadow:
        0 0 0 1px rgba(16, 56, 84, .05),
        0 8px 24px rgba(20, 68, 98, .07);
    --hig-shadow-sm:
        0 0 0 1px rgba(16, 56, 84, .05),
        0 1px 2px rgba(20, 68, 98, .04);
    --hig-shadow-control:
        0 0 0 1px rgba(16, 56, 84, .06),
        0 1px 2px rgba(20, 68, 98, .04);
    --hig-shadow-control-hover:
        0 0 0 1px rgba(7, 136, 230, .16),
        0 4px 12px rgba(20, 68, 98, .08);

    --primary: var(--hig-accent);
    --text-primary: var(--hig-text);
    --text-secondary: var(--hig-text-secondary);
    --text-muted: var(--hig-text-tertiary);
    --bg-deep: var(--hig-bg);
    --bg-card: var(--hig-surface-solid);
    --bg-glass: var(--hig-control-bg);
    --border: var(--hig-separator);

    background:
        radial-gradient(
            circle at 46% 0%,
            rgba(59, 199, 255, .1),
            transparent 30rem
        ),
        var(--hig-bg);
}

.hig-games-app[data-theme="dark"] {
    color-scheme: dark;
    --hig-bg: #071018;
    --hig-surface: rgba(14, 28, 39, .9);
    --hig-surface-solid: #0d1922;
    --hig-surface-raised: #122331;
    --hig-sidebar: rgba(9, 20, 29, .96);
    --hig-text: #edf8ff;
    --hig-text-secondary: #a7bdca;
    --hig-text-tertiary: #718897;
    --hig-separator: rgba(180, 226, 255, .1);
    --hig-accent: #2aafff;
    --hig-accent-pressed: #168fd6;
    --hig-accent-bright: #65ddff;
    --hig-accent-soft: rgba(42, 175, 255, .16);
    --hig-accent-softer: rgba(42, 175, 255, .1);
    --hig-control-bg: rgba(101, 191, 242, .09);
    --hig-control-border: rgba(180, 226, 255, .13);
    --hig-control-hover: rgba(101, 191, 242, .15);
    --hig-image-outline: rgba(255, 255, 255, .1);
    --hig-shadow: 0 0 0 1px rgba(180, 226, 255, .1);
    --hig-shadow-sm: 0 0 0 1px rgba(180, 226, 255, .08);
    --hig-shadow-control: 0 0 0 1px rgba(180, 226, 255, .09);
    --hig-shadow-control-hover:
        0 0 0 1px rgba(101, 221, 255, .18);

    background:
        radial-gradient(
            circle at 46% 0%,
            rgba(42, 175, 255, .095),
            transparent 30rem
        ),
        var(--hig-bg);
}

.hig-games-app .capp-topbar {
    background: color-mix(
        in srgb,
        var(--hig-surface-solid) 82%,
        transparent
    );
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
}

.hig-games-app .capp-sidebar {
    background: var(--hig-sidebar);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hig-games-app .capp-right-rail {
    gap: 12px;
}

.hig-games-app .capp-right-rail .capp-side-card {
    border-color: color-mix(
        in srgb,
        var(--hig-separator) 72%,
        transparent
    );
    background: color-mix(
        in srgb,
        var(--hig-surface-solid) 92%,
        var(--hig-bg)
    );
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hig-games-app .capp-right-rail :where(
    .capp-rank-row,
    .capp-game-mini,
    .capp-creator-row
) {
    font-variant-numeric: tabular-nums;
}

.hig-page--games {
    gap: 12px;
}

.hig-games-app .hig-page--games,
.hig-games-app .hig-page--games > *,
.hig-games-app .hig-page--games .games > .container {
    min-width: 0;
}

.hig-page--games .hig-games-spotlight {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 240px;
    padding: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
    align-items: center;
    gap: 24px;
    border: 0;
    border-radius: var(--hig-radius-lg);
    background:
        linear-gradient(
            120deg,
            color-mix(
                in srgb,
                var(--hig-surface-raised) 94%,
                var(--spot-c1)
            ),
            var(--hig-surface-solid) 62%
        );
    box-shadow: var(--hig-shadow);
}

.hig-page--games .hig-games-spotlight::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 48%,
            color-mix(in srgb, var(--spot-c1) 9%, transparent)
        );
}

.hig-page--games .hig-games-spotlight-copy {
    min-width: 0;
    max-width: 640px;
}

.hig-page--games .hig-games-spotlight-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hig-page--games .hig-games-status {
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--hig-accent);
    background: var(--hig-accent-soft);
    font-size: .6875rem;
    font-weight: 700;
}

.hig-page--games .hig-games-spotlight h1 {
    margin: 10px 0 0;
    color: var(--hig-text-secondary);
    font-size: .9375rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.hig-page--games .hig-games-spotlight h2 {
    margin: 2px 0 0;
    max-width: 12ch;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.hig-page--games .hig-games-spotlight-copy > p {
    max-width: 48ch;
    margin: 12px 0 0;
    color: var(--hig-text-secondary);
    text-wrap: pretty;
}

.hig-page--games .hig-games-spotlight-actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hig-page--games .hig-games-spotlight-actions > a {
    min-height: 44px;
    transition-property: scale, background-color, box-shadow;
    transition-duration: 140ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

.hig-page--games .hig-games-spotlight-actions > a:active {
    transform: none;
    scale: .96;
}

.hig-page--games .hig-games-spotlight-art {
    position: relative;
    min-height: 176px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    overflow: hidden;
    border-radius: calc(var(--hig-radius-lg) - 6px);
    color: #ffffff;
    background:
        linear-gradient(145deg, var(--spot-c1), var(--spot-c2));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .2),
        0 14px 30px rgba(4, 76, 130, .16);
}

.hig-page--games .hig-games-spotlight-art::before,
.hig-page--games .hig-games-spotlight-art::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
}

.hig-page--games .hig-games-spotlight-art::before {
    width: 148px;
    height: 148px;
}

.hig-page--games .hig-games-spotlight-art::after {
    width: 208px;
    height: 208px;
}

.hig-page--games .hig-games-spotlight-art span {
    position: relative;
    z-index: 1;
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 750;
    line-height: 1;
    text-shadow: 0 8px 24px rgba(0, 41, 76, .18);
}

.hig-page--games .hig-games-spotlight-art small {
    position: relative;
    z-index: 1;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hig-page--games > .hig-game-discovery {
    min-height: 56px;
    padding: 6px;
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(240px, .7fr);
    align-items: center;
    gap: 10px;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-md);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.hig-page--games .hig-game-discovery .hig-segmented {
    width: 100%;
    min-width: 0;
}

.hig-page--games .hig-local-search {
    position: relative;
    min-width: 0;
    display: block;
}

.hig-page--games .hig-games-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.hig-page--games .hig-local-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--hig-control-border);
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text);
    background: var(--hig-control-bg);
}

.hig-page--games .hig-local-search input:focus {
    outline: 0;
    border-color: var(--hig-accent);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-focus);
}

.hig-page--games > .games {
    padding: 0 0 16px;
}

.hig-page--games .games-filter.hig-game-filters {
    min-height: 56px;
    margin-bottom: 16px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-color: var(--hig-separator);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.hig-games-app :where(.filter-btn, .capp-games-sort select) {
    min-height: 44px;
    border-color: var(--hig-control-border);
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text-secondary);
    background: var(--hig-control-bg);
}

.hig-games-app .filter-btn {
    transition-property: scale, color, background-color, border-color;
    transition-duration: 140ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

.hig-games-app :where(.filter-btn.active, .filter-btn:hover) {
    color: var(--hig-accent);
    border-color: transparent;
    background: var(--hig-accent-soft);
}

.hig-games-app .filter-btn:active {
    scale: .96;
}

.hig-games-app .hig-game-grid,
.hig-games-app .capp-main :where(.games-grid, #gamesGrid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hig-games-app .hig-game-card,
.hig-games-app .game-card {
    overflow: hidden;
    border: 0;
    border-radius: var(--hig-radius-lg);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
    transition-property: transform, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}

.hig-games-app .game-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--hig-shadow-control-hover);
}

.hig-games-app .game-card.featured {
    grid-column: span 2;
}

.hig-games-app .game-cover {
    outline: 1px solid var(--hig-image-outline);
    outline-offset: -1px;
}

.hig-games-app .game-meta,
.hig-games-app .capp-right-rail {
    font-variant-numeric: tabular-nums;
}

.hig-page--game {
    gap: 24px;
}

.hig-game-section {
    min-width: 0;
    padding: 24px;
}

.hig-game-hero,
.community-hig .c-game-hero {
    position: relative;
    overflow: hidden;
    min-height: 340px;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-lg);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.community-hig .c-game-hero::after {
    background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .06) 70%);
}

.community-hig .c-game-hero-title,
.community-hig .c-game-hero-meta {
    color: #fff;
}

.hig-game-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hig-game-actions .hig-primary-button {
    min-width: 152px;
}

.community-hig .c-play-btn {
    width: 64px;
    height: 64px;
    min-width: 44px;
    min-height: 44px;
    color: #fff;
    background: var(--hig-accent);
    box-shadow: var(--hig-shadow);
}

.community-hig .c-play-btn:active {
    transform: scale(.96);
}

.community-hig .c-play-btn svg {
    margin-left: 2px;
}

.community-hig .c-rating-big,
.community-hig .c-stars .c-star.is-full {
    color: var(--hig-warning);
}

.community-hig .c-dim-track {
    background: var(--hig-fill);
}

.community-hig .c-dim-fill {
    background: var(--hig-accent);
}

.community-hig .c-review-item + .c-review-item {
    border-top-color: var(--hig-separator);
}

.hig-game-metadata dl {
    margin: 0;
    display: grid;
    gap: 0;
}

.hig-game-metadata dl > div {
    min-height: 44px;
    padding: 10px 0;
    display: grid;
    grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--hig-separator);
}

.hig-game-metadata dl > div:first-child {
    border-top: 0;
}

.hig-game-metadata dt {
    color: var(--hig-text-tertiary);
    font-size: .75rem;
}

.hig-game-metadata dd {
    min-width: 0;
    margin: 0;
    color: var(--hig-text);
    font-size: .8125rem;
    font-weight: 550;
    text-align: right;
}

/* Thread */

.hig-page--thread {
    gap: 16px;
}

.hig-thread-header {
    padding: 24px;
}

.hig-thread-header .c-thread-title,
.community-hig .th-title {
    margin: 0;
    color: var(--hig-text);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.hig-discussion {
    overflow: hidden;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-lg);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.hig-discussion > .c-block-label {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--hig-separator);
}

.hig-discussion-list {
    display: block;
}

.hig-discussion-item {
    scroll-margin-top: calc(var(--hig-topbar) + 24px);
}

.hig-discussion .c-floor {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.hig-discussion .c-floor + .c-floor {
    border-top: 1px solid var(--hig-separator);
}

.community-hig .c-floor {
    border-color: var(--hig-separator);
    background: var(--hig-surface-solid);
}

.community-hig .c-floor--lz {
    background: var(--hig-accent-softer);
}

.community-hig .c-floor-actions button,
.community-hig .c-like-btn {
    color: var(--hig-text-secondary);
    border-radius: var(--hig-radius-sm);
    background: transparent;
}

.community-hig .c-floor-actions button:hover,
.community-hig .c-like-btn:hover,
.community-hig .c-like-btn.is-liked {
    color: var(--hig-accent);
    background: var(--hig-accent-soft);
}

.hig-page--thread :where(.hig-thread-game, .hig-discussion) {
    padding: 0;
}

.hig-page--thread .c-floor-actions .c-like-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hig-page--thread .th-main {
    padding-bottom: 240px;
}

.hig-reply-dock {
    position: fixed;
    inset: auto 0 16px;
    z-index: 1100;
    width: min(1440px, 100%);
    margin-inline: auto;
    padding-inline: 24px;
    display: grid;
    grid-template-columns:
        var(--hig-sidebar-width)
        minmax(0, 820px)
        var(--hig-right-rail);
    justify-content: center;
    gap: var(--hig-gap);
    pointer-events: none;
}

.community-hig.is-sidebar-collapsed .hig-reply-dock {
    grid-template-columns:
        var(--hig-sidebar-compact)
        minmax(0, 820px)
        var(--hig-right-rail);
}

.hig-reply-composer {
    --hig-reply-action-width: 120px;
    --hig-reply-row-inset: 10px;
    --hig-reply-row-gap: 8px;
    position: relative;
    grid-column: 2;
    width: 100%;
    height: 64px;
    margin: 0;
    pointer-events: auto;
    padding: 0;
    border: 0;
    border-radius: var(--hig-radius-lg);
    transition-property: height;
    transition-duration: 220ms;
    transition-timing-function: var(--hig-ease);
}

.hig-reply-composer > :where(.c-block-label, .c-textarea, .th-reply-foot) {
    position: absolute;
    z-index: 2;
    transition-duration: 220ms;
    transition-timing-function: var(--hig-ease);
}

.hig-reply-composer .c-block-label {
    top: 50%;
    left: 16px;
    margin: 0;
    transform: translateY(-50%);
    transition-property: top, transform;
}

.hig-reply-composer .c-textarea {
    top: var(--hig-reply-row-inset);
    right: calc(
        var(--hig-reply-row-inset)
        + var(--hig-reply-action-width)
        + var(--hig-reply-row-gap)
    );
    left: 72px;
    width: auto;
    max-width: none;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding-block: 10px;
    overflow-y: hidden;
    resize: none;
    transition-property: top, right, left, height, min-height, padding, background-color;
    background: color-mix(
        in srgb,
        var(--hig-control-bg) 34%,
        transparent
    );
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.hig-reply-composer .th-reply-foot {
    top: var(--hig-reply-row-inset);
    right: var(--hig-reply-row-inset);
    width: var(--hig-reply-action-width);
    height: 44px;
    margin: 0;
    transition-property: top, right;
}

.hig-reply-composer .th-reply-foot .c-field-count {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 220ms;
    transition-timing-function: var(--hig-ease);
}

.hig-reply-composer:is(:hover, :focus-within) {
    height: 218px;
}

.hig-reply-composer:is(:hover, :focus-within) .c-block-label {
    top: 16px;
    transform: none;
}

.hig-reply-composer:is(:hover, :focus-within) .c-textarea {
    top: 48px;
    right: 16px;
    left: 16px;
    width: auto;
    height: 96px;
    min-height: 96px;
    padding-block: 12px;
    overflow-y: auto;
}

.hig-reply-composer:is(:hover, :focus-within) .th-reply-foot {
    top: 164px;
    right: 16px;
    width: auto;
}

.hig-reply-composer:is(:hover, :focus-within) .th-reply-foot .c-field-count {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    opacity: 1;
}

.hig-reply-composer .c-textarea:hover,
.hig-reply-composer .c-textarea:focus {
    background: color-mix(
        in srgb,
        var(--hig-control-bg) 42%,
        transparent
    );
}

.hig-reply-composer .btn-primary {
    flex: 0 0 auto;
    width: var(--hig-reply-action-width);
    max-width: none;
    height: 44px;
    min-height: 44px;
    padding-block: 0;
    box-sizing: border-box;
    transition-property: transform, box-shadow, background-color;
    transition-duration: 150ms;
    transition-timing-function: var(--hig-ease);
}

.hig-reply-composer .th-reply-foot .c-field-count {
    flex: 0 0 auto;
    white-space: nowrap;
}

.hig-reply-composer .btn-primary:active {
    transform: scale(.96);
}

.hig-thick-glass,
[data-hig-thick-glass] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--hig-glass-fill);
    -webkit-backdrop-filter:
        blur(var(--hig-glass-blur))
        saturate(122%)
        contrast(110%);
    backdrop-filter:
        blur(var(--hig-glass-blur))
        saturate(122%)
        contrast(110%);
    box-shadow:
        inset 0 1px var(--hig-glass-edge),
        inset 1px 0 var(--hig-glass-edge-soft),
        inset -1px 0 var(--hig-glass-edge-soft),
        inset 0 -2px var(--hig-glass-bottom),
        0 0 0 1px var(--hig-glass-edge-soft),
        0 28px 78px rgba(0, 0, 0, .28);
}

.hig-glass-refraction-viewport {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 160ms;
    transition-timing-function: var(--hig-ease);
    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 42%,
            rgba(0, 0, 0, .92) 62%,
            transparent 101%
        );
    mask-image:
        radial-gradient(
            ellipse at center,
            #000 42%,
            rgba(0, 0, 0, .92) 62%,
            transparent 101%
        );
}

.has-hig-glass-refraction > .hig-glass-refraction-viewport {
    opacity: .82;
}

.hig-thick-glass:not(.has-hig-glass-refraction)
    > .hig-glass-refraction-viewport,
[data-hig-thick-glass]:not(.has-hig-glass-refraction)
    > .hig-glass-refraction-viewport {
    display: none;
}

.hig-glass-refraction-content {
    position: absolute;
    inset-block-start: var(--hig-glass-source-y, 0px);
    inset-inline-start: var(--hig-glass-source-x, 0px);
    inline-size: var(--hig-glass-source-width, 100%);
    min-block-size: var(--hig-glass-source-height, 100%);
    pointer-events: none;
    transform:
        translate3d(
            calc(var(--hig-glass-displacement) * 1px),
            calc(var(--hig-glass-displacement) * -.5px),
            0
        )
        scale(var(--hig-glass-refraction-scale));
    transform-origin:
        var(--hig-glass-origin-x, 50%)
        var(--hig-glass-origin-y, 50%);
    filter:
        url("#higGlassRefraction")
        blur(var(--hig-glass-refraction-blur))
        saturate(112%);
    will-change: transform, filter;
}

.hig-glass-refraction-content > * {
    inline-size: 100%;
    min-block-size: 100%;
}

.hig-thick-glass::after,
[data-hig-thick-glass]::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px var(--hig-glass-edge-soft),
        inset 0 18px 22px -24px var(--hig-glass-edge),
        inset 0 -16px 24px -25px var(--hig-glass-bottom);
}

.hig-thick-glass > :not(.hig-glass-refraction-viewport),
[data-hig-thick-glass] > :not(.hig-glass-refraction-viewport) {
    position: relative;
    z-index: 2;
}

.hig-page--thread
    .hig-reply-composer.hig-thick-glass
    > :where(.c-block-label, .c-textarea, .th-reply-foot) {
    position: absolute;
    z-index: 2;
}

.hig-glass-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Post editor */

/* Focused post editor */

.community-hig.hig-post-app .capp-frame {
    width: min(1228px, 100%);
    grid-template-columns: minmax(0, 1180px);
}

.hig-post-app .capp-main {
    width: 100%;
    max-width: 1180px;
}

.hig-post-app :where(
    #cappMenu,
    #cappSidebar,
    #cappRightRail,
    .hig-drawer-scrim
) {
    display: none !important;
}

.hig-post-app .hig-page--post > .play-hero .container,
.hig-post-app .hig-page--post > .c-page > .container {
    width: 100%;
    max-width: none;
    padding-inline: 0;
}

.hig-post-app .hig-page--post > .c-page {
    padding: 0 0 24px;
}

.hig-post-app .hig-page--post > .hig-post-header {
    margin: 0;
    display: block;
}

.hig-post-app .hig-page--post > .hig-post-header .hig-post-header-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0 4px;
    display: grid;
    gap: 16px;
}

.hig-post-app .hig-post-back {
    width: fit-content;
    min-width: 40px;
    min-height: 40px;
    padding-inline: 12px;
    color: var(--hig-text-secondary);
    background: var(--hig-control-bg);
    box-shadow: var(--hig-shadow-control);
}

.hig-post-app .hig-post-back:hover {
    color: var(--hig-text);
    background: var(--hig-control-hover);
    box-shadow: var(--hig-shadow-control-hover);
}

.hig-post-app .hig-post-back svg {
    flex: 0 0 auto;
}

.hig-post-app .hig-post-heading {
    min-width: 0;
}

.hig-page--post {
    gap: 20px;
}

.hig-editor-segments {
    display: none;
}

.hig-post-app .capp-main .hig-editor-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.16fr)
        minmax(420px, .84fr);
    align-items: start;
    gap: 24px;
}

.hig-editor-form {
    padding: 24px;
    display: grid;
    gap: 20px;
}

.hig-post-app .hig-editor-form .c-textarea {
    min-height: 220px;
}

.hig-post-app .capp-main .hig-editor-preview:not([hidden]) {
    min-width: 0;
    padding: 16px;
    display: grid !important;
    align-content: start;
    gap: 16px;
}

.hig-post-app .hig-editor-preview > section {
    padding: 0;
}

.hig-field-support-row {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

.hig-field-support-row .hig-field-description {
    min-width: 0;
    flex: 1 1 auto;
}

.hig-field-support-row .c-field-count {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hig-post-app
    :where(input, textarea)[aria-invalid="true"]
    + .hig-field-support-row
    + .hig-field-error {
    display: block;
}

.hig-field-description {
    margin: 0;
    color: var(--hig-text-secondary);
    font-size: .75rem;
    line-height: 1.45;
}

.hig-editor-layout > :where(form, .pn-preview, #pnPreview) {
    min-width: 0;
}

.hig-post-app .hig-post-preview {
    position: sticky;
    top: calc(var(--hig-topbar) + 24px);
    min-width: 0;
    padding: 20px;
    display: grid;
    gap: 18px;
    border: 0;
    border-radius: var(--hig-radius-lg);
    color: var(--hig-text);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.hig-post-app .hig-post-preview-header {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.hig-post-app .hig-post-preview-pills,
.hig-post-app .hig-post-preview-tags,
.hig-post-app .hig-post-preview-author,
.hig-post-app .hig-post-preview-meta,
.hig-post-app .hig-post-preview-game-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.hig-post-app .hig-post-preview-pills {
    gap: 6px;
}

.hig-post-app .hig-post-preview-tags {
    gap: 6px;
}

.hig-post-app .hig-post-preview-tags .c-pill {
    color: var(--hig-text-secondary);
    background: var(--hig-control-bg);
}

.hig-post-app .hig-post-preview-title {
    margin: 0;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.hig-post-app .hig-post-preview-title.is-placeholder,
.hig-post-app .hig-post-preview-content.is-placeholder {
    color: var(--hig-text-tertiary);
}

.hig-post-app .hig-post-preview-author {
    gap: 8px;
    color: var(--hig-text-secondary);
    font-size: .75rem;
}

.hig-post-app .hig-post-preview-content {
    min-height: 112px;
    color: var(--hig-text);
    font-size: .9375rem;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.hig-post-app .hig-post-preview-game {
    min-width: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    border-radius: var(--hig-radius-md);
    background: var(--hig-control-bg);
    box-shadow: var(--hig-shadow-control);
}

.hig-post-app .hig-post-preview-game[hidden] {
    display: none;
}

.hig-post-app .hig-post-preview-game-cover {
    min-height: 88px;
    display: grid;
    place-items: center;
    border-radius: var(--hig-radius-sm);
    color: #fff;
    background: linear-gradient(
        145deg,
        var(--preview-game-c1),
        var(--preview-game-c2)
    );
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.hig-post-app .hig-post-preview-game-cover span {
    font-size: 2rem;
    font-weight: 750;
}

.hig-post-app .hig-post-preview-game-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 6px;
}

.hig-post-app .hig-post-preview-game-copy > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hig-post-app .hig-post-preview-game-copy h3,
.hig-post-app .hig-post-preview-game-copy p {
    margin: 0;
}

.hig-post-app .hig-post-preview-game-copy h3 {
    font-size: .9375rem;
}

.hig-post-app .hig-post-preview-game-copy p {
    color: var(--hig-text-secondary);
    font-size: .75rem;
    line-height: 1.5;
}

.hig-post-app .hig-post-preview-game-copy > div:first-child span,
.hig-post-app .hig-post-preview-game-status,
.hig-post-app .hig-post-preview-game-meta,
.hig-post-app .hig-post-preview-meta {
    color: var(--hig-text-tertiary);
    font-size: .6875rem;
}

.hig-post-app .hig-post-preview-game-status {
    justify-self: start;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--hig-accent);
    background: var(--hig-accent-soft);
}

.hig-post-app .hig-post-preview-game-meta {
    gap: 10px;
    font-variant-numeric: tabular-nums;
}

.hig-post-app .hig-post-preview-meta {
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hig-separator);
    font-variant-numeric: tabular-nums;
}

.hig-post-app .pn-tips {
    color: var(--hig-text-secondary);
    background: transparent;
}

/* Publish flow */

.hig-page--publish {
    gap: 24px;
}

.community-hig .c-steps,
.community-hig .pub-steps {
    color: var(--hig-text-secondary);
}

.community-hig .c-step-dot {
    color: var(--hig-text-secondary);
    border-color: var(--hig-separator);
    background: var(--hig-surface-solid);
}

.community-hig .c-step-line {
    background: var(--hig-separator);
}

.community-hig .c-step.is-active .c-step-dot,
.community-hig .c-step.is-done .c-step-dot {
    color: #fff;
    border-color: var(--hig-accent);
    background: var(--hig-accent);
}

.community-hig .c-step.is-active .c-step-label,
.community-hig .c-step.is-done .c-step-label {
    color: var(--hig-text);
}

.community-hig .pub-panel,
.community-hig [data-publish-step] {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-lg);
    color: var(--hig-text);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.community-hig #pubApp.pub-panel {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.hig-publish-summary {
    margin: 20px 0 0;
    display: grid;
    gap: 0;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-md);
    background: var(--hig-control-bg);
}

.hig-publish-summary > div {
    min-height: 52px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(96px, .4fr) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--hig-separator);
}

.hig-publish-summary > div:first-child {
    border-top: 0;
}

.hig-publish-summary dt {
    color: var(--hig-text-tertiary);
    font-size: .75rem;
}

.hig-publish-summary dd {
    min-width: 0;
    margin: 0;
    color: var(--hig-text);
    font-size: .875rem;
    font-weight: 550;
    text-align: right;
    overflow-wrap: anywhere;
}

.community-hig .pub-actions {
    min-height: 68px;
    margin-top: 24px;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--hig-separator);
}

.community-hig .pub-genre-fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.community-hig .pub-genres {
    gap: 8px;
}

.community-hig .pub-genre {
    min-height: 44px;
    border-color: var(--hig-separator);
    border-radius: var(--hig-radius-sm);
    color: var(--hig-text-secondary);
    background: var(--hig-control-bg);
}

.community-hig .pub-genre:hover,
.community-hig .pub-genre.is-selected {
    color: var(--hig-accent);
    border-color: var(--hig-accent);
    background: var(--hig-accent-soft);
}

/* Creator */

.hig-page--creator {
    gap: 20px;
}

.hig-creator-hero,
.community-hig .crt-profile {
    padding: 24px;
    border: 1px solid var(--hig-separator);
    border-radius: var(--hig-radius-lg);
    color: var(--hig-text);
    background: var(--hig-surface-solid);
    box-shadow: var(--hig-shadow-sm);
}

.hig-page--creator .crt-profile-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
}

.hig-page--creator .crt-profile-info {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.hig-page--creator .crt-identity-row {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.hig-page--creator .crt-name {
    margin: 0;
    color: var(--hig-text);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.hig-page--creator .crt-joined {
    color: var(--hig-text-secondary);
    font-variant-numeric: tabular-nums;
}

.hig-page--creator .crt-bio {
    margin: 0;
    color: var(--hig-text-secondary);
    font-size: .875rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.hig-page--creator .crt-follow-button {
    align-self: center;
    white-space: nowrap;
}

.hig-page--creator .crt-follow-button:is(.is-selected, [aria-pressed="true"]) {
    color: var(--hig-accent);
    background: var(--hig-accent-soft);
}

.community-hig[data-community-page="creator"] .crt-stats {
    margin: 20px 0 0;
    padding: 20px 0 0;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--hig-separator);
    background: transparent;
}

.community-hig[data-community-page="creator"] .crt-stats--primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.community-hig[data-community-page="creator"] .crt-stats .stat-item {
    min-width: 0;
    margin: 0;
    padding: 0 12px;
    display: grid;
    gap: 6px;
    text-align: center;
}

.community-hig[data-community-page="creator"] .crt-stats .stat-item + .stat-item {
    border-left: 1px solid var(--hig-separator);
}

.community-hig[data-community-page="creator"] .crt-stats :where(dt, dd) {
    margin: 0;
}

.community-hig[data-community-page="creator"] .crt-stats .stat-number {
    order: -1;
    color: var(--hig-text);
    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.community-hig[data-community-page="creator"] .crt-stats .stat-label {
    color: var(--hig-text-tertiary);
    font-size: .75rem;
    line-height: 1.3;
}

.community-hig :where(.c-tabs, .crt-tabs) {
    border-color: var(--hig-separator);
}

.hig-page--creator .crt-tabs {
    margin-top: 20px;
}

.hig-page--creator #crtPanel {
    margin-top: 20px;
}

.community-hig .c-tab {
    min-height: 44px;
    color: var(--hig-text-secondary);
}

.community-hig .c-tab:hover,
.community-hig .c-tab.is-active {
    color: var(--hig-accent);
}

.hig-page--creator [data-creator-panel] {
    min-width: 0;
    padding: 0;
}

.community-hig[data-community-page="creator"] .crt-contribution .crt-stats {
    margin: 0;
    padding: 0;
    border-top: 0;
}

.community-hig[data-community-page="creator"] .crt-stats--rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.community-hig[data-community-page="creator"] .crt-stats--rail .stat-item {
    padding-inline: 8px;
}

.community-hig[data-community-page="creator"] .crt-stats--rail .stat-number {
    font-size: 1.375rem;
}

.hig-tag-list {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Legacy hero normalization on all seven pages */

.community-hig .capp-main > .play-hero {
    min-height: 0;
    padding: 24px 0 16px;
    color: var(--hig-text);
    background: transparent;
}

.community-hig .capp-main > .play-hero::before,
.community-hig .capp-main > .play-hero::after {
    display: none;
}

.community-hig .capp-main > .play-hero .hero-title,
.community-hig .capp-main > .play-hero .play-hero-title {
    color: var(--hig-text);
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.community-hig .capp-main > .play-hero :where(.hero-subtitle, .play-hero-subtitle) {
    color: var(--hig-text-secondary);
}

.community-hig .capp-main :where(.c-page, .section, .games) {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Mobile drawer and bottom navigation are hidden on desktop. */

.hig-drawer-scrim,
.hig-bottom-nav {
    display: none;
}

/* Compact desktop/tablet: compact sidebar + content, no right rail. */

@media (max-width: 1179px) {
    .hig-reply-dock {
        width: min(1040px, 100%);
        grid-template-columns:
            var(--hig-sidebar-compact)
            minmax(0, 1fr);
    }

    .hig-reply-dock .hig-reply-composer {
        max-width: 820px;
        justify-self: start;
    }

    .community-hig.is-sidebar-collapsed .hig-reply-dock {
        grid-template-columns:
            var(--hig-sidebar-compact)
            minmax(0, 1fr);
    }

    .community-hig .capp-layout,
    .community-hig .capp-frame,
    .community-hig .hig-shell {
        grid-template-columns: var(--hig-sidebar-compact) minmax(0, 1fr);
        max-width: 1040px;
    }

    .community-hig.is-sidebar-collapsed .capp-layout,
    .community-hig.is-sidebar-collapsed .capp-frame,
    .community-hig.is-sidebar-collapsed .hig-shell {
        grid-template-columns: var(--hig-sidebar-compact) minmax(0, 1fr);
    }

    .community-hig .capp-right-rail {
        display: none;
    }

    .community-hig .capp-sidebar {
        width: var(--hig-sidebar-compact);
    }

    .community-hig .capp-sidebar-tools {
        justify-content: center;
        margin-inline: 0;
    }

    .community-hig .capp-sidebar-tools .capp-back-site,
    .community-hig .capp-sidebar-tools .capp-sidebar-toggle {
        display: none;
    }

    .community-hig .capp-sidebar :where(
        .capp-nav-item span,
        .capp-section-title,
        .capp-section-nav a span:nth-child(2),
        .capp-section-nav small,
        .capp-back-site
    ) {
        display: none;
    }

    .community-hig .capp-sidebar :where(.capp-nav-item, .capp-section-nav a) {
        display: flex;
        justify-content: center;
        padding-inline: 0;
    }

    .community-hig .capp-brand {
        width: auto;
    }

    .community-hig .capp-brand > span:last-child,
    .community-hig .capp-user > span:last-child {
        display: none;
    }

    .hig-post-app .capp-frame {
        max-width: 1228px;
        grid-template-columns: minmax(0, 1fr);
    }

    .hig-post-app .capp-main .hig-editor-layout {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(360px, .92fr);
        gap: 20px;
    }

    .hig-page--games .hig-games-spotlight {
        min-height: 220px;
        grid-template-columns: minmax(0, 1fr) minmax(200px, 36%);
    }

    .hig-page--games .hig-games-spotlight-art {
        min-height: 160px;
    }

    .hig-page--home .hig-home-feed-head {
        align-items: center;
    }
}

/* Mobile: compact topbar, drawer, single column and bottom navigation. */

@media (max-width: 768px) {
    .community-hig {
        --hig-topbar: 56px;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .community-hig .capp-topbar-inner {
        padding: 0 12px;
        gap: 8px;
    }

    .community-hig .capp-menu-btn {
        display: inline-flex;
    }

    .community-hig .capp-brand {
        margin-right: auto;
    }

    .community-hig .capp-search {
        position: static;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .community-hig .capp-search-toggle {
        width: 44px;
        margin: 0;
        background: var(--hig-control-bg);
    }

    .community-hig .capp-search input {
        position: fixed;
        top: calc(var(--hig-topbar) + 8px);
        left: 12px;
        right: 12px;
        z-index: 1270;
        width: calc(100vw - 24px);
        height: 44px;
        padding: 0 44px 0 14px;
        border: 1px solid var(--hig-control-border);
        border-radius: 12px;
        color: var(--hig-text);
        background: var(--hig-surface-solid);
        box-shadow: var(--hig-shadow-overlay);
        opacity: 0;
        pointer-events: none;
        transition-property: opacity, transform;
        transition-duration: 180ms;
        transition-timing-function: var(--hig-ease);
        transform: translateY(-4px);
    }

    .community-hig .capp-search:focus-within input,
    .community-hig .capp-search.is-open input {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .community-hig .capp-search kbd {
        display: none;
    }

    .community-hig .capp-search-panel,
    .hig-search-panel {
        position: fixed;
        top: calc(var(--hig-topbar) + 60px);
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100dvh - var(--hig-topbar) - 136px);
    }

    .community-hig :where(
        .capp-create-wrap,
        .capp-user-wrap,
        .capp-top-actions > .capp-user,
        .capp-top-actions .capp-bell
    ) {
        display: none;
    }

    .community-hig .capp-layout,
    .community-hig .capp-frame,
    .community-hig .hig-shell {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 100dvh;
        display: block;
        padding: calc(var(--hig-topbar) + 16px) 16px 92px;
        overflow: visible;
    }

    .community-hig .capp-main {
        width: 100%;
        max-width: none;
    }

    .community-hig .capp-sidebar {
        position: fixed;
        inset: var(--hig-topbar) auto 0 0;
        z-index: 1300;
        width: min(86vw, 320px);
        max-height: none;
        padding: 16px 12px calc(92px + env(safe-area-inset-bottom));
        border-radius: 0 20px 20px 0;
        background: var(--hig-surface-solid);
        background: var(--hig-sidebar);
        -webkit-backdrop-filter: saturate(180%) blur(28px);
        backdrop-filter: saturate(180%) blur(28px);
        box-shadow: var(--hig-shadow);
        transform: translateX(-105%);
    }

    .community-hig .capp-sidebar-tools {
        min-height: 36px;
        margin: 0 4px 8px;
        justify-content: flex-start;
    }

    .community-hig .capp-sidebar .capp-sidebar-tools .capp-back-site {
        display: inline-flex;
    }

    .community-hig .capp-sidebar :where(
        .capp-nav-item span,
        .capp-section-title,
        .capp-section-nav a span:nth-child(2),
        .capp-section-nav small,
        .capp-back-site
    ) {
        display: initial;
    }

    .community-hig .capp-sidebar :where(.capp-nav-item, .capp-section-nav a) {
        display: grid;
        justify-content: initial;
        padding-inline: 12px;
    }

    .community-hig .capp-sidebar .capp-nav-item {
        display: flex;
        justify-content: flex-start;
    }

    .community-hig.is-drawer-open .capp-sidebar,
    .community-hig .capp-sidebar.is-open {
        transform: translateX(0);
    }

    .hig-drawer-scrim {
        position: fixed;
        inset: var(--hig-topbar) 0 0;
        z-index: 1290;
        width: 100%;
        height: auto;
        padding: 0;
        border: 0;
        background: #6e6e73;
        background: rgba(0, 0, 0, .28);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        cursor: pointer;
    }

    .community-hig.is-drawer-open .hig-drawer-scrim:not([hidden]) {
        display: block;
    }

    .hig-bottom-nav {
        position: fixed;
        inset: auto 0 0;
        z-index: 1200;
        min-height: calc(64px + env(safe-area-inset-bottom));
        padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        border-top: 1px solid var(--hig-separator);
        background: var(--hig-surface-solid);
        background: var(--hig-surface);
        -webkit-backdrop-filter: saturate(180%) blur(28px);
        backdrop-filter: saturate(180%) blur(28px);
    }

    .hig-bottom-nav a {
        min-width: 0;
        min-height: 54px;
        padding: 4px 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: var(--hig-radius-sm);
        color: var(--hig-text-tertiary);
        font-size: .6875rem;
        font-weight: 550;
        line-height: 1.15;
        transition-property: color, background-color, transform;
        transition-duration: 150ms;
        transition-timing-function: var(--hig-ease);
    }

    .hig-bottom-nav a > span:first-child {
        font-size: 1.1rem;
        line-height: 1;
    }

    .hig-bottom-nav a:hover,
    .hig-bottom-nav a.is-active,
    .hig-bottom-nav a[aria-current="page"] {
        color: var(--hig-accent);
        background: var(--hig-accent-softer);
    }

    .hig-bottom-nav a:active {
        transform: scale(.96);
    }

    .community-hig .capp-bottom-nav {
        display: none;
    }

    .hig-toast-region {
        inset: auto 16px calc(76px + env(safe-area-inset-bottom)) 16px;
        width: auto;
        justify-items: stretch;
    }

    .hig-toast {
        justify-content: center;
        text-align: center;
    }

    .hig-page-header {
        align-items: flex-start;
    }

    .hig-title {
        font-size: clamp(1.625rem, 8vw, 2rem);
    }

    .hig-post-app .capp-frame {
        width: 100%;
        padding-inline: 16px;
    }

    .hig-post-app .c-tag-pill,
    .hig-post-app .c-tag-pill button {
        min-height: 44px;
    }

    .hig-post-app .c-tag-pill button {
        inline-size: 44px;
        block-size: 44px;
    }

    .hig-post-app .hig-page--post {
        gap: 16px;
    }

    .hig-post-app .hig-editor-segments {
        display: inline-grid;
    }

    .hig-post-app .capp-main .hig-editor-layout {
        display: block;
    }

    .hig-page--games {
        gap: 12px;
    }

    .hig-games-app .capp-sidebar,
    .hig-games-app .hig-bottom-nav {
        background: color-mix(
            in srgb,
            var(--hig-surface-solid) 96%,
            var(--hig-bg)
        );
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .hig-page--games .hig-games-spotlight {
        min-height: 196px;
        padding: 20px;
        grid-template-columns: minmax(0, 1fr) 132px;
        gap: 16px;
        border-radius: var(--hig-radius-md);
    }

    .hig-page--games .hig-games-spotlight h2 {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .hig-page--games .hig-games-spotlight-copy > p {
        margin-top: 8px;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .hig-page--games .hig-games-spotlight-actions {
        margin-top: 14px;
    }

    .hig-page--games .hig-games-spotlight-art {
        min-height: 144px;
    }

    .hig-page--games > .hig-game-discovery {
        position: sticky;
        z-index: 80;
        top: calc(var(--hig-topbar) + 4px);
        padding: 6px;
        grid-template-columns: 1fr;
        gap: 6px;
        background: color-mix(
            in srgb,
            var(--hig-surface-solid) 86%,
            transparent
        );
        -webkit-backdrop-filter: saturate(140%) blur(10px);
        backdrop-filter: saturate(140%) blur(10px);
    }

    .hig-page--games .games-filter.hig-game-filters {
        margin-inline: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .hig-page--games .games-filter.hig-game-filters::-webkit-scrollbar {
        display: none;
    }

    .hig-page--games .games-filter.hig-game-filters > * {
        flex: 0 0 auto;
    }

    .hig-page--games .capp-games-sort {
        margin-left: auto;
    }

    .hig-games-app .hig-game-grid,
    .hig-games-app .capp-main :where(.games-grid, #gamesGrid) {
        grid-template-columns: 1fr;
    }

    .hig-games-app .game-card.featured {
        grid-column: auto;
    }

    .hig-post-app .capp-main .hig-editor-layout
        > [data-editor-panel][hidden] {
        display: none !important;
    }

    .hig-post-app .hig-post-preview {
        position: static;
        margin-top: 0;
    }

    .hig-reply-dock {
        bottom: calc(72px + env(safe-area-inset-bottom));
        width: 100%;
        padding-inline: 16px;
        display: block;
    }

    .hig-reply-dock .hig-reply-composer {
        width: 100%;
    }

    .hig-page--creator .crt-profile-top {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 16px;
    }

    .hig-page--creator .crt-follow-button {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
    }

    .community-hig[data-community-page="creator"] .crt-stats--primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0;
    }

    .community-hig[data-community-page="creator"] .crt-stats--primary .stat-item {
        padding: 4px 8px;
    }

    .community-hig[data-community-page="creator"] .crt-stats--primary .stat-item + .stat-item {
        border-left: 0;
    }

    .community-hig[data-community-page="creator"] .crt-stats--primary .stat-item:nth-child(even) {
        border-left: 1px solid var(--hig-separator);
    }

    .community-hig[data-community-page="creator"] .crt-stats--primary .stat-item:nth-child(n + 3) {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--hig-separator);
    }

    .community-hig .capp-main > .play-hero {
        padding-top: 12px;
    }

    .hig-home-app .capp-layout::before {
        top: 40px;
        left: 0;
        width: 100vw;
        height: 300px;
        opacity: .72;
    }

    .hig-page--home {
        gap: 12px;
    }

    .hig-page--home .hig-home-intro {
        order: 1;
        padding-top: 0;
    }

    .hig-page--home .hig-home-feed-head {
        order: 2;
        position: sticky;
        z-index: 80;
        top: calc(var(--hig-topbar) + 4px);
        min-height: 52px;
        padding: 6px;
        align-items: center;
        border: 1px solid var(--hig-separator);
        border-radius: var(--hig-radius-md);
        background: var(--hig-surface);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }

    .hig-page--home .hig-home-feed-head > div:first-child {
        display: none;
    }

    .hig-page--home .hig-home-feed-head .hig-segmented {
        width: 100%;
        min-width: 0;
    }

    .hig-page--home .hig-home-composer {
        order: 3;
        min-height: 56px;
        padding: 6px 8px;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        border-radius: var(--hig-radius-md);
    }

    .hig-page--home .hig-home-composer-avatar {
        width: 32px;
        height: 32px;
    }

    .hig-page--home .hig-home-composer-actions {
        gap: 0;
    }

    .hig-page--home .hig-home-composer-actions a {
        min-width: 44px;
        padding-inline: 8px;
    }

    .hig-page--home > .section {
        order: 4;
    }

    .hig-page--home .hig-community-card {
        padding: 16px;
    }

    .hig-page--home .hig-feed-entry--compact .c-thread-excerpt {
        -webkit-line-clamp: 2;
    }
}

/* Narrow mobile: stack actions and reduce nonessential density. */

@media (max-width: 479px) {
    .hig-reply-dock {
        padding-inline: 12px;
    }

    .community-hig .capp-topbar-inner {
        padding-inline: 10px;
    }

    .community-hig .capp-lang-btn {
        display: none;
    }

    .community-hig .capp-layout,
    .community-hig .capp-frame,
    .community-hig .hig-shell {
        padding: calc(var(--hig-topbar) + 12px) 12px 88px;
    }

    .community-hig.hig-post-app .capp-frame {
        padding-inline: 16px;
    }

    .hig-page {
        gap: 16px;
    }

    .hig-post-app .hig-editor-form,
    .hig-post-app .capp-main .hig-editor-preview:not([hidden]) {
        padding: 18px;
    }

    .hig-post-app .hig-post-preview {
        padding: 18px;
    }

    .hig-post-app .hig-post-preview-game {
        grid-template-columns: 1fr;
    }

    .hig-post-app .hig-post-preview-game-cover {
        min-height: 120px;
    }

    .hig-page-header {
        display: grid;
        gap: 16px;
    }

    .hig-page-header > :where(.hig-primary-button, .hig-secondary-button) {
        width: 100%;
    }

    .hig-post-app .hig-post-back {
        min-height: 44px;
    }

    .hig-post-app .hig-select-option {
        min-block-size: 44px;
    }

    .hig-post-app .hig-page--post > .hig-post-header .hig-post-header-inner {
        gap: 14px;
    }

    .hig-page--games .hig-games-spotlight {
        min-height: 0;
        padding: 18px;
        display: block;
    }

    .hig-page--games .hig-games-spotlight-copy {
        position: relative;
        z-index: 1;
    }

    .hig-page--games .hig-games-spotlight-art {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 104px;
        min-height: 104px;
        opacity: .28;
    }

    .hig-page--games .hig-games-spotlight-art::before {
        width: 84px;
        height: 84px;
    }

    .hig-page--games .hig-games-spotlight-art::after {
        width: 128px;
        height: 128px;
    }

    .hig-page--games .hig-games-spotlight-art small {
        display: none;
    }

    .hig-page--games .hig-games-spotlight-copy > p {
        max-width: 26ch;
    }

    .hig-page--games .hig-games-spotlight-actions {
        max-width: 240px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hig-page--games .hig-games-spotlight-actions > a {
        width: 100%;
        padding-inline: 10px;
    }

    .hig-page--games .hig-game-discovery .hig-segmented {
        min-width: 0;
    }

    .hig-page--games .hig-local-search input {
        min-width: 0;
    }

    .hig-subtitle {
        font-size: .875rem;
    }

    .hig-surface,
    .hig-feed-card,
    .hig-game-card,
    .community-hig :where(
        .c-card,
        .c-thread-item,
        .c-floor,
        .capp-side-card,
        .game-card,
        .pub-panel,
        [data-publish-step],
        .crt-profile
    ) {
        border-radius: var(--hig-radius-md);
    }

    .hig-segmented {
        width: 100%;
        grid-auto-columns: minmax(0, 1fr);
    }

    .hig-segment {
        padding-inline: 8px;
        font-size: .75rem;
    }

    .hig-composer,
    .community-hig .capp-composer {
        min-height: 0;
        padding: 12px;
        grid-template-columns: 1fr;
    }

    .hig-composer > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .community-hig .capp-composer {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .community-hig .capp-composer-action {
        display: none;
    }

    .community-hig .capp-composer-publish {
        width: 44px;
        padding: 0;
        font-size: 0;
    }

    .hig-game-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hig-game-actions .hig-primary-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .hig-thread-header,
    .hig-creator-hero,
    .community-hig :where(.pub-panel, [data-publish-step], .crt-profile) {
        padding: 18px;
    }

    .hig-game-section,
    .hig-editor-form {
        padding: 18px;
    }

    .hig-publish-summary > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .hig-publish-summary dd {
        text-align: left;
    }

    .community-hig .pub-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .community-hig .pub-actions > * {
        width: 100%;
    }

    .community-hig .c-game-hero,
    .hig-game-hero {
        min-height: 320px;
    }

    .hig-page--home .hig-community-card .capp-feed-game {
        grid-template-columns: 40px minmax(0, 1fr) 44px;
        margin: 0;
    }

    .hig-page--home .hig-community-card-game-cta {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        display: inline-flex;
    }

    .hig-page--home .hig-community-card-game-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .hig-page--home .hig-community-card-top-reply {
        grid-template-columns: auto minmax(0, 1fr) auto;
        row-gap: 6px;
    }

    .hig-page--home .hig-community-card-top-reply-label {
        grid-column: 1;
        grid-row: 1;
    }

    .hig-page--home .hig-community-card-top-reply-author {
        grid-column: 2;
        grid-row: 1;
    }

    .hig-page--home .hig-community-card-top-reply-likes {
        grid-column: 3;
        grid-row: 1;
    }

    .hig-page--home .hig-community-card-top-reply-content {
        grid-column: 1 / -1;
        grid-row: 2;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
    }

    .hig-page--home .hig-home-intro .hig-title {
        font-size: clamp(1.75rem, 8vw, 2rem);
    }

    .hig-page--home .hig-home-composer-prompt {
        padding-inline: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hig-page--home .hig-home-composer-actions a {
        font-size: 0;
    }

    .hig-page--home .hig-home-composer-actions a::after {
        font-size: 1rem;
        line-height: 1;
    }

    .hig-page--home .hig-home-composer-actions a:first-child::after {
        content: "✎";
    }

    .hig-page--home .hig-home-composer-actions a:last-child::after {
        content: "＋";
    }

    .hig-page--home .hig-ip-identity {
        gap: 5px;
    }

    .hig-page--home .hig-ip-identity > span:nth-last-child(-n+2) {
        padding-inline: 5px;
    }

    .hig-page--home .hig-community-card-footer {
        flex-wrap: nowrap;
        gap: 10px;
    }
}

@media (max-width: 359px) {
    .hig-page--home .hig-community-card-footer {
        flex-wrap: wrap;
    }

    .hig-page--home .hig-community-card-views {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hig-reply-composer,
    .hig-reply-composer :where(.c-block-label, .c-textarea, .th-reply-foot, .c-field-count) {
        transition-duration: .01ms;
    }

    .community-hig *,
    .community-hig *::before,
    .community-hig *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .community-hig :where(
        button,
        a,
        .c-thread-item,
        .game-card,
        .capp-sidebar,
        .hig-drawer-scrim
    ) {
        transform: none !important;
    }

    .hig-page--games :where(
        .hig-games-spotlight-actions > a,
        .filter-btn,
        .game-card
    ) {
        transition-duration: .01ms !important;
        transform: none !important;
        scale: 1 !important;
    }

    .hig-page--home .hig-community-card,
    .hig-page--home .hig-home-composer-actions a {
        transition-duration: .01ms !important;
        transform: none !important;
    }

    .hig-page--home .hig-community-card :where(.hig-community-card-main, .capp-feed-game, .hig-community-card-game-cta) {
        scale: 1 !important;
        transform: none !important;
    }

    .community-hig .hig-glass-refraction-viewport {
        transition-duration: 0ms;
    }

    .hig-post-app .hig-select-menu,
    .hig-post-app .hig-glass-select[data-open="true"] .hig-select-menu {
        transform: none;
    }
}