/* Althera community pages (server-rendered). Tokens come from custom.css.
   Link colours: only classless anchors are recoloured (see section 1), so
   .btn-* and every classed anchor keep their own colours. */

/* 1. Frame, bar, crumbs, page structure */
.cm { color: var(--text); }
.cm *, .cm *::before, .cm *::after { box-sizing: border-box; }
.cm [hidden] { display: none !important; }
.cm-main { max-width: 1100px; margin: 0 auto; padding: 100px 24px 80px; }
.cm-bar { position: static; max-width: 1100px; margin: 0 auto; padding: 100px 24px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cm-bar + .cm-main { padding-top: 16px; }
.cm-bar-home { font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold-light); text-decoration: none; }
.cm-bar-home:hover { color: var(--gold); }
.cm-bar-user { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.cm-bar-profile, .cm-bar-settings { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); text-decoration: none; }
.cm-bar-profile:hover, .cm-bar-settings:hover { color: var(--gold-light); }
.cm-bar-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.cm) a:not([class]) { color: var(--gold-light); }
:where(.cm) a:not([class]):hover { color: var(--gold); }
.cm-crumbs { margin: 0 0 16px; font-size: 14px; color: var(--text-muted); }
.cm-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; }
.cm-crumbs li + li::before { content: "\203A"; margin-right: 8px; color: var(--text-faint); }
.cm-crumbs a:not([class]) { color: var(--text-muted); text-decoration: none; }
.cm-crumbs a:not([class]):hover { color: var(--gold-light); text-decoration: underline; }
.cm h1, .cm-page-title { font-size: 1.75rem; line-height: 1.25; margin: 0 0 16px; color: var(--text); overflow-wrap: anywhere; }
.cm h2 { font-size: 1.25rem; margin: 0 0 12px; color: var(--text); }
.cm-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 8px; }
.cm-page-head .cm-page-title { margin-bottom: 0; }
.cm-lead { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0 0 20px; max-width: 70ch; }
.cm-block { margin: 0 0 32px; }
.cm-subhead { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 16px 0 8px; font-weight: 600; }
.cm-empty { padding: 20px; margin: 0 0 16px; text-align: center; color: var(--text-muted); background: var(--card); border: 1px dashed var(--border-light); border-radius: 12px; }
.cm-note { padding: 12px 16px; margin: 0 0 16px; background: var(--card); border: 1px solid var(--border-light); border-left: 3px solid var(--purple-light); border-radius: 12px; color: var(--text-muted); font-size: 14px; }
.cm-note p { margin: 0; }
.cm-staff-only { border-left-color: var(--gold); }
.cm-locked-notice { border-left-color: var(--text-faint); }
.cm-pending-notice { border-left-color: var(--gold-dark); }
.cm-reply-block { border-left-color: var(--gold); color: var(--text); }
.cm-message { max-width: 640px; margin: 0 auto; text-align: center; }
.cm-sep { margin: 0 4px; color: var(--text-faint); }
.cm-icon { margin-right: 4px; }

