/* App-shell adapter for the shared Challenge Hub. Public page styles remain isolated. */
.challenge-hub-container-app {
  min-width: 0;
  /* Scoped public hub tokens (see challenges.css) so shared pieces render the same. */
  --ch-surface2: #161c14;
  --ch-card: #1a2118;
  --ch-border: #2a3127;
  --ch-primary: #88d982;
  --ch-primary-hi: #a3f69c;
  --ch-primary-container: #2e7d32;
  --ch-on-primary: #cbffc2;
  --ch-text: #e0e4da;
  --ch-muted: #bfcaba;
  --ch-font-body: "JetBrains Mono", ui-monospace, monospace;
  --ch-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
.challenge-hub-container-app .challenge-hub-body { color: var(--stitch-on-surface, #e0e4da); font-family: var(--stitch-font-body, sans-serif); }
.challenge-hub-container-app .gamehub-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr); gap: 20px; align-items: stretch; margin-bottom: 20px; }
.challenge-hub-container-app .gamehub-copy { min-width: 0; padding: 20px 0; }
.challenge-hub-container-app .gamehub-copy h1 { margin: 0 0 8px; color: var(--stitch-on-surface, #f8fafc); font-family: var(--stitch-font-display, sans-serif); font-size: clamp(28px, 4vw, 42px); line-height: 1.1; }
.challenge-hub-container-app .gamehub-copy p { color: var(--stitch-on-surface-variant, #cbd5e1); }
.challenge-hub-container-app .cg-eyebrow-title { margin: 18px 0 4px; color: var(--ch-primary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.challenge-hub-container-app .featured-game,
.challenge-hub-container-app .challenge-panel,
.challenge-hub-container-app .game-card { min-width: 0; overflow: hidden; border: 1px solid var(--stitch-outline-variant, #40493d); border-radius: 8px; background: var(--stitch-surface-container, #1c211b); }
.challenge-hub-container-app .featured-game { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px; text-decoration: none; color: inherit; }
.challenge-hub-container-app .featured-game .game-art { min-height: 120px; border-radius: 6px; }
.challenge-hub-container-app .featured-body { min-width: 0; }
.challenge-hub-container-app .featured-body h2 { margin: 0 0 6px; font-family: var(--stitch-font-display, sans-serif); }
.challenge-hub-container-app .featured-body p { color: var(--stitch-on-surface-variant, #cbd5e1); }
.challenge-hub-container-app .progress-strip,
.challenge-hub-container-app .challenge-profile-strip { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--stitch-outline-variant, #40493d); border-radius: 6px; background: var(--stitch-surface-container-low, #181d17); }
.challenge-hub-container-app .progress-strip > div { display: grid; gap: 3px; min-width: 110px; }
.challenge-hub-container-app .progress-strip span,
.challenge-hub-container-app .challenge-profile-strip span { color: var(--fbo-text-muted, #94a3b8); font-size: 12px; }
.challenge-hub-container-app .challenge-profile-strip strong { color: var(--stitch-primary, #88d982); margin-right: auto; }
.challenge-hub-container-app .challenge-profile-strip span { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 8px; border: 1px solid var(--stitch-outline-variant, #40493d); border-radius: 999px; color: var(--fbo-text-secondary, #cbd5e1); background: var(--stitch-surface-container-lowest, #0b0f0a); font-size: 12px; white-space: nowrap; }
.challenge-hub-container-app .challenge-profile-strip span.challenge-preview-note { flex: 1 1 100%; white-space: normal; border-style: dashed; color: var(--stitch-primary, #88d982); }
.challenge-hub-container-app .challenge-achievements { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--stitch-outline-variant, #40493d); border-radius: 8px; background: var(--stitch-surface-container-low, #181d17); }
.challenge-hub-container-app .challenge-achievements h2 { margin: 0 0 8px; color: var(--stitch-on-surface, #f8fafc); font-family: var(--stitch-font-display, sans-serif); font-size: 17px; }
.challenge-hub-container-app .challenge-history { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--stitch-outline-variant, #40493d); border-radius: 8px; background: var(--stitch-surface-container-low, #181d17); }
.challenge-hub-container-app .challenge-history h2 { margin: 0 0 8px; color: var(--stitch-on-surface, #f8fafc); font-family: var(--stitch-font-display, sans-serif); font-size: 17px; }
.challenge-hub-container-app .challenge-history-list { display: grid; gap: 0; }
.challenge-hub-container-app .challenge-history-list p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; border-top: 1px solid var(--ch-border); color: var(--stitch-on-surface, #e0e4da); font-size: 12px; }
.challenge-hub-container-app .challenge-history-list p:first-child { border-top: 0; }
.challenge-hub-container-app .challenge-history-list small { flex: 0 0 auto; color: var(--fbo-text-muted, #94a3b8); }
.challenge-hub-container-app .daily-strip { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 0 0 20px; padding: 18px; border: 1px solid var(--stitch-primary-container, #2e7d32); border-radius: 8px; background: rgba(46, 125, 50, 0.12); }
.challenge-hub-container-app .daily-strip h2 { margin: 0 0 6px; font-family: var(--stitch-font-display, sans-serif); }
.challenge-hub-container-app .daily-strip p { margin: 4px 0; color: var(--stitch-on-surface-variant, #cbd5e1); }
.challenge-hub-container-app .challenge-social-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.challenge-hub-container-app .challenge-panel { padding: 16px; }
.challenge-hub-container-app .challenge-panel h2 { margin: 0 0 12px; font-family: var(--stitch-font-display, sans-serif); font-size: 18px; }
.challenge-hub-container-app .challenge-panel p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 0; padding: 9px 0; border-top: 1px solid var(--stitch-outline-variant, #40493d); font-size: 13px; }
.challenge-hub-container-app .challenge-panel small { grid-column: 1 / -1; color: var(--fbo-text-muted, #94a3b8); }
.challenge-hub-container-app .challenge-panel strong { color: var(--stitch-primary, #88d982); }
.challenge-hub-container-app .challenge-panel [data-challenge-activity] p:first-child { border-top: 0; }
.challenge-hub-container-app .challenge-panel [data-challenge-activity] small { display: block; margin-top: 3px; font-size: 11px; }
.challenge-hub-container-app .challenge-tabs { display: flex; gap: 6px; margin: 0 0 8px; padding: 0; overflow-x: auto; background: none; background-color: transparent; border-radius: 0; }
.challenge-hub-container-app .challenge-tabs button { min-height: 36px; padding: 6px 10px; border: 1px solid var(--stitch-outline-variant, #40493d); border-radius: 4px; background: transparent; color: var(--fbo-text-secondary, #cbd5e1); cursor: pointer; white-space: nowrap; }
.challenge-hub-container-app .challenge-tabs button.is-active { border-color: var(--stitch-primary, #88d982); color: var(--stitch-primary, #88d982); }
.challenge-hub-container-app .challenge-select-label { color: var(--fbo-text-muted, #94a3b8); }
.challenge-hub-container-app .challenge-panel select[data-board-game] { border-color: var(--stitch-outline-variant, #40493d); background: var(--stitch-surface-container-low, #181d17); color: var(--stitch-on-surface, #f8fafc); }
.challenge-hub-container-app .challenge-you { color: var(--stitch-primary, #88d982); }
.challenge-hub-container-app .challenge-game-toolbar { display: flex; justify-content: flex-start; margin: 0 0 12px; }
.challenge-hub-container-app .challenge-game-toolbar .ch-btn { min-height: 44px; }
.challenge-hub-container-app .challenge-game-fallback { padding: 24px 0; color: var(--fbo-text-secondary, #cbd5e1); }
.challenge-hub-container-app .challenge-muted { display: block !important; color: var(--fbo-text-muted, #94a3b8); }
.challenge-hub-container-app .hub-rail { margin: 0 0 24px; }
.challenge-hub-container-app .hub-rail h2 { margin: 0 0 10px; font-family: var(--stitch-font-display, sans-serif); font-size: 20px; }
.challenge-hub-container-app .rail-scroll { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.challenge-hub-container-app .game-card { display: block; padding: 12px; color: inherit; text-decoration: none; }
.challenge-hub-container-app .game-card:hover,
.challenge-hub-container-app .featured-game:hover { border-color: var(--stitch-primary, #88d982); }
.challenge-hub-container-app .game-card .game-art { display: block; height: 72px; margin-bottom: 10px; border-radius: 5px; }
.challenge-hub-container-app .game-card strong,
.challenge-hub-container-app .game-card em { display: block; }
.challenge-hub-container-app .game-card strong { font-size: 16px; line-height: 1.2; }
.challenge-hub-container-app .game-card em { margin-top: 6px; color: var(--fbo-text-muted, #94a3b8); font-size: 12px; font-style: normal; line-height: 1.4; }
.challenge-hub-container-app .game-meta { display: flex; gap: 8px; margin-top: 10px; color: var(--fbo-text-muted, #94a3b8); font-size: 11px; }
.challenge-hub-container-app .cg-play { display: block; margin-top: 10px; color: var(--stitch-primary, #88d982); font-size: 12px; }

/* Shared primitives the hub renderer needs but the app shell used to miss. */
.challenge-hub-container-app .ch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--ch-border);
  border-radius: 4px;
  background: transparent;
  color: var(--ch-text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.challenge-hub-container-app .ch-btn-primary { background: var(--ch-primary-container); border-color: var(--ch-primary-container); color: var(--ch-on-primary); }
.challenge-hub-container-app .ch-btn-primary:hover,
.challenge-hub-container-app .ch-btn-primary:focus-visible { background: var(--ch-primary-hi); color: #002204; }
.challenge-hub-container-app .ch-btn-secondary { background: transparent; border-color: var(--ch-primary); color: var(--ch-primary); }
.challenge-hub-container-app .ch-btn-ghost { background: transparent; border-color: var(--ch-border); color: var(--ch-muted); }
.challenge-hub-container-app .ch-btn-ghost:hover { color: var(--ch-text); border-color: var(--ch-primary); }
.challenge-hub-container-app .featured-body .ch-btn { min-height: 52px; padding: 10px 12px; font-size: 15px; line-height: 1.15; }
.challenge-hub-container-app .featured-kicker { margin: 0; color: var(--ch-primary-hi); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.challenge-hub-container-app .game-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.challenge-hub-container-app .game-badges span { padding: 5px 7px; border: 1px solid var(--ch-border); border-radius: 4px; background: rgba(0, 0, 0, .2); color: var(--ch-muted); font-size: 12px; font-style: normal; }
.challenge-hub-container-app .achievement-list { display: flex; flex-wrap: wrap; gap: 6px; }
.challenge-hub-container-app .achievement-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 8px; border: 1px solid var(--ch-primary-container); border-radius: 999px; background: rgba(46, 125, 50, .14); color: var(--ch-text); font-size: 12px; }
.challenge-hub-container-app .achievement-chip b { font-size: 14px; }
.challenge-hub-container-app .achievement-chip small { color: var(--ch-primary-hi); font-size: 10px; }
.challenge-hub-container-app .game-art {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ch-border);
  background: radial-gradient(circle at 20% 15%, rgba(136, 217, 130, .16), transparent 30%), #111711;
}
.challenge-hub-container-app .game-art::before,
.challenge-hub-container-app .game-art::after,
.challenge-hub-container-app .game-art > span { content: ""; position: absolute; display: block; box-sizing: border-box; }
.challenge-hub-container-app .game-art > span:nth-child(1) { left: 18%; bottom: 18%; width: 34%; height: 38%; border: 2px solid #88d982; border-radius: 8px; background: #314235; }
.challenge-hub-container-app .game-art > span:nth-child(2) { right: 14%; top: 18%; width: 34%; height: 28%; border: 2px dashed #f5d36f; border-radius: 5px; transform: rotate(7deg); }
.challenge-hub-container-app .game-art > span:nth-child(3) { right: 30%; bottom: 18%; width: 22px; height: 22px; border-radius: 50%; background: #f5d36f; box-shadow: inset 0 0 0 4px #c69728; animation: coinFloat 2.4s ease-in-out infinite; }
.challenge-hub-container-app .art-buy { background: radial-gradient(circle at 72% 32%, rgba(110, 198, 255, .24), transparent 30%), #111a20; }
.challenge-hub-container-app .art-buy > span:nth-child(1) { left: 20%; bottom: 12%; width: 25%; height: 70%; border: 2px solid #bfcaba; border-radius: 10px; background: #222a31; }
.challenge-hub-container-app .art-buy > span:nth-child(2) { right: 15%; top: 22%; width: 34%; height: 30%; border: 0; border-radius: 4px; background: #ffab00; transform: rotate(8deg); animation: saleBlink 1.4s steps(2, end) infinite; }
.challenge-hub-container-app .art-buy > span:nth-child(3) { right: 24%; bottom: 16%; background: #6ec6ff; box-shadow: inset 0 0 0 4px #2e7d9f; }
.challenge-hub-container-app .art-tetris { background: radial-gradient(circle at 50% 50%, rgba(136, 217, 130, .18), transparent 48%), #111711; }
.challenge-hub-container-app .art-tetris > span { width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px; animation: tileFloat 2.8s ease-in-out infinite; }
.challenge-hub-container-app .art-tetris > span:nth-child(1) { left: 18%; bottom: 18%; background: #88d982; }
.challenge-hub-container-app .art-tetris > span:nth-child(2) { left: 39%; bottom: 18%; background: #f5d36f; animation-delay: .25s; }
.challenge-hub-container-app .art-tetris > span:nth-child(3) { left: 39%; bottom: 40%; background: #6ec6ff; animation-delay: .5s; }
.challenge-hub-container-app .art-tetris > span:nth-child(4) { left: 60%; bottom: 18%; background: #e46f6f; animation-delay: .75s; }
.challenge-hub-container-app .art-run { background: linear-gradient(145deg, rgba(110, 198, 255, .2), transparent 55%), #111820; }
.challenge-hub-container-app .art-run > span:nth-child(1) { left: 20%; bottom: 18%; width: 30%; height: 52%; border: 0; border-radius: 50% 50% 8px 8px; background: #6ec6ff; transform: skew(-12deg); animation: runnerBob 1s ease-in-out infinite; }
.challenge-hub-container-app .art-run > span:nth-child(2) { right: 18%; top: 24%; width: 28%; height: 4px; border: 0; background: #88d982; transform: rotate(-12deg); }
.challenge-hub-container-app .art-run > span:nth-child(3) { right: 24%; bottom: 22%; background: #f5d36f; }
.challenge-hub-container-app .art-cushion { background: radial-gradient(circle at 38% 30%, rgba(136, 217, 130, .22), transparent 38%), #111711; }
.challenge-hub-container-app .art-cushion > span:nth-child(1) { left: 21%; top: 28%; width: 44%; height: 36%; border: 0; border-radius: 50% 50% 10px 10px; background: #88d982; }
.challenge-hub-container-app .art-cushion > span:nth-child(2) { right: 17%; bottom: 18%; width: 24%; height: 24%; border: 3px solid #bfcaba; border-top: 0; border-radius: 0 0 10px 10px; }
.challenge-hub-container-app .art-cushion > span:nth-child(3) { right: 24%; top: 18%; background: #6ec6ff; }
.challenge-hub-container-app .art-inflation { background: linear-gradient(135deg, rgba(255, 171, 0, .18), transparent 58%), #1a1710; }
.challenge-hub-container-app .art-inflation > span:nth-child(1) { left: 18%; bottom: 18%; width: 44%; height: 40%; border: 3px solid #bfcaba; border-top: 0; border-radius: 0 0 8px 8px; background: transparent; }
.challenge-hub-container-app .art-inflation > span:nth-child(2) { right: 18%; top: 22%; width: 30%; height: 25%; border: 0; border-radius: 4px; background: #ffab00; }
.challenge-hub-container-app .art-inflation > span:nth-child(3) { right: 24%; bottom: 18%; background: #e46f6f; box-shadow: inset 0 0 0 4px #a94141; }
.challenge-hub-container-app .art-debt { background: radial-gradient(circle at 75% 25%, rgba(228, 111, 111, .2), transparent 34%), #1a1111; }
.challenge-hub-container-app .art-debt > span:nth-child(1) { left: 18%; bottom: 22%; width: 42%; height: 28%; border: 2px solid #88d982; border-radius: 6px; background: #2e7d32; transform: rotate(-8deg); }
.challenge-hub-container-app .art-debt > span:nth-child(2) { right: 15%; top: 20%; width: 34%; height: 28%; border: 2px solid #e46f6f; background: transparent; transform: rotate(9deg); }
.challenge-hub-container-app .art-debt > span:nth-child(3) { right: 27%; bottom: 18%; background: #e46f6f; box-shadow: inset 0 0 0 4px #a94141; }
.challenge-hub-container-app .art-subs { background: radial-gradient(circle at 25% 25%, rgba(110, 198, 255, .2), transparent 32%), #111820; }
.challenge-hub-container-app .art-subs > span:nth-child(1) { left: 20%; bottom: 15%; width: 26%; height: 58%; border: 2px solid #bfcaba; border-radius: 9px; background: #222a31; }
.challenge-hub-container-app .art-subs > span:nth-child(2) { right: 16%; top: 24%; width: 36%; height: 30%; border: 0; border-radius: 5px; background: #6ec6ff; transform: rotate(5deg); }
.challenge-hub-container-app .art-subs > span:nth-child(3) { right: 27%; bottom: 16%; background: #e46f6f; box-shadow: inset 0 0 0 4px #a94141; }
@keyframes coinFloat { 50% { transform: translateY(-10px); } }
@keyframes saleBlink { 50% { filter: brightness(1.22); } }
@keyframes tileFloat { 50% { transform: translateY(-5px); } }
@keyframes runnerBob { 50% { transform: translateY(-7px) skew(-12deg); } }

@media (max-width: 760px) {
  .challenge-hub-container-app .gamehub-hero,
  .challenge-hub-container-app .challenge-social-grid { grid-template-columns: 1fr; }
  .challenge-hub-container-app .gamehub-copy { padding: 4px 0; }
  .challenge-hub-container-app .rail-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .challenge-hub-container-app .daily-strip { align-items: stretch; flex-direction: column; }
}
@media (max-width: 420px) {
  .challenge-hub-container-app .rail-scroll { grid-template-columns: 1fr; }
  .challenge-hub-container-app .featured-game { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 12px; }
}
@media (min-width: 700px) {
  .challenge-hub-container-app .featured-game { grid-template-columns: .95fr 1fr; }
  .challenge-hub-container-app .featured-game .game-art { min-height: 224px; }
}

/* Shared leaderboard rows */
.challenge-hub-container-app [data-challenge-leaderboard] p { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 8px 0; border-top: 1px solid var(--stitch-outline-variant, #40493d); font-size: 13px; }
.challenge-hub-container-app [data-challenge-leaderboard] p:first-child { border-top: 0; }
.challenge-hub-container-app [data-challenge-leaderboard] .challenge-board-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-hub-container-app [data-challenge-leaderboard] strong { flex: 0 0 auto; color: var(--stitch-primary, #88d982); }
.challenge-hub-container-app [data-challenge-leaderboard] small { flex: 0 0 auto; color: var(--fbo-text-muted, #94a3b8); font-size: 11px; }