/* Edulin Games v15 — home screen, settings and certificates.
   Loads last. Adds the grown-up links and learner chip, the hero promise, stats and calls to
   action, the class chips, section previews with "Show all", the Continue playing row, the
   Settings panel with "My certificates", and the certificate toast. */

/* ════════ Order of the home column ════════ */
.home-topbar { order: -1; }
.setup-banner, .recent-strip { order: 1; }
.show-more { order: 5; }

/* Cards render immediately. The old content-visibility:auto skipping left blank gaps while
   scrolling; with section previews the page is short enough not to need it. */
.game-card { content-visibility: visible !important; contain-intrinsic-size: none !important; }

/* ════════ Grown-up links + learner chip ════════ */
.home-topbar {
    width: min(1180px, 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding-right: 330px; /* the fixed language and sound controls sit top-right on desktop */
    box-sizing: border-box;
}
.grownup-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.grownup-links a {
    color: var(--pastel-violet-dark);
    font: 800 .92rem/1.2 'Outfit', sans-serif;
    text-decoration: none;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
}
.grownup-links a:hover, .grownup-links a:focus-visible { border-bottom-color: var(--pastel-violet); }
.learner-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 5px 10px 5px 6px;
    border: 1px solid var(--pastel-line);
    border-radius: 999px;
    background: var(--pastel-white);
    color: var(--pastel-ink);
    font: inherit;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(77, 60, 120, .08);
    max-width: 260px;
}
.learner-chip:hover { border-color: var(--pastel-violet); }
.learner-chip-avatar {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--pastel-blush); color: #8f3f62; font-weight: 900;
}
.learner-chip-text { display: grid; text-align: left; min-width: 0; }
.learner-chip-text b, .learner-chip-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.learner-chip-text b { font-size: 14px; }
.learner-chip-text small { font-size: 11.5px; color: var(--pastel-muted); }
.learner-chip .material-symbols-rounded { color: var(--pastel-violet); font-size: 22px; }

/* ════════ Hero ════════ */
.home-title { letter-spacing: -.02em !important; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.hero-cta {
    min-height: 48px;
    padding: 10px 18px;
    border: 1.5px solid var(--pastel-violet);
    border-radius: 999px;
    background: var(--pastel-white);
    color: var(--pastel-violet-dark);
    font: 800 15px/1 'Outfit', sans-serif;
    cursor: pointer;
}
.hero-cta.primary { background: var(--pastel-violet); color: #fff; box-shadow: 0 8px 18px rgba(118, 87, 217, .28); }
.hero-cta:hover { transform: translateY(-1px); }
.hero-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0 0 12px;
    padding: 0;
    color: var(--pastel-muted);
    font: 600 13.5px/1.3 'Outfit', sans-serif;
}
.hero-stats b { color: var(--pastel-ink); font-weight: 900; font-size: 15px; }

/* ════════ Set-up banner ════════ */
.setup-banner {
    width: min(1180px, 100%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid #f3d38a;
    border-radius: 18px;
    background: #fff6dc;
    color: #6b4b00;
    font: 700 14px/1.35 'Outfit', sans-serif;
}
.setup-banner[hidden] { display: none; }
.setup-banner button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--pastel-violet);
    color: #fff;
    font: 800 14px/1 'Outfit', sans-serif;
    cursor: pointer;
}

/* ════════ Continue playing ════════ */
.recent-strip { width: min(1180px, 100%); margin: 0 0 14px; }
.recent-strip[hidden] { display: none; }
.recent-label { margin: 0 0 8px; color: var(--pastel-ink); font: 900 1.05rem/1.2 'Fredoka One', 'Outfit', sans-serif; text-align: left; }
.recent-row { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.recent-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--pastel-line);
    border-radius: 16px;
    background: var(--pastel-white);
    color: var(--pastel-ink);
    font: 700 14px/1.2 'Outfit', sans-serif;
    cursor: pointer;
}
.recent-chip:hover { border-color: var(--pastel-violet); }
.recent-emoji { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--pastel-lavender); font-size: 20px; }