/* 2. Shared pieces */
.cm-lang-flag { font-size: 1rem; line-height: 1; }
.cm-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--card-hover); border: 1px solid var(--border-light); flex: none; }
.cm-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 0 0 16px; color: var(--text); }
.cm-author { color: var(--text); font-weight: 600; text-decoration: none; }
a.cm-author:hover { color: var(--gold-light); text-decoration: underline; }
.cm-author.is-staff { color: var(--gold-light); }
.cm-author.is-deleted { color: var(--text-muted); font-style: italic; font-weight: 400; }
.cm-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0; }
.cm-pagination a:not([class]) { display: inline-block; padding: 8px 16px; border: 1px solid var(--border-light); border-radius: 12px; text-decoration: none; color: var(--text); background: var(--card); }
.cm-pagination a:not([class]):hover { border-color: var(--gold); color: var(--gold-light); }
.cm-page-current { color: var(--text-muted); font-size: 14px; }
.cm-pending, .cm-mod-badge, .cm-official-badge, .cm-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; line-height: 1.6; font-weight: 600; white-space: nowrap; }
.cm-pending { background: var(--card-hover); color: var(--text-muted); border: 1px solid var(--border-light); }
.cm-mod-badge { background: var(--gold); color: #1a1205; }
.cm-official-badge { background: rgba(245,158,11,.15); color: var(--gold-light); border: 1px solid var(--gold-dark); }
.cm-trusted-badge { color: #34d399; border-color: var(--green); background: rgba(16,185,129,.12); }

/* 3. Game cards, section lists, topic list, filters */
.cm-game-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: 32px; }
.cm-game-card { margin: 0; transition: background .2s, border-color .2s; }
.cm-game-card:hover { background: var(--card-hover); border-color: var(--border-light); }
.cm-game-cover-link { display: block; margin-bottom: 12px; border-radius: 12px; overflow: hidden; }
.cm-game-cover { display: block; width: 100%; height: auto; aspect-ratio: 320 / 150; object-fit: cover; border-radius: 12px; background: var(--card-hover); }
.cm-game-tile { display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-size: 1.25rem; color: var(--gold-light); background: linear-gradient(135deg, var(--card-hover), var(--space)); border: 1px solid var(--border-light); }
.cm-game-name { margin: 0 0 8px; font-size: 1.25rem; }
.cm-game-name a:not([class]) { color: var(--text); text-decoration: none; }
.cm-game-name a:not([class]):hover { color: var(--gold-light); }
.cm-section-list { list-style: none; margin: 0 0 12px; padding: 0; }
.cm-section-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.cm-section-item:last-child { border-bottom: 0; }
.cm-section-item > a:not([class]) { font-weight: 600; }
.cm-section-stats, .cm-section-last { font-size: 13px; color: var(--text-muted); }
.cm-topics { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.cm-topic { display: grid; grid-template-columns: 32px 1fr; align-items: start; gap: 4px 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 12px; transition: background .2s, border-color .2s; }
.cm-topic:hover { background: var(--card-hover); border-color: var(--border-light); }
.cm-topic.is-official { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(245,158,11,.10), var(--card) 60%); }
.cm-topic.is-pinned { border-color: var(--border-light); }
.cm-topic.is-locked { opacity: .85; }
.cm-topic-main { min-width: 0; }
.cm-topic-title { margin: 0 0 4px; font-weight: 600; overflow-wrap: anywhere; }
.cm-topic-title > a:not([class]) { color: var(--text); text-decoration: none; }
.cm-topic-title > a:not([class]):hover { color: var(--gold-light); text-decoration: underline; }
.cm-topic-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.cm-topic-badges:empty { display: none; }
.cm-topic-meta { margin: 0; font-size: 13px; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cm-topic-section { color: var(--text-muted); text-decoration: none; }
.cm-topic-section:hover { color: var(--gold-light); text-decoration: underline; }
.cm-topic-replies, .cm-topic-last { white-space: nowrap; }
.cm-badge { background: var(--card-hover); color: var(--text-muted); border: 1px solid var(--border-light); }
.cm-badge-bug-open { color: var(--gold-light); border-color: var(--gold-dark); background: rgba(245,158,11,.12); }
.cm-badge-bug-investigating { color: #c4b5fd; border-color: var(--purple); background: rgba(124,58,237,.16); }
.cm-badge-bug-fixed { color: #34d399; border-color: var(--green); background: rgba(16,185,129,.12); }
.cm-badge-bug-next_patch { color: #93c5fd; border-color: #3b82f6; background: rgba(59,130,246,.14); }
.cm-badge-bug-not_a_bug { color: var(--text-muted); border-color: var(--border-light); background: transparent; }
.cm-filters { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 16px; }
.cm-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cm-filter-label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-right: 4px; }
.cm-filter { display: inline-block; padding: 4px 12px; border: 1px solid var(--border-light); border-radius: 999px; font-size: 13px; color: var(--text-muted); text-decoration: none; background: var(--card); }
.cm-filter:hover { border-color: var(--gold); color: var(--text); }
.cm-filter.is-active { border-color: var(--gold); background: rgba(245,158,11,.14); color: var(--gold-light); }

/* 4. Topic page, posts */
.cm-topic-head { margin-bottom: 8px; }
.cm-topic-head .cm-page-title { margin-bottom: 8px; }
.cm-posts { margin: 0 0 8px; }
/* scroll-margin-top: a #p-<id> landing (after a reply, ?page=last) stops below the fixed 64px site navbar. */
.cm-post { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 0 0 16px; scroll-margin-top: 88px; }
.cm-post:target { border-color: var(--gold); }
.cm-post.is-staff { border-left: 3px solid var(--gold); }
.cm-post.is-pending { border-style: dashed; border-color: var(--border-light); }
.cm-post.is-deleted { font-style: italic; color: var(--text-muted); }
.cm-post.is-deleted .cm-post-body { color: var(--text-muted); }
.cm-deleted-text { font-style: italic; color: var(--text-muted); margin: 0; }
.cm-post-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; font-size: 14px; color: var(--text-muted); }
.cm-post-edited { font-size: 12px; color: var(--text-faint); font-style: italic; }
.cm-post-body { line-height: 1.7; overflow-wrap: anywhere; }
.cm-post-body p { margin: 0 0 12px; }
.cm-post-body ul, .cm-post-body ol { margin: 0 0 12px; padding-left: 24px; }
.cm-post-body ul { list-style: disc; }
.cm-post-body ol { list-style: decimal; }
.cm-post-body blockquote { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--border-light); color: var(--text-muted); }
.cm-post-body blockquote p:last-child { margin-bottom: 0; }
.cm-post-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.cm-post-actions button, .cm-action { min-height: 36px; padding: 6px 14px; background: transparent; color: var(--text-muted); border: 1px solid var(--border-light); border-radius: 12px; font: inherit; font-size: 14px; cursor: pointer; transition: border-color .2s, color .2s; }
.cm-post-actions button:hover, .cm-action:hover { color: var(--text); border-color: var(--gold); }
.cm-post-actions button[aria-pressed="true"] { color: var(--gold-light); border-color: var(--gold); background: rgba(245,158,11,.12); }
.cm-post-actions button:disabled { opacity: .5; cursor: not-allowed; }
.cm-post-actions button[aria-busy="true"] { opacity: .6; cursor: progress; }
.cm-post-status { margin: 8px 0 0; font-size: 14px; color: var(--text-muted); }
.cm-spoiler-warning { padding: 10px 14px; margin: 0 0 16px; border: 1px solid var(--purple); border-radius: 12px; background: rgba(124,58,237,.12); color: #ddd6fe; font-size: 14px; }
.cm-reply { margin-top: 24px; }
.cm-edit { display: grid; gap: 10px; margin: 0 0 12px; }
.cm-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 5. Markup output (text stays in the DOM, so screen readers still read it) */
.spoiler { background: #1b1b2e; color: transparent; border-radius: 4px; padding: 0 4px; cursor: pointer; transition: background .2s, color .2s; user-select: none; }
.spoiler:hover { background: #24243d; }
.spoiler.is-revealed { background: rgba(124,58,237,.18); color: var(--text); cursor: auto; user-select: text; }
.spoiler-block { background: #1b1b2e; color: transparent; border: 1px solid var(--border-light); border-radius: 12px; padding: 12px 16px; margin: 0 0 12px; cursor: pointer; user-select: none; transition: background .2s, color .2s; }
.spoiler-block p { margin: 0; }
.spoiler-block:hover { background: #24243d; }
.spoiler-block.is-revealed { background: rgba(124,58,237,.12); color: var(--text); cursor: auto; user-select: text; }
.cm-img { margin: 0 0 12px; }
.cm-img.is-missing { display: flex; align-items: center; justify-content: center; min-height: 96px; max-width: 320px; padding: 12px; border: 1px dashed var(--border-light); border-radius: 12px; background: var(--card-hover); color: var(--text-muted); font-size: 13px; text-align: center; }
.cm-img.is-missing img { display: none; }
.cm-img img, figure.cm-img img { display: block; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); }
.cm-embed { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 720px; margin: 0 0 12px; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--border); }
.cm-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Click-to-play YouTube: a neutral 16:9 box (no thumbnail, nothing loaded from Google) until play is pressed. */
/* overflow: visible lets the box grow past 16:9 on a narrow screen instead of clipping the note. */
.cm-embed.cm-yt { overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; background: radial-gradient(ellipse at center, #1b1b2e 0%, #0b0b12 75%); color: var(--text-muted); }
.cm-yt-play { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 14px; border: 1px solid var(--border-light); border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.cm-yt-play:hover, .cm-yt-play:focus-visible { background: #c4302b; border-color: #c4302b; }
.cm-yt-play:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.cm-yt-icon { flex: none; fill: currentColor; }
/* .cm-embed raises it over ".cm-post-body p" / ".cm-review-body p", whose bottom margin would push the link away. */
.cm-embed .cm-yt-note { margin: 0; max-width: 62ch; font-size: 13px; line-height: 1.5; }
.cm-yt-link { font-size: 13px; color: var(--gold-light); }
.cm-yt-link:hover { color: var(--gold); }
/* A phone: a tighter box, so the play label stays on one line above the (long) consent note. */
@media (max-width: 480px) {
  .cm-embed.cm-yt { gap: 8px; padding: 14px 12px; }
  .cm-yt-play { gap: 8px; padding: 8px 16px 8px 12px; font-size: 14px; }
}
/* The composer preview's stand-in for a YouTube embed (no iframe there): a muted label centred in the same 16:9 box. */
.cm-embed.is-preview { display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; background: var(--card-hover); border: 1px dashed var(--border-light); color: var(--text-muted); font-size: 14px; }

/* 6. Composer and forms */
.cm-composer { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 16px 0 24px; display: grid; gap: 14px; }
.cm-composer-where { margin: 0; color: var(--text-muted); font-size: 14px; }
.cm-composer-where strong { color: var(--text); }
.cm-field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.cm-hint { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.cm-new-user-note { padding: 8px 12px; border-left: 3px solid var(--purple-light); background: rgba(124,58,237,.08); border-radius: 8px; }
.cm label { color: var(--text-muted); font-size: 14px; }
.cm .form-label { color: var(--text); font-weight: 600; }
.cm input[type="email"], .cm input[type="text"], .cm select, .cm textarea { width: 100%; padding: 10px 14px; background: var(--space); color: var(--text); border: 1px solid var(--border-light); border-radius: 12px; font: inherit; }
.cm textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.cm textarea.mono, .cm textarea[data-mono] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
/* A transparent outline, not `outline: none`: forced-colors mode drops the box-shadow but paints the outline. */
.cm input:focus, .cm select:focus, .cm textarea:focus { outline: 2px solid transparent; outline-offset: 2px; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,158,11,.35); }
.cm-preview { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; min-height: 48px; }
.cm-preview:empty { display: none; }
.cm-images { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cm-images:empty { display: none; }
.cm-image-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; background: var(--card-hover); border: 1px solid var(--border-light); border-radius: 12px; font-size: 13px; color: var(--text); }
.cm-image-chip img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.cm-image-remove { min-width: 32px; min-height: 32px; background: none; border: 0; border-radius: 8px; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 18px; line-height: 1; }
.cm-image-remove:hover { color: var(--red); background: rgba(239,68,68,.12); }
.cm-upload { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; border: 1px dashed var(--border-light); border-radius: 12px; cursor: pointer; color: var(--text-muted); font-size: 14px; }
.cm-upload:hover { border-color: var(--gold); color: var(--text); }
.cm .ts-box { margin: 4px 0; }
.cm-status, .cm [data-cm-status] { margin: 0; font-size: 14px; color: var(--text-muted); min-height: 1.4em; }
/* Status lines are live regions and stay rendered (a display:none or [hidden] region is not announced when it
   fills). An empty one is only collapsed: taken out of the layout, still in the accessibility tree. */
.cm-status:empty, .cm [data-cm-status]:empty { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cm [data-cm-status][data-state="error"] { color: #fca5a5; }
.cm [data-cm-status][data-state="ok"] { color: #34d399; }
.cm [data-cm-status][data-state="busy"] { color: var(--text-muted); font-style: italic; }
.cm-notice { margin: 0; padding: 12px 16px; background: rgba(16,185,129,.1); border: 1px solid var(--green); border-radius: 12px; color: var(--text); }
.cm [data-error-for] { margin: 0; font-size: 13px; color: #fca5a5; }
.cm [data-error-for]:empty { display: none; }
.cm [aria-busy="true"] { cursor: progress; }
.cm .btn-primary, .cm .btn-secondary, .cm button[type="submit"], .cm button[data-cm-verify-btn] { min-height: 44px; cursor: pointer; }
.cm-auth { max-width: 520px; }
.cm-auth form { display: grid; gap: 14px; }
.cm-settings form { display: grid; gap: 16px; }
.cm-avatar-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.cm-avatar-choice { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; padding: 6px; border: 2px solid transparent; border-radius: 12px; cursor: pointer; text-align: center; }
.cm-avatar-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.cm-avatar-choice img { display: block; width: 56px; height: 56px; border-radius: 50%; }
.cm-avatar-label { font-size: 12px; color: var(--text-muted); }
.cm-avatar-choice:hover { border-color: var(--border-light); }
.cm-avatar-choice:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,158,11,.3); }
.cm-avatar-choice:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.cm-consents { display: grid; gap: 10px; }
.cm-check { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; cursor: pointer; }
.cm-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); }
.cm-account { margin-top: 16px; }
.cm-account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.cm-danger { margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(239,68,68,.45); border-radius: 12px; background: rgba(239,68,68,.05); }
.cm-danger summary { cursor: pointer; color: #fca5a5; font-weight: 600; }
.cm-danger form { display: grid; gap: 12px; margin-top: 12px; }
.cm .cm-danger-btn { color: #fca5a5; border-color: var(--red); }
.cm .cm-danger-btn:hover { background: rgba(239,68,68,.15); color: #fecaca; border-color: var(--red); }
.cm-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cm-choice-group h2 { font-size: 1.1rem; }
.cm-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.cm-profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-light); background: var(--card-hover); }
.cm-profile-info { min-width: 0; display: grid; gap: 6px; justify-items: start; }
.cm-profile-info .cm-page-title { margin: 0; }
.cm-profile-meta { margin: 0; color: var(--text-muted); font-size: 14px; }
.cm-rules { max-width: 760px; line-height: 1.7; }
.cm-rules-section { margin: 0 0 20px; }
.cm-rules-section p { margin: 0 0 10px; }
.cm-rules-section h2 { margin-top: 8px; }
.cm-updated { margin: 16px 0 0; color: var(--text-faint); font-size: 13px; }

/* 7. Focus */
.cm a:focus-visible, .cm button:focus-visible, .cm [tabindex]:focus-visible, .cm summary:focus-visible, .cm-upload:focus-within { outline: 2px solid var(--gold-light); outline-offset: 2px; border-radius: 4px; }

/* 8. Responsive */
@media (max-width: 768px) {
  .cm h1, .cm-page-title { font-size: 1.5rem; }
  .cm-game-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cm-game-grid { grid-template-columns: 1fr; }
  .cm-topic { grid-template-columns: 1fr; }
  .cm-topic > .cm-avatar { display: none; }
  .cm-post, .cm-composer, .cm-card { padding: 16px; }
  .cm-profile { justify-content: center; text-align: center; }
  .cm-profile-info { justify-items: center; }
}
@media (max-width: 480px) {
  .cm-main, .cm-bar { padding-left: 16px; padding-right: 16px; }
  .cm-pagination { flex-direction: column; align-items: stretch; text-align: center; }
  .cm-page-head > .btn-primary { width: 100%; text-align: center; }
}

/* 8b. Busy: a turning ring while a request is in flight. setBusy marks the form (its submit button gets the
   ring), single buttons and the Steam link mark themselves, and a busy status line leads with a small ring.
   Under reduced motion (section 9) the ring stands still and the words still say what is happening. */
@keyframes cm-spin { to { transform: rotate(360deg); } }
.cm form[aria-busy="true"] button[type="submit"]::before,
.cm form[aria-busy="true"] button:not([type])::before,
.cm .btn-primary[aria-busy="true"]::before,
.cm .btn-secondary[aria-busy="true"]::before,
.cm .cm-steam-btn[aria-busy="true"]::before,
.cm [data-cm-status][data-state="busy"]::before {
  content: ''; display: inline-block; flex: none; width: 1em; height: 1em; margin-right: .55em; vertical-align: -.15em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: cm-spin .7s linear infinite;
}
.cm [data-cm-status][data-state="busy"]::before { width: .85em; height: .85em; border-width: 2px; opacity: .8; }
.cm form[aria-busy="true"] button[type="submit"], .cm form[aria-busy="true"] button:not([type]),
.cm .btn-primary[aria-busy="true"], .cm .btn-secondary[aria-busy="true"], .cm .cm-steam-btn[aria-busy="true"] {
  cursor: progress; transform: none; box-shadow: none;
}

/* 8c. "Steam hesabını bağla": Steam's own navy and blue, with its mark. */
.cm-steam-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 6px;
  font-weight: 700; font-size: .9rem; letter-spacing: .02em; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #171a21 0%, #1b2838 55%, #2a475e 100%);
  border: 1px solid #2a475e;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.cm-steam-btn:hover {
  color: #fff; border-color: #66c0f4; transform: translateY(-2px);
  background: linear-gradient(135deg, #1b2838 0%, #2a475e 70%, #417a9b 100%);
  box-shadow: 0 8px 24px rgba(102, 192, 244, .22);
}
.cm-steam-btn:active { transform: translateY(0); }
.cm-steam-btn:focus-visible { outline: 2px solid #66c0f4; outline-offset: 3px; }
.cm-steam-btn[aria-busy="true"] { pointer-events: none; opacity: .85; }
.cm-steam-btn[aria-busy="true"] .cm-steam-logo { display: none; }
.cm-steam-logo { width: 22px; height: 22px; flex: none; fill: currentColor; }
@media (max-width: 480px) { .cm-steam-btn { width: 100%; justify-content: center; } }

/* 9. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cm *, .cm *::before, .cm *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 10. Nothing inside an unrevealed spoiler shows (autolinks, bold, etc.) */
.spoiler:not(.is-revealed) *, .spoiler-block:not(.is-revealed) * { color: transparent; text-decoration-color: transparent; pointer-events: none; }
/* Forced colors (Windows high contrast) repaint every text in a system colour, so transparent text would show:
   the content is hidden outright until .is-revealed, while the spoiler keeps its box, its click and its focus. */
@media (forced-colors: active) {
  .spoiler:not(.is-revealed), .spoiler-block:not(.is-revealed) { forced-color-adjust: none; color: transparent; background: Canvas; border: 1px solid CanvasText; }
  .spoiler:not(.is-revealed) > *, .spoiler-block:not(.is-revealed) > * { visibility: hidden; }
}

/* 11. Small hooks on button-styled links (colours stay with .btn-*) */
.cm-new-topic, .cm-bar-login { white-space: nowrap; text-decoration: none; }

/* 12. Report: the button ends the action bar (or sits under a profile); the dialog is a modal card.
   A reported button stays focusable (aria-disabled, never disabled) so the focus that returns to it stays. */
.cm-post-actions .cm-report-btn { margin-left: auto; }
.cm-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cm .cm-action[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cm .cm-action[aria-disabled="true"]:hover { color: var(--text-muted); border-color: var(--border-light); }
.cm-report { width: min(520px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: auto; background: var(--card); color: var(--text); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: 0 24px 64px rgba(0,0,0,.55); }
.cm-report::backdrop { background: rgba(5,5,12,.72); }
.cm-report-form { display: grid; gap: 16px; padding: 20px; }
.cm-report-form h2 { margin: 0; }
.cm-report-form legend { padding: 0; margin: 0 0 8px; }
.cm-report-reasons { display: grid; gap: 8px; }
.cm-report .cm-check { color: var(--text); }
.cm-report .cm-check input:focus-visible { box-shadow: none; outline: 2px solid var(--gold-light); outline-offset: 2px; border-radius: 50%; }
.cm-report textarea { min-height: 96px; }
.cm-report-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 480px) {
  .cm-report-form { padding: 16px; }
  .cm-report-actions > button { flex: 1 1 auto; }
}

/* 13. Game tabs (Tartışmalar · İncelemeler) */
.cm-tabs { margin: 0 0 20px; border-bottom: 1px solid var(--border); }
.cm-tabs ul { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.cm-tab { display: inline-block; min-height: 44px; padding: 12px 18px 10px; color: var(--text-muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.cm-tab:hover { color: var(--text); border-bottom-color: var(--border-light); }
.cm-tab.is-active { color: var(--gold-light); border-bottom-color: var(--gold); }

/* 14. Reviews: summary, cards, votes, filters, write form */
.cm-review-summary { display: grid; gap: 10px; padding: 16px 20px; margin: 0 0 24px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 12px; }
.cm-review-summary.is-compact { padding: 10px 14px; margin: 0 0 20px; gap: 6px; }
.cm-game-card .cm-review-summary.is-compact { margin: 0 0 12px; }
.cm-summary-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; color: var(--text-muted); }
.cm-summary-all { color: var(--text); font-weight: 700; font-size: 1.05rem; }
.cm-summary-owners { color: var(--text-muted); }
.cm-summary-bar { height: 8px; max-width: 420px; border-radius: 999px; overflow: hidden; background: rgba(239,68,68,.35); }
.cm-summary-bar span { display: block; height: 100%; background: var(--green); }
.cm-summary-link { justify-self: start; color: var(--gold-light); font-size: 14px; text-decoration: none; }
.cm-summary-link:hover { color: var(--gold); text-decoration: underline; }
.cm-review-list { display: grid; gap: 16px; margin: 0 0 8px; }
/* scroll-margin-top: an #r-<id> landing stops below the fixed site navbar, as for posts. */
.cm-review { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; scroll-margin-top: 88px; }
.cm-review:target { border-color: var(--gold); }
.cm-review.is-pending { border-style: dashed; border-color: var(--border-light); }
.cm-review-head { display: grid; gap: 0; }
.cm-review-verdict { margin: 0; padding: 10px 20px; font-weight: 700; letter-spacing: .01em; border-bottom: 1px solid var(--border); }
.cm-review.is-positive .cm-review-verdict { color: #6ee7b7; background: linear-gradient(90deg, rgba(16,185,129,.22), rgba(16,185,129,.04)); }
.cm-review.is-negative .cm-review-verdict { color: #fca5a5; background: linear-gradient(90deg, rgba(239,68,68,.22), rgba(239,68,68,.04)); }
.cm-review-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 20px 0; font-size: 14px; color: var(--text-muted); }
.cm-review-game { color: var(--gold-light); text-decoration: none; }
.cm-review-game:hover { color: var(--gold); text-decoration: underline; }
.cm-review-body { padding: 12px 20px 4px; line-height: 1.7; overflow-wrap: anywhere; }
.cm-review-body p { margin: 0 0 12px; }
.cm-review-body ul, .cm-review-body ol { margin: 0 0 12px; padding-left: 24px; }
.cm-review-body ul { list-style: disc; }
.cm-review-body ol { list-style: decimal; }
.cm-review-body blockquote { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--border-light); color: var(--text-muted); }
.cm-review-hidden { margin: 12px 20px 16px; }
.cm-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 20px 0; padding: 12px 0 16px; border-top: 1px solid var(--border); }
.cm-review-question { font-size: 14px; color: var(--text-muted); }
.cm-review-votes { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.cm-review-actions .cm-report-btn { margin-left: auto; }
.cm-vote[aria-pressed="true"] { color: var(--gold-light); border-color: var(--gold); background: rgba(245,158,11,.12); }
.cm-vote:disabled { opacity: .55; cursor: not-allowed; }
.cm-vote[aria-busy="true"] { opacity: .6; cursor: progress; }
.cm-vote-count { display: inline-block; min-width: 1.5ch; margin-left: 2px; font-variant-numeric: tabular-nums; color: var(--text); }
.cm-review-status { margin: 0 20px 12px; font-size: 14px; color: var(--text-muted); }
.cm-owner-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; line-height: 1.6; font-weight: 600; white-space: nowrap; color: #6ee7b7; border: 1px solid var(--green); background: rgba(16,185,129,.12); }
.cm-review-write .cm-review { margin-bottom: 12px; }
.cm-review-block { border-left-color: var(--gold); color: var(--text); }
.cm-review-form { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin: 0 0 8px; display: grid; gap: 14px; }
.cm-review-edit { margin: 0 0 8px; }
.cm-review-edit > summary { display: inline-block; min-height: 44px; padding: 10px 16px; margin: 0 0 12px; border: 1px solid var(--border-light); border-radius: 12px; color: var(--text); cursor: pointer; font-weight: 600; }
.cm-review-edit > summary:hover { border-color: var(--gold); color: var(--gold-light); }
.cm-review-edit[open] > summary { border-color: var(--gold); }
.cm-verdict-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.cm-verdict-choice { align-items: center; padding: 10px 14px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--space); color: var(--text); }
.cm-verdict-choice input { margin-top: 0; }
.cm-verdict-choice:hover { border-color: var(--gold); }
.cm-verdict-choice.is-positive:has(input:checked) { border-color: var(--green); background: rgba(16,185,129,.14); }
.cm-verdict-choice.is-negative:has(input:checked) { border-color: var(--red); background: rgba(239,68,68,.14); }
.cm-verdict-choice:has(input:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 2px; }

/* 15. Official update: the list row's cover and the topic's card (spec §8.1) */
.cm-badge.cm-version { color: var(--gold-light); border-color: var(--gold-dark); background: transparent; font-variant-numeric: tabular-nums; }
.cm-topic.is-official:has(> .cm-official-thumb) { grid-template-columns: 92px 1fr; }
.cm-official-thumb { display: block; width: 92px; height: 43px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gold-dark); background: var(--card-hover); }
.cm-official-card { margin: 0 0 24px; background: var(--card); border: 1px solid var(--gold-dark); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(245,158,11,.08), 0 16px 40px rgba(0,0,0,.35); }
.cm-official-cover { display: block; width: 100%; height: auto; aspect-ratio: 460 / 130; object-fit: cover; background: var(--card-hover); border-bottom: 1px solid var(--gold-dark); }
.cm-official-body { display: grid; gap: 12px; padding: 18px 20px 20px; }
.cm-official-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--text-muted); }
.cm-official-summary { margin: 0; line-height: 1.7; color: var(--text); max-width: 75ch; overflow-wrap: anywhere; }
.cm-official-notes { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--gold); border-radius: 12px; color: var(--gold-light); font-weight: 600; text-decoration: none; }
.cm-official-notes:hover { background: rgba(245,158,11,.12); color: var(--gold-light); }

/* 16. Steam block (settings) and the notifications confirm page */
.cm-steam { margin-top: 16px; display: grid; gap: 12px; }
.cm-steam h2 { margin: 0; }
.cm-steam .cm-account-actions { margin: 0; }
.cm-steam-account { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cm-steam-avatar { width: 48px; height: 48px; border-radius: 8px; }
.cm-steam-name { margin: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.cm-steam-name strong { color: var(--text); }
.cm-steam-flash { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-light); font-size: 14px; }
.cm-steam-flash[data-state="ok"] { color: #6ee7b7; border-color: var(--green); background: rgba(16,185,129,.1); }
.cm-steam-flash[data-state="error"] { color: #fca5a5; border-color: var(--red); background: rgba(239,68,68,.08); }
.cm-steam-link { text-decoration: none; }
.cm-avatar-choice.is-steam img { border-radius: 8px; }
.cm-unsub { max-width: 640px; display: grid; gap: 12px; justify-items: start; }
.cm-unsub.cm-message { justify-items: center; margin: 0 auto; }
.cm-unsub .cm-lead { margin: 0; }

@media (max-width: 640px) {
  .cm-topic.is-official:has(> .cm-official-thumb) { grid-template-columns: 1fr; }
  .cm-topic > .cm-official-thumb { display: none; }
  .cm-review-verdict, .cm-review-by, .cm-review-body { padding-left: 16px; padding-right: 16px; }
  .cm-review-actions { margin-left: 16px; margin-right: 16px; }
  .cm-review-status { margin-left: 16px; margin-right: 16px; }
  .cm-review-form, .cm-review-summary { padding: 16px; }
  .cm-official-body { padding: 16px; }
}
@media (max-width: 480px) {
  .cm-tab { padding-left: 12px; padding-right: 12px; }
  .cm-review-actions .cm-report-btn { margin-left: 0; }
  .cm-verdict-choice { flex: 1 1 100%; }
  .cm-official-notes { justify-self: stretch; justify-content: center; text-align: center; }
}