/**
 * Games Hub + in-app game surfaces — matches dashboard dark (black + mint).
 * Loaded on /app after app-dashboard-dark.css.
 */

/* —— Games Hub grid —— */
body.app-dashboard-home #gamesPage .games-container {
    max-width: 1200px;
}

body.app-dashboard-home #gamesPage .games-container > h1 {
    color: #f0f4f8;
    font-weight: 800;
    letter-spacing: -0.02em;
}

body.app-dashboard-home #gamesPage .games-container > h2 {
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1.5rem;
}

body.app-dashboard-home #gamesPage .subtitle {
    color: #94a3b8;
}

body.app-dashboard-home #gamesPage .game-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow:
        0 4px 32px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(61, 214, 140, 0.06);
}

body.app-dashboard-home #gamesPage .game-card:hover {
    border-color: rgba(61, 214, 140, 0.25);
    box-shadow:
        0 8px 36px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(61, 214, 140, 0.12);
}

body.app-dashboard-home #gamesPage .game-card h3 {
    color: #3dd68c;
}

body.app-dashboard-home #gamesPage .game-description {
    color: #94a3b8;
}

body.app-dashboard-home #gamesPage .game-meta {
    border-color: rgba(255, 255, 255, 0.1);
}

body.app-dashboard-home #gamesPage .game-type,
body.app-dashboard-home #gamesPage .game-cost {
    color: #cbd5e1;
}

body.app-dashboard-home #gamesPage .play-btn,
body.app-dashboard-home #gamesPage .host-multi-btn,
body.app-dashboard-home #gamesPage .join-multi-btn {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    border: 1px solid rgba(61, 214, 140, 0.45);
    font-weight: 700;
    box-shadow: 0 0 18px rgba(61, 214, 140, 0.22);
}

body.app-dashboard-home #gamesPage .play-btn:hover,
body.app-dashboard-home #gamesPage .host-multi-btn:hover,
body.app-dashboard-home #gamesPage .join-multi-btn:hover {
    filter: brightness(1.06);
    transform: scale(1.02);
}

/* —— Game modal —— */
body.app-dashboard-home .game-modal .modal-content {
    background: #0a0f0d;
    border: 1px solid rgba(61, 214, 140, 0.22);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
}

body.app-dashboard-home .game-modal .modal-close {
    color: #94a3b8;
}

body.app-dashboard-home .game-modal .modal-close:hover {
    color: #3dd68c;
}

/* BuzzFeed quiz in modal */
body.app-dashboard-home .bq-option:hover {
    background: rgba(61, 214, 140, 0.1);
    border-color: rgba(61, 214, 140, 0.25);
}

body.app-dashboard-home .bq-option:has(input:checked) {
    border-color: #3dd68c;
    background: rgba(61, 214, 140, 0.12);
}

/* Gacha in modal — mint gradient on primary CTA */
body.app-dashboard-home .gacha-game-container .gacha-btn-large {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    border-color: rgba(61, 214, 140, 0.55);
}

body.app-dashboard-home .gacha-warning {
    background: rgba(251, 191, 36, 0.15);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

/* —— Multiplayer full pages —— */
body.app-dashboard-home #wordGamePage,
body.app-dashboard-home #buttonMashPage,
body.app-dashboard-home #wavelengthPage {
    background: #000000;
    color: #f0f4f8;
}

body.app-dashboard-home #wordGamePage .container,
body.app-dashboard-home #buttonMashPage .container,
body.app-dashboard-home #wavelengthPage .container {
    color: inherit;
}

body.app-dashboard-home #wordGamePage .subtitle,
body.app-dashboard-home #buttonMashPage .subtitle,
body.app-dashboard-home #wavelengthPage .subtitle {
    color: #94a3b8;
}

body.app-dashboard-home #wordGamePage h1,
body.app-dashboard-home #buttonMashPage h1,
body.app-dashboard-home #wavelengthPage h1 {
    color: #f0f4f8;
}

body.app-dashboard-home #wordGamePage h2,
body.app-dashboard-home #buttonMashPage h2,
body.app-dashboard-home #wavelengthPage h2 {
    color: #cbd5e1;
}

body.app-dashboard-home #wordGamePage .no-rooms,
body.app-dashboard-home #buttonMashPage .no-rooms,
body.app-dashboard-home #wavelengthPage .no-rooms {
    color: #94a3b8;
}

