:root {
  --playtalk-shell-bg:
    radial-gradient(circle at 50% 0%, rgba(70, 130, 255, 0.16), transparent 32%),
    radial-gradient(circle at 18% 18%, rgba(47, 122, 255, 0.1), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(121, 219, 255, 0.1), transparent 22%),
    radial-gradient(ellipse at bottom, #172534 0%, #070b12 100%);
  --playtalk-footer-bg: linear-gradient(180deg, rgba(3, 12, 24, 0.98), rgba(7, 34, 67, 0.98) 58%, rgba(2, 8, 18, 0.99) 100%);
  --playtalk-footer-line: rgba(119, 210, 255, 0.22);
  --playtalk-footer-glow: rgba(91, 212, 255, 0.55);
  --playtalk-footer-active: linear-gradient(180deg, rgba(66, 183, 255, 0.22), rgba(37, 116, 255, 0.12));
}

html {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"],
[tabindex]:not(input):not(textarea):not(select):not([contenteditable="true"]) {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

button:not(input):not(textarea):not(select),
a,
[role="button"],
[tabindex]:not(input):not(textarea):not(select):not([contenteditable="true"]) {
  -webkit-user-select: none;
  user-select: none;
}

button:focus,
a:focus,
[role="button"]:focus,
[tabindex]:not(input):not(textarea):not(select):not([contenteditable="true"]):focus {
  outline: none;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not(input):not(textarea):not(select):not([contenteditable="true"]):focus-visible {
  outline: 2px solid rgba(119, 210, 255, 0.55);
  outline-offset: 3px;
}

body.playtalk-cosmic-shell {
  background: var(--playtalk-shell-bg) !important;
}

body.playtalk-cosmic-shell .container {
  background: var(--playtalk-shell-bg) !important;
}

body.playtalk-cosmic-shell .container::before,
body.playtalk-cosmic-shell .container::after {
  content: none !important;
  animation: none !important;
  background: none !important;
}

.playtalk-cosmic-stars {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.playtalk-cosmic-stars__layer {
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background-repeat: repeat;
  animation: playtalk-shell-stars-rise var(--stars-speed, 80s) linear infinite;
}

.playtalk-cosmic-stars__layer--one {
  --stars-speed: 70s;
  background-image:
    radial-gradient(circle at 20px 30px, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.7px),
    radial-gradient(circle at 90px 80px, rgba(141, 216, 255, 0.92) 0 1px, transparent 1.8px),
    radial-gradient(circle at 150px 120px, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 60px 150px, rgba(111, 193, 255, 0.9) 0 1px, transparent 1.8px);
  background-size: 180px 180px;
}

.playtalk-cosmic-stars__layer--two {
  --stars-speed: 110s;
  opacity: 0.52;
  background-image:
    radial-gradient(circle at 24px 44px, rgba(255, 255, 255, 0.75) 0 1.4px, transparent 2px),
    radial-gradient(circle at 114px 120px, rgba(116, 214, 255, 0.75) 0 1.5px, transparent 2.1px),
    radial-gradient(circle at 174px 64px, rgba(255, 255, 255, 0.66) 0 1.4px, transparent 2px);
  background-size: 240px 240px;
}

.playtalk-cosmic-stars__layer--three {
  --stars-speed: 150s;
  opacity: 0.34;
  background-image:
    radial-gradient(circle at 40px 50px, rgba(255, 255, 255, 0.58) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 180px 130px, rgba(109, 195, 255, 0.62) 0 1.9px, transparent 2.9px);
  background-size: 300px 300px;
}

@keyframes playtalk-shell-stars-rise {
  from { transform: translateY(0); }
  to { transform: translateY(-240px); }
}

.flashcards-footer-nav {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  height: max(62px, 8vh);
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 200;
  background: var(--playtalk-footer-bg) !important;
  border-top: 1px solid var(--playtalk-footer-line);
  box-shadow:
    0 -10px 36px rgba(0, 0, 0, 0.42),
    0 -2px 20px rgba(40, 117, 255, 0.12);
  backdrop-filter: blur(20px);
  transition: opacity 180ms ease, box-shadow 180ms ease;
}

.flashcards-footer-nav__item {
  position: relative;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  color: #ffffff !important;
  opacity: 0.88 !important;
  transition: transform 160ms ease, opacity 160ms ease, filter 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.flashcards-footer-nav__item.is-active {
  opacity: 1 !important;
  background: var(--playtalk-footer-active) !important;
  box-shadow: inset 0 0 0 1px rgba(110, 213, 255, 0.18);
}

.flashcards-footer-nav__item.is-active::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(96, 232, 255, 0.22), rgba(102, 189, 255, 0.98), rgba(96, 232, 255, 0.22));
  box-shadow:
    0 0 10px var(--playtalk-footer-glow),
    0 0 22px rgba(83, 162, 255, 0.46);
}

.flashcards-footer-nav__item svg,
.flashcards-footer-nav__item img {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.flashcards-footer-nav__item.is-active svg,
.flashcards-footer-nav__item.is-active img {
  filter:
    drop-shadow(0 0 8px rgba(126, 235, 255, 0.9))
    drop-shadow(0 0 18px rgba(91, 180, 255, 0.55));
}

.flashcards-footer-nav__item svg,
.flashcards-footer-nav__item svg path {
  color: #ffffff !important;
  fill: currentColor !important;
}

.flashcards-footer-nav[data-shell-page="books"] {
  display: grid !important;
  bottom: 0 !important;
}

body.books-home-footer-visible .flashcards-footer-nav[data-shell-page="books"] {
  display: grid !important;
}

body.books-reader-open .flashcards-footer-nav,
body.gameplay-active .flashcards-footer-nav,
body.game-open .flashcards-footer-nav,
body.sound-test-open .flashcards-footer-nav,
body.identity-gate-open .flashcards-footer-nav {
  display: none !important;
}