/* ============================================================
 * Qbit Games — styles (Games G-A, 2026-06-23)
 * Uses the app's CSS variables so it themes light/dark automatically.
 * Brand accent = purple (matches the Games mockup). Class prefix qg-.
 * ============================================================ */
:root { --qg-accent: var(--blue-500, #3b82f6); --qg-accent-strong: var(--blue-600, #2563eb); --qg-accent-soft: rgba(59, 130, 246, 0.12); }

.qg-wrap { max-width: 560px; margin: 0 auto; padding: 8px 0 110px; }

/* ---- hub ---- */
.qg-hub-head { padding: 4px 4px 8px; }
.qg-title { font-size: 1.6rem; font-weight: 700; margin: 0; }
.qg-sub { font-size: 0.9rem; color: var(--text-secondary); margin: 4px 0 0; }
.qg-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
/* Section headers for the combined hub: "Self-Play & Compete Against Others"
   (graphical) + "Play with Qbit" (AI-hosted). (2026-06-30) */
.qg-section-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 24px 4px 0; }
.qg-section-title:first-of-type { margin-top: 12px; }
.qg-section-sub { font-size: 0.84rem; color: var(--text-secondary); margin: 3px 4px 0; }
.qg-card { display: flex; flex-direction: column; align-items: stretch; width: 100%; text-align: left; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
/* Game banner sits flush at the top of the card: top corners rounded to match
   the card, bottom corners square (the card's overflow:hidden clips it). The
   title is baked into the art, so English/default users get the titled banner
   and everyone else the textless one (chosen in games.js renderHub). (2026-06-26) */
.qg-card-banner { display: block; width: 100%; height: auto; border-radius: 14px 14px 0 0; }
.qg-card-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; }
.qg-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.qg-card:active { transform: translateY(0); }
.qg-card-icon { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--qg-accent-soft); color: var(--qg-accent-strong); display: flex; align-items: center; justify-content: center; }
.qg-card-icon svg { width: 23px; height: 23px; }
.qg-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qg-card-name { font-weight: 600; font-size: 1rem; color: var(--text); }
.qg-card-blurb { font-size: 0.82rem; color: var(--text-secondary); }
.qg-card-right { flex: none; display: flex; align-items: center; gap: 8px; }
.qg-flame { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; font-weight: 700; color: #d8772f; }
.qg-flame svg { width: 15px; height: 15px; }
.qg-status { font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--qg-accent); border-radius: 999px; padding: 5px 13px; }
.qg-status.done { background: var(--bg-secondary); color: var(--text-secondary); }
.qg-foot { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin-top: 18px; }
.qg-loading { text-align: center; color: var(--text-secondary); padding: 40px 0; }

