/* Sample Games page: the same off-white foundation as the rest of the site. */
.samples-page {
  --bg: #f3f2ee; --panel: #fcfcfb; --panel-2: #f3f2ee; --line: #e4e3dd; --text: #14151f; --muted: #5d6175;
  color-scheme: light; background: #f3f2ee; color: #14151f;
}
.samples { max-width: 1080px; margin: 0 auto; padding: 56px max(16px, 4vw) 40px; }
.sg-intro { text-align: center; margin-bottom: 36px; }
.sg-intro h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 10px; color: #14151f; }
.sg-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; }
.samples-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); }
.samples-page .card:hover { box-shadow: 0 2px 4px rgba(20, 21, 31, 0.06), 0 16px 32px -16px rgba(16, 124, 16, 0.4); }
.samples-page .card-tags i { color: #0e7a0e; border-color: #e4e3dd; background: #f3f2ee; }
.card-go { display: block; font-style: normal; font-weight: 700; font-size: 13.5px; color: #0b6a0b; margin-top: 12px; }
.samples-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; } }