:root {
  --canvas: #f8f9f7;
  --surface: #ffffff;
  --soft-surface: #eef2ee;
  --ink: #172027;
  --muted: #56636b;
  --quiet: #66757b;
  --border: #d9e1df;
  --purple: #6e44a6;
  --teal: #006f77;
  --green: #2e7d52;
  --yellow: #f4b942;
  --status-seeking-publisher: #005ea8;
  --status-seeking-publisher-text: #fff;
  --terracotta: #a24b2e;
  --page-width: 1160px;
  --reading-width: 690px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font: 400 16px/1.58 "Disrupt Cabin", ui-rounded, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.shell { width: min(var(--page-width), calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 11px 15px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 850; transform: translateY(-160%); transition: transform .16s ease; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 70; top: 0; min-height: 66px; border-bottom: 1px solid var(--border); background: rgba(248,249,247,.97); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 66px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 700 17px/1 "Disrupt Comfortaa", sans-serif; letter-spacing: -.045em; }
.brand img { width: 29px; height: 29px; object-fit: contain; }
.primary-nav { display: flex; align-items: center; gap: 26px; color: var(--muted); font-size: 14px; font-weight: 800; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--purple); }
.primary-nav .nav-action { min-height: 40px; padding: 10px 18px; border-radius: 999px; background: var(--purple); color: #fff; }
.primary-nav .nav-action:hover { color: #fff; background: #5e368f; }
.mobile-nav { display: none; }

/* Shared orientation layer: crumb left, useful jumps right. */
.game-context { position: sticky; z-index: 60; top: 66px; background: var(--canvas); }
.game-context-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; }
.game-breadcrumb, .game-local-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 13px; font-weight: 780; }
.game-breadcrumb a:hover, .game-local-nav a:hover { color: var(--purple); }
.game-breadcrumb .crumb-separator { color: var(--quiet); }
.game-local-nav { gap: 22px; color: var(--ink); white-space: nowrap; }
.game-local-nav a { padding-block: 10px; }
.game-status-ribbon { display: flex; align-items: center; justify-content: center; min-height: 42px; color: #fff; font-size: 14px; font-weight: 900; letter-spacing: .025em; text-transform: uppercase; }
.game-status-ribbon .shell { display: flex; align-items: center; justify-content: center; gap: 8px; }
.game-status-ribbon.status-playtesting { background: var(--green); }
.game-status-ribbon.status-in-development { background: var(--yellow); color: var(--ink); }
.game-status-ribbon.status-seeking-publisher { background: var(--status-seeking-publisher); color: var(--status-seeking-publisher-text); }
.game-status-ribbon.status-self-published { background: var(--purple); }
.game-status-ribbon.status-retired { background: var(--muted); }

.game-hero-band { background: var(--purple); }
.game-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5.5vw, 72px); width: min(var(--page-width), calc(100% - 48px)); margin-inline: auto; padding: clamp(50px, 7vw, 80px) 0; color: #fff; }
.game-hero > * { min-width: 0; }
.logo-stage { display: grid; place-items: center; min-width: 0; min-height: 0; padding: clamp(14px, 2.25vw, 26px); background: #fff; border: 0; border-radius: 16px; box-shadow: none; }
.logo-stage img { display: block; width: 100%; max-width: 580px; height: auto; max-height: 390px; object-fit: contain; }
.logo-stage.no-logo { min-height: 180px; background: rgba(255,255,255,.12); border-radius: var(--radius); }
.archive-mark { display: grid; place-items: center; width: 100px; height: 100px; border: 1px solid #b9c4c0; border-radius: 50%; color: var(--muted); font: 700 30px/1 "Disrupt Comfortaa", sans-serif; letter-spacing: -.1em; }
.logo-unavailable { margin: 0; color: var(--muted); font: 700 16px/1.4 "Disrupt Comfortaa", sans-serif; text-align: center; }
.back-link, .game-hero > div > .status { display: none; }
.game-title { margin: 0 0 15px; color: #fff; font: 700 clamp(2.75rem, 5.2vw, 4.65rem)/1.04 "Disrupt Comfortaa", sans-serif; letter-spacing: -.07em; }
.game-summary { max-width: 650px; margin: 0; color: #fff; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.5; }
.fact-line { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 22px; margin: 29px 0 20px; }
.fact-line div { min-width: 0; }
.fact-line dt { color: rgba(255,255,255,.78); font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.fact-line dd { margin: 3px 0 0; color: #fff; font-size: 15px; font-weight: 850; line-height: 1.35; overflow-wrap: anywhere; }
.hero-links { display: flex; flex-wrap: wrap; gap: 13px 22px; align-items: center; font-size: 15px; font-weight: 900; }
.hero-links a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hero-links a:first-child { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 17px; border-radius: 10px; background: #fff; color: var(--purple); text-decoration: none; }
.hero-links a:hover { color: #fff; }
.hero-links a:first-child:hover { color: #512f7d; background: #f4eefb; }
.hero-links .subtle-link { color: #fff; }
.retired-note { margin: 0; color: rgba(255,255,255,.82); font-size: 15px; font-weight: 700; }

.about-band { background: var(--soft-surface); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 265px); gap: clamp(34px, 7vw, 96px); padding: clamp(54px, 7vw, 82px) 0; }
.section-kicker { margin: 0 0 9px; color: var(--purple); font-size: 12px; font-weight: 900; letter-spacing: .065em; text-transform: uppercase; }
.about-copy h2, .rules-nav h2, .rule-content h2, .related-games h2 { margin: 0; font-family: "Disrupt Comfortaa", sans-serif; font-weight: 700; letter-spacing: -.055em; line-height: 1.17; }
.about-copy h2 { max-width: 700px; font-size: clamp(2rem, 3.7vw, 3.25rem); }
.about-copy p:not(.section-kicker) { max-width: 700px; margin: 18px 0 0; color: #405057; font-size: 17px; }
.need-list { align-self: start; margin-top: 8px; padding: 0 0 0 23px; border-left: 3px solid var(--teal); }
.need-list h3 { margin: 0 0 10px; font-size: 13px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.need-list p { margin: 0; color: #405057; font-size: 15px; }
.component-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.component-list li { color: #405057; font-size: 15px; line-height: 1.45; }
.component-list li::before { color: var(--teal); content: "◆"; font-size: 9px; margin-right: 9px; vertical-align: 1px; }

/* Optional source artwork belongs to its game, not a generic gallery bucket. */
.game-supplemental-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; width: min(var(--reading-width), calc(100% - 48px)); margin: 0 auto 4px; padding: 0; }
.game-supplemental-media figure { min-width: 0; margin: 0; }
.game-supplemental-media img { display: block; width: 100%; height: auto; max-height: 470px; object-fit: contain; }

.rules { padding: 70px 0 88px; }
.rules-layout { display: grid; grid-template-columns: minmax(0, 205px) minmax(0, var(--reading-width)); justify-content: center; gap: clamp(38px, 6vw, 84px); width: 100%; min-width: 0; }
.rules-nav { position: sticky; top: 132px; align-self: start; min-width: 0; }
.rules-nav h2 { margin-bottom: 17px; font-size: 29px; }
.rules-nav nav { display: flex; flex-direction: column; gap: 7px; }
.rules-nav a { display: block; padding: 2px 0; color: var(--muted); font-size: 13px; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; }
.rules-nav a:hover { color: var(--purple); }
.rule-content { min-width: 0; max-width: 100%; }
.rule-content > section { min-width: 0; max-width: 100%; margin: 0 0 54px; padding: 0; scroll-margin-top: 138px; }
.rule-content h2 { margin-bottom: 17px; font-size: clamp(1.65rem, 3vw, 2.2rem); }
.rule-content h3 { margin: 27px 0 9px; color: var(--ink); font: 700 19px/1.28 "Disrupt Comfortaa", sans-serif; letter-spacing: -.045em; }
.rule-content h4 { margin: 22px 0 8px; color: var(--ink); font-size: 16px; font-weight: 900; line-height: 1.35; }
.rule-content p, .rule-content li { color: #3d4c51; font-size: 16px; overflow-wrap: anywhere; }
.rule-content p { margin: 0 0 15px; }
.rule-content ul, .rule-content ol { margin: 0 0 17px; padding-left: 22px; }
.rule-content li { margin: 5px 0; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; margin: 22px 0 25px; -webkit-overflow-scrolling: touch; }
.rule-content table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0 5px; color: #3d4c51; font-size: 15px; line-height: 1.45; }
.rule-content th { padding: 5px 15px 8px; color: var(--quiet); font-size: 11px; font-weight: 900; letter-spacing: .04em; text-align: left; text-transform: uppercase; vertical-align: bottom; }
.rule-content tbody tr { background: var(--soft-surface); }
.rule-content td { padding: 13px 15px; vertical-align: top; overflow-wrap: anywhere; }
.rule-content td:first-child { border-radius: 8px 0 0 8px; }
.rule-content td:last-child { border-radius: 0 8px 8px 0; }
.faq-item { display: block; margin: 7px 0 0; }
.faq-item:first-of-type { margin-top: 20px; }
.faq-item summary { position: relative; padding: 11px 31px 11px 0; color: var(--ink); cursor: pointer; font-size: 16px; font-weight: 850; line-height: 1.4; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { position: absolute; right: 4px; top: 50%; color: var(--terracotta); content: "+"; font-size: 22px; font-weight: 500; line-height: 1; transform: translateY(-50%); }
.faq-item[open] summary::after { content: "–"; }
.faq-answer { padding: 1px 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.rule-figure { width: 100%; margin: 28px 0; }
.rule-figure img { display: block; width: 100%; height: auto; max-height: 680px; object-fit: contain; }
.rule-figure figcaption { margin-top: 9px; color: var(--muted); font-size: 13px; }

/* Game-owned downloads and the canonical browser-print action. */
.resources-band { padding: 54px 0 58px; background: var(--soft-surface); }
.resources-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 6vw, 76px); align-items: start; }
.resources-layout header h2 { margin: 0; font: 700 clamp(1.85rem, 3vw, 2.5rem)/1.16 "Disrupt Comfortaa", sans-serif; letter-spacing: -.055em; }
.resources-layout header > p:not(.section-kicker) { max-width: 520px; margin: 13px 0 0; color: #405057; font-size: 17px; line-height: 1.58; }
.resource-actions { display: flex; flex-wrap: wrap; gap: 11px 18px; align-items: center; }
.resource-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--terracotta); background: transparent; border: 0; padding: 0; cursor: pointer; font: 850 15px/1.35 "Disrupt Cabin", ui-rounded, system-ui, sans-serif; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.resource-link:hover { color: #76331d; }
.resource-print { color: var(--ink); }
.resource-downloads { margin-top: 24px; }
.resource-downloads h3 { margin: 0 0 10px; color: var(--quiet); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.resource-downloads ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.resource-downloads a { color: var(--terracotta); font-size: 16px; font-weight: 850; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.resource-downloads a span { color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.source-resource-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 28px; margin-top: 35px; }
.source-resource-detail { max-width: 410px; }
.source-resource-detail h3 { margin: 0; font: 700 21px/1.25 "Disrupt Comfortaa", sans-serif; letter-spacing: -.045em; }
.source-resource-detail p:not(.section-kicker) { margin: 10px 0 0; color: #405057; font-size: 15px; line-height: 1.55; }
.archive-rules { max-width: 650px; padding: 31px 0; color: var(--muted); }
.archive-rules h2 { margin-bottom: 12px; }
.archive-rules p { margin: 0; }

.related-games { padding: 40px 0 52px; }
.related-games h2 { font-size: 32px; }
.related-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin-top: 16px; }
.related-list a { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; column-gap: 10px; row-gap: 2px; min-height: 0; padding: 9px 0; color: var(--ink); }
.related-list strong { color: var(--ink); font: 700 20px/1.2 "Disrupt Comfortaa", sans-serif; letter-spacing: -.05em; }
.related-list span:not(.related-mark) { display: block; grid-column: 2; color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.45; }
.related-list .related-mark { display: grid; grid-row: 1 / span 2; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; background: var(--soft-surface); color: var(--purple); font: 700 11px/1 "Disrupt Comfortaa", sans-serif; letter-spacing: -.05em; }
.related-list a:hover strong { color: var(--purple); }

.site-footer { padding: 39px 0 25px; }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 44px; }
.footer-brand { max-width: 292px; }
.footer-tagline { margin: 9px 0 0; color: var(--purple); font-size: 13px; font-weight: 900; }
.footer-summary { margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.52; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 24px; max-width: 520px; padding-top: 5px; }
.footer-links a { color: var(--muted); font-size: 13px; font-weight: 800; }
.footer-links a:hover { color: var(--purple); }
.footer-bottom { margin-top: 34px; color: #68767b; font-size: 12px; }

@media (max-width: 880px) {
  .shell, .game-hero { width: min(100% - 36px, 720px); }
  .primary-nav { display: none; }
  .mobile-nav { position: relative; display: block; }
  .game-context { top: 66px; }
  .game-context-inner { min-height: 46px; }
  .game-local-nav { gap: 16px; }
  .game-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 38px 0 46px; }
  .logo-stage { order: -1; width: min(100%, 560px); margin-inline: auto; }
  .logo-stage img { max-height: 330px; }
  .fact-line { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .game-supplemental-media { width: min(100% - 36px, 720px); }
  .rules-layout { grid-template-columns: minmax(0, 1fr); gap: 31px; }
  .rules-nav { position: static; width: 100%; }
  .rules-nav nav { columns: 2; column-gap: 28px; }
  .rules-nav a { break-inside: avoid; }
  .rule-content > section { scroll-margin-top: 118px; }
  .related-list { grid-template-columns: 1fr; gap: 0; }
  .resources-layout { grid-template-columns: 1fr; gap: 26px; }
  .footer-top { display: block; }
  .footer-links { margin-top: 26px; }
}

@media (max-width: 600px) {
  .shell, .game-hero { width: min(100% - 32px, 720px); }
  .site-header, .header-inner { min-height: 58px; }
  .brand { font-size: 16px; }
  .brand img { width: 26px; height: 26px; }
  .game-context { top: 58px; }
  .game-context-inner { align-items: flex-start; gap: 8px; padding: 8px 0; }
  .game-breadcrumb { max-width: 62%; font-size: 12px; line-height: 1.35; }
  .game-local-nav { flex-direction: column; align-items: flex-end; gap: 0; font-size: 12px; }
  .game-local-nav a { padding: 0; }
  .game-status-ribbon { min-height: 36px; font-size: 12px; }
  .game-title { font-size: clamp(2.35rem, 12vw, 3.25rem); }
  .game-summary { font-size: 1.05rem; }
  .fact-line { gap: 14px 18px; }
  .hero-links { gap: 12px 18px; }
  .logo-stage img { max-height: 260px; }
  .rules { width: min(100% - 32px, 720px); margin-inline: auto; padding: 46px 0 60px; }
  .game-supplemental-media { width: min(100% - 32px, 720px); }
  .rules-layout, .rule-content, .rule-content > section { width: 100%; min-width: 0; max-width: 100%; }
  .rules-nav nav { columns: 1; }
  .rule-content p, .rule-content li { font-size: 16px; }
  .rule-content table { min-width: 500px; font-size: 14px; }
  .rule-content th, .rule-content td { padding: 11px 12px; }
  .related-games { width: min(100% - 32px, 720px); margin-inline: auto; }
  .resources-band { padding: 42px 0 46px; }
  .resources-layout { width: min(100% - 32px, 720px); margin-inline: auto; }
  .resource-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .resource-link { min-height: 42px; }
  .footer-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer-brand { margin-inline: auto; }
  .footer-links { justify-content: center; margin-inline: auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skip-link { transition: none; }
}