/* ==========================================================================
   GLOBAL RESET VA ASOSIY QOIDALAR (avvalgi quality-polish.css dan)
   ========================================================================== */
html {
  color-scheme: dark;
  background: var(--bg, #07101a)
}

html.theme-light,
body.theme-picker--light {
  color-scheme: light
}

*,
*::before,
*::after {
  box-sizing: border-box
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto
}

button,
input,
select,
textarea {
  font: inherit
}

:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), .58);
  outline-offset: 3px
}

body {
  overflow-x: clip;
  transition: background-color .22s ease, color .22s ease
}

.text-uppercase {
  text-transform: uppercase
}

/* TILNAV EXPERIENCE LAYER — product-specific styling hooks, no generic shell class names. */
.learning__stage {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 150px);
  padding-top: 8px
}

.navshell {
  background: linear-gradient(180deg, rgba(var(--navshell-rgb), .98), rgba(var(--navshell-rgb), .88)), radial-gradient(circle at 12% 0%, rgba(var(--accent-rgb), .16), transparent 32%), radial-gradient(circle at 88% 0%, rgba(var(--teal-rgb), .14), transparent 34%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
  border-bottom-color: rgba(var(--overlay-rgb), .12)
}

.navshell__inner,
.command__nav__inner {
  max-width: 900px
}

.identity {
  padding: 7px 10px 7px 7px;
  border: 1px solid rgba(var(--overlay-rgb), .08);
  border-radius: 16px;
  background: rgba(var(--overlay-rgb), .035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}

.identity__logo {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 12px rgba(var(--teal-rgb), .28))
}

.navshell__metrics {
  gap: 7px
}

.navshell__metric__chip {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(var(--overlay-rgb), .08);
  border-radius: 12px;
  background: rgba(var(--overlay-rgb), .035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03)
}

.utility__chip {
  transition: transform .18s ease, background .18s ease, border-color .18s ease
}

.utility__chip:hover {
  transform: translateY(-2px);
  background: rgba(var(--teal-rgb), .1);
  border-color: rgba(var(--teal-rgb), .3)
}

.mastery__meter {
  padding: 2px 2px 0
}

.mastery__meter__track {
  height: 10px;
  background: rgba(var(--overlay-rgb), .09);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .24)
}

.mastery__meter__fill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--teal), var(--accent), var(--purple));
  box-shadow: 0 0 16px rgba(var(--accent-rgb), .24)
}

.mastery__meter__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .32) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: masterySweep 3.8s ease-in-out infinite
}

@keyframes masterySweep {

  0%,
  55% {
    transform: translateX(-120%)
  }

  80%,
  100% {
    transform: translateX(120%)
  }
}

.command__nav {
  background: rgba(var(--navshell-rgb), .84);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12)
}

.command__nav__inner {
  gap: 8px;
  padding-top: 10px
}

.command__nav__item {
  min-width: 92px;
  border: 1px solid transparent;
  border-radius: 13px 13px 8px 8px;
  padding: 10px 13px;
  transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease
}

.command__nav__item:hover {
  transform: translateY(-2px);
  color: var(--fg);
  background: rgba(var(--overlay-rgb), .055);
  border-color: rgba(var(--overlay-rgb), .08)
}

.command__nav__item.state--active {
  background: linear-gradient(135deg, rgba(var(--teal-rgb), .15), rgba(var(--accent-rgb), .12));
  border-color: rgba(var(--teal-rgb), .25);
  box-shadow: 0 7px 20px rgba(var(--teal-rgb), .08)
}

.quest__strip {
  max-width: 900px;
  margin: 18px auto 8px;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(var(--overlay-rgb), .1);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(var(--teal-rgb), .1), rgba(var(--accent-rgb), .08)), rgba(var(--overlay-rgb), .035);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
  position: relative
}

.quest__strip::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: -80px;
  top: -100px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .16);
  filter: blur(28px);
  pointer-events: none
}

.quest__strip__intro,
.quest__strip__actions {
  position: relative;
  z-index: 1
}

.quest__strip__intro {
  display: grid;
  gap: 2px
}

.quest__strip__eyebrow {
  color: var(--teal);
  font: 800 10px/1.2 'JetBrains Mono', monospace;
  letter-spacing: .12em
}

.quest__strip__title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  color: var(--fg)
}

.quest__strip__hint {
  color: var(--muted);
  font-size: 11px
}

.quest__strip__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.quest__chip {
  border: 1px solid rgba(var(--overlay-rgb), .1);
  border-radius: 999px;
  background: rgba(var(--overlay-rgb), .055);
  color: var(--fg);
  padding: 9px 13px;
  font: 700 12px/1 'Manrope', sans-serif;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease
}

.quest__chip:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--teal-rgb), .35);
  background: rgba(var(--teal-rgb), .1);
  box-shadow: 0 7px 18px rgba(var(--teal-rgb), .1)
}

.quest__chip.state--selected {
  border-color: rgba(var(--accent-rgb), .4);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--purple-rgb), .12))
}

.journey__board,
.play__lab,
.typing__lab,
.listening__lab,
.word__vault,
.language__bridge,
.reward__market {
  max-width: 900px
}

.journey__board {
  padding-top: 18px
}

.unit__banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22)
}

.unit__banner::after {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  right: -35px;
  top: -55px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  filter: blur(16px)
}