/* Shared buttons on game pages */
body.app-dashboard-home #wordGamePage .submit-btn,
body.app-dashboard-home #buttonMashPage .submit-btn,
body.app-dashboard-home #wavelengthPage .submit-btn,
body.app-dashboard-home #gameModal .submit-btn {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
    border: 1px solid rgba(61, 214, 140, 0.45);
}

body.app-dashboard-home #wordGamePage .submit-btn:hover,
body.app-dashboard-home #buttonMashPage .submit-btn:hover,
body.app-dashboard-home #wavelengthPage .submit-btn:hover,
body.app-dashboard-home #gameModal .submit-btn:hover {
    filter: brightness(1.06);
}

body.app-dashboard-home #buttonMashPage .secondary-btn,
body.app-dashboard-home #wordGamePage .secondary-btn,
body.app-dashboard-home #wavelengthPage .secondary-btn {
    background: rgba(61, 214, 140, 0.12);
    color: #ecfdf5;
    border: 1px solid rgba(61, 214, 140, 0.35);
}

body.app-dashboard-home #buttonMashPage .secondary-btn:hover,
body.app-dashboard-home #wordGamePage .secondary-btn:hover,
body.app-dashboard-home #wavelengthPage .secondary-btn:hover {
    background: rgba(61, 214, 140, 0.2);
    color: #3dd68c;
}

/* Word game results */
body.app-dashboard-home .word-game-results h1 {
    color: #f0f4f8;
}

body.app-dashboard-home .word-game-results h2 {
    color: #94a3b8;
}

/* Pomodoro break game picker */
body.app-dashboard-home #pomodoroBreakView .study-session-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(61, 214, 140, 0.15);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

body.app-dashboard-home #pomodoroBreakView .study-session-card:hover {
    border-color: rgba(61, 214, 140, 0.35);
}

body.app-dashboard-home #pomodoroBreakView .study-method-title {
    color: #f1f5f9;
}

body.app-dashboard-home #pomodoroBreakView .study-session-btn {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
    border: 1px solid rgba(61, 214, 140, 0.45);
}

body.app-dashboard-home #pomodoroBreakView .pomodoro-break-title,
body.app-dashboard-home #pomodoroBreakView .pomodoro-break-sub {
    color: #e2e8f0;
}

body.app-dashboard-home #pomodoroBreakView .pomodoro-break-sub {
    color: #94a3b8;
}

/* Generic panels from JS (word / button mash) */
body.app-dashboard-home .game-ui-panel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(61, 214, 140, 0.15);
    border-radius: 10px;
    color: #e2e8f0;
}

body.app-dashboard-home .game-ui-panel--lg {
    gap: 15px;
    padding: 15px;
    margin-bottom: 15px;
}

body.app-dashboard-home .game-ui-panel p {
    margin: 0;
    color: inherit;
}

body.app-dashboard-home .game-ui-panel strong {
    color: #f0f4f8;
}

body.app-dashboard-home .game-ui-panel.current-player {
    border-color: rgba(61, 214, 140, 0.45);
    background: rgba(61, 214, 140, 0.12);
    box-shadow: 0 0 0 1px rgba(61, 214, 140, 0.15);
}

/* Focus tools hub + Note methods hub — match dashboard mint + glass */
body.app-dashboard-home #studySessionsPage,
body.app-dashboard-home #noteMethodsPage {
    background: #000000;
    min-height: calc(100vh - 56px);
    padding: clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
}

body.app-dashboard-home #studySessionsPage .study-sessions-container h1,
body.app-dashboard-home #noteMethodsPage .study-sessions-container h1 {
    color: #f8fafc;
    font-weight: 800;
    letter-spacing: -0.03em;
}

body.app-dashboard-home #studySessionsPage .study-sessions-container .subtitle,
body.app-dashboard-home #noteMethodsPage .study-sessions-container .subtitle {
    color: #94a3b8;
}

body.app-dashboard-home #studySessionsPage .study-session-card,
body.app-dashboard-home #noteMethodsPage .study-session-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(61, 214, 140, 0.15);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

body.app-dashboard-home #studySessionsPage .study-session-card:hover,
body.app-dashboard-home #noteMethodsPage .study-session-card:hover {
    border-color: rgba(61, 214, 140, 0.35);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}

body.app-dashboard-home #studySessionsPage .study-method-title,
body.app-dashboard-home #noteMethodsPage .study-method-title {
    color: #f1f5f9;
}

