/* Light dashboard treatment inspired by airy project dashboards on Dribbble.
   Keep game screenshots and asset previews unaltered as evidence. */
:root {
  color-scheme: light;
  --bg: #f5f7f2;
  --panel: #ffffff;
  --panel-soft: #edf3ec;
  --line: #dce5dc;
  --text: #20362b;
  --muted: #526658;
  --quiet: #66786b;
  --green: #2f6b46;
  --green-dark: #1e4d32;
  --gold: #986523;
  --red: #ac5748;
}

body {
  background: radial-gradient(circle at 92% 0%, #e8f3e9 0, transparent 35%), var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}
::selection { background: #cce5d0; color: var(--text); }
:focus-visible { outline: 3px solid #4a9563; outline-offset: 3px; }
.shell { max-width: 1376px; padding: 0 48px; }
.topbar { height: 90px; border-color: var(--line); }
.brand { color: var(--text); }
.brand-mark {
  width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: var(--green-dark); color: #fff; font-size: 20px;
  box-shadow: 0 5px 14px #1e4d3226;
}
.brand-label { font-size: 13px; letter-spacing: .12em; }
.brand-label span { color: var(--quiet); font-size: 11px; }
.topbar-note { color: var(--muted); font-size: 13px; text-decoration: none; }
.live-dot, .status-dot { background: #47a66a; box-shadow: none; }
.eyebrow { color: var(--green); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.eyebrow > span { color: var(--quiet); }
h1 { font-size: clamp(36px, 4vw, 54px); letter-spacing: -.05em; }
h2 { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.35; }

/* Overview: spacious heading and strong but calm information cards. */
.overview { padding: 62px 0 58px; }
.overview-heading { align-items: flex-end; gap: 20px; }
.overview-heading .eyebrow { display: block; margin: 0 0 12px; }
.overview-heading h1 { margin: 0; }
.overview-intro { margin: 10px 0 0; color: var(--muted); font-size: 16px; }
.as-of { color: var(--quiet); font-size: 13px; white-space: nowrap; }
.overview-grid { gap: 16px; margin-top: 32px; }
.metric {
  height: 176px; padding: 22px 24px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 8px 28px #163c2810;
}
.metric-main { background: #e2efe4; border-color: #c7dfcb; }
.metric-label { color: var(--muted); font-size: 14px; }
.metric strong { font-size: 46px; line-height: 1.1; }
.metric small { color: var(--muted); font-size: 14px; }
.metric-foot { color: var(--quiet); font-size: 13px; letter-spacing: 0; }
.status-line strong { font-size: 25px; color: var(--green-dark); }

/* Workflow reads as four distinct steps on a pale surface. */
.workflow { padding: 58px 0 66px; }
.section-heading { gap: 24px; }
.section-heading .eyebrow { margin-bottom: 9px; }
.section-heading > p { color: var(--muted); font-size: 14px; }
.workflow-grid { gap: 12px; border: 0; background: transparent; }
.workflow-grid article {
  min-height: 128px; padding: 21px 19px; border: 1px solid var(--line) !important;
  border-radius: 16px; background: #fff; box-shadow: 0 5px 18px #163c2809;
}
.step-number { min-width: 30px; font-size: 14px; font-weight: 600; color: var(--green); }
.workflow-grid strong { font-size: 16px; color: var(--text); }
.workflow-grid small { font-size: 14px; line-height: 1.6; }

/* Tracker controls and cards. */
.games-section { padding: 62px 0 84px; }
.search {
  width: 300px; height: 46px; padding: 0 14px; border: 1px solid #cbd9cb;
  border-radius: 12px; background: #fff; color: var(--muted);
}
.search > span { font-size: 26px; line-height: 1; }
.search input { font-size: 14px; color: var(--text); }
.search input::placeholder { color: var(--quiet); opacity: 1; }
.filter-row { margin-bottom: 20px; gap: 18px; }
.filters { gap: 8px; }
.filter {
  padding: 9px 15px; border: 1px solid #cedccd; border-radius: 999px;
  background: #fff; color: var(--muted); font-size: 13px;
}
.filter span { color: var(--quiet); font-size: 13px; }
.filter:hover { border-color: var(--green); color: var(--green-dark); }
.filter.active { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.filter.active span { color: #d8ecdd; }
.list-caption { color: var(--quiet); font-size: 13px; }
.game-grid { gap: 14px; }
.game-card {
  min-height: 222px; padding: 20px; border: 1px solid var(--line);
  border-radius: 18px; background: #fff;
  box-shadow: 0 7px 22px #163c280b;
  display: block; color: inherit; text-decoration: none; cursor: pointer;
}
.game-card:focus-visible { outline: 3px solid #c49b4d; outline-offset: 3px; }
.game-card:has(.card-actions) { min-height: 252px; }
.game-card:hover {
  transform: translateY(-4px); border-color: #a9c9b0; background: #fff;
  box-shadow: 0 15px 34px #163c281b;
}
.game-id { color: var(--green); font-size: 13px; font-weight: 600; }
.game-status {
  padding: 5px 9px; border: 1px solid #cbdccb; border-radius: 999px;
  background: #f0f6ee; color: var(--green-dark); font-size: 13px;
}
.game-card h3 { margin: 24px 0 23px; font-size: 22px; line-height: 1.3; color: var(--text); }
.progress-caption { color: var(--muted); font-size: 13px; }
.progress-caption strong { color: var(--green-dark); font-size: 13px; }
.progress-track { height: 7px; margin-top: 9px; border-radius: 999px; background: #e7ede5; }
.progress-track span { border-radius: inherit; background: #55a371; }
.phase-dots { gap: 7px; margin-top: 17px; }
.phase-dots i { height: 4px; border-radius: 999px; background: #e7ede5; }
.phase-dots i.done { background: #55a371; }
.card-actions { gap: 8px; margin-top: 17px; }
.card-actions a {
  padding: 9px 7px; border-color: #b9d6bf; border-radius: 9px;
  background: #f1f7f1; color: var(--green-dark); font-size: 13px; font-weight: 600;
}
.card-actions a:hover { background: #e2f0e5; border-color: #7eae8a; }
.empty-state { font-size: 15px; }
footer { border-color: var(--line); }
footer > span, .back-top { color: var(--muted); font-size: 13px; }
footer > span b { color: var(--green); }
.back-top:hover, .inventory-back:hover { color: var(--green-dark); }

/* Shared inventory and style pages. Dense specs stay legible on white. */
.inventory-back { color: var(--green-dark); font-size: 14px; }
.inventory-heading { padding-top: 56px; }
.inventory-heading h1 { font-size: clamp(36px, 4vw, 52px); }
.inventory-heading h1 span { color: var(--green); }
.inventory-heading > p:last-child { color: var(--muted); font-size: 16px; }
.inventory-stats { gap: 14px; }
.inventory-stats article, .rules li, .validation-state,
.layout-facts article, .decision-grid article, .runtime-observations article {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 5px 18px #163c2809;
}
.inventory-stats article { min-height: 108px; padding: 20px; }
.inventory-stats article span { font-size: 14px; }
.inventory-stats strong { color: var(--green-dark); font-size: 29px; }
.inventory-stats .static-label { font-size: 19px; }
.inventory-title h2 { font-size: 26px; }
.inventory-total { color: var(--quiet); font-size: 12px; }
.entry-grid dt { color: var(--muted); font-size: 14px; }
.entry-grid dd { font-size: 13px; line-height: 1.7; }
.rules li { font-size: 14px; min-height: 94px; }
.rules li:before { font-size: 13px; }
.inventory-note { border-color: #c7dfcb; border-radius: 12px; background: #eaf4e9; color: var(--muted); font-size: 14px; }
.inventory-note strong { color: var(--green-dark); }
.inventory-caption { color: var(--muted); font-size: 14px; }
.table-wrap { border-color: var(--line); border-radius: 14px; background: #fff; }
table { font-size: 14px; }
th { padding: 14px; background: #edf4ec; color: var(--green-dark); font-size: 14px; font-weight: 700; }
td { padding: 14px; color: var(--muted); line-height: 1.65; }
td code, .spec-table code { color: #355747; font-size: 12px; }
.uuid-cell summary { color: var(--green-dark); }
.uuid-details { color: var(--muted); font-size: 12px; }
.tag { border-color: #cbd8c8; border-radius: 6px; color: var(--muted); }
.tag.shared { border-color: #decba9; color: #86571c; background: #fff8e9; }
.tag.local { border-color: #bcdbc4; color: var(--green-dark); background: #eef8ef; }
.image-preview { background: #f2f6ef; border-radius: 8px; }
.validation-state strong { font-size: 15px; }
.validation-state p { font-size: 14px; }
.next-stage-link { border-color: #bad9c1; border-radius: 14px; background: #e7f3e8; }
.next-stage-link:hover { background: #dcf0df; }
.next-stage-link small, .next-stage-link > b { font-size: 13px; }
.next-stage-link strong { color: var(--green-dark); font-size: 16px; }
.card-link-hint { color: var(--green); font-size: 12px; }

/* Screenshot panels preserve the dark image pixels but lighten their frame. */
.decision-status { border-color: #e4d3ac; border-radius: 999px; background: #fff8e9; color: #865a21; font-size: 13px; }
.decision-status i, .state-dot { background: #c7923f; }
.entry-flow-note { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 16px; padding: 18px 20px; border: 1px solid #c7dfcb; border-radius: 14px; background: #eaf4e9; color: var(--muted); font-size: 14px; line-height: 1.7; }
.entry-flow-note strong { flex: none; color: var(--green-dark); font-size: 15px; }
.entry-shot { margin-bottom: 28px; }
.screen-stage-heading { margin: 0 0 14px; color: var(--text); font-size: 21px; }
.game-shot, .state-evidence figure { border-radius: 14px; background: #fff; box-shadow: 0 5px 18px #163c2809; }
.game-shot > a, .state-evidence figure > a { border-radius: 8px; overflow: hidden; }
.game-shot figcaption { color: var(--muted); font-size: 13px; }
.state-evidence { gap: 14px; }
.state-evidence figure { padding: 12px; }
.state-evidence figure .state-tag { color: var(--green-dark); font-size: 13px; }
.state-evidence p { color: var(--muted); font-size: 14px; }
.observed-style { background: #eaf4e9; border-color: #c7dfcb; border-radius: 14px; }
.observed-style > span { color: var(--green-dark); font-size: 13px; font-weight: 700; }
.observed-style p { font-size: 14px; }
.layout-facts span, .decision-grid span { font-size: 13px; }
.layout-facts strong, .decision-grid strong { color: var(--green-dark); font-size: 20px; }
.layout-facts .pending-text, .decision-grid strong { color: #986523; }
.layout-facts small, .decision-grid small { color: var(--muted); font-size: 12px; }
.runtime-observations span { color: var(--muted); font-size: 13px; }
.runtime-observations strong { color: var(--green-dark); font-size: 16px; }
.runtime-observations small { color: var(--muted); font-size: 14px; }
.spec-table td { font-size: 14px; }
.spec-table td:first-child { color: var(--text); }

@media (max-width: 900px) {
  .shell { padding: 0 30px; }
  .overview { padding-top: 48px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .shell { padding: 0 18px; }
  .topbar { height: 76px; }
  .topbar-note { font-size: 11px; }
  .overview { padding: 38px 0 42px; }
  .overview-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .overview-intro { font-size: 14px; }
  .overview-grid { gap: 10px; margin-top: 24px; }
  .metric { height: 152px; padding: 17px; }
  .metric strong { font-size: 38px; }
  .metric-label, .metric-foot { font-size: 12px; }
  .metric-status .status-line strong { font-size: 19px; }
  .workflow, .games-section { padding: 42px 0; }
  .section-heading > p { font-size: 12px; }
  .workflow-grid { gap: 9px; }
  .workflow-grid article { min-height: 125px; padding: 15px 12px; gap: 7px; }
  .workflow-grid strong { font-size: 14px; }
  .workflow-grid small { font-size: 13px; }
  .step-number { min-width: 22px; font-size: 12px; }
  .search { width: 100%; }
  .filters { gap: 6px; }
  .filter { padding: 8px 11px; font-size: 12px; }
  .filter span { font-size: 11px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .game-card { min-height: 206px; padding: 14px; }
  .game-card:has(.card-actions) { min-height: 247px; }
  .game-card h3 { font-size: 18px; margin: 25px 0 20px; }
  .game-status { font-size: 12px; padding: 4px 6px; }
  .card-actions { flex-direction: column; }
  .card-actions a { font-size: 12px; }
  .inventory-heading { padding-top: 40px; }
  .inventory-stats article { min-height: 100px; }
  .inventory-title h2 { font-size: 22px; }
  .table-wrap { border-radius: 10px; }
  table { min-width: 760px; }
  .entry-flow-note { display: block; padding: 15px; }
  .entry-flow-note strong { display: block; margin-bottom: 5px; }
  .state-evidence { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .brand-label { font-size: 11px; }
  .topbar-note { font-size: 10px; }
  .game-grid { grid-template-columns: 1fr; }
  .game-card, .game-card:has(.card-actions) { min-height: 205px; }
  .card-actions { flex-direction: row; }
}

.resource-shortcuts { padding: 4px 0 54px; }
.resource-shortcuts .section-heading { margin-bottom: 18px; }
.resource-all-link { color: var(--green-dark); font-size: 13px; text-decoration: none; }
.resource-all-link:hover { text-decoration: underline; }
.resource-shortcut-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.resource-shortcut { position: relative; display: flex; flex-direction: column; gap: 7px; min-height: 132px; padding: 20px 52px 19px 20px; color: var(--text); text-decoration: none; background: #fff; border: 1px solid var(--line); transition: border-color .18s, transform .18s; }
.resource-shortcut:hover { border-color: #779875; transform: translateY(-2px); }
.resource-shortcut-label { color: var(--quiet); font: 10px var(--mono); letter-spacing: .08em; }
.resource-shortcut strong { font-size: 17px; }
.resource-shortcut small { color: var(--muted); font-size: 12px; }
.resource-shortcut-arrow { position: absolute; right: 19px; top: 50%; color: var(--green-dark); font-size: 19px; transform: translateY(-50%); }
@media (max-width: 620px) { .resource-shortcuts { padding: 0 0 36px; } .resource-shortcuts .section-heading { align-items: flex-end; } .resource-shortcut-grid { grid-template-columns: 1fr; gap: 9px; } .resource-shortcut { min-height: 112px; padding: 16px 45px 16px 16px; } .resource-shortcut strong { font-size: 15px; } }

/* Bring tracker controls and progress accents in line with the high-contrast gold workflow tabs. */
.filter.active{border-color:#a57724;background:linear-gradient(135deg,#f5df9c,#d6aa4b);color:#30240e;font-weight:700;box-shadow:0 2px 8px #9b712726}.filter.active span{color:#493510}.game-card{border-radius:12px;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}.game-card:hover{transform:translateY(-3px);border-color:#c49b4d;background:#fffdf7;box-shadow:0 10px 24px #76571b1a}.game-status{border-radius:999px}.progress-caption strong{color:#765315;font-weight:700}.progress-track span,.phase-dots i.done{background:linear-gradient(90deg,#e4c36e,#a97722)}.phase-dots i{border-radius:999px}.workflow-grid .step-number{color:#8b651d;font-weight:800}

/* Compact game workflow cards echo the active gold phase tab used on the Niuniu page. */
.game-card{min-height:0;padding:17px;border-color:#e3ddcf;background:#fff;}
.game-card h3{margin:14px 0 13px;font-size:20px;}
.game-card .game-status{border-color:#e1d3ad;background:#fff8e7;color:#70551d;font-weight:700;}
.game-step-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:13px;}
.game-step-tab{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:53px;padding:8px;border:1px solid #e6e1d6;border-radius:9px;background:#faf9f6;transition:background .18s,border-color .18s,box-shadow .18s;}
.game-step-tab .tab-index{flex:none;color:#8b651d;font:700 11px var(--mono);}
.game-step-tab .tab-copy{display:grid;gap:3px;min-width:0;}
.game-step-tab .tab-copy small{overflow:hidden;color:#827b6d;font:600 7px/1.2 var(--mono);letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;}
.game-step-tab .tab-copy strong{overflow:hidden;color:#494437;font-size:10px;font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;}
.game-step-tab.is-done{border-color:#d7c28b;background:#fcf8ee;}
.game-step-tab.is-active{border-color:#a57724;background:linear-gradient(135deg,#f5df9c,#d6aa4b);box-shadow:0 3px 9px #9b71272b;}
.game-step-tab.is-active .tab-index,.game-step-tab.is-active .tab-copy small,.game-step-tab.is-active .tab-copy strong{color:#30240e;}
.game-step-tab .latest-badge{flex:none;margin-left:auto;padding:4px 5px;border-radius:999px;background:#362b16;color:#f4d88f;font-size:8px;line-height:1;white-space:nowrap;}
.game-step-tab.is-active .latest-badge{background:#362b16;color:#f4d88f;}
@media(max-width:700px){.game-card{padding:14px}.game-card h3{font-size:18px}.game-step-nav{gap:6px}.game-step-tab{min-height:50px;padding:7px;gap:6px}.game-step-tab .tab-copy small{font-size:6.5px}.game-step-tab .tab-copy strong{font-size:9px}.game-step-tab .latest-badge{font-size:7px;padding:4px}}

/* Low-key luxury palette for every homepage dashboard card. */
.overview-grid .metric{
  color:#f4eddd;border-color:#40351f;background:linear-gradient(145deg,#171510,#100f0c 78%);
  box-shadow:0 12px 30px #241a0e20,inset 0 1px #ffffff08;
}
.overview-grid .metric-main{border-color:#78602c;background:linear-gradient(145deg,#211b10,#12100c 78%);}
.overview-grid .metric-label{color:#d2bd83;}
.overview-grid .metric strong,.overview-grid .metric-status .status-line strong{color:#f0d587;}
.overview-grid .metric small{color:#ded3b8;}
.overview-grid .metric-foot{color:#b2a78f;}
.overview-grid .status-dot{background:#dfb94f;box-shadow:0 0 12px #dfb94f42;}

.resource-shortcut{
  color:#f3ecdc;background:linear-gradient(145deg,#171510,#100f0c 78%);border-color:#40351f;
  border-radius:14px;box-shadow:0 12px 30px #241a0e1c,inset 0 1px #ffffff08;
}
.resource-shortcut:hover{border-color:#987a3c;background:linear-gradient(145deg,#1c1911,#12100c 78%);box-shadow:0 15px 34px #241a0e2b;}
.resource-shortcut-label{color:#d8bd72;}
.resource-shortcut strong{color:#f3e6c4;}
.resource-shortcut small{color:#bdb39d;}
.resource-shortcut-arrow{color:#edcd78;}

.workflow-grid article{
  border:1px solid #40351f!important;border-radius:14px;background:linear-gradient(145deg,#171510,#100f0c 78%);
  box-shadow:0 12px 30px #241a0e1c,inset 0 1px #ffffff08;
}
.workflow-grid .step-number{color:#e3bf64;}
.workflow-grid strong{color:#f1e7d1;}
.workflow-grid small{color:#b9ae97;}

.game-card{
  color:#f3ecdc;border-color:#40351f;background:linear-gradient(150deg,#171510,#100f0c 78%);
  box-shadow:0 10px 26px #241a0e1c,inset 0 1px #ffffff08;
}
.game-card:hover{border-color:#9b7b3d;background:linear-gradient(150deg,#1d1910,#12100c 78%);box-shadow:0 15px 32px #241a0e32;}
.game-card h3{color:#f4ead4;}
.game-id{color:#e7c66e;}
.game-card .game-status{border-color:#67552e;background:#211b10;color:#e9cf88;}
.game-card .progress-caption{color:#c0b59b;}
.game-card .progress-caption strong{color:#f0d587;}
.game-card .progress-track{background:#322a1b;}
.game-card .progress-track span{background:linear-gradient(90deg,#e4c36e,#a97722);}
.game-step-tab{border-color:#3c3424;background:#191711;}
.game-step-tab .tab-index{color:#d6b65d;}
.game-step-tab .tab-copy small{color:#b8a879;}
.game-step-tab .tab-copy strong{color:#e8dfca;}
.game-step-tab.is-done{border-color:#69562e;background:linear-gradient(145deg,#211b10,#17140e);}
.game-step-tab.is-done .tab-index,.game-step-tab.is-done .tab-copy strong{color:#e4c46e;}
.game-step-tab.is-active{border-color:#bd9847;background:linear-gradient(135deg,#e3c574,#b78c37);box-shadow:0 4px 13px #a47a2a32;}
.game-step-tab.is-active .tab-index,.game-step-tab.is-active .tab-copy small,.game-step-tab.is-active .tab-copy strong{color:#2d2413;}
.game-step-tab .latest-badge,.game-step-tab.is-active .latest-badge{background:#2b2110;color:#f6df9e;}
.game-card:focus-visible{outline-color:#e1bd5f;}