.play__lab,
.typing__lab,
.listening__lab,
.word__vault,
.language__bridge,
.reward__market {
  padding-left: 20px;
  padding-right: 20px
}

.play__lab .games__intro,
.typing__lab .games__intro {
  margin: 12px 0 14px;
  padding: 9px 12px;
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: rgba(var(--teal-rgb), .06);
  color: var(--muted);
  font-size: 12px
}

.play__tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--overlay-rgb), .09);
  background: radial-gradient(circle at 92% 15%, rgba(var(--accent-rgb), .12), transparent 28%), linear-gradient(145deg, rgba(var(--overlay-rgb), .065), rgba(var(--overlay-rgb), .025));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s ease, box-shadow .22s ease
}

.play__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .045) 50%, transparent 65%);
  transform: translateX(-120%)
}

.play__tile:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--teal-rgb), .28);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .22), 0 0 24px rgba(var(--teal-rgb), .08)
}

.play__tile:hover::after {
  animation: tileSheen .8s ease
}

@keyframes tileSheen {
  to {
    transform: translateX(120%)
  }
}

.play__tile__visual {
  background: linear-gradient(135deg, rgba(var(--teal-rgb), .16), rgba(var(--accent-rgb), .15));
  border: 1px solid rgba(var(--overlay-rgb), .1);
  box-shadow: 0 0 22px rgba(var(--teal-rgb), .08)
}

.play__tile__icon {
  filter: drop-shadow(0 0 8px rgba(var(--teal-rgb), .2))
}

.continue-card {
  position: relative;
  overflow: hidden;
  min-height: 100px;
  box-shadow: 0 18px 40px rgba(var(--teal-rgb), .13), var(--shadow-md)
}

.continue-card::after {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  right: -80px;
  top: -90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  filter: blur(14px);
  pointer-events: none
}

.site__status {
  opacity: .82
}

.reward-market__empty-card {
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(var(--overlay-rgb), .1);
  background: rgba(var(--overlay-rgb), .04);
  color: var(--muted);
  text-align: center
}

body.theme-picker--light .quest__strip,
body.theme-picker--light .play__tile,
body.theme-picker--light .navshell__metric__chip,
body.theme-picker--light .identity {
  box-shadow: 0 10px 26px rgba(42, 33, 24, .08), inset 0 1px 0 rgba(255, 255, 255, .45)
}

@media(max-width:768px) {
  .quest__strip {
    margin: 12px 14px 4px;
    padding: 13px;
    align-items: flex-start;
    flex-direction: column
  }

  .quest__strip__actions {
    width: 100%;
    justify-content: flex-start
  }

  .quest__chip {
    flex: 1 1 auto;
    text-align: center
  }

  .navshell__inner {
    padding-left: 14px;
    padding-right: 14px
  }
}

@media(max-width:480px) {
  .identity {
    padding: 5px 7px 5px 5px;
    border-radius: 13px
  }

  .identity__logo {
    width: 28px;
    height: 28px
  }

  .quest__strip__title {
    font-size: 16px
  }

  .quest__strip__hint {
    font-size: 10px
  }

  .quest__chip {
    padding: 8px 10px;
    font-size: 11px
  }
}

@media(prefers-reduced-motion:reduce) {

  .mastery__meter__fill::after,
  .play__tile::after {
    animation: none !important
  }
}

/* ---------- Umumiy bo'lim konteynerlari (avvalgi final-ui-polish.css dan) ---------- */
#pathWrap,
#gamesWrap,
#typingWrap,
#listenWrap,
#dictWrap,
#translateWrap,
#storeWrap {
  min-height: 180px;
  scroll-margin-top: 140px;
}

.play__lab,
.typing__lab,
.listening__lab,
.word__vault,
.language__bridge,
.reward__market,
.journey__board {
  width: 100% !important;
}

.games__intro {
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(19, 29, 49, .92), rgba(10, 16, 29, .92)) !important;
  border: 1px solid var(--ui-line) !important;
  color: #9da9c4 !important;
  padding: 13px 15px !important;
  margin: 10px 0 14px !important;
}

/* ---------- Dinamik kartalar (avvalgi ultimate-polish.css dan) ---------- */
.play__lab,
.typing__lab,
.listening__lab,
.word__vault,
.language__bridge,
.reward__market,
.journey__board {
  border-radius: 22px;
}

/* ---------- Eski oq sirtlarni qorong'i mahsulot ichida tuzatish
   (avvalgi quality-polish.css dan) ---------- */
body:not(.theme-picker--light) .listening__lab .audio-player__row,
body:not(.theme-picker--light) .dictionary__card,
body:not(.theme-picker--light) .translator__pane,
body:not(.theme-picker--light) .typing__lab .typing-course__card,
body:not(.theme-picker--light) .zero-english__card,
body:not(.theme-picker--light) .reward__market .store__card {
  background: linear-gradient(145deg, rgba(18, 28, 48, .94), rgba(9, 16, 30, .96));
  color: #edf4ff;
  border-color: rgba(164, 177, 214, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 12px 28px rgba(0, 0, 0, .16);
}

body:not(.theme-picker--light) .listening__lab .audio-player__row:hover,
body:not(.theme-picker--light) .dictionary__card:hover {
  border-color: rgba(56, 216, 255, .28);
  transform: translateY(-2px);
}