body.app-dashboard-home #studySessionsPage .study-session-btn,
body.app-dashboard-home #noteMethodsPage .study-session-btn {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
    border: 1px solid rgba(61, 214, 140, 0.45);
}

body.app-dashboard-home #studySessionsPage .study-session-btn:hover,
body.app-dashboard-home #noteMethodsPage .study-session-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 4px 20px rgba(61, 214, 140, 0.35);
}

/* Cornell notes — dark shell */
body.app-dashboard-home #cornellNotesPage {
    background: #000000;
    min-height: calc(100vh - 56px);
    padding: 0;
    box-sizing: border-box;
}

/* Saved notes list — dark shell */
body.app-dashboard-home #savedNotesPage {
    background: #000000;
    min-height: calc(100vh - 56px);
    padding: 0;
    box-sizing: border-box;
}

/* Mind map — dark shell */
body.app-dashboard-home #mindMapPage {
    background: #000000;
    min-height: calc(100vh - 56px);
    padding: 0;
    box-sizing: border-box;
}

/* Blurting — dark shell */
body.app-dashboard-home #blurtingPage {
    background: #000000;
    min-height: calc(100vh - 56px);
    padding: clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
}

body.app-dashboard-home #blurtingPage .blurting-container h1 {
    color: #f8fafc;
}

body.app-dashboard-home #blurtingPage .blurting-intro,
body.app-dashboard-home #blurtingPage .blurting-done-msg {
    color: #94a3b8;
}

body.app-dashboard-home #blurtingPage .blurting-back-btn {
    color: #3dd68c;
}

body.app-dashboard-home #blurtingPage .blurting-label {
    color: #cbd5e1;
}

body.app-dashboard-home #blurtingPage .blurting-topic-input,
body.app-dashboard-home #blurtingPage .blurting-minutes-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(61, 214, 140, 0.25);
    color: #f1f5f9;
}

body.app-dashboard-home #blurtingPage .blurting-topic-input::placeholder {
    color: #64748b;
}

body.app-dashboard-home #blurtingPage .blurting-topic-display {
    color: #3dd68c;
}

body.app-dashboard-home #blurtingPage .blurting-timer-display {
    color: #94a3b8;
}

body.app-dashboard-home #blurtingPage .blurting-textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(61, 214, 140, 0.25);
    color: #f1f5f9;
}

body.app-dashboard-home #blurtingPage .blurting-textarea::placeholder {
    color: #64748b;
}

body.app-dashboard-home #blurtingPage .study-session-btn {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
    border: 1px solid rgba(61, 214, 140, 0.45);
}

/* Spinner wheel — dark shell */
body.app-dashboard-home #spinnerWheelPage {
    background: #000000;
    min-height: calc(100vh - 56px);
    padding: clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-container {
    background: transparent;
}