/* ---- in-game shared ---- */
.qg-gamebar { display: flex; align-items: center; gap: 8px; padding: 4px 0 12px; }
.qg-back { width: 34px; height: 34px; border: none; background: var(--bg-secondary); border-radius: 9px; color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qg-back svg { width: 18px; height: 18px; }
.qg-gamebar-title { font-size: 1.1rem; font-weight: 700; }
.qg-gamebar-spacer { flex: 1; }
.qg-instr { font-size: 0.9rem; color: var(--text); margin: 2px 0 12px; line-height: 1.45; }
.qg-cc-meta { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 12px; }
.qg-mistakes { color: var(--text-secondary); }
.qg-btn { width: 100%; padding: 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 0.95rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.qg-btn-primary { background: var(--qg-accent-strong); border-color: transparent; color: #fff; }
.qg-btn:disabled { opacity: 0.5; cursor: default; }

/* ---- category-connect ---- */
/* 4×4 board: 4 categories × 4 items = 16 tiles (Jimmy 2026-06-30). Tiles wrap
   long words + shrink type so they fit four across on a phone. */
.qg-cc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.qg-tile { min-height: 54px; padding: 6px 3px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 0.72rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: transform .1s ease; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.12; overflow-wrap: anywhere; hyphens: auto; }
.qg-tile.sel { background: var(--qg-accent); border-color: var(--qg-accent); color: #fff; }
.qg-tile.done { opacity: 0; pointer-events: none; }
.qg-tile:active { transform: scale(0.97); }
.qg-cc-solved { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.qg-cc-band { background: var(--qg-accent-soft); border-radius: 10px; padding: 8px 12px; }
.qg-cc-band b { display: block; font-size: 0.85rem; color: var(--qg-accent-strong); }
.qg-cc-band span { font-size: 0.8rem; color: var(--text-secondary); }

/* ---- word ladder ---- */
.qg-wl { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.qg-wl-fixed { text-align: center; font-weight: 700; letter-spacing: 3px; padding: 12px; border-radius: 10px; background: var(--qg-accent-strong); color: #fff; }
.qg-wl-rung { display: flex; flex-direction: column; gap: 3px; }
.qg-wl-input { text-align: center; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; padding: 12px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text); font-family: inherit; outline: none; }
.qg-wl-input:focus { border-color: var(--qg-accent); }
.qg-wl-input.bad { border-color: #e24b4a; animation: qg-shake .3s; }
.qg-wl-word { text-align: center; font-weight: 700; letter-spacing: 3px; padding: 12px; border-radius: 10px; background: rgba(99,153,34,0.14); color: #3b6d11; }
.qg-wl-clue { text-align: center; font-size: 0.76rem; color: var(--text-muted); }
@keyframes qg-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ---- memory match ---- */
.qg-mm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.qg-mm-card { aspect-ratio: 3/4; border-radius: 11px; border: 1.5px solid var(--border); background: var(--qg-accent); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; line-height: 1; }
.qg-mm-card.up { background: var(--bg-card); }
.qg-mm-card.matched { background: rgba(99,153,34,0.14); border-color: rgba(99,153,34,0.4); }
.qg-mm-card span { pointer-events: none; }

/* ---- tic-tac-toe ---- */
/* You're ✕; Qbit's move is the little Qbit creature himself (qbit-icon.png;
   de-pawed 2026-07-07). Cells are big square tap targets so it plays well
   on a phone. (Jimmy 2026-06-30.) */
.qg-ttt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 340px; margin: 8px auto 0; }
.qg-ttt-cell { aspect-ratio: 1 / 1; border: 2px solid var(--border); border-radius: 14px; background: var(--bg-card); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-family: inherit; transition: transform .1s ease, background .1s ease; }
.qg-ttt-cell:not([disabled]):hover { background: var(--qg-accent-soft); }
.qg-ttt-cell:not([disabled]):active { transform: scale(0.96); }
.qg-ttt-cell[disabled] { cursor: default; }
.qg-ttt-x { font-size: 2.6rem; font-weight: 800; color: var(--qg-accent-strong); line-height: 1; }
.qg-ttt-qbit { width: 58%; height: 58%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* ---- sudoku ---- */
/* 9×9 daily grid. Givens are shaded + bold in the text colour; YOUR entries are
   accent-coloured so they're distinct; wrong entries (differ from the solution)
   go red for instant feedback. Thicker .bl/.bt borders mark the 3×3 boxes. The
   number pad sits below for thumb reach. (Jimmy 2026-06-30.) */
.qg-sud-grid { display: grid; grid-template-columns: repeat(9, 1fr); max-width: 400px; margin: 8px auto 0; aspect-ratio: 1 / 1; border: 2.5px solid var(--text); border-radius: 6px; overflow: hidden; }
.qg-sud-cell { aspect-ratio: 1 / 1; border: 0.5px solid var(--border); background: var(--bg-card); color: var(--qg-accent-strong); font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-family: inherit; }
.qg-sud-cell.bl { border-left: 2px solid var(--text); }
.qg-sud-cell.bt { border-top: 2px solid var(--text); }
.qg-sud-cell.given { color: var(--text); font-weight: 800; background: var(--bg-secondary); cursor: default; }
.qg-sud-cell.sel { background: var(--qg-accent-soft); box-shadow: inset 0 0 0 2px var(--qg-accent); }
.qg-sud-cell.bad { color: #e24b4a; }
.qg-sud-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 400px; margin: 14px auto 0; }
.qg-sud-key { padding: 13px 0; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 1.2rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: transform .1s ease; }
.qg-sud-key:active { transform: scale(0.95); }
.qg-sud-erase { color: var(--text-secondary); }

/* ---- results ---- */
.qg-result { text-align: center; padding: 16px 8px; }
.qg-result-emoji { font-size: 3rem; }
.qg-result-title { font-size: 1.5rem; font-weight: 700; margin: 6px 0 2px; }
.qg-result-line { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 16px; }
.qg-result-stats { display: flex; justify-content: center; gap: 28px; margin-bottom: 16px; }
.qg-stat { display: flex; flex-direction: column; }
.qg-stat-num { font-size: 1.8rem; font-weight: 800; color: var(--qg-accent-strong); }
.qg-stat-lbl { font-size: 0.74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.qg-tip { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.82rem; color: var(--text-secondary); background: var(--qg-accent-soft); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; }
.qg-tip svg { width: 16px; height: 16px; color: var(--qg-accent-strong); flex: none; }
.qg-result-actions { display: flex; flex-direction: column; gap: 9px; }
.qg-result-actions-row { display: flex; gap: 9px; }
.qg-result-actions-row .qg-btn { flex: 1; }
.qg-share-status { min-height: 1.1em; margin: 11px 0 0; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--qg-accent-strong); }

/* ---- leaderboard / standings ---- */
.qg-standings-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.qg-standings-btn svg { width: 18px; height: 18px; color: var(--qg-accent-strong); }
.qg-standings { display: flex; flex-direction: column; gap: 16px; }
.qg-board { margin-top: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); padding: 12px 14px; }
.qg-standings .qg-board { margin-top: 0; }
.qg-board-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.qg-board-head svg { width: 18px; height: 18px; color: var(--qg-accent-strong); flex: none; }
.qg-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.qg-board-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 9px; font-size: 0.9rem; }
.qg-board-row + .qg-board-row { border-top: 1px solid var(--border); }
.qg-board-row.me { background: var(--qg-accent-soft); border-top-color: transparent; font-weight: 700; }
.qg-board-rank { flex: none; width: 28px; text-align: center; font-weight: 700; color: var(--text-secondary); }
.qg-board-row.me .qg-board-rank { color: var(--qg-accent-strong); }
.qg-board-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.qg-board-score { flex: none; font-weight: 700; color: var(--qg-accent-strong); }
.qg-board-time { flex: none; font-size: 0.8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.qg-board-empty, .qg-board-loading { text-align: center; color: var(--text-secondary); font-size: 0.85rem; padding: 14px 0; margin: 0; }
/* Per-game standings switcher (Jimmy 2026-06-26) */
.qg-board-tabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.qg-board-tab { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.qg-board-tab.active { background: var(--qg-accent); border-color: var(--qg-accent); color: #fff; }
.qg-board-cap { font-size: 0.8rem; color: var(--text-secondary); margin: -2px 2px 8px; }

/* ---- my progress / history ---- */
/* Per-game trend: a bar sparkline of recent scores + best/streak/played, with
   an improving/steady/off chip. Reuses .qg-board cards. (Jimmy 2026-06-30.) */
.qg-trend { margin-left: auto; font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.qg-trend.up { color: #2f8f3e; background: rgba(99, 153, 34, 0.14); }
.qg-trend.down { color: #c1502f; background: rgba(226, 75, 74, 0.12); }
.qg-trend.flat { color: var(--text-secondary); background: var(--bg-secondary); }
/* (Sparkline rules removed Jimmy 2026-07-11 — progress cards are
   stats + trend chip only.) */
.qg-hist-stats { display: flex; justify-content: space-around; gap: 8px; }
.qg-hist-stats > div { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.qg-hist-num { font-size: 1.15rem; font-weight: 800; color: var(--qg-accent-strong); }
.qg-hist-lbl { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }