/* The platform catalog stays a comfortable single-column layout on a phone. */
:root { --ink: #223a30; --muted: #5b6c61; --green: #286149; --green-dark: #1b4936; --line: #c3cfbe; background: #e9ede7; }
body { background: #f5f7f3; }
.site-header { min-height: 88px; border-bottom: 1px solid #d6dfd0; gap: 8px; }
.brand { gap: 10px; min-width: 0; }
.brand img { width: 42px; height: 42px; border-radius: 13px; }
.brand-copy { display: grid; gap: 1px; line-height: 1.4; }
.brand-copy strong { font-size: 20px; font-weight: 800; letter-spacing: .03em; }
.brand-copy small { font-size: 10px; letter-spacing: .06em; font-weight: 600; color: #697a6c; }
.site-header nav { gap: 5px; }
.nav-button { min-width: 44px; padding-inline: 8px; border-color: #c0ceba; border-width: 1px; border-radius: 11px; background: #fff; font-size: 13px; }
.catalog-intro { position: relative; isolation: isolate; overflow: hidden; margin-top: 20px; padding: 21px 22px 21px; border: 1px solid #afc1a4; border-radius: 23px; background: #e7eedf; box-shadow: 0 3px 0 #d7e1d0; }
.intro-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .07em; color: #476040; }
.intro-eyebrow > span { width: 5px; height: 5px; border-radius: 50%; background: #52744d; }
.catalog-intro h1 { position: relative; z-index: 1; margin: 13px 0 9px; font-size: clamp(27px, 7.4vw, 34px); line-height: 1.35; letter-spacing: -.025em; font-weight: 850; }
.catalog-intro h1 em { font-style: normal; color: #4a7047; }
.catalog-intro > p { margin: 0; font-size: 13px; color: #52664b; line-height: 1.8; }
.intro-link { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; margin-top: 7px; font-size: 13px; font-weight: 700; color: #365434; }
.intro-link > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff9; border: 1px solid #a5b99a; }
.intro-decoration { position: absolute; right: 15px; top: 52px; width: 92px; height: 105px; z-index: -1; opacity: .9; transform: rotate(9deg); }
.intro-window { position: relative; display: flex; gap: 3px; padding: 11px; width: 88px; height: 94px; border: 1px solid #9db28f; border-radius: 17px; background: #f9fbf3; box-shadow: 6px 7px 0 #c7d5bc; }
.intro-window > i { width: 4px; height: 4px; background: #8da37b; border-radius: 50%; }
.intro-window b { position: absolute; top: 27px; left: 15px; color: #43653b; font-size: 37px; font-family: Georgia, serif; line-height: 1; }
.intro-window b span { position: absolute; font-size: 21px; right: -16px; top: -6px; color: #b5995e; }
.resources { margin-top: 29px; }
.section-heading { margin-bottom: 15px; align-items: end; }
.section-kicker { font-size: 9px; letter-spacing: .16em; color: #7a8875; margin-bottom: 3px; }
.section-heading h2 { display: flex; align-items: center; gap: 7px; font-size: 24px; letter-spacing: -.02em; }
.heading-dot { width: 6px; height: 6px; border-radius: 50%; background: #85a670; }
.collection-note { font-size: 12px; color: #7a8877; padding-bottom: 3px; }
.search-box { min-height: 54px; padding-left: 15px; background: #fff; border: 1.5px solid #aabda2; border-radius: 14px; }
.search-box input { font-size: 14px; }
.search-box button { min-height: 44px; border-radius: 10px; border: 1px solid #bfd0b6; background: #eaf0e4; font-size: 13px; }
.catalog-filters { display: grid; grid-template-columns: 1fr 1.15fr 1.2fr 1fr 1fr; gap: 6px; margin: 12px 0; }
.catalog-filters .filter-chip { min-height: 48px; min-width: 0; padding: 8px 2px; border-radius: 11px; border-width: 1px; border-color: #bcccb4; font-size: 13px; background: #fff; }
.catalog-filters .filter-chip.active { color: #fff; background: #2b6048; border-color: #214d39; box-shadow: 0 2px 0 #123b2017; }
.catalog-status { margin: 0 0 12px; font-size: 12px; color: #778473; }
.catalog-status #resultCount { font-size: 12px; font-weight: 600; color: #566e51; }
.resource-list { gap: 15px; }
.resource-card { grid-template-columns: 64px minmax(0, 1fr); gap: 13px 13px; position: relative; padding: 18px 16px 14px; border: 1px solid #c0ceba; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 #dfe6d9; }
.resource-card--game { border-color: #a8bc97; background: #fdfefb; }
.resource-card--beauty { border-color: #d8c9c8; }
.resource-card--pending { background: #fbfcfa; }
.project-icon { width: 64px; height: 64px; border-radius: 17px; object-fit: contain; background: #fff; border: 1px solid #e5e9e1; box-shadow: 0 3px 9px #223c3010; }
/* Display the exact icon region from the user's prior public mini-program screenshot. No redraw. */
.project-icon--zhuangdui { object-fit: none; object-position: -52px -237px; border: 0; border-radius: 17px; background: #fff; }
.resource-info .resource-kind { display: block; margin: 0 0 4px; padding: 0; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .035em; color: #7e8d73; border: 0; border-radius: 0; background: none; }
.resource-card--beauty .resource-kind { color: #a77985; }
.resource-info h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.45; letter-spacing: -.02em; }
.resource-info > .resource-description { margin: 6px 0 0; font-size: 14px; color: #62705f; line-height: 1.75; }
.resource-tags { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.tag-row { gap: 6px; }
.tag-row span { border: 0; border-radius: 5px; padding: 3px 6px; background: #f0f3ec; font-size: 11px; color: #6a7c5f; line-height: 1.6; }
.resource-card--beauty .tag-row span { background: #f8f0f2; color: #98737e; }
.feature-badge { font-size: 11px; color: #758267; }
.resource-footer { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid #e0e7da; }
.resource-card--beauty .resource-footer { border-color: #eee4e6; }
.resource-status { grid-column: auto; padding: 0; border: 0; color: #7c8876; font-size: 12px; font-weight: 500; line-height: 1.8; }
.resource-cta { grid-column: auto; width: auto; min-height: 48px; gap: 14px; padding: 11px 13px; border-radius: 11px; border: 1px solid #244d38; font-size: 13px; box-shadow: none; }
.resource-cta span { font-size: 17px; }
.resource-cta.secondary-entry { color: #335b3d; background: #f0f5eb; border-color: #adc3a0; }
.resource-card--beauty .resource-cta.secondary-entry { color: #8a5969; border-color: #d6b5bf; background: #fbf1f4; }
.resource-card--beauty .resource-cta.secondary-entry:hover { background: #f6e6ec; }
.resource-card--pending .resource-cta.secondary-entry { border-color: #c5cdbf; background: #f4f6f0; color: #718266; }
.resource-meta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 11px 12px; border: 1px solid #d9e3cf; border-radius: 10px; background: #f3f7ee; }
.resource-meta > div + div { padding-left: 12px; border-left: 1px solid #d6e0cd; }
.resource-meta dt { margin: 0 0 3px; font-size: 11px; line-height: 1.6; color: #718067; }
.resource-meta dd { margin: 0; font-size: 14px; line-height: 1.65; font-weight: 700; color: #355535; overflow-wrap: anywhere; }
.miniapp-instruction { grid-column: 1 / -1; margin: -2px 0 0; font-size: 12px; line-height: 1.8; color: #8c6673; }
.miniapp-instruction span { color: #85767a; font-size: 11px; }
.card-notice { grid-column: 1 / -1; margin: -1px 0 0; padding: 8px 10px; border: 1px solid #e4d8b9; border-radius: 8px; background: #faf6e9; color: #8a754b; font-size: 12px; line-height: 1.7; text-align: left; }
.how-to { margin-top: 22px; }
.game-rules { background: #fff; border: 1px solid #c4d0bb; border-radius: 15px; }
.game-rules summary { font-size: 13px; }
.game-rules summary > span { margin-right: 9px; font-weight: 750; color: #334e36; }
.game-rules .play-steps { padding: 12px; gap: 8px; }
.game-rules .play-steps article { border: 0; background: #f3f6ed; padding: 14px 12px 14px 54px; }
.game-rules .step-num { top: 14px; left: 12px; width: 29px; height: 29px; font-size: 11px; }
.game-rules .play-steps h3 { font-size: 14px; }
.game-rules .play-steps p { padding: 0; font-size: 13px; }
.invite-strip { margin-top: 20px; padding: 19px 16px; background: #eceee2; border-color: #c1c7ab; box-shadow: none; border-radius: 18px; }
.invite-strip h2 { font-size: 17px; }
.invite-strip p { font-size: 13px; }
.invite-strip .button { font-size: 14px; background: #fffefa; border-width: 1px; border-color: #b3b79c; min-height: 48px; }
.site-footer { border-top: 1px solid #d5decf; gap: 14px; }
.footer-brand { font-size: 16px; }
.footer-tagline { margin-left: auto; font-size: 10px; letter-spacing: .03em; }
.footer-links { gap: 9px; }
.footer-links button { background: #fbfdf8; border: 1px solid #c0ceb7; font-size: 13px; }
.site-footer > p { color: #6c7b65; font-size: 12px; }
.resource-detail-head img { width: 64px; height: 64px; border-radius: 17px; }
.resource-detail-head .dialog-copy { font-size: 14px; }
@media (max-width: 359px) {
  .wrap { width: calc(100% - 24px); }
  .site-header { min-height: 82px; }
  .brand img { width: 36px; height: 36px; }
  .brand-copy strong { font-size: 18px; }
  .brand-copy small { font-size: 9px; }
  .brand { gap: 7px; }
  .nav-button { min-width: 40px; padding-inline: 6px; font-size: 12px; }
  .catalog-intro { padding: 20px 16px 15px; }
  .catalog-intro h1 { font-size: 27px; }
  .intro-decoration { display: none; }
  .catalog-filters .filter-chip { font-size: 12px; }
  .resource-card { padding: 16px 13px 13px; gap: 12px 11px; }
  .resource-info h3 { font-size: 17px; }
  .resource-info > .resource-description { font-size: 13px; }
  .resource-cta { padding-inline: 10px; gap: 9px; }
  .resource-status { font-size: 11px; }
  .footer-tagline { width: auto; padding-left: 0; }
}