.app-page {
    --app-sidebar: 17rem;
    min-height: 100vh;
    background:
        radial-gradient(circle at 85% 0%, rgba(255, 77, 22, 0.07), transparent 26rem),
        #090b0e;
}

.app-page::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 4rem 4rem;
    content: "";
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1050;
    display: flex;
    width: var(--app-sidebar);
    padding: 1.4rem 1.15rem;
    border-right: 1px solid var(--line);
    background: rgba(10, 12, 15, 0.97);
    flex-direction: column;
}

.sidebar-brand-row {
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.7rem;
}

.sidebar-brand img {
    display: block;
    width: auto;
    height: 2.8rem;
}

.sidebar-close,
.app-menu-button {
    display: none;
    width: 2.65rem;
    height: 2.65rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: transparent;
    color: var(--text);
}

.sidebar-close svg,
.app-menu-button svg,
.sidebar-nav svg,
.sidebar-home svg,
.action-link svg,
.empty-state svg {
    width: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.sidebar-section-label {
    margin: 0 .75rem .65rem;
    color: #68717a;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sidebar-nav {
    display: grid;
    gap: .28rem;
}

.sidebar-nav a {
    position: relative;
    display: flex;
    min-height: 3.2rem;
    align-items: center;
    gap: .85rem;
    padding: .72rem .85rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: #929ba4;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: 150ms ease;
}

.sidebar-nav a:hover {
    background: rgba(255,255,255,.035);
    color: #fff;
}

.sidebar-nav a.is-active {
    border-color: rgba(255, 113, 64, .2);
    background: rgba(255, 77, 22, .09);
    color: #fff;
}

.sidebar-nav a.is-active::before {
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: -.05rem;
    width: 2px;
    background: var(--ember);
    content: "";
}

.sidebar-nav a.is-active svg {
    color: var(--ember-light);
}

.sidebar-next {
    margin-top: auto;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    background: linear-gradient(145deg, rgba(255, 77, 22, .08), rgba(255,255,255,.015));
}

.sidebar-next span,
.sidebar-next strong {
    display: block;
}

.sidebar-next span {
    margin-bottom: .25rem;
    color: var(--ember-light);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.sidebar-next strong {
    font-size: .86rem;
}

.sidebar-next p {
    margin: .5rem 0 0;
    color: #7f8992;
    font-size: .72rem;
    line-height: 1.55;
}

.sidebar-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .85rem;
    padding: .65rem .5rem;
    color: #7f8992;
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
}

.sidebar-home:hover { color: #fff; }
.sidebar-home svg { width: .95rem; }

.app-frame {
    min-height: 100vh;
    margin-left: var(--app-sidebar);
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1010;
    display: flex;
    min-height: 5.4rem;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1.25rem, 3vw, 3rem);
    border-bottom: 1px solid var(--line);
    background: rgba(9, 11, 14, .82);
    backdrop-filter: blur(18px);
}

.topbar-wordmark {
    color: #d8dde1;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.topbar-wordmark span { color: #656e77; }

.topbar-account {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: inherit;
    text-decoration: none;
}

.topbar-account > span:first-child { text-align: right; }
.topbar-account strong,
.topbar-account small { display: block; }
.topbar-account strong { color: #edf0f2; font-size: .78rem; }
.topbar-account small { color: #6f7881; font-size: .66rem; }

.app-avatar {
    position: relative;
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    overflow: hidden;
    place-items: center;
    border: 1px solid rgba(255, 113, 64, .35);
    border-radius: .55rem;
    background: rgba(255, 77, 22, .1);
    color: var(--ember-light);
    font-size: .86rem;
    font-weight: 850;
}

.app-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-avatar img[hidden] { display: none; }

.app-content {
    width: min(100%, 96rem);
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.25rem, 3vw, 3rem) 5rem;
}

.app-page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.3rem;
}

.app-page-heading p {
    margin: 0 0 .55rem;
    color: var(--ember-light);
    font-size: .69rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.app-page-heading h1 {
    margin: 0 0 .45rem;
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    letter-spacing: -.055em;
    line-height: 1;
}

.app-page-heading > div > span {
    display: block;
    max-width: 45rem;
    color: var(--muted);
    font-size: .92rem;
}

.app-grid { display: grid; gap: 1.15rem; }
.app-grid-two { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); }
.app-grid-equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.app-panel {
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: rgba(16, 20, 25, .88);
    box-shadow: 0 24px 70px rgba(0,0,0,.15);
}

.app-panel-head {
    display: flex;
    min-height: 4.2rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.app-panel-head h2,
.app-panel-head h3 { margin: 0; font-size: .92rem; font-weight: 800; }
.app-panel-head span { color: #717b84; font-size: .72rem; }
.app-panel-body { padding: 1.25rem; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.15rem;
}

.stat-card {
    position: relative;
    min-height: 10rem;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: rgba(15, 19, 24, .88);
}

.stat-card::after {
    position: absolute;
    right: -2rem;
    bottom: -3rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: rgba(255,77,22,.05);
    content: "";
}

.stat-card small,
.stat-card strong,
.stat-card span { display: block; }
.stat-card small { color: #78828b; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stat-card strong { margin: .6rem 0 .4rem; font-family: var(--display); font-size: 2.15rem; letter-spacing: -.04em; }
.stat-card span { color: #7e8790; font-size: .76rem; }
.stat-card.is-accent { border-color: rgba(255,113,64,.22); background: linear-gradient(145deg, rgba(255,77,22,.1), rgba(15,19,24,.9)); }

.progress-track { height: .35rem; margin-top: 1rem; overflow: hidden; border-radius: 1rem; background: rgba(255,255,255,.07); }
.progress-track span { height: 100%; border-radius: inherit; background: var(--ember); }

.action-list { display: grid; }
.action-link {
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}
.action-link:last-child { border-bottom: 0; }
.action-link:hover { background: rgba(255,255,255,.02); }
.action-number { display: grid; width: 2.3rem; height: 2.3rem; flex: 0 0 auto; place-items: center; border-radius: .4rem; background: rgba(255,77,22,.1); color: var(--ember-light); font-size: .68rem; font-weight: 850; }
.action-link > span:nth-child(2) { flex: 1; }
.action-link strong,
.action-link small { display: block; }
.action-link strong { font-size: .86rem; }
.action-link small { margin-top: .2rem; color: #747e87; font-size: .72rem; }
.action-link > svg { color: #67717a; }

.timeline-mini,
.identity-list { display: grid; }
.timeline-row,
.identity-row {
    display: grid;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}
.timeline-row:last-child,
.identity-row:last-child { border-bottom: 0; }
.timeline-row { grid-template-columns: 5rem .75rem minmax(0, 1fr); }
.timeline-row time { color: #7c858e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .69rem; }
.timeline-node { width: .55rem; height: .55rem; border: 2px solid var(--ember); border-radius: 50%; box-shadow: 0 0 0 .35rem rgba(255,77,22,.08); }
.timeline-row strong,
.timeline-row span { display: block; }
.timeline-row strong { font-size: .84rem; }
.timeline-row span { color: #747e87; font-size: .7rem; }

.empty-state {
    display: grid;
    min-height: 15rem;
    padding: 2.5rem 1.5rem;
    place-items: center;
    text-align: center;
}
.empty-state > div { max-width: 26rem; }
.empty-state svg { width: 2rem; margin-bottom: 1rem; color: var(--ember-light); }
.empty-state h3 { margin-bottom: .45rem; font-size: 1rem; }
.empty-state p { margin: 0 0 1.2rem; color: #7e8790; font-size: .8rem; }

.app-form { display: grid; gap: 1.2rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field-full { grid-column: 1 / -1; }
.app-form label { display: block; margin-bottom: .4rem; color: #aeb5bb; font-size: .74rem; font-weight: 750; }
.app-form .form-control,
.app-form .form-select {
    min-height: 3.15rem;
    border: 1px solid var(--line-strong);
    border-radius: .45rem;
    background-color: #0b0e12;
    color: #edf0f2;
    font-size: .84rem;
    box-shadow: none;
}
.app-form textarea.form-control { min-height: 8rem; resize: vertical; }
.app-form .form-control:focus,
.app-form .form-select:focus { border-color: var(--ember-light); box-shadow: 0 0 0 .2rem rgba(255,77,22,.1); }
.app-form .form-control::placeholder { color: #555f68; }
.field-note { display: block; margin-top: .4rem; color: #666f78; font-size: .68rem; }
.form-actions { display: flex; align-items: center; gap: .75rem; padding-top: .4rem; }

.btn-forge-app {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .7rem 1rem;
    border: 1px solid var(--ember);
    border-radius: .4rem;
    background: var(--ember);
    color: white;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}
.btn-forge-app:hover { border-color: var(--ember-light); background: var(--ember-light); color: white; }
.btn-subtle { border: 1px solid var(--line-strong); background: rgba(255,255,255,.025); color: #ced3d7; }
.btn-subtle:hover { border-color: #4d555d; background: rgba(255,255,255,.05); color: #fff; }

.admin-games-intro { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.admin-games-intro p { max-width: 58rem; margin: 0; color: #89929a; font-size: .76rem; line-height: 1.6; }
.admin-game-list { display: grid; }
.admin-game-row { display: grid; grid-template-columns: minmax(11rem, 1.2fr) auto 5.5rem minmax(10rem, .8fr) minmax(15rem, 1.25fr) auto; gap: .85rem; align-items: end; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.admin-game-row:last-child { border-bottom: 0; }
.admin-game-identity { display: flex; min-width: 0; align-items: center; gap: .75rem; align-self: center; }
.admin-game-identity .game-directory-mark { flex: 0 0 auto; }
.admin-game-identity h3 { overflow: hidden; margin: 0 0 .15rem; color: var(--text); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-game-identity p { margin: 0; color: #6f7880; font-size: .66rem; }
.admin-game-field label { display: block; margin-bottom: .35rem; color: #8e979e; font-size: .66rem; font-weight: 750; }
.admin-game-field .form-control { min-height: 2.65rem; border: 1px solid var(--line-strong); border-radius: .4rem; background: #0b0e12; color: #edf0f2; font-size: .74rem; box-shadow: none; }
.admin-game-field .form-control:focus { border-color: var(--ember-light); box-shadow: 0 0 0 .2rem rgba(255,77,22,.1); }
.admin-feature-toggle { display: flex; min-height: 2.65rem; align-items: center; gap: .5rem; align-self: end; color: #b7bec4; font-size: .72rem; font-weight: 750; cursor: pointer; }
.admin-feature-toggle input { width: 1rem; height: 1rem; accent-color: var(--ember); }
.admin-game-row > .btn-forge-app { min-height: 2.65rem; padding: .55rem .85rem; font-size: .7rem; }
.directory-featured-badge { display: inline-flex; margin-left: .45rem; padding: .17rem .38rem; border: 1px solid rgba(255,113,64,.3); border-radius: 999px; background: rgba(255,77,22,.09); color: #ff8a62; font-size: .55rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }

.app-alert { margin-bottom: 1.15rem; padding: .85rem 1rem; border: 1px solid; border-radius: .5rem; font-size: .78rem; }
.app-alert-success { border-color: rgba(83, 191, 125, .26); background: rgba(83,191,125,.07); color: #a6dab9; }
.app-alert-error { border-color: rgba(235, 93, 93, .28); background: rgba(235,93,93,.07); color: #efaaaa; }

.profile-hero { display: flex; align-items: center; gap: 1rem; }
.profile-hero .app-avatar { width: 4rem; height: 4rem; font-size: 1.3rem; }
.profile-hero h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.profile-hero p { margin: 0; color: #7c858e; font-size: .76rem; }
.profile-details { display: grid; gap: .8rem; margin-top: 1.3rem; }
.profile-detail { display: flex; justify-content: space-between; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .74rem; }
.profile-detail span { color: #707982; }
.profile-detail strong { color: #cfd4d8; text-align: right; }

.profile-editor-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: 1.5rem; align-items: start; }
.profile-editor, .profile-preview-column { display: grid; gap: 1.4rem; min-width: 0; }
.profile-editor .field-note, .profile-preview-column .field-note { color: #a2abb4; font-size: .74rem; line-height: 1.65; }
.profile-optional { color: #a2abb4; font-size: .7rem; font-weight: 400; margin-left: .35rem; }
.profile-handle-input { position: relative; }
.profile-handle-input > span { position: absolute; left: .9rem; top: .65rem; color: var(--ember-light); }
.profile-handle-input .form-control { padding-left: 2rem; }
.profile-editor [aria-invalid="true"] { border-color: #efaaaa; }
.profile-field-error { color: #efaaaa; font-size: .77rem; margin: .5rem 0 0; }
.profile-error-summary p { margin: .5rem 0 0; }
.profile-error-summary ul { margin-bottom: .5rem; }
.profile-error-summary a { text-decoration: underline; }
.profile-privacy-options { display: grid; gap: 1rem; margin-top: 1.5rem; }
.profile-checkbox { display: flex !important; align-items: flex-start; gap: .65rem; cursor: pointer; }
.profile-checkbox input { width: 1.1rem; height: 1.1rem; flex-shrink: 0; margin-top: .1rem; accent-color: var(--ember); }
.profile-handle { color: var(--ember-light) !important; overflow-wrap: anywhere; }
.profile-hero > div { min-width: 0; overflow-wrap: anywhere; }
.profile-preview-headline { margin-top: 1.3rem; color: #d4dae0; font-size: .88rem; overflow-wrap: anywhere; }
.profile-preview-bio { color: #a2abb4; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-detail { overflow-wrap: anywhere; }
.profile-preview-note { margin-top: 1.5rem; }
.profile-next-note h2 { margin: 1rem 0 .65rem; font-size: 1rem; }
.profile-next-note p { color: #a2abb4; font-size: .8rem; }
.profile-next-note a { color: var(--ember-light); font-size: .8rem; }
.profile-save-actions { flex-wrap: wrap; }
@media (max-width: 1199px) {
    .profile-editor-layout { grid-template-columns: minmax(0, 1fr); }
}

.game-search-panel { margin-bottom: 1.25rem; }
.game-directory-search { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) auto; gap: .85rem; align-items: end; }
.game-directory-search .btn-forge-app { min-height: 3.15rem; }
.game-directory-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; color: #8e98a1; font-size: .75rem; }
.game-directory-summary p { margin: 0; }
.game-directory-summary a, .game-back-link { color: var(--ember-light); text-decoration: none; }
.game-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.game-directory-card { min-width: 0; }
.game-directory-card .app-panel-body { display: flex; min-height: 18rem; flex-direction: column; }
.game-card-top, .game-detail-heading { display: flex; align-items: center; gap: .9rem; }
.game-directory-mark { display: grid; width: 3.2rem; height: 3.2rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,113,64,.24); border-radius: .6rem; background: rgba(255,77,22,.08); color: var(--ember-light); font-size: .72rem; font-weight: 850; }
.game-card-top h2 { margin: 0 0 .2rem; font-size: .98rem; overflow-wrap: anywhere; }
.game-card-top p, .game-detail-heading p { margin: 0; color: #7f8992; font-size: .68rem; }
.game-card-summary { margin: 1rem 0; color: #a0a9b1; font-size: .76rem; line-height: 1.65; }
.game-platform-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.game-platform-list span { padding: .25rem .48rem; border: 1px solid var(--line); border-radius: .3rem; color: #939da5; font-size: .62rem; }
.game-card-link { margin-top: 1.1rem; color: var(--ember-light); font-size: .75rem; font-weight: 750; text-decoration: none; }
.game-directory-detail { margin-bottom: 1.25rem; }
.game-detail-heading { margin-top: 1.25rem; }
.game-detail-heading .game-directory-mark { width: 4.2rem; height: 4.2rem; font-size: .95rem; }
.game-detail-heading h2 { margin: .2rem 0 0; font-size: 1.4rem; }
.game-detail-summary { max-width: 52rem; margin: 1.25rem 0; color: #b3bbc2; line-height: 1.7; }
.game-language-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; margin: 1.25rem 0; }
.game-language-grid div { padding: .8rem; border: 1px solid var(--line); border-radius: .45rem; background: rgba(255,255,255,.018); }
.game-language-grid dt { color: #737d86; font-size: .64rem; text-transform: uppercase; }
.game-language-grid dd { margin: .25rem 0 0; color: #d7dce0; font-size: .82rem; }
.game-aliases { color: #8e98a1; font-size: .72rem; }

@media (max-width: 1199px) {
    .game-directory-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
    .game-directory-search, .game-directory-grid, .game-language-grid { grid-template-columns: 1fr; }
    .game-directory-search .btn-forge-app { width: 100%; }
}

@media (max-width: 1199.98px) {
    .admin-game-row { grid-template-columns: minmax(12rem, 1fr) auto 5.5rem minmax(10rem, 1fr) auto; }
    .admin-url-field { grid-column: 1 / -2; }
}

@media (max-width: 767.98px) {
    .admin-game-row { grid-template-columns: 1fr 5rem; align-items: end; }
    .admin-game-identity { grid-column: 1 / -1; }
    .admin-feature-toggle { grid-column: 1; }
    .admin-order-field { grid-column: 2; grid-row: 2; }
    .admin-game-field:not(.admin-order-field) { grid-column: 1 / -1; }
    .admin-url-field { grid-column: 1 / -1; }
    .admin-game-row > .btn-forge-app { grid-column: 1 / -1; }
}

/* Shared public/workspace games directory. */
.directory-public-main { min-height: 100vh; padding: 10rem 0 5rem; background: var(--bg); }
.directory-page-heading { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.directory-page-heading h1 { margin: 0 0 .55rem; color: var(--text); font-family: var(--display); font-size: clamp(1.8rem, 2.2vw, 2.55rem); letter-spacing: -.035em; line-height: 1.05; }
.directory-page-heading p:not(.section-index) { max-width: 42rem; margin: 0; color: var(--muted); font-size: 1rem; }
.directory-kicker { margin: 0 0 .7rem; color: var(--ember-light); font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.directory-page-heading .directory-kicker { margin-bottom: .85rem; }
.directory-search-card { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.7fr); gap: 1.5rem 2.25rem; align-items: center; margin-bottom: 2.1rem; padding: 1.25rem 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: .65rem; background: linear-gradient(105deg, rgba(255,77,22,.11), rgba(255,255,255,.035) 48%, rgba(255,255,255,.018)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 18px 45px rgba(0,0,0,.14); }
.directory-search-intro h2 { margin: 0 0 .25rem; color: var(--text); font-size: 1.35rem; }
.directory-search-intro p:last-child { margin: 0; color: var(--muted); font-size: .8rem; }
.directory-search-form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(9rem, .8fr) minmax(9rem, .8fr) auto; gap: .65rem; align-items: end; }
.directory-search-form label { display: block; margin: 0 0 .35rem; color: #aab3bb; font-size: .68rem; font-weight: 750; }
.directory-search-form .form-control, .directory-search-form .form-select { min-height: 2.75rem; border: 1px solid var(--line-strong); border-radius: .4rem; background: rgba(8,11,14,.72); color: var(--text); font-size: .76rem; }
.directory-search-form .btn-forge-app { min-height: 2.75rem; padding-inline: 1.15rem; }
.directory-search-form .directory-clear { grid-column: 1 / -1; justify-self: end; margin-top: .1rem; }
.directory-layout { display: grid; grid-template-areas: "heading empty" "results sidebar"; grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem); gap: 1rem 2rem; align-items: start; }
.directory-sidebar { grid-area: sidebar; position: sticky; top: 7.5rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: .7rem; background: linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
.directory-sidebar h2 { margin: 0 0 .8rem; color: var(--text); font-size: 1.35rem; line-height: 1.15; }
.directory-sidebar > p:not(.directory-kicker):not(.directory-sidebar-label) { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.directory-sidebar .btn-forge-app { width: 100%; margin-top: 1.15rem; font-size: .7rem; }
.directory-sidebar-rule { height: 1px; margin: 1.25rem 0 1rem; background: var(--line); }
.directory-sidebar-label { margin: 0 0 .55rem; color: #7f8992; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.directory-sidebar-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; color: var(--muted); font-size: .68rem; }
.directory-sidebar-stats strong { display: block; color: var(--text); font-size: 1.2rem; }
.directory-filters-heading h2 { margin: 0 0 1.35rem; color: var(--text); font-size: 1.15rem; }
.directory-filters form { display: grid; gap: .55rem; }
.directory-filters label { margin-top: .5rem; color: #aab3bb; font-size: .72rem; font-weight: 750; }
.directory-filters .form-control, .directory-filters .form-select { min-height: 2.8rem; border: 1px solid var(--line-strong); border-radius: .4rem; background: #0b0e12; color: var(--text); font-size: .78rem; }
.directory-filters .btn-forge-app { width: 100%; margin-top: .75rem; }
.directory-clear { margin-top: .35rem; color: var(--ember-light); font-size: .75rem; font-weight: 750; text-align: center; text-decoration: none; }
.directory-results { grid-area: results; min-width: 0; }
.directory-results-heading { grid-area: heading; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.directory-results-heading h2 { margin: 0; color: var(--text); font-size: 1.45rem; }
.directory-results-heading > span { color: var(--muted); font-size: .78rem; }
.directory-card-list { display: grid; gap: .8rem; }
.directory-card { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 7.6rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .65rem; background: rgba(16,20,25,.88); transition: border-color 160ms ease, transform 160ms ease; }
.directory-card:hover { border-color: rgba(255,113,64,.35); transform: translateY(-1px); }
.directory-card-copy { min-width: 0; }
.directory-card-title p { margin: 0 0 .18rem; color: #7f8992; font-size: .68rem; }
.directory-card-title h3 { margin: 0; color: var(--text); font-size: 1.05rem; }
.directory-card-summary { max-width: 56rem; margin: .45rem 0 .6rem; color: #a0a9b1; font-size: .76rem; line-height: 1.55; }
.directory-card-copy .game-platform-list { margin-top: 0; }
.directory-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .45rem; min-width: 9.5rem; }
.directory-card-actions .btn-forge-app { min-height: 2.45rem; padding: .5rem .7rem; font-size: .69rem; white-space: nowrap; }
.directory-details-link { color: var(--ember-light); font-size: .7rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.directory-empty { padding: 3rem 1.5rem; border: 1px dashed var(--line-strong); border-radius: .65rem; text-align: center; }
.directory-empty h3 { margin: 0 0 .4rem; color: var(--text); font-size: 1rem; }
.directory-empty p { margin: 0; color: var(--muted); font-size: .8rem; }
.directory-pagination { display: grid; grid-template-columns: minmax(5.5rem, 1fr) auto minmax(5.5rem, 1fr); align-items: center; gap: .8rem; margin-top: 1rem; color: var(--muted); font-size: .72rem; font-weight: 750; }
.directory-pagination > a:last-child, .directory-pagination > span:last-child { justify-self: end; }
.directory-pagination > div { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.directory-pagination a, .directory-pagination span { color: inherit; text-decoration: none; }
.directory-pagination > div a, .directory-pagination > div span:not(.pagination-gap) { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--line); border-radius: .35rem; }
.directory-pagination > div a:hover { border-color: rgba(255,113,64,.45); color: var(--text); }
.directory-pagination > div .is-current { border-color: var(--ember); background: rgba(255,77,22,.14); color: var(--text); }
.directory-pagination .is-disabled { opacity: .38; }
.directory-pagination .pagination-gap { padding: 0 .15rem; }
.directory-detail { margin-bottom: 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: .7rem; background: rgba(16,20,25,.88); }
.directory-detail-heading { display: flex; align-items: center; gap: .9rem; margin: 1.1rem 0; }
.directory-detail-heading p { margin: 0; color: #7f8992; font-size: .7rem; }
.directory-detail-heading h2 { margin: .2rem 0 0; color: var(--text); font-size: 1.5rem; }
.directory-detail > p:not(.game-back-link) { max-width: 58rem; margin: 0 0 1rem; color: #b3bbc2; line-height: 1.7; }
.directory-detail .form-actions { flex-wrap: wrap; margin-top: 1.2rem; }
.directory-public-page .navbar .nav-link.is-current { color: #fff; }

@media (max-width: 900px) {
    .directory-search-card { grid-template-columns: 1fr; gap: 1rem; }
    .directory-search-form { grid-template-columns: minmax(0, 1.4fr) minmax(9rem, .8fr) minmax(9rem, .8fr) auto; }
    .directory-layout { grid-template-areas: "heading" "results" "sidebar"; grid-template-columns: 1fr; }
    .directory-sidebar { position: static; }
    .directory-filters form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
    .directory-filters label { margin-top: 0; }
    .directory-filters label:first-of-type { grid-column: 1 / -1; }
    .directory-filters input { grid-column: 1 / -1; }
    .directory-filters .btn-forge-app { margin-top: 0; }
}

@media (max-width: 640px) {
    .directory-public-main { padding-top: 8rem; }
    .directory-search-form { grid-template-columns: 1fr; }
    .directory-search-form .directory-clear { grid-column: auto; justify-self: start; }
    .directory-card { grid-template-columns: 3.2rem minmax(0, 1fr); align-items: start; }
    .directory-card-actions { grid-column: 1 / -1; justify-content: flex-start; min-width: 0; padding-left: 4.2rem; }
    .directory-pagination { grid-template-columns: 1fr 1fr; }
    .directory-pagination > div { grid-column: 1 / -1; grid-row: 1; }
    .directory-filters form { grid-template-columns: 1fr; }
    .directory-filters label:first-of-type, .directory-filters input { grid-column: auto; }
}

.identity-row { grid-template-columns: 3rem minmax(0, 1fr) auto; }
.identity-mark { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid rgba(255,113,64,.22); border-radius: .55rem; background: rgba(255,77,22,.08); color: var(--ember-light); font-size: .68rem; font-weight: 850; }
.identity-row h3 { margin: 0 0 .18rem; font-size: .88rem; }
.identity-row p { margin: 0; color: #77818a; font-size: .7rem; }
.identity-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.identity-tags span,
.record-badge { padding: .2rem .45rem; border: 1px solid var(--line); border-radius: .3rem; color: #808a93; font-size: .62rem; }
.record-badge.is-primary { border-color: rgba(255,113,64,.22); color: var(--ember-light); }
.delete-form button { padding: .4rem .55rem; border: 1px solid rgba(235,93,93,.18); border-radius: .35rem; background: transparent; color: #b87878; font-size: .67rem; }
.delete-form button:hover { border-color: rgba(235,93,93,.4); color: #efaaaa; }

.timeline-full { position: relative; display: grid; }
.timeline-entry { display: grid; grid-template-columns: 7rem 1.2rem minmax(0,1fr) auto; gap: 1rem; padding: 1.35rem 1.25rem; border-bottom: 1px solid var(--line); }
.timeline-entry:last-child { border-bottom: 0; }
.timeline-entry time { color: #79838c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }
.timeline-entry h3 { margin: 0 0 .28rem; font-size: .9rem; }
.timeline-entry p { margin: .45rem 0 0; color: #808a93; font-size: .74rem; line-height: 1.6; }
.timeline-entry-meta { display: flex; flex-wrap: wrap; gap: .4rem; color: var(--ember-light); font-size: .65rem; }
.timeline-entry .timeline-node { margin-top: .2rem; }

.settings-list { display: grid; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid var(--line); }
.settings-row:last-child { border-bottom: 0; }
.settings-row strong,
.settings-row span { display: block; }
.settings-row strong { font-size: .8rem; }
.settings-row span { margin-top: .18rem; color: #747e87; font-size: .69rem; }
.settings-value { color: #b7bec4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; text-align: right; }

.app-sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-102%); transition: transform 190ms ease; }
    .sidebar-is-open .app-sidebar { transform: none; }
    .sidebar-close,
    .app-menu-button { display: grid; place-items: center; }
    .app-sidebar-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,.65); }
    .sidebar-is-open .app-sidebar-backdrop { display: block; }
    .app-frame { margin-left: 0; }
    .app-topbar { justify-content: flex-start; gap: 1rem; }
    .topbar-account { margin-left: auto; }
    .app-grid-two { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { min-height: auto; }
    .form-grid,
    .app-grid-equal { grid-template-columns: 1fr; }
    .field-full { grid-column: auto; }
    .timeline-entry { grid-template-columns: 4.5rem .75rem minmax(0, 1fr); }
    .timeline-entry .delete-form { grid-column: 3; }
}

@media (max-width: 575.98px) {
    .topbar-wordmark { display: none; }
    .topbar-account > span:first-child { display: none; }
    .app-page-heading { margin-bottom: 1.6rem; }
    .timeline-row { grid-template-columns: 4rem .6rem minmax(0,1fr); gap: .65rem; }
    .identity-row { grid-template-columns: 2.6rem minmax(0,1fr); }
    .identity-mark { width: 2.6rem; height: 2.6rem; }
    .identity-row .delete-form { grid-column: 2; }
    .settings-row { align-items: flex-start; flex-direction: column; gap: .5rem; }
    .settings-value { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar { transition: none; }
}