/* ==========================================================================
   Theme: Ocean Splash 🐠 — cool blues and sea-greens, bubbly and calm.
   Loaded after style.css; everything scoped to body.theme-ocean.
   ========================================================================== */

body.theme-ocean {
    --primary: #0e7fc1;
    --primary-dark: #0a639a;
    --accent: #18b09b;
    --accent-dark: #0f8a79;
    --yellow: #ffb703;
    --bg: #eef8fd;
    --card-bg: #ffffff;
    --text: #1f4e63;
    --muted: #6f95a8;
    --border: #cdeaf7;
    --success: #14996a;
    --error: #e35d6a;
    --free: #14996a;
    --paid: #c1710a;

    --subject-math: #0e7fc1;
    --subject-math-bg: #e3f2fc;
    --subject-science: #0f8a79;
    --subject-science-bg: #ddf5f0;
    --subject-words: #b5770e;
    --subject-words-bg: #fdf1d8;
    --subject-memory: #5f6ec7;
    --subject-memory-bg: #e9ecfc;
    --subject-quiz: #2d7fa8;
    --subject-quiz-bg: #e2f1f8;
    --play: #0f8a79;
    --play-dark: #0a6355;
    --text-strong: #143b4d;
    --muted-strong: #517d92;

    background: var(--bg);
    background-image:
        radial-gradient(circle at 10% 15%, rgba(24, 176, 155, 0.14) 0, transparent 35%),
        radial-gradient(circle at 90% 12%, rgba(14, 127, 193, 0.13) 0, transparent 35%),
        radial-gradient(circle at 30% 95%, rgba(255, 183, 3, 0.10) 0, transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(14, 127, 193, 0.07) 0, transparent 30%);
    color: var(--text);
}

/* Header — wave bar */
body.theme-ocean .site-header {
    background: linear-gradient(180deg, #ffffff 0%, #f2fbff 100%);
    border-bottom: 4px solid var(--border);
}
body.theme-ocean .logo { color: var(--primary); }
body.theme-ocean .main-nav a.active { text-decoration-color: var(--accent); }

/* Buttons — deep-sea shadows */
body.theme-ocean .btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 4px 0 rgba(14, 127, 193, 0.18);
}
body.theme-ocean .btn-primary { box-shadow: 0 4px 0 var(--primary-dark); }
body.theme-ocean .btn-primary:hover { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); box-shadow: 0 4px 0 #084a73; }
body.theme-ocean .btn-accent:hover { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
body.theme-ocean .btn-danger:hover { background: var(--error); color: #fff; border-color: var(--error); }

/* Cards — bubble hover */
body.theme-ocean .game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 0 rgba(24, 176, 155, 0.25);
}
body.theme-ocean .game-card-highlighted {
    border-color: var(--yellow);
    box-shadow: 0 6px 0 rgba(255, 183, 3, 0.3);
}
body.theme-ocean .game-thumb { background: #e3f2fc; }

/* Badges & alerts */
body.theme-ocean .badge-free { background: #dcf5ea; color: var(--free); }
body.theme-ocean .badge-paid { background: #fdeed3; color: var(--paid); }
body.theme-ocean .badge-category { background: #e2f1f8; color: var(--primary); }
body.theme-ocean .badge-featured { background: #fff1c9; color: #8a6400; }
body.theme-ocean .alert-success { background: #dcf5ea; color: #0d7a54; border-color: #b0e6cf; }
body.theme-ocean .alert-error { background: #fde7e9; color: #c04552; border-color: #f6c6cb; }

/* Inputs & misc surfaces */
body.theme-ocean .form-group input,
body.theme-ocean .form-group select,
body.theme-ocean .form-group textarea { background: #fbfeff; }
body.theme-ocean table.data-table th { background: #f0f9fe; color: var(--primary); }
body.theme-ocean .time-bar-track { background: #e2f1f8; }
body.theme-ocean .site-footer { border-top: 4px solid var(--border); }
body.theme-ocean .modal-overlay { background: rgba(20, 59, 77, 0.55); }
body.theme-ocean .fullscreen-prompt { background: rgba(20, 59, 77, 0.85); }
body.theme-ocean .fullscreen-prompt:hover { background: rgba(20, 59, 77, 0.92); }