/* ════════ Class chips ════════ */
.class-filters { display: flex; align-items: center; gap: 8px; min-width: 0; }
.game-discovery .class-filters { grid-column: 1 / -1; }
.class-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; min-width: 0; }
.class-chips::-webkit-scrollbar { display: none; }
.class-chip {
    flex: 0 0 auto;
    min-width: 40px;
    min-height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--pastel-line);
    border-radius: 999px;
    background: var(--pastel-white);
    color: var(--pastel-ink);
    font: 700 .86rem/1 'Outfit', sans-serif;
    cursor: pointer;
}
.class-chip:hover { background: var(--pastel-lavender); }
.class-chip.active { background: #2f6fd0; border-color: #2f6fd0; color: #fff; }
.game-discovery .level-filters { grid-column: 1 / -1; }

/* ════════ Cards: class range line, previews ════════ */
.grade-tag {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef3ff;
    color: #33518f;
    font: 700 10.5px/1.6 'Outfit', sans-serif;
    white-space: nowrap;
}
.grade-tag.is-class { background: #2f6fd0; color: #fff; }
.game-card.is-extra { display: none !important; }
.show-more {
    width: min(1180px, 100%);
    margin: 8px 0 4px;
    min-height: 44px;
    border: 1px dashed var(--pastel-violet);
    border-radius: 14px;
    background: transparent;
    color: var(--pastel-violet-dark);
    font: 800 14px/1 'Outfit', sans-serif;
    cursor: pointer;
}
.show-more:hover { background: var(--pastel-lavender); }
.show-more[hidden] { display: none; }

/* ════════ Footer ════════ */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-bottom: 6px; }
.footer-links a { font-weight: 800; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.home-footer { opacity: 1 !important; }

/* ════════ Settings ════════ */
.settings-box { width: min(620px, 100%) !important; max-height: min(92dvh, 900px); overflow: auto; box-sizing: border-box; }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.settings-head h3 { margin: 0 !important; }
.settings-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--pastel-lavender); color: var(--pastel-ink); font-size: 22px; cursor: pointer; }
.learner-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.learner-tab {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    padding: 8px; border: 1px solid var(--pastel-line); border-radius: 14px;
    background: #fff; color: var(--pastel-ink); font: inherit; cursor: pointer; text-align: left;
}
.learner-tab.active { border-color: var(--pastel-violet); background: var(--pastel-lavender); box-shadow: 0 0 0 2px #7657d933; }
.learner-tab-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pastel-blush); color: #8f3f62; font-weight: 900; }
.learner-tab-text { display: grid; min-width: 0; }
.learner-tab-text b, .learner-tab-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.learner-tab-text b { font-size: 13.5px; }
.learner-tab-text small { font-size: 11px; color: var(--pastel-muted); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.settings-grid .span-2 { grid-column: 1 / -1; }
.profile-box label { color: var(--pastel-ink) !important; }
.profile-box .hint { color: var(--pastel-muted) !important; opacity: 1 !important; }
.profile-actions button.secondary { background: var(--pastel-lavender) !important; color: var(--pastel-ink) !important; border: 1px solid var(--pastel-line) !important; }
.profile-actions button.danger { background: #fdeaea !important; color: #9b2c2c !important; border: 1px solid #f3c1c1 !important; }
.cert-list-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pastel-line); }
.cert-list-wrap h4 { margin: 0 0 10px; color: var(--pastel-ink); font: 900 1rem/1.2 'Outfit', sans-serif; }
.cert-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.cert-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--pastel-line); border-radius: 12px; background: #fffdf7; }
.cert-list li.cert-empty { justify-content: center; color: var(--pastel-muted); font-size: 13px; background: transparent; border-style: dashed; }
.cert-item-text { display: grid; min-width: 0; }
.cert-item-text b { font-size: 13.5px; color: var(--pastel-ink); }
.cert-item-text small { font-size: 11.5px; color: var(--pastel-muted); }
.cert-list button { flex: 0 0 auto; min-height: 36px; padding: 6px 12px; border: 1px solid var(--pastel-line); border-radius: 999px; background: #fff; color: var(--pastel-violet-dark); font: 800 12.5px/1 'Outfit', sans-serif; cursor: pointer; }

/* ════════ Certificate toast (over the home screen and inside games) ════════ */
#cert-toast {
    position: fixed;
    z-index: 400;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: min(360px, calc(100vw - 28px));
    box-sizing: border-box;
    padding: 14px 42px 12px 16px;
    border: 2px solid #d9a520;
    border-radius: 18px;
    background: #fffaf0;
    color: #3d2e05;
    font: 600 14px/1.4 'Outfit', sans-serif;
    box-shadow: 0 18px 40px rgba(60, 40, 0, .25);
    transform: translateY(140%);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    pointer-events: none;
}
#cert-toast.show { transform: none; opacity: 1; pointer-events: auto; }
#cert-toast small { color: #6d5a1f; }
.cert-toast-actions { display: flex; gap: 8px; margin-top: 10px; }
.cert-toast-actions button { min-height: 38px; padding: 7px 14px; border: 0; border-radius: 999px; background: #b8860b; color: #fff; font: 800 13.5px/1 'Outfit', sans-serif; cursor: pointer; }
.cert-toast-close { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #6d5a1f; font-size: 20px; cursor: pointer; }
body.reduced-motion #cert-toast { transition: none; }

/* ════════ Responsive ════════ */
@media (max-width: 760px) {
    .home-topbar { padding-right: 0; }
}
@media (max-width: 1100px) {
    .game-card .grade-tag { grid-column: 1 !important; justify-self: center; }
}
@media (max-width: 760px) {
    .home-topbar { flex-wrap: wrap; margin-bottom: 10px; }
    .grownup-links { order: 2; width: 100%; gap: 2px 14px; }
    .grownup-links a { font-size: .85rem; }
    .learner-chip { order: 1; max-width: 100%; }
    .hero-stats { gap: 4px 12px; font-size: 12px; }
    .hero-stats b { font-size: 13.5px; }
    .hero-ctas { gap: 8px; }
    .hero-cta { min-height: 44px; padding: 9px 14px; font-size: 14px; }
    .setup-banner { flex-direction: column; align-items: stretch; text-align: left; }
    .settings-grid { grid-template-columns: 1fr; }
    .learner-tabs { grid-template-columns: 1fr; }
    #cert-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
/* pastel-theme-v1 hid the second hero pill on small phones; that pill is now "No ads". */
@media (max-width: 410px) { .home-tagline span:nth-child(2) { display: inline-block !important; } }
@media (prefers-reduced-motion: reduce) { #cert-toast { transition: none; } }