/* games-hub + games-type page styles (loaded after app-common.css). Shared by both
   /math-games/ and /math-games/:typeSlug/ — the two pages are close enough in layout
   (crumb + header + grade filter + a card grid) that one sheet covers both, same as how
   grade.css/topic.css/exam.css each cover one page family. */

.games-wrap{padding:20px 24px;flex:1;opacity:0}

.games-wrap.ready{opacity:1}

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(41,40,39,.5);flex-wrap:wrap;position:sticky;top:0;z-index:3;background:#F5F2EF;padding:16px 0;margin:-20px 0 24px}

.crumb-sep{color:rgba(41,40,39,.3)}

.gsh-icon img{width:32px;height:32px;display:block;object-fit:contain}

.games-intro{font-size:14px;line-height:20px;color:rgba(41,40,39,.7);margin-bottom:20px;max-width:640px}

.games-type-desc{font-size:14px;line-height:22px;color:rgba(41,40,39,.85);margin-bottom:20px;max-width:640px}

/* Grade filter chips — same visual language as the grade/topic switcher pills. */
.gf-bar{margin-bottom:24px}

.gs-chips{display:flex;flex-wrap:wrap;gap:6px}

.gs-pill{padding:5px 14px;border:1px solid rgba(0,0,0,.12);background:none;font-family:'UntitledSans';font-size:12px;font-weight:500;color:#97948E;cursor:pointer;border-radius:20px;white-space:nowrap;flex-shrink:0}

.gs-pill:hover{border-color:#1C1917;color:#1C1917}

.gs-pill.active{background:#1C1917;color:#fff;border-color:#1C1917}

/* Hub — one full-width section per type (Solo / Duel / 1v1), stacked. Each is a
   container, not a single link: `.gtc-head` (icon/name/desc/count, one horizontal row)
   is the link to the type page, and `.gtc-card-grid` below it is the real illustrated
   game-tile grid (GameCard, same tile as the type pages) for every game of that type —
   Manasa wanted the actual cards back, listed inside these sections rather than a plain
   name list. Full-width (not 3-up side by side) so the tile grid has room to breathe. */
.game-type-grid{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}

/* Each section's card, head (icon/name/desc/count) and tile grid are shared across the
   games + puzzles hubs — see .enr-section* in app-common.css. */

/* Type page — game card grid. Illustrated-icon tiles (SplashLearn reference, illustrated
   rather than screenshots per Manasa's steer): the icon panel is the card, title + grade
   caption underneath, no competing paragraph of text. */
.game-card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:24px;align-items:start}

/* The game card (box, media panel, footer) is fully shared — see .enr-card* in
   app-common.css. */

.games-empty{font-size:13px;color:rgba(41,40,39,.6);padding:24px 0;text-align:center}

/* Game detail page (/math-games/<slug>/) — hero card (icon + title + tags + real
   How-to-Play copy + Play CTA). Reuses .games-wrap/.crumb/.grade-section-title from the
   shared sheets; these are the page-specific pieces. */
.gd-wrap{max-width:760px;margin:0 auto}

.gd-hero{display:flex;gap:20px;background:#fff;border-radius:12px;padding:24px;margin-bottom:20px}

.gd-icon-panel{display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:10px;background:var(--cb,#F5F2EF);flex-shrink:0}

.gd-icon{width:72px;height:72px;display:block}

.gd-thumb{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px}

.gd-hero-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}

.gd-tags{display:flex;flex-wrap:wrap;gap:8px}

.gd-tag{padding:5px 14px;border:1px solid rgba(0,0,0,.12);border-radius:20px;font-size:12px;font-weight:500;color:#57534E;white-space:nowrap}

.gd-tag-type{background:#1C1917;color:#fff;border-color:#1C1917}

.gd-howto{background:#fff;border-radius:12px;padding:24px}

.gd-howto-body{font-size:14px;line-height:1.7;color:#43413E;margin-top:10px}

.gd-skills{margin-top:16px}

.gd-skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:14px}

.gd-skill-item{background:var(--cb,#F5F2EF);border-radius:8px;padding:14px 16px}

.gd-skill-label{font-size:11px;line-height:16px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cd,#57534E);margin-bottom:6px}

.gd-skill-body{font-size:13px;line-height:1.6;color:#43413E}

/* The pre-Play embed panel (poster/scrim/trigger/lock/note) is shared — see .enr-embed*
   in app-common.css. Games keep one mobile-only override below: a 4/3 aspect (vs the
   shared 16/9) — it lives here because only games pages load games.css, so it applies to
   games detail only. */
@media(max-width:767px){
  .enr-embed-panel{aspect-ratio:4/3;max-height:none;border-radius:12px}
}

/* Shared lr-cta variants games needs beyond app-common.css. */
.lr-cta.solid{background:#1C1917;color:#F9F7F5;border-color:#1C1917}

.lr-cta.solid:hover{background:#38322E;color:#F9F7F5}

.lr-cta.disabled{background:#F5F2EF;color:#97948E;border-color:rgba(41,40,39,.18);cursor:not-allowed;box-shadow:none}

/* About-unit (FAQ) — same visual language as the exam page's About section. */
.about-section{margin-bottom:24px}

.ch-row-num{font-size:12px;font-weight:500;color:rgba(41,40,39,.5);width:16px;flex-shrink:0;text-align:center}

.ch-ic{width:34px;height:34px;border-radius:50%;background:#F5F2EF;display:flex;align-items:center;justify-content:center}

.ch-row-lessons{background:var(--cb,#F9F7F5);padding:12px 24px 16px;border-top:1px solid #EDE8E3;margin-top:-1px;overflow:hidden}

/* NOTE: .about-topic* / .about-faq-* (the exam-page AboutUnit styles) were removed here —
   AboutUnit is only rendered on exam pages (exam.css), never on games pages. */

/* Right rail — "Other Formats" quick-switch, same pattern as the exam page's Other Exams. */
.rp-formats{background:#fff;border:1px solid #EDE8E3;border-radius:8px;overflow:hidden}

.rf-title{font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#97948E;padding:12px 16px;border-bottom:1px solid #EDE8E3}

.rf-item{display:block;padding:12px 16px;border-bottom:1px solid #EDE8E3;font-size:13px;line-height:20px;color:rgba(41,40,39,.7);text-decoration:none}

.rf-item:hover{background:#FAF1E6;color:#1C1917}

.rf-item.active{color:#1C1917;font-weight:500;background:#FAF1E6}

.rf-item:last-child{border-bottom:none}

/* "Explore Enrichment" cross-vertical nav (app-shell.js's EnrichmentCrossNav) — a
   colored icon per row, unlike the plain-text "Other Formats"/"More X Games" rows
   above, so this block reads as more prominent. */
.rp-formats-icons .rf-item{display:flex;align-items:center;gap:10px}

.rf-icon{width:18px;height:18px;flex-shrink:0;display:flex}

.rf-icon svg{width:18px;height:18px;display:block}

/* Right rail — "Resources" list (ResourcesRail, app-shell.js). Copied verbatim from
   grade.css: the component only ever ships `variant="grade"`'s classnames
   (.rp-resources/.rp-res-*), but this sheet never defined them — every icon in this
   list was rendering unstyled, at full raw SVG size, until this was added. */
.rp-resources{background:#fff;border:1px solid #EDE8E3;border-radius:8px;padding:0 16px}

.rp-res-title{font-size:11px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#97948E;padding:16px 0 12px}

.rp-res-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #EDE8E3;text-decoration:none;color:#1C1917;font-size:14px;line-height:20px;font-weight:500}

.rp-res-item:hover .rp-res-name{text-decoration:underline}

.rp-res-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.rp-res-icon svg{width:18px;height:18px;display:block}

@media(max-width:1024px){
  .shell{display:block;overflow-y:auto}
  .main{overflow-y:visible}
  .rightpanel{border-left:none;border-top:1px solid #EDE8E3;background-image:none;overflow-y:visible}
}

@media(max-width:767px){
  .games-wrap{padding:16px}
  .game-type-grid{gap:12px}
  .gs-chips{margin:0 -16px;padding:0 16px 2px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .game-card-list{grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:12px}
  .gd-hero{flex-direction:column}
  .gd-icon-panel{width:100%;height:140px}
  .gd-skills-grid{grid-template-columns:1fr}
}