/* Explore page: the same off-white foundation as the rest of the site. */
.explore-page {
  --bg: #f3f2ee; --panel: #fcfcfb; --panel-2: #f3f2ee; --line: #e4e3dd; --text: #14151f; --muted: #5d6175;
  color-scheme: light; background: #f3f2ee; color: #14151f;
}
.explore { max-width: 1080px; margin: 0 auto; padding: 56px max(16px, 4vw) 40px; }
.xp-intro { text-align: center; margin-bottom: 36px; }
.xp-intro h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 10px; color: #14151f; }
.xp-intro p { margin: 0 auto; max-width: 520px; color: #5d6175; font-size: 17px; }

.featured { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: center; background: #fcfcfb; border: 1px solid #e4e3dd; border-radius: 22px; padding: 18px; box-shadow: 0 1px 2px rgba(20, 21, 31, 0.05), 0 24px 60px -36px rgba(20, 21, 31, 0.35); }
.feat-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #000; }
.feat-stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.feat-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 6, 15, 0.5); backdrop-filter: blur(3px); }
.feat-info { padding: 6px 10px 6px 0; }
.feat-tag { display: inline-block; font-size: 11.5px; font-weight: 700; color: #0a1a00; background: #9bf00b; border-radius: 6px; padding: 3px 8px; }
.feat-info h2 { margin: 12px 0 8px; font-size: 30px; letter-spacing: -0.02em; color: #14151f; }
.feat-info p { margin: 0 0 18px; color: #5d6175; font-size: 15.5px; }
.feat-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.feat-actions .btn { display: inline-flex; align-items: center; text-decoration: none; }
.feat-actions .btn.ghost { color: #14151f; border-color: #dcdbd4; }

.ideas { margin-top: 56px; }
.ideas h2 { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 6px; color: #14151f; }
.ideas-sub { color: #5d6175; margin: 0 0 24px; }
.explore-page .card { background: #fcfcfb; box-shadow: 0 1px 2px rgba(20, 21, 31, 0.05), 0 8px 24px -16px rgba(20, 21, 31, 0.25); }
.explore-page .card:hover { box-shadow: 0 2px 4px rgba(20, 21, 31, 0.06), 0 16px 32px -16px rgba(16, 124, 16, 0.4); }
.explore-page .card-tags i { color: #0e7a0e; border-color: #e4e3dd; background: #f3f2ee; }
.feat-controls { margin: -8px 0 18px !important; font-size: 13.5px !important; color: #80849a !important; }
.explore-page .card-two { cursor: default; }
.explore-page .card-two:hover { transform: none; }
.explore-page .card-two .card-art { cursor: pointer; }
.explore-page .card-two.on { border-color: #107c10; box-shadow: 0 0 0 2px rgba(16, 124, 16, 0.25), 0 8px 24px -16px rgba(20, 21, 31, 0.25); }
.card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.card-play { display: inline-flex; align-items: center; }
.card-make { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: 13.5px; color: #0b6a0b; cursor: pointer; }
.card-make:hover { text-decoration: underline; text-underline-offset: 3px; }
.card-go { display: block; font-style: normal; font-weight: 700; font-size: 13.5px; color: #0b6a0b; margin-top: 12px; }
.explore-page .footer { color: #8b8fa1; border-top: 1px solid #e4e3dd; margin-top: 40px; padding: 28px 20px 36px; }

@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } .feat-info { padding: 4px 6px 8px; } }

/* Explore: search, genre chips, and the games other people shared */
.xp-intro { margin-bottom: 28px; }
.xp-search { position: relative; max-width: 520px; margin: 22px auto 0; }
.xp-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #80849a; pointer-events: none; }
.xp-search input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px 0 44px; border-radius: 999px; border: 1px solid #dcdbd4; background: #fcfcfb; color: #14151f; font: inherit; font-size: 16px; box-shadow: 0 1px 2px rgba(20, 21, 31, 0.05); }
.xp-search input:focus { outline: 2px solid rgba(16, 124, 16, 0.45); outline-offset: 2px; border-color: #107c10; }
.xp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; max-width: 760px; }
.xp-chip { border: 1px solid #dcdbd4; background: #fcfcfb; color: #14151f; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.xp-chip:hover { border-color: #107c10; }
.xp-chip[aria-pressed="true"] { background: #14151f; border-color: #14151f; color: #fff; }
.xp-chip:focus-visible { outline: 2px solid #107c10; outline-offset: 2px; }

.xp-sec { margin-top: 56px; }
.xp-sec h2 { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 6px; color: #14151f; }
.xp-sub { color: #5d6175; margin: 0 0 24px; }
.xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.xcard { display: block; text-decoration: none; color: inherit; background: #fcfcfb; border: 1px solid #e4e3dd; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 21, 31, 0.05), 0 8px 24px -16px rgba(20, 21, 31, 0.25); transition: transform 0.18s, box-shadow 0.18s; }
.xcard:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20, 21, 31, 0.06), 0 16px 32px -16px rgba(16, 124, 16, 0.4); }
.xcard:focus-visible { outline: 2px solid #107c10; outline-offset: 2px; }
.xc-art { position: relative; aspect-ratio: 16 / 10; background: #0b0c17; overflow: hidden; }
.xc-art svg, .xc-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xc-rank { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 800; color: #0a1a00; background: #9bf00b; border-radius: 6px; padding: 3px 8px; }
.xc-body { padding: 12px 14px 14px; }
.xc-title { margin: 0; font-size: 17px; letter-spacing: -0.02em; line-height: 1.2; color: #14151f; }
.xc-by { margin: 3px 0 0; font-size: 13px; font-weight: 600; color: #5d6175; }
.xc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12.5px; color: #80849a; }
.xc-foot i { font-style: normal; font-weight: 600; color: #0e7a0e; border: 1px solid #e4e3dd; background: #f3f2ee; border-radius: 6px; padding: 2px 8px; }
.xp-empty { margin: 40px 0 0; padding: 32px 16px; text-align: center; color: #5d6175; border: 1px dashed #dcdbd4; border-radius: 18px; }
.xp-cta { margin-top: 56px; text-align: center; padding: 36px 16px; border-radius: 22px; background: #14151f; color: #fff; }
.xp-cta h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.02em; color: #fff; }
.xp-cta p { margin: 0 0 18px; color: #c9cbd8; }
.xp-cta .btn { display: inline-flex; text-decoration: none; }

.featured.wait { visibility: hidden; } /* until the stage knows which game it opens on (public/explore.js) */

.featured[hidden] { display: none; }
ol.xp-grid, ol.bd-list { list-style: none; margin: 0; padding: 0; }
.xp-sec .bd-list { max-width: 820px; }