body.app-dashboard-home #spinnerWheelPage .blurting-back-btn {
    color: #3dd68c;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-container h1 {
    color: #f8fafc;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-intro {
    color: #94a3b8;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(61, 214, 140, 0.25);
    color: #f1f5f9;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-input:focus {
    border-color: rgba(61, 214, 140, 0.55);
    box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.12);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-list-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(61, 214, 140, 0.15);
    box-shadow: none;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-list-term {
    color: #e2e8f0;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-list-remove:hover {
    background: rgba(239, 68, 68, 0.12);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-add-during {
    background: rgba(61, 214, 140, 0.12);
    border-color: rgba(61, 214, 140, 0.3);
    color: #3dd68c;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-add-during:hover {
    background: rgba(61, 214, 140, 0.2);
    border-color: rgba(61, 214, 140, 0.45);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-mode-label {
    color: #94a3b8;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-how {
    background: rgba(61, 214, 140, 0.08);
    border-color: rgba(61, 214, 140, 0.2);
    color: #94a3b8;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-side {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(61, 214, 140, 0.15);
    box-shadow: none;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-side-title {
    color: #3dd68c;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-on-item {
    color: #cbd5e1;
    border-bottom-color: rgba(61, 214, 140, 0.12);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-on-pts {
    color: #3dd68c;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-on-empty {
    color: #64748b;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-all-title {
    border-top-color: rgba(61, 214, 140, 0.15);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-all-item {
    color: #cbd5e1;
    border-bottom-color: rgba(61, 214, 140, 0.1);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-stat {
    color: #cbd5e1;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-tip-side {
    color: #94a3b8;
    border-top-color: rgba(61, 214, 140, 0.15);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-footer {
    border-top-color: rgba(61, 214, 140, 0.15);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-progress {
    color: #3dd68c;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-tip {
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.04);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-arena {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(61, 214, 140, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-svg {
    border-color: rgba(61, 214, 140, 0.25);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-pointer {
    border-top-color: #3dd68c;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-spin-btn:hover {
    box-shadow: 0 6px 20px rgba(61, 214, 140, 0.35);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-card-front {
    background: linear-gradient(145deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
    text-shadow: none;
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-card-back {
    background: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
    border-color: rgba(61, 214, 140, 0.2);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-tap-hint {
    color: #94a3b8;
}

body.app-dashboard-home #spinnerWheelPage .study-session-btn,
body.app-dashboard-home #spinnerWheelPage .spinner-wheel-actions .study-session-btn {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
    border: 1px solid rgba(61, 214, 140, 0.45);
    box-shadow: 0 2px 12px rgba(61, 214, 140, 0.25);
}

body.app-dashboard-home #spinnerWheelPage .spinner-wheel-actions .study-session-btn:hover {
    box-shadow: 0 4px 16px rgba(61, 214, 140, 0.4);
}

/* Traffic light — dark shell */
body.app-dashboard-home #trafficLightPage {
    background: #000000;
    min-height: calc(100vh - 56px);
    padding: clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
}

body.app-dashboard-home #trafficLightPage .traffic-light-container h1 {
    color: #f8fafc;
}

body.app-dashboard-home #trafficLightPage .traffic-light-intro {
    color: #94a3b8;
}

body.app-dashboard-home #trafficLightPage .traffic-light-intro strong {
    color: #e2e8f0;
}

body.app-dashboard-home #trafficLightPage .blurting-back-btn {
    color: #3dd68c;
}

body.app-dashboard-home #trafficLightPage .traffic-light-editor {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(61, 214, 140, 0.25);
    color: #f1f5f9;
}

body.app-dashboard-home #trafficLightPage .traffic-light-editor:focus {
    border-color: rgba(61, 214, 140, 0.55);
    box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.12);
}

body.app-dashboard-home #trafficLightPage .traffic-light-swatch--clear {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-color: rgba(61, 214, 140, 0.25);
}

/* Feynman method — dark shell */
body.app-dashboard-home #feynmanMethodPage {
    background: #000000;
    min-height: calc(100vh - 56px);
    padding: clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
}

body.app-dashboard-home #feynmanMethodPage .blurting-back-btn {
    color: #3dd68c;
}

body.app-dashboard-home #feynmanMethodPage h1,
body.app-dashboard-home #feynmanMethodPage .feynman-step-title {
    color: #f8fafc;
}

body.app-dashboard-home #feynmanMethodPage .feynman-intro,
body.app-dashboard-home #feynmanMethodPage .feynman-study-hint,
body.app-dashboard-home #feynmanMethodPage .feynman-write-hint,
body.app-dashboard-home #feynmanMethodPage .feynman-xp-legend,
body.app-dashboard-home #feynmanMethodPage .feynman-file-hint {
    color: #94a3b8;
}

body.app-dashboard-home #feynmanMethodPage .feynman-label {
    color: #cbd5e1;
}

body.app-dashboard-home #feynmanMethodPage .feynman-textarea,
body.app-dashboard-home #feynmanMethodPage .feynman-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(61, 214, 140, 0.25);
    color: #f1f5f9;
}

body.app-dashboard-home #feynmanMethodPage .feynman-reference-panel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(61, 214, 140, 0.25);
    color: #e2e8f0;
}

body.app-dashboard-home #feynmanMethodPage .feynman-result-badge {
    color: #f1f5f9;
}

body.app-dashboard-home #feynmanMethodPage .feynman-result-body {
    color: #cbd5e1;
}

body.app-dashboard-home #feynmanMethodPage .feynman-result-win {
    color: #4ade80;
}

body.app-dashboard-home #feynmanMethodPage .feynman-result-miss {
    color: #fbbf24;
}

body.app-dashboard-home #feynmanMethodPage .feynman-error {
    color: #f87171;
}

body.app-dashboard-home #feynmanMethodPage .study-session-btn {
    background: linear-gradient(135deg, #2eb574 0%, #3dd68c 100%);
    color: #041208;
    font-weight: 700;
    border: 1px solid rgba(61, 214, 140, 0.45);
}