/* Games discovery and news pages only. Keep the shared palette and navigation. */
.game-search { margin-bottom: 14px; }
.game-search label { display: block; font-weight: 700; margin-bottom: 8px; }
.game-search-controls { display: flex; gap: 8px; }
.game-search input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.game-search button, #game-filter-clear, #recent-clear { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--mint-deep); background: #fff; font: inherit; cursor: pointer; }
.game-search input:focus-visible, .game-search button:focus-visible, #game-filter-clear:focus-visible, #recent-clear:focus-visible { outline: 3px solid var(--mint-deep); outline-offset: 3px; }
.recent-section { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 16px 0 24px; }
.recent-heading { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.recent-heading h2 { font-size: 1.2rem; margin: 0; }
.recent-note { font-size: .9rem; color: var(--muted); }
.game-lab-announcements-group-title { margin: 12px 0 6px; font-size: .95rem; }
[hidden] { display: none !important; }
@media (max-width: 640px) { .recent-section { width: calc(100% - 24px); } .game-search-controls { flex-wrap: wrap; } .game-search input { flex-basis: 100%; } }
.lab-hero {
    min-height: 0;
    flex-direction: row;
    gap: 24px;
    padding: 28px 0 24px;
    text-align: left;
}
.lab-hero-text { flex: 1 1 60%; }
.hero-lead { margin: 12px 0 0; }
.hero-note { margin: 10px 0 16px; }
.lab-scene { flex: 1 1 40%; width: 40%; margin: 0; }
.lab-item { animation: none; }
.starter-section {
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 12px 0 24px;
}
.starter-section h2 { margin: 0 0 12px; font-size: 1.2rem; }
.starter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.starter-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.starter-card img { width: 52px; height: 52px; object-fit: contain; flex: 0 0 52px; }
.starter-card strong, .starter-card small { display: block; line-height: 1.6; }
.starter-card small { margin-top: 4px; color: var(--muted); }
.starter-card:hover { border-color: var(--mint-deep); background: #f5fffb; }
.starter-card:focus-visible, .game-card:focus-visible, .category-picker summary:focus-visible {
    outline: 3px solid var(--mint-deep);
    outline-offset: 3px;
}
.category-section { padding: 0 0 16px; }
.category-picker { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.category-picker summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.category-picker .section-heading { display: none; }
.category-filter-actions { margin: 12px 0; }
.category-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.category-card { width: auto; min-height: 44px; padding: 8px 16px; }
.games-section { padding-top: 16px; scroll-margin-top: 16px; }
.game-play-link { display: block; position: relative; z-index: 1; color: var(--mint-deep); font-weight: 700; margin-top: 16px; }
.game-lab-announcements {
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 8px 0 18px;
    background: #fff3df;
    border-top: 2px solid #cf914c;
    border-bottom: 1px solid #e8cfaa;
}
.game-lab-announcements-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
}
.game-lab-announcements-heading .section-label { margin: 0; color: #9b5e28; }
.game-lab-announcements-heading h2 { margin: 0; font-size: 1.05rem; }
.game-lab-announcements-list { border-top: 1px solid #e8cfaa; }
.game-lab-announcement {
    display: grid;
    grid-template-columns: 3.5rem 4.25rem minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #ead9c2;
}
.game-lab-announcement:last-child { border-bottom: 0; }
.game-lab-announcement time { color: #846244; font-size: .9rem; white-space: nowrap; }
.game-lab-announcement-body { min-width: 0; overflow-wrap: anywhere; }
.game-lab-announcement a { color: var(--mint-deep); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.game-lab-announcement-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}
.game-lab-announcement-kind--new { background: #fcebd8; color: #815022; }
.game-lab-announcement-kind--feature { background: #f0eafb; color: #5e4b79; }
.game-lab-announcement-kind--update { background: #e6f2fa; color: #416a85; }
.game-lab-announcement-kind--other { background: #eaf5ef; color: #557469; }
.game-lab-announcement-empty { margin: 8px 0; color: var(--muted); }
.game-lab-announcements-more {
    margin-top: 8px;
    border-top: 1px solid #e8cfaa;
    text-align: center;
}
.game-lab-announcements-more .game-lab-announcements-list { text-align: left; }
.game-lab-announcements-more summary,
.game-lab-announcements-archive-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid #bd8e58;
    border-radius: 999px;
    background: #fff;
    color: #805426;
    font-weight: 800;
    text-decoration: none;
}
.game-lab-announcements-more summary {
    margin-top: 4px;
    cursor: pointer;
    list-style: none;
}
.game-lab-announcements-more summary::-webkit-details-marker { display: none; }
.game-lab-announcements-more summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.game-lab-more-open { display: none; }
.game-lab-announcements-more[open] .game-lab-more-closed { display: none; }
.game-lab-announcements-more[open] .game-lab-more-open { display: inline; }
.game-lab-announcements-more[open] summary::after { transform: translateY(2px) rotate(225deg); }
@media (hover: hover) {
    .game-lab-announcements-more summary:hover,
    .game-lab-announcements-archive-link a:hover { background: #fff0d6; }
}
.game-lab-announcements-more summary:focus-visible,
.game-lab-announcements-archive-link a:focus-visible,
.games-news-back-link a:focus-visible,
.game-lab-news-pagination a:focus-visible {
    outline: 3px solid var(--mint-deep);
    outline-offset: 3px;
}
.game-lab-announcements-archive-link { margin: 12px 0 0; text-align: center; }
.game-lab-announcements-archive-link--direct { border-top: 1px solid #e8cfaa; padding-top: 12px; }
.games-news-back-link a { color: var(--mint-deep); font-weight: 800; }
.games-news-section { padding-top: 36px; padding-bottom: 56px; }
.games-news-heading { display: block; margin-bottom: 20px; }
.games-news-heading .section-label { margin: 0 0 4px; }
.games-news-heading h1 { margin: 0; line-height: 1.3; }
.games-news-description { margin: 8px 0 0; color: var(--muted); }
.game-lab-news-archive-list {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(42, 87, 74, 0.07);
    list-style: none;
}
.game-lab-news-archive-list .game-lab-announcement {
    grid-template-columns: 6.25rem 4.25rem minmax(0, 1fr) auto;
    padding: 12px 16px;
    border-bottom-color: var(--soft-line);
}
.game-lab-news-message {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--muted);
}
.game-lab-news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 22px 0 0;
}
.game-lab-news-pagination a { color: var(--mint-deep); font-weight: 800; }
.game-lab-news-pagination span { color: var(--muted); font-variant-numeric: tabular-nums; }
.games-news-back-link { margin: 28px 0 0; }
.about-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    max-width: 100%;
    margin-top: 18px;
    color: var(--mint-deep);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
.about-profile-link:hover { text-decoration-thickness: 2px; }
.about-profile-link:focus-visible {
    border-radius: 2px;
    outline: 3px solid var(--mint-deep);
    outline-offset: 4px;
}
@media (max-width: 920px) {
    .starter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .lab-hero { gap: 0; padding-top: 20px; }
    .lab-hero-text { width: 100%; }
    .lab-scene { display: none; }
    .starter-section { width: calc(100% - 24px); }
    .starter-card { padding: 10px 12px; }
    .game-card-icon { float: right; width: 64px; height: 64px; margin: 12px 0 8px 12px; }
    .game-card { min-height: 0; padding: 16px; }
    .game-card-top { margin-bottom: 12px; }
    .game-lab-announcements { width: calc(100% - 24px); padding-bottom: 14px; }
    .game-lab-announcements-heading { gap: 8px; }
    .game-lab-announcements-heading h2 { font-size: 1rem; }
    .game-lab-announcement { grid-template-columns: 3rem minmax(0, 1fr); gap: 6px 8px; padding: 7px 0; }
    .game-lab-announcement time { grid-column: 1; grid-row: 1; }
    .game-lab-announcement-kind { grid-column: 2; grid-row: 1; justify-self: start; }
    .game-lab-announcement-body { grid-column: 1 / -1; grid-row: 2; }
    .game-lab-announcement a { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
    .game-lab-news-archive-list .game-lab-announcement {
        grid-template-columns: 6.25rem minmax(0, 1fr);
        padding: 10px 12px;
    }
    .game-lab-news-pagination { gap: 12px; font-size: .9rem; }
    .games-news-back-link { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Readability adjustments are limited to the games top page. */
.games-top-page .game-lab-announcements {
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid #e8cfaa;
    border-top: 3px solid #cf914c;
    border-radius: 8px;
    background: #fff8ed;
}
.games-top-page .game-lab-announcements-heading { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.games-top-page .game-lab-announcements-heading .section-label { padding: 4px 8px; border-radius: 4px; color: #fff; background: #805426; }
.games-top-page .game-lab-announcements-heading h2 { font-size: 1.5rem; line-height: 1.4; color: #805426; }
.games-top-page .game-lab-announcements-summary { margin: 0 0 10px; color: #735e4a; line-height: 1.7; }
.games-top-page .game-lab-announcements-group-title { margin: 24px 0 10px; font-size: 1.125rem; line-height: 1.5; }
.games-top-page .game-lab-announcements-list { border-top-color: #e8cfaa; }
.games-top-page .game-lab-announcement {
    display: block;
    padding: 8px 0;
    border-bottom-color: #e8cfaa;
    font-size: 1rem;
    line-height: 1.7;
}
.games-top-page .game-lab-announcement-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 4px; }
.games-top-page .game-lab-announcement time { color: #735e4a; font-size: .9375rem; }
.games-top-page .game-lab-announcement-kind { font-size: .8125rem; }
.games-top-page .game-lab-announcement-content { max-width: 72ch; overflow-wrap: anywhere; }
.games-top-page .game-lab-announcement-body { display: inline; }
.games-top-page .game-lab-announcement a {
    display: inline-block;
    max-width: 100%;
    margin-left: .75em;
    font-size: 1rem;
    white-space: normal;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.games-top-page .game-lab-announcements-archive-link { margin-top: 12px; }
.games-top-page .game-lab-announcements-archive-link a { border-color: #bd8e58; color: #805426; }
.games-top-comments {
    box-sizing: border-box;
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 0 0 32px;
}
.games-top-comments .game-comment-section { width: 100%; max-width: none; margin: 0; }
.games-top-comments .app-comments,
.games-top-comments .app-comment-form-section {
    min-width: 0;
    padding: 24px;
    border-color: var(--line);
    background: #fff;
    box-shadow: 0 10px 28px rgba(42, 87, 74, .07);
}
.games-top-comments .app-comments h2,
.games-top-comments .app-comment-form-section h2 { margin: 0 0 16px; font-size: 1.5rem; line-height: 1.4; }
.games-top-comments .app-comment-summary { margin-bottom: 20px; color: var(--muted); }
.games-top-comments .app-comment-card {
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}
.games-top-comments .app-comment-card-admin { border-left: 4px solid var(--mint-deep); background: #f5fffb; }
.games-top-comments .app-comment-meta { gap: 8px 12px; margin-bottom: 12px; overflow-wrap: anywhere; }
.games-top-comments .app-comment-body { font-size: 1rem; line-height: 1.8; overflow-wrap: anywhere; }
.games-top-comments .app-comment-admin-reply {
    margin-top: 16px;
    padding: 16px;
    border-left-color: var(--mint-deep);
    border-radius: 0 8px 8px 0;
    background: var(--green);
    overflow-wrap: anywhere;
}
.games-top-comments .app-comment-admin-reply-title { color: #27674f; }
.games-top-comments .app-comment-admin-reply-date,
.games-top-comments .app-comment-page-status { color: var(--muted); }
.games-top-comments .app-comment-replies { margin: 16px 0 0 12px; padding-left: 16px; border-left-color: var(--line); }
.games-top-comments .app-comment-reply { margin-top: 12px; padding: 16px; background: #fff; border: 1px solid var(--soft-line); overflow-wrap: anywhere; }
.games-top-comments .app-comment-reply-form-wrap { margin-top: 16px; }
.games-top-comments .app-comment-reply-form-wrap summary { color: var(--mint-deep); min-height: 44px; padding: 8px 0; }
.games-top-comments .app-comment-form input,
.games-top-comments .app-comment-form select,
.games-top-comments .app-comment-form textarea {
    min-width: 0;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}
.games-top-comments .app-comment-form button { min-height: 44px; background: var(--mint-deep); border-color: var(--mint-deep); font: inherit; font-weight: 700; }
.games-top-comments .app-comment-form button:hover { background: #27674f; border-color: #27674f; }
.games-top-comments .app-comment-pagination { gap: 8px; border-top-color: var(--line); }
.games-top-comments .app-comment-pagination a { color: var(--mint-deep); border-color: var(--line); }
.games-top-comments .app-comment-pagination span { background: var(--mint-deep); border-color: var(--mint-deep); }
.games-top-comments :is(input, select, textarea, button, summary, a):focus-visible {
    outline: 3px solid var(--mint-deep);
    outline-offset: 3px;
}
@media (max-width: 640px) {
    .games-top-page .game-lab-announcements { padding: 16px; }
    .games-top-page .game-lab-announcements-heading { align-items: flex-start; }
    .games-top-page .game-lab-announcement a { display: block; width: fit-content; max-width: 100%; margin: 6px 0 0; }
    .games-top-comments { width: calc(100% - 24px); }
    .games-top-comments .app-comments,
    .games-top-comments .app-comment-form-section { padding: 20px; }
    .games-top-comments .app-comment-card { padding: 16px; }
    .games-top-comments .app-comment-replies { margin-left: 0; padding-left: 10px; }
    .games-top-comments .app-comment-admin-reply,
    .games-top-comments .app-comment-reply { padding: 12px; }
}
