/* Edulin Games v16 — vibrant, shiny, solid colours for the home screen.
   Loads last, over the pastel theme. Solid royal violet, hot pink, sunshine yellow, teal and
   sky blue; glossy buttons with a highlight and a 3-D edge; a light sweep across the hero and
   cards; each game category has its own solid colour. */
:root {
    --v-violet: #5b2ee6; --v-violet-dark: #3d17b8; --v-pink: #ff2e7e; --v-pink-dark: #c80f57;
    --v-sun: #ffc21a; --v-sun-dark: #d99a00; --v-orange: #ff7a1a; --v-orange-dark: #cc5500;
    --v-teal: #00b3a4; --v-teal-dark: #007f74; --v-sky: #1e88ff; --v-sky-dark: #0a5fc4;
    --v-lime: #2fbf55; --v-lime-dark: #1d8a3a; --v-ink: #1d1640; --v-muted: #564f7a; --v-line: #e1dbf5;
    --v-gloss: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.1) 48%, rgba(255,255,255,0) 52%);
    /* The pastel theme's variables, retuned so everything that uses them turns vibrant. */
    --pastel-lavender: #efe9ff; --pastel-cream: #f6f2ff; --pastel-violet: #5b2ee6; --pastel-violet-dark: #3d17b8;
    --pastel-ink: #1d1640; --pastel-muted: #564f7a; --pastel-line: #e1dbf5; --pastel-white: #ffffff;
    --pastel-blush: #ffd6e6; --pastel-mint: #c9f5ee; --pastel-apricot: #ffe7a8; --pastel-blue: #d4e8ff;
}
html { background: #f6f2ff; }
body {
    background: radial-gradient(circle at 10% 0%, #ffe0ef 0, transparent 30%),
                radial-gradient(circle at 95% 8%, #d8efff 0, transparent 28%),
                radial-gradient(circle at 60% 100%, #fff1c7 0, transparent 30%), #f6f2ff !important;
}
#home { background: transparent !important; }
@keyframes v-shine { 0%, 55% { transform: translateX(-120%) rotate(18deg); } 100% { transform: translateX(420%) rotate(18deg); } }

/* ── Navigation rail / bottom bar: solid violet ── */
.pastel-nav { background: var(--v-gloss), linear-gradient(180deg, #6a3cf5, var(--v-violet-dark)) !important; border: 0 !important; box-shadow: 6px 0 24px rgba(61,23,184,.25); }
.pastel-brand, .pastel-brand strong { color: #fff !important; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.pastel-nav-btn { color: #efeaff !important; }
.pastel-nav-btn:hover { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.pastel-nav-btn.active { background: var(--v-gloss), var(--v-sun) !important; color: #3a2600 !important; box-shadow: 0 4px 0 var(--v-sun-dark), 0 8px 16px rgba(0,0,0,.2); }
.pastel-profile { color: #fff !important; }
.pastel-profile small { color: #d9d0ff !important; }
.pastel-profile > span:first-child { background: var(--v-gloss), var(--v-pink) !important; color: #fff !important; }
@media (max-width: 760px) {
    .pastel-nav { background: var(--v-gloss), linear-gradient(180deg, #6a3cf5, var(--v-violet-dark)) !important; box-shadow: 0 -6px 20px rgba(61,23,184,.28); }
}

/* ── Top bar ── */
.grownup-links a { color: var(--v-violet-dark) !important; font-weight: 900 !important; }
.grownup-links a:hover { border-bottom-color: var(--v-pink) !important; }
.learner-chip { border: 2px solid #fff !important; box-shadow: 0 6px 0 #d8cffb, 0 10px 20px rgba(61,23,184,.15) !important; }
.learner-chip-avatar { background: var(--v-gloss), var(--v-pink) !important; color: #fff !important; }
#lang-bar, #music-ctrl { background: var(--v-gloss), #fff !important; border: 2px solid #fff !important; box-shadow: 0 5px 0 #d8cffb, 0 10px 20px rgba(61,23,184,.15) !important; }
#music-ctrl button { color: var(--v-pink) !important; }

/* ── Hero: a solid, shiny colour block ── */
.home-hero {
    background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 40%), linear-gradient(125deg, #4a1fd6 0%, #7d22e0 45%, #f0206f 100%) !important;
    border: 0 !important; color: #fff !important;
    box-shadow: 0 20px 44px rgba(91, 46, 230, .32), inset 0 -8px 0 rgba(0,0,0,.12) !important;
}
.home-hero::after {
    content: ''; position: absolute; top: -40%; left: 0; width: 22%; height: 200%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    animation: v-shine 6s ease-in-out infinite;
}
.home-eyebrow { color: #ffe27a !important; }
.home-title { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 4px 0 rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.2); }
.home-welcome { color: rgba(255,255,255,.95) !important; }
.hero-stats { color: rgba(255,255,255,.88) !important; }
.hero-stats b { color: #ffe27a !important; }
.home-tagline span { background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.45) !important; color: #fff !important; font-weight: 800; }
.hero-cta { position: relative; overflow: hidden; border: 0 !important; background: var(--v-gloss), #fff !important; color: var(--v-violet-dark) !important;
            box-shadow: 0 5px 0 #cbbcff, 0 10px 20px rgba(0,0,0,.18) !important; transition: transform .1s ease, box-shadow .1s ease; }
.hero-cta.primary { background: var(--v-gloss), var(--v-sun) !important; color: #3a2600 !important; box-shadow: 0 5px 0 var(--v-sun-dark), 0 10px 22px rgba(0,0,0,.22) !important; }
.hero-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--v-sun-dark) !important; }
.hero-cta::after, .show-more::after, .setup-banner button::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .5s ease;
}
.hero-cta:hover::after, .show-more:hover::after, .setup-banner button:hover::after { left: 130%; }

/* ── Set-up banner and Continue playing ── */
.setup-banner { background: var(--v-gloss), var(--v-sun) !important; border: 0 !important; color: #3a2600 !important; box-shadow: 0 6px 0 var(--v-sun-dark), 0 12px 24px rgba(217,154,0,.25); }
.setup-banner button { position: relative; overflow: hidden; background: var(--v-gloss), var(--v-violet) !important; box-shadow: 0 4px 0 var(--v-violet-dark); }
.recent-label { color: var(--v-violet-dark) !important; }
.recent-chip { border: 2px solid #fff !important; box-shadow: 0 4px 0 #d8cffb, 0 8px 16px rgba(61,23,184,.1); font-weight: 800 !important; }
.recent-chip:nth-child(5n+1) .recent-emoji { background: var(--v-gloss), var(--v-sky); }
.recent-chip:nth-child(5n+2) .recent-emoji { background: var(--v-gloss), var(--v-pink); }
.recent-chip:nth-child(5n+3) .recent-emoji { background: var(--v-gloss), var(--v-teal); }
.recent-chip:nth-child(5n+4) .recent-emoji { background: var(--v-gloss), var(--v-sun); }
.recent-chip:nth-child(5n+5) .recent-emoji { background: var(--v-gloss), var(--v-violet); }

/* ── Kids' Corner strip ── */
.corner-strip { order: 1; width: min(1180px, 100%); margin: 0 0 16px; }
.corner-strip[hidden] { display: none; }
.corner-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.corner-strip-head b { font: 400 1.25rem/1.2 'Fredoka One', 'Outfit', sans-serif; color: var(--v-violet-dark); }
.corner-strip-head a { font-weight: 900; color: var(--v-pink-dark); text-decoration: none; }
.corner-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.corner-tile { position: relative; display: flex; align-items: center; gap: 12px; min-height: 86px; padding: 12px 14px; border-radius: 20px; color: #fff; text-decoration: none; overflow: hidden; box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 12px 24px rgba(61,23,184,.18); }
.corner-tile.news { background: var(--v-gloss), var(--v-sky); } .corner-tile.artwork { background: var(--v-gloss), var(--v-pink); } .corner-tile.writing { background: var(--v-gloss), var(--v-teal); }
.corner-tile .tile-emoji { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.22); font-size: 28px; overflow: hidden; }
.corner-tile .tile-emoji img { width: 100%; height: 100%; object-fit: cover; }
.corner-tile .tile-text { display: grid; min-width: 0; }
.corner-tile .tile-text small { font-weight: 800; opacity: .9; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.corner-tile .tile-text b { font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.corner-tile:hover { filter: brightness(1.06); transform: translateY(-2px); }
.corner-tile.newsletter { background: var(--v-gloss), var(--v-sun, #f59e0b); color: #3a2600; }
@media (max-width: 1100px) { .corner-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .corner-tiles { grid-template-columns: 1fr; } }

/* ── Browse bar ── */
/* Left-aligned so an overflowing row scrolls instead of hiding its first chip ("All"). */
.category-filters { justify-content: flex-start !important; }
.game-discovery { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) !important; }
@media (max-width: 1100px) { .game-discovery { grid-template-columns: 1fr !important; } }
.game-search-wrap { border: 2px solid #fff !important; box-shadow: 0 5px 0 #d8cffb, 0 12px 22px rgba(61,23,184,.12) !important; }
.game-search-wrap > span::before { color: var(--v-pink) !important; }
.category-btn { border: 2px solid #fff !important; font-weight: 800 !important; box-shadow: 0 3px 0 #d8cffb !important; }
.category-btn[data-filter="all"] .material-symbols-rounded { color: var(--v-violet); }
.category-btn[data-filter="olympiads"] .material-symbols-rounded { color: var(--v-orange); }
.category-btn[data-filter="skill"] .material-symbols-rounded { color: var(--v-sky); }
.category-btn[data-filter="knowledge"] .material-symbols-rounded { color: var(--v-teal); }
.category-btn[data-filter="kg"] .material-symbols-rounded { color: var(--v-pink); }
.category-btn[data-filter="space"] .material-symbols-rounded { color: var(--v-violet); }
.category-btn.active .material-symbols-rounded { color: #fff !important; }
.category-btn.active { color: #fff !important; border-color: transparent !important; background: var(--v-gloss), var(--v-violet) !important; box-shadow: 0 4px 0 var(--v-violet-dark) !important; }
.category-btn[data-filter="olympiads"].active { background: var(--v-gloss), var(--v-orange) !important; box-shadow: 0 4px 0 var(--v-orange-dark) !important; }
.category-btn[data-filter="skill"].active { background: var(--v-gloss), var(--v-sky) !important; box-shadow: 0 4px 0 var(--v-sky-dark) !important; }
.category-btn[data-filter="knowledge"].active { background: var(--v-gloss), var(--v-teal) !important; box-shadow: 0 4px 0 var(--v-teal-dark) !important; }
.category-btn[data-filter="kg"].active { background: var(--v-gloss), var(--v-pink) !important; box-shadow: 0 4px 0 var(--v-pink-dark) !important; }
.class-chip { border: 2px solid #fff !important; font-weight: 800 !important; box-shadow: 0 3px 0 #d8cffb; }
.class-chip.active { background: var(--v-gloss), var(--v-sky) !important; color: #fff !important; box-shadow: 0 3px 0 var(--v-sky-dark); }
.level-btn { border: 2px solid #fff !important; font-weight: 800 !important; box-shadow: 0 3px 0 #d8cffb; }
.level-btn.active { background: var(--v-gloss), var(--v-violet) !important; box-shadow: 0 3px 0 var(--v-violet-dark); }
.level-btn.lvl-easy.active { background: var(--v-gloss), var(--v-lime) !important; box-shadow: 0 3px 0 var(--v-lime-dark); }
.level-btn.lvl-challenging.active { background: var(--v-gloss), var(--v-orange) !important; box-shadow: 0 3px 0 var(--v-orange-dark); }
.level-filters-label { color: var(--v-violet-dark) !important; font-weight: 900 !important; }
@media (max-width: 1100px) { .game-discovery { background: #f6f2ff !important; } .menu-section-label { background: #f6f2ff !important; } }

/* ── Section headings ── */
.menu-section-label { color: var(--v-violet-dark) !important; }
.menu-section-label::before { background: var(--v-gloss), var(--v-pink) !important; color: #fff !important; }
.menu-section-label::after { background: var(--v-gloss), var(--v-violet) !important; color: #fff !important; border: 0 !important; }

/* ── Game cards: solid colour per category, glossy tile, shine on hover ── */
.game-card { position: relative; overflow: hidden; border: 2px solid #fff !important; border-top: 6px solid var(--card-colour, var(--v-violet)) !important;
             box-shadow: 0 6px 0 #e3dcfa, 0 12px 24px rgba(61,23,184,.1) !important; }
.game-card:hover, .game-card:focus-visible { box-shadow: 0 8px 0 #d8cffb, 0 18px 30px rgba(61,23,184,.2) !important; border-color: #fff !important; border-top-color: var(--card-colour, var(--v-violet)) !important; }
.game-card::after { display: block !important; content: '' !important; position: absolute; top: 0; left: -70%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.game-card:hover::after { left: 140%; }
.game-card .emoji { background: var(--v-gloss), var(--card-colour, var(--v-violet)) !important; box-shadow: 0 4px 0 var(--card-edge, var(--v-violet-dark)); }
.game-card[data-category="olympiads"] { --card-colour: var(--v-orange); --card-edge: var(--v-orange-dark); }
.game-card[data-category="knowledge"] { --card-colour: var(--v-teal); --card-edge: var(--v-teal-dark); }
.game-card[data-category="skill"] { --card-colour: var(--v-sky); --card-edge: var(--v-sky-dark); }
.game-card[data-category="kg"] { --card-colour: var(--v-pink); --card-edge: var(--v-pink-dark); }
.game-card[data-category="space"] { --card-colour: var(--v-violet); --card-edge: var(--v-violet-dark); }
.menu[data-section="daily"] .game-card { --card-colour: var(--v-sun); --card-edge: var(--v-sun-dark); }
.menu[data-section="fun"] .game-card { --card-colour: var(--v-lime); --card-edge: var(--v-lime-dark); }
.menu[data-section="path"] .game-card { --card-colour: #8a2ee6; --card-edge: #5d1aa6; }
.game-card h2 { color: var(--v-ink) !important; font-weight: 900 !important; }
.game-card[data-level="easy"]::before { background: var(--v-lime) !important; color: #fff !important; }
.game-card[data-level="challenging"]::before { background: var(--v-orange) !important; color: #fff !important; }
.grade-tag { background: #e3f0ff !important; color: #0a4fa8 !important; font-weight: 800 !important; }
.grade-tag.is-class { background: var(--v-sky) !important; color: #fff !important; }
.show-more { position: relative; overflow: hidden; border: 0 !important; background: var(--v-gloss), var(--v-violet) !important; color: #fff !important; box-shadow: 0 5px 0 var(--v-violet-dark), 0 10px 20px rgba(61,23,184,.22); }
.show-more:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--v-violet-dark); }

/* ── Install, feedback, footer ── */
#install-btn { background: var(--v-gloss), var(--v-pink) !important; box-shadow: 0 5px 0 var(--v-pink-dark), 0 10px 20px rgba(200,15,87,.25) !important; }
.install-help { color: var(--v-violet-dark) !important; font-weight: 800; }
.feedback-strip { border: 2px solid #fff !important; box-shadow: 0 5px 0 #e3dcfa; }
.home-footer { margin-top: 28px !important; padding: 22px 16px 26px !important; border-radius: 26px; background: linear-gradient(180deg, #2a1470, #1b0c4d) !important; color: #e8e2ff !important; }
.home-footer a { color: #ffd84d !important; }

/* ── Settings, dialogs, toast ── */
.profile-actions button:not(.secondary):not(.danger), .help-close { background: var(--v-gloss), var(--v-violet) !important; box-shadow: 0 4px 0 var(--v-violet-dark) !important; }
.learner-tab.active { background: var(--v-gloss), #efe9ff !important; border-color: var(--v-violet) !important; }
.learner-tab-avatar { background: var(--v-gloss), var(--v-pink) !important; color: #fff !important; }
.settings-head h3 { color: var(--v-violet-dark) !important; }
#cert-toast { border-color: var(--v-sun) !important; background: linear-gradient(180deg, #fffaf0, #fff3cf) !important; }

@media (prefers-reduced-motion: reduce) { .home-hero::after, .game-card::after, .hero-cta::after, .show-more::after { animation: none !important; transition: none !important; display: none !important; } }
body.reduced-motion .home-hero::after, body.reduced-motion .game-card::after { animation: none !important; display: none !important; }