/* Both product pages share navigation; the board keeps each game's palette. */
.game-nav { display: flex; gap: 6px; align-items: center; min-height: 64px; }
.game-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; color: var(--mb-cream); border: 1px solid transparent; text-decoration: none; font-size: 13px; }
.game-nav a:hover { background: #8ba9a41a; }
.game-nav a[aria-current="page"] { color: var(--mb-lime); border-color: #819f7166; border-bottom: 3px solid var(--mb-lime); background: #49635533; }
.community-page { --cb-bg: #14282b; --cb-panel: #1b3538; --cb-card: #132b2e; --cb-border: #587e76; --cb-muted: #bdd0c8; --cb-accent: #ff8bbd; --cb-button: #ff81b4; --cb-button-ink: #35152a; background: radial-gradient(ellipse at 50% 5%, #305552, transparent 75%), #101d21; }
.community-page.beastcraft-page { --cb-bg: #243729; --cb-panel: #1e3324; --cb-card: #1b3022; --cb-border: #71845f; --cb-muted: #c4d1b7; --cb-accent: #d2e796; --cb-button: #cce47f; --cb-button-ink: #20351f; background: radial-gradient(ellipse at 50% 5%, #334a2f, transparent 75%), #101b16; }
.community-page [hidden] { display: none !important; }
.cb-shell { width: min(1180px, calc(100% - 64px)); margin: 14px auto 72px; }
.cb-board { overflow: hidden; border: 2px solid var(--cb-border); box-shadow: 8px 8px #07120d99; background: var(--cb-bg); }
.cb-scene { position: relative; height: 190px; background: linear-gradient(0deg, #14282b, #14282b33 90%), url('/assets/minebeast/minebeast-rooftop-v5.png') center 42% / cover; }
.beastcraft-page .cb-scene { background: linear-gradient(0deg, #243729, #24372915 90%), url('/assets/beastcraft/beastcraft-hero-lake-v2.webp') center 48% / cover; }
.cb-scene a { position: absolute; top: 12px; left: 26px; display: block; width: 260px; }
.cb-scene img { width: 100%; height: 140px; object-fit: contain; object-position: left center; filter: drop-shadow(0 5px 0 #101a1666); }
.beastcraft-page .cb-scene a { top: 26px; width: 245px; }
.beastcraft-page .cb-scene img { height: auto; }
.cb-scene > span { position: absolute; top: 18px; right: 18px; padding: 6px 10px; color: #f1f2de; background: #0c211ce6; font-size: 8px; letter-spacing: .04em; }
.cb-heading { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 0 30px 28px; margin-top: -15px; }
.cb-eyebrow { color: var(--cb-accent); font-size: 10px; letter-spacing: .09em; }
.cb-heading h1 { margin-top: 9px; font-size: clamp(48px, 6vw, 72px); line-height: .98; }
.cb-heading > div > p:last-child { margin-top: 13px; color: var(--cb-muted); font-size: 13px; line-height: 1.7; }
.cb-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 11px 16px; border: 2px solid #102218; color: var(--cb-button-ink); background: var(--cb-button); box-shadow: inset 2px 2px #ffffff66, inset -2px -2px #15251a44, 0 4px #09170e; text-decoration: none; cursor: pointer; font-size: 12px; }
.cb-button:hover:not(:disabled) { filter: brightness(1.09); }
.cb-button:disabled { opacity: .55; cursor: not-allowed; }
.cb-secondary { color: var(--mb-cream); background: #3b5649; }
.cb-tabs { display: flex; gap: 4px; padding: 0 30px; border-bottom: 2px solid #8da47c55; }
.cb-tabs button { min-height: 50px; padding: 13px 19px; border: 0; border-bottom: 3px solid transparent; color: var(--cb-muted); background: transparent; cursor: pointer; }
.cb-tabs button[aria-selected="true"] { color: var(--cb-accent); border-bottom-color: var(--cb-accent); background: #0a211c88; }
.cb-tabs button:hover { background: #0a211c66; }
.community-page :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--cb-accent); outline-offset: 4px; }
.cb-inside { padding: 24px 30px 30px; }
.cb-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.cb-filters label { flex: 1 1 140px; max-width: 240px; }
.community-page label { display: grid; gap: 7px; font-size: 11px; color: var(--cb-muted); }
.community-page :is(input, select, textarea) { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--cb-border); border-radius: 0; color: var(--mb-cream); background: #10251e; font: 13px/1.5 "Minecraft Seven", monospace; }
.community-page textarea { resize: vertical; min-height: 128px; }
.cb-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); align-items: start; gap: 24px; }
.cb-layout > * { min-width: 0; }
.cb-card { padding: 20px; border: 2px solid var(--cb-border); background: var(--cb-card); box-shadow: inset 2px 2px #76956b22, 4px 4px #0e241a77; overflow-wrap: anywhere; }
.cb-card + .cb-card { margin-top: 16px; }
.cb-post { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; scroll-margin-top: 30px; }
.cb-review { grid-template-columns: 1fr; }
.cb-vote { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; align-self: start; width: 52px; min-height: 80px; padding: 7px 2px; border: 1px solid var(--cb-border); color: var(--cb-accent); background: #3c554233; cursor: pointer; font-size: 13px; }
.cb-vote:disabled { cursor: default; color: var(--cb-muted); }
.cb-vote small { font-size: 8px; }
.cb-vote-arrow { font: 20px/1 sans-serif; }
.cb-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.cb-pill { display: inline-block; padding: 4px 7px; border: 1px solid #96af9277; color: #dce8d1; background: #455e3933; font-size: 8px; line-height: 1.5; }
.cb-status-planned, .cb-status-released, .cb-buyer { color: #e5f8b5; border-color: #98ad74; background: #415e3355; }
.cb-status-in_progress { color: #ffbed9; border-color: #bc7c9c; background: #613c5155; }
.cb-test { color: #e9d4ab; border-color: #a28c5f; }
.cb-card h3 { margin-top: 12px; font-size: 30px; line-height: 1.15; }
.cb-body { margin-top: 12px; color: var(--cb-muted); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.8; }
.cb-byline { margin-top: 13px; color: var(--cb-muted); font-size: 9px; line-height: 1.7; }
.cb-meta .cb-byline { margin: 0; }
.cb-rating { margin-top: 13px; color: var(--cb-accent); font: 20px/1.4 sans-serif; letter-spacing: 3px; }
.cb-reply { margin-top: 18px; padding: 12px; border-left: 3px solid #ee96bb; background: #8daa7e11; }
.cb-reply strong { color: #ffbad8; font-size: 9px; font-weight: 400; }
.cb-reply .cb-body { margin-top: 8px; }
.cb-rail-title { margin-bottom: 16px; color: var(--mb-cream); font: 13px/1.5 "Minecraft Seven", monospace; }
.cb-update h3 { font-size: 29px; }
.cb-update-image { margin-top: 16px; }
.cb-update-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 2px solid #0b2116; }
.cb-update-image figcaption { margin-top: 6px; color: var(--cb-muted); font-size: 7px; line-height: 1.8; }
.cb-linked-requests { display: grid; margin-top: 16px; }
.cb-linked-requests a { display: flex; align-items: center; min-height: 44px; color: var(--cb-accent); font-size: 10px; }
.cb-note { color: var(--cb-muted); font-size: 10px; line-height: 1.8; }
.cb-board-note { margin-top: 28px; }
.cb-request-notice { margin-bottom: 16px; padding: 14px; border-left: 3px solid var(--cb-accent); }
.cb-update-note { margin-top: 20px; }
.cb-state { color: var(--cb-muted); font-size: 12px; line-height: 1.9; }
.cb-state:not(:empty) { padding: 16px 0 20px; }
.cb-error { margin-top: 12px; color: #ffd2d9; font-size: 11px; line-height: 1.8; }
.cb-more { width: 100%; margin-top: 20px; }
.cb-footerline { padding: 16px 30px; border-top: 1px solid #96ad7955; color: var(--cb-muted); background: #0c211b77; font-size: 9px; line-height: 1.8; }
.cb-composer { margin: 0 30px 28px; }
.cb-composer fieldset { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; }
.cb-composer legend { padding: 0 0 16px; font: 30px/1.2 "Minecraft Ten", monospace; }
.cb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cb-composer .cb-button { justify-self: start; margin-top: 6px; }
.cb-form-message:not(:empty) { margin-top: 20px; color: var(--mb-cream); font-size: 12px; line-height: 1.8; }
.cb-updates-view { grid-template-columns: 1fr; }
.cb-updates-view .cb-feed-column { display: none; }
.cb-updates-view .cb-update-column { max-width: 840px; width: 100%; margin-inline: auto; }
.cb-updates-view .cb-update h3 { font-size: 36px; }
.cb-updates-view .cb-update { padding: 26px; }
.cb-updates-view .cb-update-image img { max-height: 400px; }
@media (max-width: 720px) {
  .game-nav { width: calc(100% - 32px); min-height: 62px; }
  .game-nav a { flex: 1; padding-inline: 12px; }
  .cb-shell { width: calc(100% - 28px); margin-top: 8px; margin-bottom: 44px; }
  .cb-board { box-shadow: 5px 5px #07120d99; }
  .community-page .store-bar { padding-inline: 16px; gap: 8px; font-size: 9px; }
  .community-page .store-bar a { display: inline-flex; align-items: center; min-height: 44px; }
  .cb-scene { height: 144px; }
  .cb-scene a { top: 12px; left: 16px; width: 190px; }
  .cb-scene img { height: 110px; }
  .beastcraft-page .cb-scene a { top: 30px; left: 16px; width: 190px; }
  .cb-scene > span { top: 10px; right: 9px; font-size: 6px; padding: 4px 6px; }
  .cb-heading { display: block; padding: 0 18px 24px; margin-top: -7px; }
  .cb-heading h1 { font-size: clamp(43px, 11vw, 64px); }
  .cb-heading > div > p:last-child { font-size: 11px; }
  .cb-heading > .cb-button { margin-top: 20px; width: 100%; }
  .cb-tabs { padding-inline: 8px; gap: 0; }
  .cb-tabs button { flex: 1; padding: 13px 8px; font-size: 12px; }
  .cb-inside { padding: 20px 16px 24px; }
  .cb-layout { grid-template-columns: 1fr; gap: 30px; }
  .cb-filters { gap: 10px; }
  .cb-filters label { flex: 1 1 100px; max-width: none; }
  .community-page :is(input, select, textarea) { font-size: 16px; }
  .cb-filters select { padding-inline: 7px; font-size: 11px; }
  .cb-card { padding: 15px; }
  .cb-post { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; }
  .cb-review { grid-template-columns: 1fr; }
  .cb-vote { width: 44px; }
  .cb-card h3 { font-size: 27px; }
  .cb-body { font-size: 11px; }
  .cb-composer { margin: 0 16px 24px; }
  .cb-form-row { grid-template-columns: 1fr; gap: 16px; }
  .cb-composer .cb-button { width: 100%; }
  .cb-updates-view .cb-update { padding: 16px; }
  .cb-updates-view .cb-update h3 { font-size: 30px; }
  .cb-footerline { padding: 14px 18px; font-size: 8px; }
  .community-page .mb-footer a { display: inline-flex; align-items: center; min-height: 44px; }
}