/* Polyglitz UI kit: tactile, colourful buttons and a colourful menu with icons, loaded after every other sheet.
   Buttons sit on a darker "ledge" and press down into it, like real keys. Selectors are wrapped in :where() so any
   more specific button style elsewhere (the cat pages, books, games) keeps its own look, and high contrast mode
   (html.a11y-contrast, js/a11y.js) is left alone.
   html.pref-easy is the easy-learning mode for ADHD and autism: soft colours, no motion, nothing decorative. */

:root {
  --ledge: 4px;
  --key-hi: rgb(255 255 255 / .8);
  --key-edge: color-mix(in srgb, var(--ink) 15%, var(--surface));
  --key-drop: 0 10px 18px -12px rgb(16 21 42 / .45);
  --key-grad: linear-gradient(135deg, #5b6cff 0%, #7a4dff 55%, #b44cf0 100%);
  --key-grad-edge: #3b2db3;
  --key-ok: linear-gradient(180deg, #4bd88b, #22b067); --key-ok-edge: #15804a;
  --key-bad: linear-gradient(180deg, #ff7b6b, #e5402f); --key-bad-edge: #a8261a;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --key-hi: rgb(255 255 255 / .1); --key-edge: #070a14; --key-drop: 0 10px 18px -12px rgb(0 0 0 / .8); } }
:root[data-theme="dark"] { --key-hi: rgb(255 255 255 / .1); --key-edge: #070a14; --key-drop: 0 10px 18px -12px rgb(0 0 0 / .8); }

/* ---------- buttons ---------- */
:where(html:not(.a11y-contrast)) .btn {
  border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 90%, var(--ink)));
  box-shadow: inset 0 1.5px 0 var(--key-hi), 0 var(--ledge) 0 var(--key-edge), var(--key-drop);
  transform: translateY(0); filter: none;
  transition: transform .1s ease, box-shadow .1s ease, filter .15s ease;
}
:where(html:not(.a11y-contrast)) .btn:hover:not(:disabled) {
  transform: translateY(-1px); border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: inset 0 1.5px 0 var(--key-hi), 0 calc(var(--ledge) + 1px) 0 var(--key-edge), var(--key-drop);
}
:where(html:not(.a11y-contrast)) .btn:active:not(:disabled) {
  transform: translateY(calc(var(--ledge) - 1px));
  box-shadow: inset 0 1.5px 0 var(--key-hi), 0 1px 0 var(--key-edge), 0 3px 6px -4px rgb(16 21 42 / .4);
}
:where(html:not(.a11y-contrast)) .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 3px; }
:where(html:not(.a11y-contrast)) .btn:disabled { filter: saturate(.3); opacity: .55; }
:where(html:not(.a11y-contrast)) .btn.small { border-radius: 13px; --ledge: 3px; }

/* the main action: a glossy violet key (white text in both themes) */
html:root:not(.a11y-contrast) .btn.primary { color: #fff; }
/* white keys on colourful cards (friends banner, featured plan) keep their dark text and get a soft ledge */
html:root:not(.a11y-contrast) :is(.so-hero, .plan.featured) .btn.primary { color: #23308f; text-shadow: none; background: linear-gradient(180deg, #fff, #eef0fb);
  box-shadow: inset 0 1.5px 0 #fff, 0 var(--ledge) 0 rgb(20 20 80 / .35), 0 12px 22px -12px rgb(0 0 0 / .5); }
:where(html:not(.a11y-contrast)) .btn.primary {
  color: #fff; border-color: transparent; text-shadow: 0 1px 1px rgb(30 10 90 / .35);
  background: linear-gradient(180deg, rgb(255 255 255 / .26), rgb(255 255 255 / 0) 52%), var(--key-grad);
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .45), inset 0 -2px 0 rgb(0 0 0 / .1), 0 var(--ledge) 0 var(--key-grad-edge), 0 12px 22px -10px rgb(91 76 255 / .65);
}
:where(html:not(.a11y-contrast)) .btn.primary:hover:not(:disabled) {
  filter: brightness(1.06) saturate(1.05);
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .45), inset 0 -2px 0 rgb(0 0 0 / .1), 0 calc(var(--ledge) + 1px) 0 var(--key-grad-edge), 0 16px 28px -12px rgb(91 76 255 / .7);
}
:where(html:not(.a11y-contrast)) .btn.primary:active:not(:disabled) {
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .35), 0 1px 0 var(--key-grad-edge), 0 4px 8px -5px rgb(91 76 255 / .6);
}
:where(html:not(.a11y-contrast)) .btn.danger {
  color: #fff; border-color: transparent; text-shadow: 0 1px 1px rgb(90 10 0 / .3);
  background: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 52%), var(--key-bad);
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .4), 0 var(--ledge) 0 var(--key-bad-edge), 0 12px 22px -12px rgb(229 64 47 / .6);
}
:where(html:not(.a11y-contrast)) .btn.ghost { background: color-mix(in srgb, var(--surface) 92%, transparent); }
:where(html:not(.a11y-contrast)) .btn.share-wa { color: #06301a; background: linear-gradient(180deg, #4ee283, #22c55e); border-color: transparent; box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .45), 0 var(--ledge) 0 #138a3f, var(--key-drop); }
:where(html:not(.a11y-contrast)) .btn.share-tg { color: #fff; background: linear-gradient(180deg, #4cb8f0, #2196d8); border-color: transparent; box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .4), 0 var(--ledge) 0 #15699c, var(--key-drop); }

/* ---------- answers in lessons: cards that press, turn green or red ---------- */
:where(html:not(.a11y-contrast)) :is(.opt, .tok, .chip, .pair) {
  box-shadow: inset 0 1.5px 0 var(--key-hi), 0 3px 0 var(--key-edge), 0 8px 14px -12px rgb(16 21 42 / .4);
  transition: transform .1s ease, box-shadow .1s ease, background-color .15s, border-color .15s;
}
:where(html:not(.a11y-contrast)) :is(.opt, .tok, .pair):active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1.5px 0 var(--key-hi), 0 1px 0 var(--key-edge); }
:where(html:not(.a11y-contrast)) .tok { border-bottom-width: 1px; }
:where(html:not(.a11y-contrast)) :is(.opt.right, .tok.right) { box-shadow: inset 0 1.5px 0 var(--key-hi), 0 3px 0 color-mix(in srgb, var(--ok) 75%, #000); }
:where(html:not(.a11y-contrast)) .opt.wrong { box-shadow: inset 0 1.5px 0 var(--key-hi), 0 3px 0 color-mix(in srgb, var(--bad) 75%, #000); }
:where(html:not(.a11y-contrast)) :is(.chip[aria-checked="true"], .chip[aria-pressed="true"]) { box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .3), 0 3px 0 color-mix(in srgb, var(--accent) 60%, #000); }
:where(html:not(.a11y-contrast)) .chip.lv[aria-checked="true"] { box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .3), 0 3px 0 color-mix(in srgb, var(--lv) 60%, #000); }

/* round header keys */
:where(html:not(.a11y-contrast)) :is(.theme-btn, .search-btn, .gem-count, .ui-switch) {
  box-shadow: inset 0 1.5px 0 var(--key-hi), 0 3px 0 var(--key-edge), 0 6px 12px -8px rgb(16 21 42 / .35);
}

/* ---------- the menu: every section has its own colour and picture ---------- */
.tabs a { --t: var(--accent); }
.tabs a[data-nav="map"] { --t: #22a861; } .tabs a[data-nav="plan"] { --t: #e8920c; } .tabs a[data-nav="review"] { --t: #e0457b; }
.tabs a[data-nav="videos"] { --t: #e5413c; } .tabs a[data-nav="games"] { --t: #8452f2; } .tabs a[data-nav="coach"] { --t: #0f9bc0; }
.tabs a[data-nav="league"] { --t: #d99a00; } .tabs a[data-nav="cat"] { --t: #ec6a2c; } .tabs a[data-nav="friends"] { --t: #2f74e8; }
.tabs a[data-nav="stories"] { --t: #b5652f; }
.tabs a::before { display: inline-block; margin-inline-end: .38em; font-size: 1.05em; line-height: 1; vertical-align: -.08em; filter: saturate(1.1); }
.tabs a[data-nav="map"]::before { content: "🧭"; } .tabs a[data-nav="plan"]::before { content: "🗓️"; } .tabs a[data-nav="review"]::before { content: "🔁"; }
.tabs a[data-nav="videos"]::before { content: "🎬"; } .tabs a[data-nav="games"]::before { content: "🎮"; } .tabs a[data-nav="coach"]::before { content: "📊"; }
.tabs a[data-nav="league"]::before { content: "🏆"; } .tabs a[data-nav="cat"]::before { content: "🐱"; } .tabs a[data-nav="friends"]::before { content: "👋"; }
.tabs a[data-nav="stories"]::before { content: "📚"; }
.tabs { flex-wrap: wrap; justify-content: center; overflow: visible; }
:where(html:not(.a11y-contrast)) .tabs { gap: 4px; padding: 5px; border-radius: 22px; background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: inset 0 1px 3px rgb(16 21 42 / .08), 0 1px 0 var(--key-hi); }
:where(html:not(.a11y-contrast)) .tabs a { color: var(--ink); border-radius: 15px; font-weight: 600; transition: background-color .15s, color .15s, transform .1s, box-shadow .1s; }
:where(html:not(.a11y-contrast)) .tabs a:hover { color: var(--ink); background: color-mix(in srgb, var(--t) 14%, transparent); }
:where(html:not(.a11y-contrast)) .tabs a.on {
  color: #fff; text-shadow: 0 1px 1px rgb(0 0 0 / .25); font-weight: 700;
  background: linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / 0) 55%), var(--t);
  box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .4), 0 3px 0 color-mix(in srgb, var(--t) 62%, #000), 0 8px 16px -8px color-mix(in srgb, var(--t) 70%, transparent);
}
:where(html:not(.a11y-contrast)) .tabs a:active { transform: translateY(2px); }
.tabs a .badge { vertical-align: .1em; }
@media (min-width: 761px) { .tabs a { padding: .5em .8em; } }

/* ---------- easy learning (ADHD, autism): soft and still ---------- */
html.pref-easy {
  --key-grad: linear-gradient(135deg, #5c7fd6, #6f86d8); --key-grad-edge: #3f5aa0;
  --grad: linear-gradient(135deg, #5c7fd6, #6f86d8);
}
html.pref-easy .tabs a.on { --t: #5c7fd6; }
html.pref-easy .tabs a::before { filter: saturate(.55); }
html.pref-easy .btn.primary { background-image: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 52%), var(--key-grad) !important; }
html.pref-easy.scene-media :is(#view, .foot) { background: color-mix(in srgb, var(--bg) 94%, transparent) !important; }
html.pref-easy *, html.pref-easy *::before, html.pref-easy *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
html.pref-easy :is(.medal-pop, .toast) { animation: none !important; }
/* in a lesson: a clear step counter and nothing else moving */
html.pref-easy .lesson .ex-count { font-size: 1rem; font-weight: 700; padding: .2em .6em; border-radius: 999px; background: var(--surface-2); color: var(--ink); }
html.pref-easy .lesson .ex-head .q { line-height: 1.45; }
.q-say { appearance: none; border: 0; cursor: pointer; margin-inline-start: .4em; width: 34px; height: 34px; border-radius: 50%; vertical-align: middle;
  background: var(--surface-2); color: var(--ink); font-size: 1rem; box-shadow: inset 0 1px 0 var(--key-hi), 0 2px 0 var(--key-edge); }
.q-say:active { transform: translateY(2px); box-shadow: none; }

/* the easy-learning switch in the personal area stands out */
.easy-card { border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--rule)); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-radius: 18px; padding: 12px 14px; display: grid; gap: 6px; }
.easy-card .muted { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  :where(html:not(.a11y-contrast)) :is(.btn, .opt, .tok, .tabs a) { transition: none; }
}
html.pref-easy.in-lesson .buddy { display: none !important; }
/* easy learning: the answer card with "next" always sits in the same place, at the bottom of the screen */
html.pref-easy .lesson .feedback:not(:empty) { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 6;
  box-shadow: 0 -6px 24px -10px rgb(16 21 42 / .35), 0 10px 24px -12px rgb(16 21 42 / .35); }
@media (max-width: 560px) { html.pref-easy .lesson .feedback:not(:empty) { bottom: 68px; } } /* above the accessibility button */