/* Shared game skin. * * Injected by _serve_game_file alongside the back-bar script, for the two * remaining standalone documents — University Matcher and College List * Builder. Each has its own markup, so this targets the handful of * classes they genuinely share — card, btn, muted, section-title — * rather than trying to restyle each. * * Builtin games need none of this: they run inside the SPA on the * quick-game engine and are styled by the app's own CSS. * * The app defaults to dark. Without this a game opened from a dark app * threw a full-bright screen, which is most of why they felt like a * different product. app-back-bar.js stamps .tc-dark on from the * app's own stored preference, so a game follows whatever the app is set * to rather than the OS. */ /* ---------- Surfaces: match the app's gummy language ---------------- */ .card { border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -14px 18px -14px rgba(51, 65, 85, 0.22), 0 10px 24px -12px rgba(30, 41, 59, 0.22) !important; } .btn, button.btn { border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -10px 14px -10px rgba(0, 0, 0, 0.35), 0 4px 12px -4px rgba(15, 23, 42, 0.3) !important; } /* ---------- Dark ----------------------------------------------------- */ html.tc-dark body { background: linear-gradient(180deg, #0b1220 0%, #0f172a 45%, #131b2b 100%) !important; color: #e2e8f0 !important; } html.tc-dark .card, html.tc-dark .inline-card, html.tc-dark .tile, html.tc-dark .list-item, html.tc-dark .school, html.tc-dark .stat { background: linear-gradient(180deg, #1d2942 0%, #131c2e 55%, #0e1524 100%) !important; border-color: rgba(148, 163, 184, 0.22) !important; color: #e2e8f0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -14px 20px -14px rgba(0, 0, 0, 0.6), 0 12px 28px -12px rgba(0, 0, 0, 0.7) !important; } html.tc-dark h1, html.tc-dark h2, html.tc-dark h3, html.tc-dark .section-title, html.tc-dark strong, html.tc-dark b { color: #f1f5f9 !important; } html.tc-dark .muted, html.tc-dark .mini, html.tc-dark .tiny, html.tc-dark .k, html.tc-dark label { color: #94a3b8 !important; } html.tc-dark .btn.ghost, html.tc-dark .btn-secondary { background: linear-gradient(180deg, rgba(71, 85, 105, 0.85) 0%, rgba(33, 44, 62, 0.92) 100%) !important; color: #e2e8f0 !important; border-color: rgba(148, 163, 184, 0.3) !important; } /* Form controls are the usual thing left white in a dark UI. */ html.tc-dark input, html.tc-dark select, html.tc-dark textarea, html.tc-dark .opt, html.tc-dark .select { background: #172033 !important; color: #e2e8f0 !important; border-color: rgba(148, 163, 184, 0.3) !important; } html.tc-dark option { background: #172033; color: #e2e8f0; } /* Progress tracks and dividers read as black holes when left light. */ html.tc-dark .stat-bar, html.tc-dark .bar, html.tc-dark .meter > * { background: #24304a !important; } html.tc-dark hr, html.tc-dark .divider { border-color: rgba(148, 163, 184, 0.2) !important; } /* The decorative blobs are the most expensive thing these pages draw and * are near-invisible on a dark ground — drop them rather than composite * three blurred layers per frame for nothing. */ html.tc-dark .blurry-blobs { display: none !important; }