/* Orbace Sudoku — consolidated game card (docs/plans/2026-07-15-consolidated-game-card-design.md).
 * Namespaced under .osgc- (Orbace Sudoku Game Card). Wraps whatever a call site
 * mounts inside it (.og-wrap / .osr-layout / the legacy Play-page .board-wrap)
 * with a shared bordered shell, a metadata header, and a brand slot. Retires
 * the one-off .v1-home-theater (css/styles.css).
 */
.osgc-card{background:var(--ivory);border:1px solid var(--line);border-radius:16px;
  padding:24px;box-shadow:0 18px 40px -24px rgba(43,39,35,.35)}

/* Seal badge (弈/谱 glyphs) — owned here rather than assumed from styles.css,
   since this component's own JS (orbace-game-card.js, orbace-score-card.js)
   emits <span class="seal ..."> and some hosts (e.g. /play, a deliberately
   styles.css-free page) don't load styles.css at all. Fallback values in
   var() keep this correct even where --seal/--cjk aren't bridged; identical
   to styles.css's rule where both load, so no visual change there. */
.seal{display:inline-flex;align-items:center;justify-content:center;background:var(--seal, #c41e3a);color:#fff;
  font-family:var(--cjk, 'Noto Serif SC','Songti SC','SimSun',serif);font-weight:700;border-radius:8px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 1px 2px rgba(139,26,43,.35);
  user-select:none;flex-shrink:0}
.seal.lg{width:72px;height:72px;font-size:38px;border-radius:12px}
.seal.md{width:48px;height:48px;font-size:26px}
.seal.sm{width:30px;height:30px;font-size:16px;border-radius:6px}
.seal.outline{background:transparent;color:var(--mid);box-shadow:inset 0 0 0 2px var(--mid)}
.osgc-header{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-bottom:18px}
.osgc-meta-line1{font-family:var(--serif);font-weight:600;font-size:16px;color:var(--ink)}
.osgc-meta-line2{font-family:var(--mono);font-size:13px;color:var(--mid);margin-top:5px}
.osgc-brand{flex-shrink:0}
.osgc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.osgc-body{display:flex;flex-direction:column;align-items:center}
/* UAT feedback (2026-09-27): "web su-pu replay seems regressed" — grid and
 * move list rendering stacked instead of side by side on a genuinely wide
 * viewport. Root cause: .osr-layout (the board+move-list flex row this
 * body wraps in replay mode, see file header) is itself display:flex with
 * its own internal wrap logic that needs the REAL available width to
 * decide whether to sit side-by-side or stack — but align-items:center
 * above sizes a flex-column's single child by shrink-to-fit content width,
 * not by stretching to the parent's full width. That starves .osr-layout
 * of the width it needs to fit board (540) + list (min 220) + gap on one
 * line, so it wraps well before the card actually runs out of room. Only
 * replay mode is affected (play mode's .og-wrap content already fits its
 * card width in every checked case — Home hero, Home Tea Moment, /play —
 * so left as-is rather than risking an unrequested layout change there). */
.osgc-card--replay .osgc-body{align-items:stretch}

@media (max-width:720px){
  .osgc-card{padding:16px}
  .osgc-header{margin-bottom:12px}
}