/* ============================================================
 * 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; }
.qg-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.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 ---- */
.qg-cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.qg-tile { padding: 16px 8px; border-radius: 11px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 0.95rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform .1s ease; }
.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; }

/* ---- 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-empty, .qg-board-loading { text-align: center; color: var(--text-secondary); font-size: 0.85rem; padding: 14px 0; margin: 0; }