@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

:root {
  color-scheme: light;
  --trust-blue: #2563eb;
  --deep-ink: #1f2a37;
  --soft-sky: #eef4ff;
  --support-teal: #14b8a6;
  --warm-accent: #f59e0b;
  --white: #ffffff;
  --soft-gray: #f8fafc;
  --border-gray: #d7e3f4;
  --muted: #526174;
  --shadow: 0 22px 46px rgba(31, 42, 55, 0.13);
  --blue-shadow: 0 20px 34px rgba(37, 99, 235, 0.18);
  --motion-ease-premium: cubic-bezier(0.16, 0.84, 0.22, 1);
  --motion-ease-spring: cubic-bezier(0.2, 0.9, 0.18, 1);
  --motion-duration-fast: 180ms;
  --motion-duration-medium: 420ms;
  --motion-duration-slow: 760ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --trust-blue: #60a5fa;
  --deep-ink: #e7eefb;
  --soft-sky: #121d31;
  --support-teal: #2dd4bf;
  --warm-accent: #fbbf24;
  --white: #172033;
  --soft-gray: #0b1220;
  --border-gray: #344765;
  --muted: #a8b5ca;
  --shadow: 0 24px 50px rgba(0, 0, 0, 0.34);
  --blue-shadow: 0 18px 32px rgba(96, 165, 250, 0.18);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

html.is-reader-native-zoom,
html.is-reader-native-zoom body,
html.is-reader-native-gesture,
html.is-reader-native-gesture body {
  overscroll-behavior-x: auto;
}

body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--deep-ink);
  background:
    radial-gradient(circle at 18% -10%, rgba(37, 99, 235, 0.08), transparent 34%),
    linear-gradient(180deg, var(--soft-gray) 0%, var(--soft-sky) 100%);
  overflow-x: hidden;
  overflow-x: clip;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--trust-blue), var(--support-teal), var(--warm-accent));
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.24);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: scrollProgress linear both;
    animation-timeline: scroll(root block);
  }
}

html.has-game-fullscreen,
html.has-game-fullscreen body,
html.has-reader-fullscreen,
html.has-reader-fullscreen body {
  overflow: hidden;
}

html.has-game-fullscreen .scroll-progress,
html.has-game-fullscreen .app-header,
html.has-game-fullscreen .games-hero,
html.has-game-fullscreen .game-mode-tabs,
html.has-game-fullscreen .game-log {
  display: none !important;
}

html.has-game-fullscreen .app {
  width: 100vw;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

html.has-game-fullscreen .app-view.is-active,
html.has-game-fullscreen .games-shell,
html.has-game-fullscreen .game-stage,
html.has-game-fullscreen .game-stage.motion-reveal,
html.has-game-fullscreen .game-card.motion-reveal {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  will-change: auto !important;
}

html.has-game-fullscreen .app-view.is-active {
  animation: none !important;
}

html.has-game-fullscreen .games-shell {
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html.has-game-fullscreen .game-stage {
  min-height: 100dvh;
}

button {
  font: inherit;
}

.app {
  width: min(1240px, calc(100vw - 36px));
  max-width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 24px 0 34px;
  overflow-x: hidden;
  overflow-x: clip;
}

.app-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 42px);
  min-height: 178px;
  overflow: hidden;
  padding: 28px 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94) 58%, rgba(238, 244, 255, 0.9)),
    var(--white);
  border: 1px solid rgba(215, 227, 244, 0.96);
  border-radius: 30px;
  box-shadow:
    0 30px 70px rgba(31, 42, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.app-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 7% 16%, rgba(37, 99, 235, 0.12), transparent 24%),
    radial-gradient(circle at 88% 24%, rgba(20, 184, 166, 0.08), transparent 26%);
  pointer-events: none;
}

.app-header::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--trust-blue), var(--support-teal), var(--warm-accent));
  opacity: 0.7;
}

.app-header > * {
  position: relative;
  z-index: 1;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 30px);
  min-width: 0;
}

.brand-logo {
  flex: 0 0 auto;
  width: clamp(126px, 15vw, 166px);
  height: 110px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.header-copy {
  min-width: 0;
  max-width: 690px;
}

.header-copy h1 {
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(2.6rem, 4.4vw, 4.05rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.header-copy p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.16rem);
  line-height: 1.5;
}

.header-controls {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 14px;
  min-width: min(430px, 100%);
}

.header-utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}

.mode-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: nowrap;
  padding: 5px;
  border: 1px solid rgba(215, 227, 244, 0.96);
  border-radius: 999px;
  background: rgba(238, 244, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 24px rgba(31, 42, 55, 0.06);
}

.mode-tab {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--deep-ink);
  cursor: pointer;
  font-weight: 800;
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.mode-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.2);
  background: rgba(255, 255, 255, 0.76);
}

.mode-tab.is-active {
  color: var(--white);
  background: var(--trust-blue);
  border-color: var(--trust-blue);
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.22);
}

.mode-tab--feedback {
  color: var(--support-teal);
}

.mode-tab--feedback:hover,
.mode-tab--feedback:focus-visible {
  border-color: rgba(20, 184, 166, 0.28);
  color: var(--support-teal);
}

body.has-feedback-modal {
  overflow: hidden;
}

.feedback-modal[hidden] {
  display: none;
}

.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 20px;
}

.feedback-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(10px);
}

.feedback-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 580px);
  max-height: min(88vh, 720px);
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(215, 227, 244, 0.96);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 244, 255, 0.92)),
    var(--white);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}

.feedback-dialog__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.feedback-dialog h2 {
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.08;
  letter-spacing: 0;
}

.feedback-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--deep-ink);
  cursor: pointer;
}

.feedback-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.feedback-intro {
  margin: 14px 0 18px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.feedback-form {
  display: grid;
  gap: 14px;
}

.feedback-form label {
  display: grid;
  gap: 8px;
}

.feedback-form label span {
  color: var(--trust-blue);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.feedback-form input[type="email"],
.feedback-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(196, 214, 241, 0.98);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--deep-ink);
  font: inherit;
  line-height: 1.45;
}

.feedback-form input[type="email"] {
  min-height: 52px;
}

.feedback-form textarea {
  min-height: 190px;
  resize: vertical;
}

.feedback-form input[type="email"]:focus,
.feedback-form textarea:focus {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  outline: none;
}

.feedback-honey {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.feedback-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.volume-control {
  display: grid;
  grid-template-columns: auto minmax(96px, 1fr) 42px;
  align-items: center;
  gap: 10px;
  width: min(100%, 254px);
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 18px rgba(31, 42, 55, 0.05);
}

.volume-control__label,
.volume-control__value {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.volume-control__value {
  text-align: right;
}

.volume-control input {
  --volume-fill: 100%;
  --volume-empty: rgba(255, 255, 255, 0.98);
  width: 100%;
  height: 28px;
  background: transparent;
  accent-color: var(--trust-blue);
  appearance: none;
  cursor: pointer;
}

.volume-control input:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.2);
  outline-offset: 4px;
}

.volume-control input::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--trust-blue) 0%,
    rgba(20, 184, 166, 0.72) var(--volume-fill),
    var(--volume-empty) var(--volume-fill),
    var(--volume-empty) 100%
  );
}

.volume-control input::-webkit-slider-thumb {
  margin-top: -8px;
  width: 23px;
  height: 23px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--trust-blue);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.32);
  appearance: none;
}

.volume-control input::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--trust-blue) 0%,
    rgba(20, 184, 166, 0.72) var(--volume-fill),
    var(--volume-empty) var(--volume-fill),
    var(--volume-empty) 100%
  );
}

.volume-control input::-moz-range-thumb {
  width: 23px;
  height: 23px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--trust-blue);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.32);
}

.theme-toggle {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 7px 8px 7px 13px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 18px rgba(31, 42, 55, 0.05);
  cursor: pointer;
}

.theme-toggle__label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.theme-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-toggle__switch {
  position: relative;
  width: 44px;
  height: 24px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background: var(--white);
  box-shadow: inset 0 1px 3px rgba(31, 42, 55, 0.08);
  transition: background 160ms ease, border-color 160ms ease;
}

.theme-toggle__switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--trust-blue);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.24);
  transform: translateY(-50%);
  transition: transform 180ms ease, background 180ms ease;
}

.theme-toggle input:checked + .theme-toggle__switch {
  border-color: rgba(96, 165, 250, 0.52);
  background: #0f172a;
}

.theme-toggle input:checked + .theme-toggle__switch::before {
  background: var(--warm-accent);
  transform: translate(20px, -50%);
}

.theme-toggle:focus-within {
  outline: 3px solid rgba(37, 99, 235, 0.24);
  outline-offset: 3px;
}

.app-view {
  display: none;
}

.app-view.is-active {
  display: block;
  animation: viewEnter var(--motion-duration-medium) var(--motion-ease-premium) both;
}

.decoder-shell.app-view.is-active {
  animation: none;
}

@starting-style {
  .app-view.is-active {
    opacity: 0;
    transform: translateY(10px) scale(0.995);
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: var(--motion-ease-premium);
}

.motion-reveal {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, 18px, 0) scale(0.992);
  transition:
    opacity var(--motion-duration-slow) var(--motion-ease-premium),
    filter var(--motion-duration-slow) var(--motion-ease-premium),
    transform var(--motion-duration-slow) var(--motion-ease-premium);
  transition-delay: calc(min(var(--motion-order, 0), 4) * 52ms);
  will-change: opacity, filter, transform;
}

.motion-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-reveal.has-revealed {
  transition-delay: 0ms;
}

@media (hover: none), (max-width: 720px) {
  .motion-reveal {
    filter: none;
    transform: translate3d(0, 12px, 0) scale(0.996);
    transition-property: opacity, transform;
    will-change: opacity, transform;
  }

  .game-app-card.motion-reveal {
    transform: translate3d(-22px, 10px, 0) scale(0.996);
  }

  .game-app-card.motion-reveal:nth-child(even) {
    transform: translate3d(22px, 10px, 0) scale(0.996);
  }

  .game-app-card.motion-reveal.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.decoder-shell.motion-reveal {
  filter: none;
  transform: translate3d(0, 18px, 0) scale(0.996);
}

.decoder-shell.motion-reveal.is-visible {
  filter: none;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-pressable {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.motion-pressable::after {
  content: "";
  position: absolute;
  left: var(--press-x, 50%);
  top: var(--press-y, 50%);
  z-index: 3;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(37, 99, 235, 0.15) 46%, transparent 68%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.22);
}

.motion-pressable.is-pressing::after {
  animation: premiumPressRipple 460ms ease-out both;
}

.flashcard.motion-pressable {
  overflow: visible;
}

.flashcard.motion-pressable::after {
  display: none;
}

.decoder-shell {
  margin-top: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-gray);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.decoder-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 16px;
}

.decoder-kicker {
  margin: 0 0 6px;
  color: var(--trust-blue);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.decoder-hero h2 {
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 2.1rem;
  line-height: 1.08;
}

.decoder-now-playing {
  min-width: 172px;
  max-width: min(360px, 42vw);
  padding: 10px 14px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: var(--soft-sky);
  color: var(--trust-blue);
  font-size: 0.88rem;
  font-weight: 800;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decoder-toolbar {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.decoder-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.reader-toolbar {
  position: sticky;
  top: 10px;
  z-index: 22;
  display: grid;
  grid-template-columns: auto minmax(0, 1040px) auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(215, 227, 244, 0.9);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 244, 255, 0.84)),
    var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 28px rgba(31, 42, 55, 0.06);
}

.reader-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 42px;
  min-width: 42px;
  padding: 0 13px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--deep-ink);
  cursor: pointer;
  touch-action: manipulation;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.reader-tool span {
  display: inline-block;
  min-width: 0;
  line-height: 1;
  white-space: nowrap;
}

.reader-tool:hover:not(:disabled),
.reader-tool:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.42);
  background: var(--white);
  box-shadow: 0 12px 24px rgba(31, 42, 55, 0.1);
  outline: none;
}

@media (hover: none) and (pointer: coarse) {
  .reader-tool:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
  }
}

.reader-tool:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.reader-tool svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reader-tool--icon {
  width: 42px;
  padding: 0;
}

.reader-active-label {
  justify-self: center;
  width: min(100%, 1040px);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
}

.reader-page-status {
  min-height: 42px;
  min-width: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(215, 227, 244, 0.86);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.9);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

.reader-progress {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  width: min(100%, 540px);
  padding: 0 12px;
  border: 1px solid rgba(215, 227, 244, 0.86);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.9);
}

.reader-progress span,
.reader-progress strong {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.reader-progress input {
  width: 100%;
  accent-color: var(--trust-blue);
}

.reader-tool--fullscreen.is-selected {
  border-color: rgba(37, 99, 235, 0.68);
  background: rgba(37, 99, 235, 0.14);
  color: var(--trust-blue);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.54),
    0 10px 20px rgba(37, 99, 235, 0.14);
}

.reader-tool--fullscreen .reader-fullscreen-mark--exit,
.reader-tool--fullscreen.is-selected .reader-fullscreen-mark--enter {
  display: none;
}

.reader-tool--fullscreen.is-selected .reader-fullscreen-mark--exit {
  display: block;
}

.reader-example-tray {
  display: none;
  grid-template-columns: minmax(120px, auto) minmax(0, auto);
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 244, 255, 0.88)),
    var(--white);
  box-shadow: 0 12px 24px rgba(31, 42, 55, 0.07);
}

.reader-example-tray.is-active {
  display: grid;
}

.reader-example-tray__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reader-example-tray__meta span {
  color: var(--trust-blue);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reader-example-tray__meta strong {
  overflow: hidden;
  color: var(--deep-ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-example-tray__buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 6px;
}

.decoder-tool-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
  gap: 12px;
  width: min(100%, 1040px);
  align-items: start;
}

.decoder-search,
.practice-set-builder {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(215, 227, 244, 0.9);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(238, 244, 255, 0.72)),
    var(--white);
  box-shadow: 0 14px 30px rgba(31, 42, 55, 0.06);
}

.decoder-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px;
}

.decoder-search label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.decoder-search label span,
.practice-set-builder__top span {
  color: var(--trust-blue);
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.decoder-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(190, 210, 238, 0.92);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--deep-ink);
  font: inherit;
  font-weight: 800;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.decoder-search input:focus {
  border-color: rgba(37, 99, 235, 0.62);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.decoder-search__clear {
  align-self: end;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.decoder-search-results {
  grid-column: 1 / -1;
  display: none;
  gap: 8px;
  max-height: 310px;
  overflow: auto;
  padding-top: 4px;
  -webkit-overflow-scrolling: touch;
}

.decoder-search-results.is-active {
  display: grid;
}

.decoder-search-result,
.decoder-search-empty {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(215, 227, 244, 0.88);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--deep-ink);
  text-align: left;
}

.decoder-search-result {
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.decoder-search-result:hover,
.decoder-search-result:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.1);
  outline: none;
}

.decoder-search-result span,
.decoder-search-empty span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.decoder-search-result strong,
.decoder-search-empty strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.02rem;
  line-height: 1.12;
}

.decoder-search-result em {
  color: var(--support-teal);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.25;
}

.practice-set-builder {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.practice-set-builder__top {
  display: grid;
  gap: 3px;
}

.practice-set-builder__top strong {
  color: var(--deep-ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.1;
}

.practice-set-builder__top em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
}

.practice-set-builder__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.practice-scope-chip {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--deep-ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
}

.practice-scope-chip.is-active {
  border-color: var(--trust-blue);
  background: var(--trust-blue);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

.reader-thumbnail-rail {
  display: flex;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  padding: 2px 3px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.reader-thumbnail {
  flex: 0 0 74px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(215, 227, 244, 0.9);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--deep-ink);
  cursor: pointer;
  text-align: left;
  scroll-snap-align: start;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.reader-thumbnail:hover,
.reader-thumbnail:focus-visible,
.reader-thumbnail.is-active {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.48);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.12);
  outline: none;
}

.reader-thumbnail.is-active {
  background: rgba(238, 244, 255, 0.95);
}

.reader-thumbnail img {
  display: block;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  border: 1px solid rgba(190, 210, 238, 0.86);
  border-radius: 10px;
  background: var(--white);
  object-fit: cover;
  object-position: top center;
}

.reader-thumbnail span {
  color: var(--trust-blue);
  font-size: 0.64rem;
  font-weight: 1000;
}

.reader-thumbnail strong {
  overflow: hidden;
  color: var(--deep-ink);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decoder-tools-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  justify-self: center;
  width: min(100%, 1040px);
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(215, 227, 244, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--deep-ink);
  cursor: pointer;
  font-weight: 900;
}

.decoder-tools-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.decoder-shell.is-tools-open .decoder-tools-toggle svg {
  transform: rotate(180deg);
}

.interactive-pdf-stage {
  --reader-flip-speed: 320ms;
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  min-height: clamp(520px, 72vw, 820px);
  padding: clamp(18px, 3vw, 34px);
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 104%, rgba(31, 42, 55, 0.16), transparent 54%),
    linear-gradient(120deg, rgba(31, 42, 55, 0.08), transparent 38%, rgba(37, 99, 235, 0.08)),
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(238, 244, 255, 0.88));
  perspective: 2200px;
  perspective-origin: 50% 44%;
  isolation: isolate;
}

.interactive-pdf-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 34%, rgba(255, 255, 255, 0.3) 45%, transparent 56% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 10px);
  opacity: 0.42;
  transform: translate3d(-18%, 0, 0);
  animation: stageAmbientSweep 13s ease-in-out infinite alternate;
}

.interactive-pdf-stage > * {
  position: relative;
  z-index: 1;
}

.book-reader {
  --page-width: min(42vw, 470px);
  --book-gutter-width: 14px;
  position: relative;
  width: calc((var(--page-width) * 2) + var(--book-gutter-width));
  max-width: 100%;
  transform-style: preserve-3d;
}

.interactive-pdf-stage.is-open .book-reader {
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}

.interactive-pdf-stage.is-open .book-reader * {
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

.book-reader--closed {
  width: var(--page-width);
}

.book-reader--single {
  --page-width: min(78vw, 680px);
  width: var(--page-width);
}

.interactive-pdf-stage.is-reader-pannable .book-reader,
.interactive-pdf-stage.is-reader-pannable .book-reader * {
  cursor: grab;
}

.interactive-pdf-stage.is-reader-pannable .book-reader {
  touch-action: none;
  will-change: transform;
}

.interactive-pdf-stage.is-reader-pannable {
  overflow: hidden;
}

.interactive-pdf-stage.is-reader-panning .book-reader,
.interactive-pdf-stage.is-reader-panning .book-reader * {
  cursor: grabbing;
}

.interactive-pdf-stage.is-reader-panning .book-reader {
  transition: none;
}

.interactive-pdf-stage.is-reader-gliding .book-reader {
  transition: none;
  will-change: transform;
}

.book-spread {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--book-gutter-width) minmax(0, 1fr);
  align-items: stretch;
  transform-style: preserve-3d;
  contain: layout paint;
}

.book-single {
  position: relative;
  display: block;
  aspect-ratio: 1224 / 1584;
  overflow: hidden;
  transform-style: preserve-3d;
  contain: layout paint;
}

.book-spread::before {
  content: "";
  position: absolute;
  inset: 7px 10px -9px;
  z-index: 0;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(203, 213, 225, 0.5) 0 1px, rgba(255, 255, 255, 0.7) 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(203, 213, 225, 0.4));
  box-shadow: 0 24px 44px rgba(31, 42, 55, 0.14);
  transform: translateZ(-8px);
  pointer-events: none;
}

.book-single::before {
  content: "";
  position: absolute;
  inset: 9px 10px -10px;
  z-index: 0;
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(203, 213, 225, 0.46) 0 1px, rgba(255, 255, 255, 0.72) 1px 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(203, 213, 225, 0.34));
  box-shadow: 0 28px 54px rgba(31, 42, 55, 0.17);
  transform: translateZ(-8px);
  pointer-events: none;
}

.book-swipe-card {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: center;
  transform-style: preserve-3d;
  pointer-events: none;
}

.book-swipe-card .book-page {
  width: 100%;
  height: 100%;
}

.book-swipe-card--current {
  z-index: 4;
  pointer-events: auto;
  transform:
    translate3d(var(--reader-swipe-x, 0px), var(--reader-swipe-y, 0px), 0)
    rotate(var(--reader-swipe-rotate, 0deg));
  transition: transform 230ms cubic-bezier(0.2, 0.84, 0.22, 1), opacity 180ms ease;
  will-change: transform;
}

.book-reader.is-reader-swiping .book-swipe-card--current {
  transition: none;
}

.book-reader.is-reader-swipe-committing .book-swipe-card--current {
  opacity: 0.16;
  transition: transform 230ms cubic-bezier(0.18, 0.86, 0.24, 1), opacity 180ms ease;
}

.book-reader.is-reader-swipe-reset .book-swipe-card--current {
  transition: transform 230ms cubic-bezier(0.2, 0.84, 0.22, 1);
}

.book-reader.is-reader-swiping .pdf-hotspot,
.book-reader.is-reader-swipe-reset .pdf-hotspot,
.book-reader.is-reader-swipe-committing .pdf-hotspot {
  pointer-events: none;
}

.book-swipe-card--preview {
  z-index: 2;
  opacity: 0;
  filter: saturate(0.96);
  transition: opacity 150ms ease, transform 220ms cubic-bezier(0.2, 0.84, 0.22, 1);
}

.book-swipe-card--prev {
  transform: translateX(-28px) rotate(-1.4deg) scale(0.968);
}

.book-swipe-card--next {
  transform: translateX(28px) rotate(1.4deg) scale(0.968);
}

.book-reader.is-reader-swipe-prev .book-swipe-card--prev,
.book-reader.is-reader-swipe-next .book-swipe-card--next {
  opacity: 0.92;
  transform: translateX(0) rotate(0deg) scale(0.988);
}

html.is-reader-native-zoom .book-swipe-card--preview,
html.is-reader-native-gesture .book-swipe-card--preview {
  display: none;
}

html.is-reader-native-zoom .book-swipe-card--current,
html.is-reader-native-gesture .book-swipe-card--current {
  transition: none;
  will-change: auto;
}

.book-swipe-card.is-empty {
  display: none;
}

.book-page {
  position: relative;
  z-index: 2;
  min-width: 0;
  aspect-ratio: 1224 / 1584;
  background: var(--white);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.book-page--left {
  transform-origin: right center;
  border-radius: 8px 0 0 8px;
}

.book-page--right {
  transform-origin: left center;
  border-radius: 0 8px 8px 0;
}

.book-page--cover {
  transform-origin: left center;
  border-radius: 8px;
}

.book-page--single {
  border-radius: 10px;
}

.book-page__paper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(31, 42, 55, 0.13);
  background:
    url("assets/book/paper-grain.svg"),
    linear-gradient(90deg, rgba(31, 42, 55, 0.08), transparent 10%, transparent 90%, rgba(31, 42, 55, 0.06)),
    var(--white);
  background-size: 180px 180px, 100% 100%, auto;
  box-shadow:
    0 28px 58px rgba(31, 42, 55, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.book-page__paper::before,
.book-page__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.book-page__paper::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.24), transparent 28%, transparent 72%, rgba(31, 42, 55, 0.08)),
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.34), transparent 42%);
  mix-blend-mode: soft-light;
  opacity: 0.76;
}

.interactive-pdf-stage.is-open .book-page__paper::before {
  animation: paperIdleSheen 8.5s ease-in-out infinite;
}

.book-page__paper::after {
  background:
    linear-gradient(90deg, rgba(31, 42, 55, 0.1), transparent 7%, transparent 93%, rgba(31, 42, 55, 0.08));
  opacity: 0.54;
}

.book-page--left .book-page__paper {
  border-radius: 8px 0 0 8px;
  box-shadow:
    -18px 26px 52px rgba(31, 42, 55, 0.16),
    inset -20px 0 34px rgba(31, 42, 55, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.book-page--left .book-page__paper::after {
  background:
    linear-gradient(90deg, transparent 76%, rgba(31, 42, 55, 0.16) 94%, rgba(31, 42, 55, 0.28)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 22%, transparent 82%, rgba(31, 42, 55, 0.08));
}

.book-page--right .book-page__paper {
  border-radius: 0 8px 8px 0;
  box-shadow:
    18px 26px 52px rgba(31, 42, 55, 0.16),
    inset 20px 0 34px rgba(31, 42, 55, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.book-page--right .book-page__paper::after {
  background:
    linear-gradient(90deg, rgba(31, 42, 55, 0.28), rgba(31, 42, 55, 0.14) 7%, transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 22%, transparent 82%, rgba(31, 42, 55, 0.08));
}

.book-page--cover .book-page__paper {
  border-radius: 8px;
  box-shadow:
    0 30px 62px rgba(31, 42, 55, 0.24),
    inset 14px 0 24px rgba(31, 42, 55, 0.08);
}

.book-page--single .book-page__paper {
  border-radius: 10px;
  box-shadow:
    0 32px 68px rgba(31, 42, 55, 0.2),
    inset 14px 0 30px rgba(31, 42, 55, 0.06),
    inset -14px 0 30px rgba(31, 42, 55, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.book-page--blank .book-page__paper {
  background:
    linear-gradient(90deg, rgba(31, 42, 55, 0.06), transparent 18%),
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.book-page img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  user-select: none;
}

.book-turn-page {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 12;
  width: calc((100% - var(--book-gutter-width)) / 2);
  border-radius: 8px;
  overflow: hidden;
  will-change: transform, opacity;
  pointer-events: none;
}

.book-turn-page__paper,
.book-turn-page__sheet,
.book-turn-page__stack,
.book-turn-page::before,
.book-turn-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.book-turn-page__paper {
  z-index: 1;
  border: 1px solid rgba(31, 42, 55, 0.12);
  background:
    url("assets/book/paper-grain.svg"),
    linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(241, 245, 249, 0.92) 48%, rgba(255, 255, 255, 0.8)),
    var(--white);
  background-size: 180px 180px, 100% 100%, auto;
  box-shadow:
    0 18px 34px rgba(31, 42, 55, 0.2),
    inset 18px 0 34px rgba(31, 42, 55, 0.08),
    inset -18px 0 34px rgba(255, 255, 255, 0.46);
}

.book-turn-page__sheet {
  z-index: calc(5 + var(--sheet, 0));
  display: none;
  border: 1px solid rgba(31, 42, 55, 0.11);
  border-radius: inherit;
  background:
    url("assets/book/paper-grain.svg"),
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.9) 52%, rgba(255, 255, 255, 0.86)),
    var(--white);
  background-size: 180px 180px, 100% 100%, auto;
  box-shadow:
    0 16px 30px rgba(31, 42, 55, 0.18),
    inset 16px 0 28px rgba(31, 42, 55, 0.08),
    inset -16px 0 28px rgba(255, 255, 255, 0.48);
  opacity: 0;
  will-change: transform, opacity;
}

.book-turn-page::before {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.64), transparent 24%, rgba(31, 42, 55, 0.18) 72%, rgba(31, 42, 55, 0.08)),
    radial-gradient(ellipse at 82% 48%, rgba(255, 255, 255, 0.48), transparent 52%);
  mix-blend-mode: multiply;
  animation: readerCurlShade var(--reader-flip-speed, 320ms) ease-out both;
}

.book-turn-page::after {
  z-index: 3;
  width: 16px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.66), rgba(31, 42, 55, 0.22), rgba(255, 255, 255, 0.46));
  filter: blur(3px);
  animation: readerPageEdgeGlow var(--reader-flip-speed, 320ms) ease-out both;
}

.book-turn-page__stack {
  z-index: 4;
  display: none;
  width: calc(8px + (var(--reader-rapid-flips, 1) * 2px));
  background:
    repeating-linear-gradient(90deg, rgba(203, 213, 225, 0.68) 0 1px, rgba(255, 255, 255, 0.82) 1px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(148, 163, 184, 0.22));
  box-shadow: 0 8px 18px rgba(31, 42, 55, 0.12);
  filter: blur(0.2px);
  animation: readerRapidStack var(--reader-flip-speed, 320ms) ease-out both;
}

.book-turn-page--next {
  left: calc(((100% - var(--book-gutter-width)) / 2) + var(--book-gutter-width));
  transform-origin: left center;
  animation: readerNextSweep var(--reader-flip-speed, 320ms) cubic-bezier(0.14, 0.76, 0.22, 1) both;
}

.book-turn-page--next::after {
  right: auto;
  left: 0;
}

.book-turn-page--next .book-turn-page__stack {
  right: auto;
  left: 0;
}

.book-turn-page--prev {
  left: 0;
  transform-origin: right center;
  animation: readerPrevSweep var(--reader-flip-speed, 320ms) cubic-bezier(0.14, 0.76, 0.22, 1) both;
}

.book-turn-page--prev::before {
  background:
    linear-gradient(270deg, rgba(255, 255, 255, 0.46), transparent 21%, rgba(31, 42, 55, 0.28) 74%, rgba(31, 42, 55, 0.12)),
    radial-gradient(ellipse at 18% 50%, rgba(255, 255, 255, 0.42), transparent 48%);
}

.book-turn-page--prev::after {
  right: auto;
  left: 0;
}

.book-turn-page--prev .book-turn-page__stack {
  right: 0;
  left: auto;
}

.book-reader--single .book-turn-page {
  left: 0;
  width: 100%;
}

.book-reader--single .book-turn-page--next {
  transform-origin: left center;
}

.book-reader--single .book-turn-page--prev {
  transform-origin: right center;
}

.book-turn-page--rapid .book-turn-page__stack {
  display: block;
}

.book-turn-page--rapid {
  animation: none;
}

.book-turn-page--rapid .book-turn-page__paper,
.book-turn-page--rapid::before,
.book-turn-page--rapid::after {
  opacity: 0;
}

.book-turn-page--rapid .book-turn-page__sheet {
  display: block;
  animation-duration: var(--reader-flip-speed, 540ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.15, 0.74, 0.16, 1);
  animation-delay: calc(var(--sheet, 0) * 36ms);
}

.book-turn-page--rapid.book-turn-page--next .book-turn-page__sheet {
  transform-origin: left center;
  animation-name: readerNextSheetSweep;
}

.book-turn-page--rapid.book-turn-page--prev .book-turn-page__sheet {
  transform-origin: right center;
  animation-name: readerPrevSheetSweep;
}

.book-gutter {
  position: relative;
  z-index: 5;
  min-width: var(--book-gutter-width);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(31, 42, 55, 0.2), rgba(255, 255, 255, 0.64) 48%, rgba(31, 42, 55, 0.18)),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.24) 0 1px, rgba(255, 255, 255, 0.32) 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.74;
  box-shadow:
    inset 4px 0 7px rgba(31, 42, 55, 0.2),
    inset -4px 0 7px rgba(31, 42, 55, 0.18);
}

.book-shadow {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -24px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(31, 42, 55, 0.28), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}

.interactive-pdf-stage.is-open .book-shadow {
  animation: bookShadowBreathe 7.5s ease-in-out infinite;
}

.interactive-pdf-stage.is-reader-settling .book-spread,
.interactive-pdf-stage.is-reader-settling .book-single {
  animation: readerSettle var(--motion-duration-medium) var(--motion-ease-premium) both;
}

.interactive-pdf-stage.is-reader-settling .book-page__paper {
  animation: readerPaperSettle var(--motion-duration-medium) var(--motion-ease-premium) both;
}

.interactive-pdf-stage.is-flipping-open .book-page--cover {
  animation: readerCoverOpen var(--reader-flip-speed, 320ms) cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.interactive-pdf-stage.is-flipping-close .book-spread {
  animation: readerClose var(--reader-flip-speed, 320ms) cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.interactive-pdf-stage.is-flipping-next .book-spread,
.interactive-pdf-stage.is-flipping-prev .book-spread {
  pointer-events: none;
}

.decoder-shell.is-reader-fullscreen,
.decoder-shell:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: clamp(10px, 1.8vw, 22px);
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 105%, rgba(37, 99, 235, 0.13), transparent 50%),
    linear-gradient(180deg, #f8fbff 0%, #edf5ff 100%);
}

.decoder-shell.is-reader-fullscreen .decoder-hero,
.decoder-shell:fullscreen .decoder-hero {
  padding: 0;
  gap: 10px;
}

.decoder-shell.is-reader-fullscreen .decoder-hero h2,
.decoder-shell:fullscreen .decoder-hero h2 {
  font-size: clamp(1.08rem, 2.2vmin, 1.46rem);
  line-height: 1.05;
}

.decoder-shell.is-reader-fullscreen .decoder-kicker,
.decoder-shell:fullscreen .decoder-kicker {
  font-size: 0.66rem;
}

.decoder-shell.is-reader-fullscreen .decoder-toolbar,
.decoder-shell:fullscreen .decoder-toolbar {
  gap: 8px;
  margin-bottom: 10px;
}

.decoder-shell.is-reader-fullscreen .reader-toolbar,
.decoder-shell:fullscreen .reader-toolbar {
  max-width: min(1120px, 100%);
  padding: 8px;
  border-radius: 18px;
}

.decoder-shell.is-reader-fullscreen .reader-example-tray,
.decoder-shell:fullscreen .reader-example-tray {
  max-width: min(780px, 100%);
  min-height: 42px;
}

.decoder-shell.is-reader-fullscreen .decoder-section-tabs,
.decoder-shell:fullscreen .decoder-section-tabs {
  width: 100%;
  max-width: min(1040px, 100%);
  overflow-x: auto;
  justify-content: flex-start;
  padding-bottom: 2px;
}

.decoder-shell.is-reader-fullscreen .interactive-pdf-stage,
.decoder-shell:fullscreen .interactive-pdf-stage {
  align-items: center;
  min-height: 0;
  height: 100%;
  padding: clamp(10px, 2vmin, 22px);
  overflow: auto;
  border-radius: 18px;
}

.decoder-shell.is-reader-fullscreen .book-reader,
.decoder-shell:fullscreen .book-reader {
  --page-width: min(44vw, 54vh);
}

.decoder-shell.is-reader-fullscreen .book-reader--single,
.decoder-shell:fullscreen .book-reader--single {
  --page-width: min(84vw, 64vh, 760px);
}

@keyframes scrollProgress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes viewEnter {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px) scale(0.995);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes premiumPressRipple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }
  38% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

@keyframes stageAmbientSweep {
  0% {
    opacity: 0.28;
    transform: translate3d(-22%, 0, 0);
  }
  48% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.34;
    transform: translate3d(18%, 0, 0);
  }
}

@keyframes paperIdleSheen {
  0%,
  100% {
    opacity: 0.62;
    filter: brightness(1);
  }
  44% {
    opacity: 0.84;
    filter: brightness(1.035);
  }
}

@keyframes bookShadowBreathe {
  0%,
  100% {
    opacity: 0.72;
    transform: scaleX(0.96);
  }
  50% {
    opacity: 0.96;
    transform: scaleX(1.04);
  }
}

@keyframes readerSettle {
  0% {
    opacity: 0.76;
    filter: blur(3px);
    transform: translateY(9px) scale(0.992);
  }
  66% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-1px) scale(1.001);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes readerPaperSettle {
  0% {
    filter: saturate(0.94) brightness(1.02);
  }
  100% {
    filter: saturate(1) brightness(1);
  }
}

@keyframes readerCoverOpen {
  0% {
    transform: rotateY(0deg);
    box-shadow: 0 30px 62px rgba(31, 42, 55, 0.24);
  }
  100% {
    transform: rotateY(-172deg);
    box-shadow: -26px 18px 36px rgba(31, 42, 55, 0.16);
  }
}

@keyframes readerClose {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(5deg) scale(0.98);
  }
}

@keyframes readerNextSweep {
  0% {
    transform: translateX(0) scaleX(1) skewY(0deg);
    opacity: 0.82;
  }
  38% {
    transform: translateX(-55%) scaleX(0.16) skewY(-1.1deg);
    opacity: 0.82;
  }
  100% {
    transform: translateX(-104%) scaleX(0.38) skewY(0deg);
    opacity: 0;
  }
}

@keyframes readerPrevSweep {
  0% {
    transform: translateX(0) scaleX(1) skewY(0deg);
    opacity: 0.82;
  }
  38% {
    transform: translateX(55%) scaleX(0.16) skewY(1.1deg);
    opacity: 0.82;
  }
  100% {
    transform: translateX(104%) scaleX(0.38) skewY(0deg);
    opacity: 0;
  }
}

@keyframes readerNextSheetSweep {
  0% {
    transform: translateX(0) scaleX(1) skewY(0deg) translateZ(calc(var(--sheet, 0) * 1px));
    opacity: 0;
  }
  10% {
    opacity: 0.88;
  }
  42% {
    transform: translateX(-58%) scaleX(0.15) skewY(-1.3deg) translateZ(calc(var(--sheet, 0) * 1px));
    opacity: 0.82;
  }
  100% {
    transform: translateX(-106%) scaleX(0.42) skewY(0deg) translateZ(calc(var(--sheet, 0) * 1px));
    opacity: 0;
  }
}

@keyframes readerPrevSheetSweep {
  0% {
    transform: translateX(0) scaleX(1) skewY(0deg) translateZ(calc(var(--sheet, 0) * 1px));
    opacity: 0;
  }
  10% {
    opacity: 0.88;
  }
  42% {
    transform: translateX(58%) scaleX(0.15) skewY(1.3deg) translateZ(calc(var(--sheet, 0) * 1px));
    opacity: 0.82;
  }
  100% {
    transform: translateX(106%) scaleX(0.42) skewY(0deg) translateZ(calc(var(--sheet, 0) * 1px));
    opacity: 0;
  }
}

@keyframes readerCurlShade {
  0% {
    opacity: 0.16;
  }
  42% {
    opacity: 0.62;
  }
  100% {
    opacity: 0;
  }
}

@keyframes readerPageEdgeGlow {
  0% {
    opacity: 0.18;
    transform: scaleX(0.7);
  }
  42% {
    opacity: 0.74;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0.35);
  }
}

@keyframes readerRapidStack {
  0% {
    opacity: 0.22;
    transform: scaleX(0.7);
  }
  40% {
    opacity: 0.76;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0.4);
  }
}

.pdf-hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.pdf-hotspot {
  position: absolute;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: center;
  transition:
    transform 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}

.pdf-hotspot:hover,
.pdf-hotspot:focus-visible {
  z-index: 4;
  transform: none;
  border-color: rgba(37, 99, 235, 0.72);
  background: rgba(37, 99, 235, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    0 0 0 1px rgba(37, 99, 235, 0.16),
    0 8px 18px rgba(37, 99, 235, 0.1);
  outline: none;
}

.pdf-hotspot.is-playing {
  z-index: 5;
  border-color: var(--trust-blue);
  background: rgba(37, 99, 235, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    0 0 0 1px rgba(37, 99, 235, 0.18),
    0 12px 24px rgba(37, 99, 235, 0.14);
}

.pdf-hotspot--phrase,
.pdf-hotspot--usage,
.pdf-hotspot--example {
  border-radius: 7px;
}

.pdf-hotspot--sounds {
  border-radius: 999px;
}

.pdf-hotspot--sounds:hover,
.pdf-hotspot--sounds:focus-visible,
.pdf-hotspot--sounds.is-playing {
  border-color: rgba(37, 99, 235, 0.88);
  background: rgba(37, 99, 235, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    0 0 0 2px rgba(37, 99, 235, 0.5),
    0 10px 20px rgba(37, 99, 235, 0.12);
}

.pdf-hotspot--example {
  overflow: visible;
}

.pdf-hotspot--example:hover,
.pdf-hotspot--example:focus-visible,
.pdf-hotspot--example:focus-within,
.pdf-hotspot--example.is-playing {
  z-index: 6;
  transform: none;
  border-color: rgba(37, 99, 235, 0.72);
  background: rgba(37, 99, 235, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    0 0 0 1px rgba(37, 99, 235, 0.18),
    0 8px 18px rgba(37, 99, 235, 0.1);
  outline: none;
}

.example-take-menu {
  position: absolute;
  left: auto;
  right: 0;
  top: 50%;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  box-sizing: border-box;
  width: max(136px, 100%);
  max-width: 154px;
  padding: 5px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 14px 28px rgba(31, 42, 55, 0.2);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translate(0, -50%) scale(0.96);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.pdf-hotspot--example.is-picker-open {
  z-index: 12;
}

.pdf-hotspot--example.is-picker-open .example-take-menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translate(0, -50%) scale(1);
}

.example-take-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 26px;
  min-width: 0;
  width: 100%;
  padding: 0 4px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 999px;
  background: var(--white);
  color: var(--trust-blue);
  cursor: pointer;
  font-size: 0.59rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.example-take-option:hover,
.example-take-option:focus-visible {
  transform: translateY(-1px);
  border-color: var(--trust-blue);
  background: var(--trust-blue);
  color: var(--white);
  outline: none;
}

.pdf-hotspot--usage:hover,
.pdf-hotspot--usage:focus-visible,
.pdf-hotspot--usage.is-playing {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    0 0 0 1px rgba(37, 99, 235, 0.16),
    0 8px 18px rgba(37, 99, 235, 0.1);
}

.pdf-hotspot--usage.is-playing {
  background: rgba(37, 99, 235, 0.16);
}

.pdf-hotspot--entry {
  z-index: 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-sizing: border-box;
  border-color: rgba(37, 99, 235, 0.55);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.94);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.pdf-hotspot--entry::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36%;
  height: 44%;
  border: 0;
  background: var(--white);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-38%, -50%);
}

.pdf-hotspot--entry:hover,
.pdf-hotspot--entry:focus-visible,
.pdf-hotspot--entry.is-playing,
.pdf-hotspot--entry.is-paused {
  background: var(--warm-accent);
  border-color: var(--warm-accent);
  transform: scale(1.04);
}

.pdf-hotspot--entry.is-sequence-playing::before {
  width: 38%;
  height: 48%;
  border: 0;
  background: linear-gradient(90deg, var(--white) 0 34%, transparent 34% 66%, var(--white) 66% 100%);
  clip-path: none;
  transform: translate(-50%, -50%);
}

.pdf-hotspot--entry.is-paused::before {
  width: 36%;
  height: 44%;
  border: 0;
  background: var(--white);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(-38%, -50%);
}

.decoder-workspace {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.decoder-sidebar {
  display: grid;
  gap: 14px;
}

.decoder-page-card {
  padding: 12px;
  border: 1px solid var(--border-gray);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--soft-sky), var(--white));
}

.decoder-page-card img {
  display: block;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--border-gray);
  border-radius: 14px;
  background: var(--white);
}

.pdf-open-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--deep-ink);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
}

.decoder-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  justify-self: center;
  width: min(100%, 1040px);
  padding-inline: 2px;
}

.decoder-section-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: var(--white);
  color: var(--deep-ink);
  cursor: pointer;
  font-weight: 800;
  text-align: center;
}

.decoder-section-tab.is-active {
  color: var(--white);
  background: var(--trust-blue);
  border-color: var(--trust-blue);
}

.decoder-page {
  overflow: hidden;
  border: 1px solid rgba(215, 227, 244, 0.95);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 18px 34px rgba(31, 42, 55, 0.08);
}

.decoder-page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(215, 227, 244, 0.82);
  background: linear-gradient(135deg, rgba(238, 244, 255, 0.92), rgba(255, 255, 255, 0.94));
}

.decoder-page__label {
  color: var(--support-teal);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.decoder-page h3 {
  margin: 4px 0 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.8rem;
  line-height: 1.1;
}

.text-button--compact {
  min-width: 92px;
}

.decoder-table {
  padding: 12px;
}

.decoder-table__head,
.decoder-row {
  display: grid;
  grid-template-columns: 62px minmax(105px, 0.9fr) minmax(120px, 0.9fr) minmax(190px, 1.35fr) minmax(210px, 1.45fr);
  gap: 8px;
  align-items: stretch;
}

.decoder-table__head {
  padding: 0 0 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.decoder-row {
  padding: 9px 0;
  border-top: 1px solid rgba(215, 227, 244, 0.8);
}

.decoder-row:first-of-type {
  border-top: 0;
}

.decoder-row__number {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-height: 76px;
  border-radius: 16px;
  background: var(--soft-gray);
  color: var(--muted);
  font-weight: 800;
}

.decoder-row__number strong {
  color: var(--deep-ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.1rem;
}

.decoder-row__phrase,
.decoder-row__sounds,
.decoder-row__usage,
.decoder-row__example {
  min-width: 0;
}

.decoder-row__sounds,
.decoder-row__example {
  display: grid;
  gap: 7px;
  align-content: start;
}

.decoder-hotspot {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid rgba(215, 227, 244, 0.96);
  border-radius: 14px;
  background: var(--white);
  color: var(--deep-ink);
  cursor: pointer;
  font-weight: 800;
  line-height: 1.28;
  text-align: left;
  transform-origin: center;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.decoder-hotspot:hover,
.decoder-hotspot:focus-visible {
  transform: scale(1.035);
  border-color: rgba(37, 99, 235, 0.56);
  background: var(--soft-sky);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.14);
  outline: none;
}

.decoder-hotspot.is-playing {
  color: var(--white);
  background: var(--trust-blue);
  border-color: var(--trust-blue);
}

.decoder-hotspot--phrase {
  min-height: 76px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.15rem;
  text-align: center;
}

.decoder-hotspot--sound {
  color: #0f766e;
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.05rem;
  text-align: center;
}

.decoder-hotspot--text {
  min-height: 76px;
  font-weight: 600;
}

.decoder-ipa {
  display: inline-flex;
  justify-content: center;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--soft-gray);
  border: 1px solid var(--border-gray);
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
}

.decoder-row__example p {
  min-height: 44px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(238, 244, 255, 0.62);
  color: var(--deep-ink);
  font-weight: 700;
  line-height: 1.35;
}

.decoder-speed-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.decoder-speed-row .decoder-hotspot {
  min-height: 36px;
  padding: 7px 6px;
  border-radius: 999px;
  font-size: 0.78rem;
  text-align: center;
}

.study-shell {
  margin-top: 18px;
  padding: clamp(14px, 2vw, 22px);
  overflow-x: hidden;
  overflow-x: clip;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-gray);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.games-shell,
.quiz-shell {
  margin-top: 18px;
  padding: clamp(14px, 2vw, 22px);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border-gray);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.games-shell.is-game-library .game-stage,
.games-shell.is-game-library .game-log {
  display: none;
}

.games-hero,
.quiz-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 16px;
}

.games-hero h2,
.quiz-hero h2 {
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 2.05rem;
  line-height: 1.08;
}

.game-score-pill,
.quiz-status-pill {
  min-width: 170px;
  padding: 10px 14px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.1);
  color: #0f766e;
  font-size: 0.88rem;
  font-weight: 900;
  text-align: center;
}

.quiz-stage {
  min-height: 430px;
}

.quiz-builder,
.quiz-card,
.quiz-results {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(16px, 2.2vw, 26px);
  overflow: hidden;
  border: 1px solid var(--border-gray);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(238, 244, 255, 0.88), rgba(255, 255, 255, 0.98) 48%),
    var(--white);
  box-shadow: 0 20px 38px rgba(31, 42, 55, 0.08);
}

.quiz-builder {
  grid-template-columns: minmax(260px, 0.86fr) minmax(340px, 1.14fr);
  align-items: stretch;
}

.quiz-builder::before,
.quiz-card::before,
.quiz-results::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.26), rgba(20, 184, 166, 0.22), rgba(245, 158, 11, 0.16)),
    transparent;
  clip-path: polygon(0 0, 100% 0, 100% 3px, 0 3px);
}

.quiz-builder > *,
.quiz-card > *,
.quiz-results > * {
  position: relative;
  z-index: 1;
}

.quiz-builder__visual {
  min-height: 430px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(238, 244, 255, 0.72)),
    url("assets/game-art/self-quiz-backdrop.jpg") center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.quiz-builder__panel {
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
}

.quiz-builder__top,
.quiz-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.quiz-builder__top span,
.quiz-card__top span,
.quiz-setting-group > span,
.quiz-field > span {
  color: var(--trust-blue);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.quiz-builder__top strong,
.quiz-card__top strong {
  display: block;
  margin-top: 4px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(1.45rem, 2.8vw, 2.25rem);
  line-height: 1.08;
}

.quiz-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.72fr);
  gap: 12px;
}

.quiz-field,
.quiz-setting-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(215, 227, 244, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.quiz-field strong {
  color: var(--deep-ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.15rem;
}

.quiz-field input[type="range"] {
  width: 100%;
  accent-color: var(--trust-blue);
}

.quiz-field select {
  min-height: 42px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: var(--white);
  color: var(--deep-ink);
  font: inherit;
  font-weight: 800;
}

.quiz-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.quiz-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 82px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-gray);
  border-radius: 16px;
  background: var(--white);
  cursor: pointer;
}

.quiz-check input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--trust-blue);
}

.quiz-check span {
  min-width: 0;
}

.quiz-check strong,
.quiz-check em {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.quiz-check strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.1;
}

.quiz-check em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.quiz-builder__actions,
.quiz-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.quiz-card {
  min-height: 430px;
}

.quiz-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quiz-progress span {
  width: 20px;
  height: 8px;
  border-radius: 999px;
  background: rgba(215, 227, 244, 0.92);
}

.quiz-progress span.is-current {
  width: 34px;
  background: var(--trust-blue);
}

.quiz-progress span.is-done {
  background: var(--support-teal);
}

.quiz-prompt-card {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 10px;
  min-height: 128px;
  align-content: center;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(215, 227, 244, 0.92);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 18%, rgba(20, 184, 166, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(238, 244, 255, 0.72));
}

.quiz-prompt-card--audio {
  justify-items: center;
  text-align: center;
}

.quiz-prompt-card strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1;
  color: var(--trust-blue);
  overflow-wrap: anywhere;
}

.quiz-prompt-card span,
.quiz-match-intro span {
  color: var(--muted);
  font-weight: 900;
}

.quiz-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.choice-button.is-selected {
  border-color: var(--trust-blue);
  background: rgba(37, 99, 235, 0.1);
}

.quiz-writing-form {
  max-width: 720px;
}

.quiz-match-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 16px;
  background: rgba(20, 184, 166, 0.08);
}

.quiz-match-intro strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1rem;
}

.quiz-results {
  justify-items: stretch;
}

.quiz-results__score {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 220px;
  align-content: center;
  text-align: center;
}

.quiz-results__score span {
  color: var(--trust-blue);
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(3.8rem, 9vw, 6.4rem);
  font-weight: 900;
  line-height: 1;
}

.quiz-results__score strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
}

.quiz-results__score em {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}

.quiz-review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quiz-review-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border-gray);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.86);
}

.quiz-review-card strong,
.quiz-review-card span,
.quiz-review-card em {
  display: block;
}

.quiz-review-card strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.06rem;
}

.quiz-review-card span {
  color: var(--support-teal);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.9rem;
}

.quiz-review-card em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.quiz-log {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-gray);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.game-app-library {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
}

.game-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.game-app-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: clamp(300px, 31vw, 430px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(215, 227, 244, 0.88);
  border-radius: 24px;
  background: var(--white);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  box-shadow:
    0 24px 46px rgba(31, 42, 55, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  transform: translateZ(0);
  transition: transform 180ms var(--motion-ease-premium), border-color 180ms ease, box-shadow 180ms ease;
}

.game-app-card.motion-reveal {
  filter: none;
  transform: translate3d(-42px, 16px, 0) scale(0.992);
}

.game-app-card.motion-reveal:nth-child(even) {
  transform: translate3d(42px, 16px, 0) scale(0.992);
}

.game-app-card.motion-reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

.game-app-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0 24%, rgba(15, 23, 42, 0.28) 47%, rgba(15, 23, 42, 0.74) 68%, rgba(7, 14, 30, 0.94) 100%),
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.38), transparent 22%);
}

.game-app-card:hover,
.game-app-card:focus-visible {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow:
    0 30px 70px rgba(31, 42, 55, 0.18),
    0 0 0 4px rgba(37, 99, 235, 0.1);
  outline: none;
}

.game-app-card.motion-reveal.is-visible:hover,
.game-app-card.motion-reveal.is-visible:focus-visible {
  transform: translateY(-4px) scale(1.01);
}

.game-app-card__media {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(135deg, #dbeafe, #ecfeff);
}

.game-app-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 420ms var(--motion-ease-premium), filter 180ms ease;
}

.game-app-card:hover .game-app-card__media img,
.game-app-card:focus-visible .game-app-card__media img {
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.03);
}

.game-app-card__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 9px;
  width: 100%;
  max-width: none;
  padding: clamp(42px, 7vw, 72px) clamp(18px, 2.8vw, 26px) clamp(18px, 2.8vw, 26px);
  background: linear-gradient(180deg, transparent 0%, rgba(7, 14, 30, 0.58) 34%, rgba(7, 14, 30, 0.82) 100%);
}

.game-app-card__tag {
  justify-self: start;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.game-app-card__content strong {
  color: #f8fbff;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  font-weight: 900;
  line-height: 1.02;
  max-width: 24rem;
  text-shadow:
    0 2px 3px rgba(3, 7, 18, 0.9),
    0 12px 24px rgba(3, 7, 18, 0.64);
  text-wrap: balance;
}

.game-app-card__content em {
  max-width: 32rem;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(0.9rem, 1.4vw, 1rem);
  font-style: normal;
  font-weight: 850;
  line-height: 1.42;
  text-shadow:
    0 1px 2px rgba(3, 7, 18, 0.82),
    0 8px 18px rgba(3, 7, 18, 0.42);
}

.game-app-card__cta {
  justify-self: start;
  margin-top: 4px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--deep-ink);
  font-size: 0.78rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.18);
}

.game-mode-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.game-mode-tabs--hidden {
  display: none;
}

.game-mode-tab {
  display: grid;
  gap: 4px;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid var(--border-gray);
  border-radius: 18px;
  background: var(--white);
  color: var(--deep-ink);
  cursor: pointer;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.game-mode-tab span {
  color: var(--support-teal);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.game-mode-tab strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.04rem;
  line-height: 1.1;
}

.game-mode-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.36);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.1);
}

.game-mode-tab.is-active {
  color: var(--white);
  background: var(--deep-ink);
  border-color: var(--deep-ink);
  box-shadow: 0 16px 28px rgba(31, 42, 55, 0.18);
}

.game-mode-tab.is-active span {
  color: #7dd3fc;
}

.game-stage {
  min-height: 430px;
}

.game-card {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(16px, 2.2vw, 26px);
  border: 1px solid var(--border-gray);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(238, 244, 255, 0.86), rgba(255, 255, 255, 0.98) 46%),
    var(--white);
  box-shadow: 0 20px 38px rgba(31, 42, 55, 0.08);
  overflow: hidden;
}

.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.26), rgba(20, 184, 166, 0.22), rgba(245, 158, 11, 0.16)),
    transparent;
  clip-path: polygon(0 0, 100% 0, 100% 3px, 0 3px);
}

.game-card > * {
  position: relative;
  z-index: 1;
}

.game-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.game-card__top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.game-card__top-actions .text-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.game-card__top-actions svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.game-card__top p {
  margin: 0 0 4px;
  color: var(--trust-blue);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.game-card__top h3 {
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.85rem;
  line-height: 1.1;
}

.game-card__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.game-playfield-wrap {
  position: relative;
  min-height: 260px;
  border-radius: 22px;
}

.game-card.is-waiting .game-playfield-wrap {
  min-height: clamp(260px, 28vw, 330px);
  max-height: clamp(260px, 28vw, 330px);
  overflow: hidden;
  border: 1px solid rgba(215, 227, 244, 0.74);
  background: rgba(248, 250, 252, 0.38);
}

.game-playfield {
  display: grid;
  gap: 18px;
  transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.game-card.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  width: 100vw;
  max-width: none;
  height: 100dvh;
  padding: clamp(14px, 2vw, 26px);
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 12% 14%, rgba(37, 99, 235, 0.12), transparent 26%),
    radial-gradient(circle at 86% 16%, rgba(20, 184, 166, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(248, 251, 255, 0.98), rgba(238, 244, 255, 0.92) 45%, rgba(243, 255, 251, 0.94)),
    var(--white);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}

.game-card.is-fullscreen .game-card__top,
.game-card.is-fullscreen .game-card__controls {
  flex: 0 0 auto;
}

.game-card.is-fullscreen .game-card__top h3 {
  font-size: clamp(1.85rem, 3vw, 3.1rem);
}

.game-card.is-fullscreen .game-playfield-wrap {
  display: grid;
  min-height: 0;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 26px;
}

.game-card.is-fullscreen.is-waiting .game-playfield-wrap {
  max-height: none;
  min-height: 0;
}

.game-card.is-fullscreen .game-playfield {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
}

.game-card.is-fullscreen .game-feedback {
  margin-bottom: max(10px, env(safe-area-inset-bottom));
}

.game-card.is-fullscreen .game-metrics {
  align-self: start;
}

.game-playfield.is-blurred {
  pointer-events: none;
  user-select: none;
  filter: blur(5px) saturate(0.92);
  opacity: 0.56;
  transform: scale(0.988);
}

.game-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.48) 32%, transparent 68%),
    linear-gradient(180deg, rgba(238, 244, 255, 0.24), rgba(255, 255, 255, 0));
}

.game-start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  max-width: min(100%, 360px);
  padding: 0 26px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.32), transparent 28%),
    linear-gradient(135deg, #2f66ed, #2563eb 54%, #1748c9),
    var(--trust-blue);
  color: var(--white);
  cursor: pointer;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(1rem, 2vw, 1.16rem);
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 18px 38px rgba(37, 99, 235, 0.26),
    0 0 0 8px rgba(255, 255, 255, 0.64),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.game-start-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex: 0 0 auto;
}

.game-start-button:hover,
.game-start-button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow:
    0 22px 46px rgba(37, 99, 235, 0.32),
    0 0 0 6px rgba(37, 99, 235, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  outline: none;
}

.difficulty-tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.difficulty-tab {
  display: inline-grid;
  gap: 1px;
  min-width: 88px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--deep-ink);
  cursor: pointer;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.difficulty-tab strong {
  font-size: 0.82rem;
  line-height: 1;
}

.difficulty-tab span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.difficulty-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.38);
}

.difficulty-tab.is-active {
  border-color: var(--trust-blue);
  background: var(--trust-blue);
  color: var(--white);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18);
}

.difficulty-tab.is-active span {
  color: rgba(255, 255, 255, 0.76);
}

.game-best-pill,
.game-scope-pill {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(20, 184, 166, 0.26);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.1);
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 900;
}

.game-scope-pill {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.08);
  color: var(--trust-blue);
}

.game-mastery {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(215, 227, 244, 0.82);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 251, 255, 0.72)),
    var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.game-mastery__summary {
  display: grid;
  gap: 2px;
  min-width: 116px;
  padding: 8px 10px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 16px;
  background: rgba(238, 244, 255, 0.72);
}

.game-mastery__summary span,
.game-mastery__chip em,
.game-mastery__next {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.game-mastery__summary strong {
  color: var(--deep-ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1;
}

.game-mastery__chips {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 1px;
  scrollbar-width: none;
}

.game-mastery__chips::-webkit-scrollbar {
  display: none;
}

.game-mastery__chip {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 132px;
  padding: 8px 12px 8px 28px;
  border: 1px solid rgba(215, 227, 244, 0.88);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--deep-ink);
  box-shadow: 0 8px 18px rgba(31, 42, 55, 0.05);
}

.game-mastery__chip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 11px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(37, 99, 235, 0.28);
  border-radius: 50%;
  transform: translateY(-50%);
}

.game-mastery__chip strong {
  font-size: 0.82rem;
  line-height: 1;
}

.game-mastery__chip.is-done {
  border-color: rgba(20, 184, 166, 0.34);
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
}

.game-mastery__chip.is-done::before {
  border-color: rgba(20, 184, 166, 0.72);
  background: linear-gradient(135deg, #2dd4bf, #2563eb);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.12);
}

.game-mastery__next {
  justify-self: end;
  max-width: 180px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--trust-blue);
  text-align: right;
}

.game-practice-coach {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.09), rgba(20, 184, 166, 0.08)),
    rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.game-practice-coach span,
.game-practice-coach em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.game-practice-coach strong {
  min-width: 0;
  overflow: hidden;
  color: var(--deep-ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game-metrics span,
.game-feedback {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.86);
  color: var(--muted);
  font-weight: 900;
}

.game-feedback {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.game-feedback.is-correct {
  border-color: rgba(20, 184, 166, 0.34);
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
}

.game-feedback.is-wrong {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.13);
  color: #9a5d00;
}

.match-grid,
.choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.choice-grid--sprint {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.match-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.82), rgba(238, 244, 255, 0.66)),
    url("assets/game-art/audio-match-backdrop-ai.jpg") center / cover no-repeat,
    radial-gradient(circle at 50% 45%, rgba(20, 184, 166, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(238, 244, 255, 0.72));
}

.match-board::before {
  content: "";
  position: absolute;
  top: 54px;
  bottom: 20px;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.2), rgba(20, 184, 166, 0.22), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.match-column {
  display: grid;
  gap: 10px;
}

.match-column h4 {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.match-column__tiles {
  display: grid;
  gap: 10px;
}

.match-tile,
.choice-button {
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--border-gray);
  border-radius: 16px;
  background: var(--white);
  color: var(--deep-ink);
  cursor: pointer;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.match-tile span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.match-tile strong,
.choice-button {
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(1rem, 1.7vw, 1.28rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.match-tile--audio {
  border-color: var(--border-gray);
  background: var(--white);
}

.match-tile--audio strong {
  color: var(--deep-ink);
}

.match-tile:hover,
.choice-button:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 12px 20px rgba(37, 99, 235, 0.1);
}

.match-tile.is-selected {
  border-color: var(--trust-blue);
  background: rgba(37, 99, 235, 0.1);
}

.match-tile.is-matched,
.choice-button.is-correct {
  border-color: rgba(20, 184, 166, 0.55);
  background: rgba(20, 184, 166, 0.14);
  color: #0f766e;
}

.match-tile.is-just-correct,
.choice-button.is-just-correct,
.game-feedback.is-just-correct {
  animation: correct-answer-bloom 560ms ease-out;
}

.match-tile.is-wrong,
.choice-button.is-wrong {
  border-color: rgba(239, 68, 68, 0.68);
  background: rgba(239, 68, 68, 0.14);
  box-shadow: 0 12px 22px rgba(239, 68, 68, 0.12);
  color: #991b1b;
  animation: wrong-answer-shake 440ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.game-feedback.is-wrong {
  animation: wrong-answer-shake 440ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes wrong-answer-shake {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  10% {
    transform: translateX(-12px) rotate(-1.6deg);
  }
  22% {
    transform: translateX(11px) rotate(1.4deg);
  }
  34% {
    transform: translateX(-10px) rotate(-1.2deg);
  }
  48% {
    transform: translateX(8px) rotate(1deg);
  }
  62% {
    transform: translateX(-6px) rotate(-0.8deg);
  }
  78% {
    transform: translateX(4px) rotate(0.5deg);
  }
}

@keyframes correct-answer-bloom {
  0% {
    transform: scale(0.985);
    box-shadow: 0 0 0 rgba(20, 184, 166, 0);
  }
  45% {
    transform: scale(1.035);
    box-shadow: 0 14px 30px rgba(20, 184, 166, 0.18), 0 0 0 6px rgba(20, 184, 166, 0.1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 10px 22px rgba(20, 184, 166, 0.1);
  }
}

.match-tile:disabled,
.choice-button:disabled {
  cursor: default;
}

.sprint-prompt,
.type-prompt {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 156px;
  align-content: center;
  border: 1px solid rgba(215, 227, 244, 0.92);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  text-align: center;
  overflow: hidden;
}

.type-prompt > * {
  position: relative;
  z-index: 1;
}

.type-prompt {
  padding-bottom: 54px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(238, 244, 255, 0.66)),
    url("assets/game-art/type-words-backdrop-ai.jpg") center / cover no-repeat,
    rgba(255, 255, 255, 0.76);
}

.type-waveform {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 38px;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.08);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 100%, rgba(20, 184, 166, 0.08), transparent 52%),
    rgba(255, 255, 255, 0.38);
}

.type-waveform span {
  display: block;
  flex: 1 1 0;
  max-width: 18px;
  min-width: 4px;
  height: 6px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.16);
  box-shadow: 0 0 0 rgba(37, 99, 235, 0);
  opacity: 0.48;
  transition: height 70ms linear, opacity 70ms linear, background 110ms ease, box-shadow 110ms ease;
}

.type-waveform.is-listening span {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.98), rgba(37, 99, 235, 0.92));
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.18);
}

.type-waveform.is-fading span {
  transition:
    height 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 520ms ease,
    box-shadow 420ms ease;
}

.type-waveform.is-fallback span {
  animation: waveform-fallback 780ms ease-in-out infinite alternate;
  animation-delay: calc(var(--wave-index, 0) * 48ms);
}

.type-waveform span:nth-child(1) { --wave-index: 1; }
.type-waveform span:nth-child(2) { --wave-index: 2; }
.type-waveform span:nth-child(3) { --wave-index: 3; }
.type-waveform span:nth-child(4) { --wave-index: 4; }
.type-waveform span:nth-child(5) { --wave-index: 5; }
.type-waveform span:nth-child(6) { --wave-index: 6; }
.type-waveform span:nth-child(7) { --wave-index: 7; }
.type-waveform span:nth-child(8) { --wave-index: 8; }
.type-waveform span:nth-child(9) { --wave-index: 9; }
.type-waveform span:nth-child(10) { --wave-index: 10; }
.type-waveform span:nth-child(11) { --wave-index: 11; }
.type-waveform span:nth-child(12) { --wave-index: 12; }
.type-waveform span:nth-child(13) { --wave-index: 13; }
.type-waveform span:nth-child(14) { --wave-index: 14; }
.type-waveform span:nth-child(15) { --wave-index: 15; }
.type-waveform span:nth-child(16) { --wave-index: 16; }
.type-waveform span:nth-child(17) { --wave-index: 17; }
.type-waveform span:nth-child(18) { --wave-index: 18; }

@keyframes waveform-fallback {
  from {
    height: 6px;
    opacity: 0.44;
  }
  to {
    height: 28px;
    opacity: 1;
  }
}

.sprint-arena {
  position: relative;
  display: grid;
  gap: 16px;
  min-height: 330px;
  padding: clamp(14px, 2vw, 20px);
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.78), rgba(238, 244, 255, 0.7)),
    url("assets/game-art/sound-sprint-backdrop-ai.jpg") center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.sprint-arena::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 44%, rgba(255, 255, 255, 0.6), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.68));
}

.sprint-arena > * {
  position: relative;
  z-index: 1;
}

.sprint-timer-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(215, 227, 244, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 28px rgba(31, 42, 55, 0.08);
}

.sprint-stopwatch {
  position: relative;
  width: 44px;
  height: 44px;
  border: 3px solid var(--trust-blue);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.96), rgba(238, 244, 255, 0.86) 48%, rgba(37, 99, 235, 0.14)),
    var(--white);
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
}

.sprint-stopwatch__stem {
  position: absolute;
  left: 50%;
  top: -10px;
  width: 14px;
  height: 9px;
  border: 2px solid var(--trust-blue);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  transform: translateX(-50%);
  background: var(--white);
}

.sprint-stopwatch__hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 15px;
  border-radius: 999px;
  background: var(--support-teal);
  transform-origin: 50% 88%;
  transform: translate(-50%, -88%) rotate(35deg);
}

.sprint-stopwatch.is-running .sprint-stopwatch__hand {
  animation: stopwatch-hand 1s linear infinite;
}

@keyframes stopwatch-hand {
  to {
    transform: translate(-50%, -88%) rotate(395deg);
  }
}

.sprint-timer-wrap strong {
  min-width: 62px;
  color: var(--trust-blue);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1rem;
  text-align: right;
}

.sprint-timer {
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(215, 227, 244, 0.62);
}

.sprint-timer div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--support-teal), var(--trust-blue));
  transition: width 90ms linear;
}

.sprint-prompt span,
.type-prompt span {
  color: var(--trust-blue);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sprint-prompt strong,
.type-prompt strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(2.6rem, 8vw, 5.1rem);
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.sprint-arena .sprint-prompt {
  min-height: 128px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
}

.sprint-arena .choice-button {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
}

.blocks-arena {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1.1fr);
  gap: 16px;
  align-items: stretch;
  min-height: 520px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.72), rgba(238, 244, 255, 0.56)),
    url("assets/game-art/usage-blocks-backdrop-ai.jpg") center / cover no-repeat,
    radial-gradient(circle at 14% 18%, rgba(20, 184, 166, 0.12), transparent 32%),
    radial-gradient(circle at 88% 80%, rgba(250, 204, 21, 0.13), transparent 28%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(238, 244, 255, 0.86));
}

.blocks-board-wrap,
.blocks-panel {
  display: grid;
  align-content: center;
  min-width: 0;
}

.blocks-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--blocks-size), minmax(0, 1fr));
  gap: var(--blocks-gap, 4px);
  width: min(100%, 430px);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(215, 227, 244, 0.94);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(238, 244, 255, 0.72)),
    var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 34px rgba(31, 42, 55, 0.08);
}

.game-card.is-fullscreen .blocks-arena,
.game-card.is-fullscreen .sprint-arena,
.game-card.is-fullscreen .match-board,
.game-card.is-fullscreen .bloom-arena {
  min-height: 0;
  height: clamp(520px, calc(100dvh - 285px), 780px);
}

.game-card.is-fullscreen .blocks-arena {
  grid-template-columns: minmax(500px, 1.32fr) minmax(340px, 0.88fr);
  align-items: center;
  overflow: auto;
}

.game-card.is-fullscreen .blocks-board {
  width: min(100%, clamp(460px, calc(100dvh - 410px), 720px));
}

.game-card.is-fullscreen .match-board {
  align-content: start;
  overflow: auto;
  padding: clamp(16px, 2vw, 28px);
}

.game-card.is-fullscreen .sprint-arena {
  display: grid;
  grid-template-rows: auto minmax(170px, 1fr) auto;
  align-content: stretch;
  height: 100%;
  min-height: 0;
  padding: clamp(18px, 2.4vw, 34px);
}

.game-card.is-fullscreen .sprint-arena .sprint-prompt {
  min-height: clamp(160px, 21vh, 260px);
}

.game-card.is-fullscreen .choice-grid--sprint {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
}

.game-card.is-fullscreen .sprint-arena .choice-button {
  min-height: clamp(64px, 8vh, 88px);
}

.game-card.is-fullscreen .type-prompt {
  min-height: clamp(260px, 42vh, 520px);
  border-radius: 26px;
}

.game-card.is-fullscreen .type-form {
  width: min(100%, 860px);
  margin-inline: auto;
}

.game-card.is-fullscreen .bloom-arena {
  border-radius: 28px;
}

.game-card.is-fullscreen .bloom-field {
  top: clamp(132px, 16vh, 176px);
}

.game-card.is-fullscreen .bloom-target {
  width: min(calc(var(--size) * 1.12), 18vw);
  min-height: min(calc(var(--size) * 1.12), 18vw);
  font-size: clamp(1rem, 1.7vw, 1.38rem);
}

.blocks-cell {
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid rgba(215, 227, 244, 0.78);
  border-radius: var(--blocks-cell-radius, 8px);
  background: rgba(226, 232, 240, 0.62);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.blocks-cell.can-place:hover,
.blocks-cell.can-place:focus-visible {
  border-color: rgba(37, 99, 235, 0.42);
  background: rgba(219, 234, 254, 0.94);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  outline: none;
}

.blocks-cell.is-preview {
  border-color: rgba(20, 184, 166, 0.72);
  background: rgba(20, 184, 166, 0.26);
  box-shadow:
    inset 0 0 0 2px rgba(20, 184, 166, 0.34),
    0 0 0 3px rgba(20, 184, 166, 0.1);
}

.blocks-cell.is-preview-invalid {
  border-color: rgba(239, 68, 68, 0.76);
  background: rgba(239, 68, 68, 0.18);
  box-shadow:
    inset 0 0 0 2px rgba(239, 68, 68, 0.3),
    0 0 0 3px rgba(239, 68, 68, 0.08);
}

.blocks-cell.is-filled,
.blocks-mini-cell.is-filled,
.blocks-drag-cell.is-filled {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -2px 4px rgba(15, 23, 42, 0.12);
}

.blocks-cell.is-teal,
.blocks-mini-cell.is-teal,
.blocks-drag-cell.is-teal {
  background: linear-gradient(135deg, #5eead4, #14b8a6);
}

.blocks-cell.is-blue,
.blocks-mini-cell.is-blue,
.blocks-drag-cell.is-blue {
  background: linear-gradient(135deg, #93c5fd, #2563eb);
}

.blocks-cell.is-green,
.blocks-mini-cell.is-green,
.blocks-drag-cell.is-green {
  background: linear-gradient(135deg, #86efac, #22c55e);
}

.blocks-cell.is-aqua,
.blocks-mini-cell.is-aqua,
.blocks-drag-cell.is-aqua {
  background: linear-gradient(135deg, #67e8f9, #06b6d4);
}

.blocks-cell.is-violet,
.blocks-mini-cell.is-violet,
.blocks-drag-cell.is-violet {
  background: linear-gradient(135deg, #c4b5fd, #7c3aed);
}

.blocks-cell.is-gold,
.blocks-mini-cell.is-gold,
.blocks-drag-cell.is-gold {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
}

.blocks-cell.is-rose,
.blocks-mini-cell.is-rose,
.blocks-drag-cell.is-rose {
  background: linear-gradient(135deg, #fda4af, #e11d48);
}

.blocks-cell.is-filled.is-preview-invalid {
  border-color: rgba(239, 68, 68, 0.9);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.35),
    0 0 0 4px rgba(239, 68, 68, 0.22);
}

.blocks-cell.is-clearing {
  z-index: 2;
  pointer-events: none;
  animation: blocksLineClear 520ms var(--motion-ease-premium) both;
}

.blocks-clear-pop {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: grid;
  min-width: 128px;
  place-items: center;
  padding: 12px 18px;
  border: 1px solid rgba(20, 184, 166, 0.36);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(236, 253, 245, 0.9)),
    rgba(255, 255, 255, 0.88);
  box-shadow:
    0 18px 34px rgba(20, 184, 166, 0.2),
    0 0 0 10px rgba(20, 184, 166, 0.08);
  color: #0f766e;
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: blocksClearPop 760ms var(--motion-ease-premium) both;
}

.blocks-clear-pop span {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blocks-clear-pop strong {
  font-size: clamp(1.5rem, 3.8vw, 2.35rem);
  line-height: 1;
}

@keyframes blocksLineClear {
  0% {
    opacity: 1;
    filter: saturate(1) brightness(1);
    transform: scale(1);
  }
  34% {
    opacity: 1;
    filter: saturate(1.35) brightness(1.18);
    transform: scale(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 0 0 4px rgba(20, 184, 166, 0.16),
      0 0 24px rgba(37, 99, 235, 0.22);
  }
  100% {
    opacity: 0;
    filter: saturate(0.75) brightness(1.36);
    transform: scale(0.72);
  }
}

@keyframes blocksClearPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -42%) scale(0.82);
  }
  18%,
  62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -64%) scale(1.08);
  }
}

.blocks-panel {
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid rgba(215, 227, 244, 0.92);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
}

.blocks-tray,
.blocks-question {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.blocks-tray > span,
.blocks-question__top span {
  color: var(--trust-blue);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.blocks-pieces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
  gap: 10px;
}

.blocks-piece {
  display: grid;
  place-items: center;
  min-height: 112px;
  padding: 10px;
  border: 1px solid var(--border-gray);
  border-radius: 18px;
  background: var(--white);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.blocks-piece:hover,
.blocks-piece:focus-visible,
.blocks-piece.is-selected {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.46);
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.12);
  outline: none;
}

.blocks-piece.is-selected {
  box-shadow:
    0 14px 26px rgba(37, 99, 235, 0.14),
    0 0 0 4px rgba(37, 99, 235, 0.1);
}

.blocks-piece.is-placed {
  cursor: default;
  opacity: 0.42;
}

.blocks-piece.is-dragging {
  opacity: 0.48;
  transform: scale(0.98);
}

.blocks-piece-grid {
  display: grid;
  grid-template-columns: repeat(var(--piece-columns), 24px);
  grid-template-rows: repeat(var(--piece-rows), 24px);
  gap: 4px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.blocks-mini-cell {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.blocks-mini-cell:not(.is-filled) {
  cursor: default;
}

.blocks-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: repeat(var(--piece-columns), var(--drag-cell-size, 26px));
  grid-template-rows: repeat(var(--piece-rows), var(--drag-cell-size, 26px));
  gap: var(--drag-gap, 4px);
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
  contain: layout paint style;
  filter: drop-shadow(0 18px 24px rgba(31, 42, 55, 0.22));
}

.blocks-drag-cell {
  width: var(--drag-cell-size, 26px);
  height: var(--drag-cell-size, 26px);
  border-radius: 7px;
}

.blocks-drag-cell:not(.is-filled) {
  visibility: hidden;
}

.blocks-tray p,
.blocks-question p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.4;
}

.blocks-question__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blocks-question > strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.blocks-question > em {
  justify-self: start;
  padding: 7px 11px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.1);
  color: #0f766e;
  font-style: normal;
  font-weight: 900;
}

.blocks-usage-options {
  display: grid;
  gap: 9px;
}

.blocks-usage-choice {
  min-height: 58px;
  padding: 11px 13px;
  border: 1px solid var(--border-gray);
  border-radius: 16px;
  background: var(--white);
  color: var(--deep-ink);
  cursor: pointer;
  font-weight: 850;
  line-height: 1.25;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.blocks-usage-choice:hover,
.blocks-usage-choice:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.1);
  outline: none;
}

.blocks-usage-choice.is-correct {
  border-color: rgba(20, 184, 166, 0.55);
  background: rgba(20, 184, 166, 0.14);
  color: #0f766e;
}

.blocks-usage-choice.is-just-correct {
  animation: correct-answer-bloom 560ms ease-out;
}

.blocks-usage-choice.is-wrong {
  border-color: rgba(239, 68, 68, 0.68);
  background: rgba(239, 68, 68, 0.14);
  color: #991b1b;
  animation: wrong-answer-shake 440ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.bloom-arena {
  position: relative;
  min-height: clamp(420px, 55vw, 560px);
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(248, 251, 255, 0.48), rgba(243, 255, 251, 0.52)),
    url("assets/game-art/sound-bloom-backdrop-ai.jpg") center / cover no-repeat,
    linear-gradient(135deg, #f8fbff 0%, #eef6ff 46%, #f3fffb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bloom-arena::before,
.bloom-arena::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.bloom-arena::before {
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.68), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.34));
}

.bloom-arena::after {
  right: -9%;
  bottom: -24%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.15), transparent 68%);
}

.bloom-hud {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(92%, 520px);
  margin: 16px auto 0;
  padding: 10px 14px;
  border: 1px solid rgba(215, 227, 244, 0.92);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 30px rgba(31, 42, 55, 0.1);
}

.bloom-sound-orb {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), rgba(238, 244, 255, 0.84) 42%, rgba(37, 99, 235, 0.14)),
    var(--white);
  color: var(--trust-blue);
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.18);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.bloom-sound-orb::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(37, 99, 235, 0.22);
  border-radius: inherit;
  opacity: 0;
}

.bloom-sound-orb.is-ready::after {
  animation: sound-orb-pulse 1.7s ease-out infinite;
}

.bloom-sound-orb:hover,
.bloom-sound-orb:focus-visible {
  transform: translateY(-1px) scale(1.03);
  border-color: rgba(37, 99, 235, 0.52);
  box-shadow: 0 18px 32px rgba(37, 99, 235, 0.22);
  outline: none;
}

.bloom-sound-orb svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bloom-hud strong,
.bloom-hud span {
  display: block;
}

.bloom-hud strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.1;
}

.bloom-hud span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
}

.bloom-timer {
  position: relative;
  z-index: 3;
  width: min(90%, 520px);
  height: 10px;
  margin: 10px auto 0;
  overflow: hidden;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

.bloom-timer div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--support-teal), var(--trust-blue), var(--warm-accent));
  transition: width 90ms linear;
}

.bloom-field {
  position: absolute;
  top: 134px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.bloom-target {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  display: grid;
  place-items: center;
  width: min(var(--size), 32vw);
  min-height: min(var(--size), 32vw);
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.96), rgba(238, 244, 255, 0.86) 44%, rgba(20, 184, 166, 0.18)),
    var(--white);
  color: var(--deep-ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(0.92rem, 1.55vw, 1.18rem);
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
  box-shadow:
    0 16px 32px rgba(37, 99, 235, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  transform: translate(-50%, -50%);
  animation: bloom-target-drift 3.9s ease-in-out infinite alternate;
  animation-delay: var(--delay);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    opacity 140ms ease;
}

.bloom-target::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: inherit;
  pointer-events: none;
}

.bloom-target:hover,
.bloom-target:focus-visible {
  border-color: rgba(37, 99, 235, 0.52);
  box-shadow:
    0 20px 38px rgba(37, 99, 235, 0.18),
    0 0 0 5px rgba(37, 99, 235, 0.08);
  outline: none;
}

.bloom-target.is-correct {
  border-color: rgba(20, 184, 166, 0.7);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96), rgba(20, 184, 166, 0.22) 58%, rgba(20, 184, 166, 0.38)),
    var(--white);
  color: #0f766e;
}

.bloom-target.is-just-correct {
  animation: bloom-target-drift 3.9s ease-in-out infinite alternate, bloom-pop 620ms ease-out;
}

.bloom-target.is-wrong {
  border-color: rgba(239, 68, 68, 0.68);
  background: rgba(254, 226, 226, 0.94);
  color: #991b1b;
  animation:
    bloom-target-drift 3.9s ease-in-out infinite alternate,
    bloom-wrong-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
  animation-delay: var(--delay), 0s;
  will-change: margin-left;
}

.bloom-target:disabled {
  cursor: default;
}

@keyframes bloom-target-drift {
  0% {
    transform: translate(-50%, -50%) translateY(calc(var(--drift) * -0.55)) rotate(-1deg);
  }
  100% {
    transform: translate(-50%, -50%) translateY(var(--drift)) rotate(1deg);
  }
}

@keyframes bloom-pop {
  0% {
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.08), 0 0 0 0 rgba(20, 184, 166, 0.22);
  }
  48% {
    transform: translate(-50%, -50%) scale(1.09);
    box-shadow: 0 24px 42px rgba(20, 184, 166, 0.24), 0 0 0 18px rgba(20, 184, 166, 0.08);
  }
  100% {
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.13), 0 0 0 28px rgba(20, 184, 166, 0);
  }
}

@keyframes bloom-wrong-shake {
  0%,
  100% {
    margin-left: 0;
  }
  10% {
    margin-left: -9px;
  }
  22% {
    margin-left: 8px;
  }
  34% {
    margin-left: -7px;
  }
  48% {
    margin-left: 6px;
  }
  62% {
    margin-left: -4px;
  }
  78% {
    margin-left: 3px;
  }
}

@keyframes sound-orb-pulse {
  0% {
    transform: scale(0.92);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.28);
    opacity: 0;
  }
}

.type-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.type-form input {
  min-height: 48px;
  width: 100%;
  padding: 0 16px;
  border: 1px solid var(--border-gray);
  border-radius: 999px;
  background: var(--white);
  color: var(--deep-ink);
  font: inherit;
  font-weight: 800;
}

.game-log {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-gray);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.game-log__empty,
.game-log__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}

.game-log__empty {
  align-items: flex-start;
  flex-direction: column;
}

.game-log strong,
.game-log__top strong {
  display: block;
  color: var(--deep-ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1rem;
}

.game-log span {
  font-size: 0.82rem;
  font-weight: 800;
}

.game-log__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.game-log__item {
  display: grid;
  gap: 3px;
  min-height: 84px;
  padding: 10px;
  border: 1px solid rgba(215, 227, 244, 0.88);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.86);
}

.game-log__item strong {
  color: var(--trust-blue);
  font-size: 1.35rem;
  line-height: 1;
}

.game-log__item em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.2;
}

.type-form input:focus {
  border-color: rgba(37, 99, 235, 0.48);
  outline: 3px solid rgba(37, 99, 235, 0.16);
}

.type-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.type-tools span {
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 999px;
  background: rgba(238, 244, 255, 0.72);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.game-finish {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 260px;
  align-content: center;
  text-align: center;
}

.game-finish strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(3.4rem, 9vw, 6rem);
  line-height: 1;
  color: var(--trust-blue);
}

.game-finish span {
  color: var(--muted);
  font-weight: 900;
}

.game-finish__clean {
  color: var(--support-teal);
  font-style: normal;
  font-weight: 900;
}

.game-finish__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.game-finish-review {
  display: grid;
  gap: 10px;
  width: min(100%, 720px);
}

.game-finish-review > em {
  color: var(--support-teal);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.game-finish-review__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.game-finish-review__card {
  display: grid;
  gap: 3px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid rgba(190, 210, 238, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--deep-ink);
  cursor: pointer;
  text-align: left;
}

.game-finish-review__card strong {
  color: var(--deep-ink);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.12;
}

.game-finish-review__card span {
  color: var(--support-teal);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
}

.deck-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.deck-meta {
  display: grid;
  gap: 3px;
}

.deck-meta span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.deck-meta strong {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 1.28rem;
}

.deck-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-button,
.text-button,
.filter-tab,
.practice-audio-button,
.mode-tab,
.decoder-section-tab,
.game-mode-tab {
  border: 1px solid var(--border-gray);
  background: var(--white);
  color: var(--deep-ink);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.icon-button:hover,
.text-button:hover,
.filter-tab:hover,
.practice-audio-button:hover,
.mode-tab:hover,
.decoder-section-tab:hover,
.game-mode-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.36);
}

.icon-button:focus-visible,
.text-button:focus-visible,
.filter-tab:focus-visible,
.mode-tab:focus-visible,
.decoder-section-tab:focus-visible,
.game-mode-tab:focus-visible,
.game-start-button:focus-visible,
.match-tile:focus-visible,
.choice-button:focus-visible,
.blocks-cell:focus-visible,
.blocks-piece:focus-visible,
.blocks-usage-choice:focus-visible,
.bloom-sound-orb:focus-visible,
.bloom-target:focus-visible,
.decoder-hotspot:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.24);
  outline-offset: 3px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}

.icon-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button--primary {
  width: 54px;
  height: 54px;
  color: var(--white);
  background: var(--trust-blue);
  border-color: var(--trust-blue);
  box-shadow: var(--blue-shadow);
}

.flashcard {
  --card-rule: var(--trust-blue);
  --card-rule-rgb: 37, 99, 235;
  --card-rule-soft: rgba(37, 99, 235, 0.12);
  position: relative;
  isolation: isolate;
  width: min(720px, 100%);
  min-height: clamp(390px, 55vh, 520px);
  margin: 22px auto 58px;
  perspective: 1400px;
  overflow: hidden;
  contain: layout paint;
  cursor: pointer;
  outline: none;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}

.flashcard * {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.flashcard-stack {
  --stack-rule: var(--card-rule);
  --stack-rule-rgb: var(--card-rule-rgb);
  --stack-rule-soft: var(--card-rule-soft);
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  padding: clamp(18px, 3.4vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(var(--stack-rule-rgb), 0.18);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(var(--stack-rule-rgb), 0.11), rgba(255, 255, 255, 0.9) 52%),
    var(--soft-sky);
  pointer-events: none;
  transform-origin: top center;
  transition: transform 220ms cubic-bezier(0.2, 0.84, 0.22, 1), border-color 220ms ease, background 220ms ease, opacity 180ms ease;
  z-index: 0;
}

.flashcard-stack--middle {
  transform: translateY(16px) scaleX(0.962);
  opacity: 0.9;
  box-shadow:
    0 18px 28px rgba(var(--stack-rule-rgb), 0.08),
    0 2px 0 rgba(var(--stack-rule-rgb), 0.1);
  z-index: 1;
}

.flashcard-stack--back {
  transform: translateY(30px) scaleX(0.928);
  opacity: 0.72;
  box-shadow:
    0 16px 22px rgba(31, 42, 55, 0.07),
    0 2px 0 rgba(var(--stack-rule-rgb), 0.08);
}

.stack-card-topline,
.stack-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  color: rgba(82, 97, 116, 0.68);
  font-size: 0.86rem;
  font-weight: 800;
}

.stack-card-topline span {
  min-width: 0;
  overflow: hidden;
  padding: 5px 10px;
  border: 1px solid rgba(var(--stack-rule-rgb), 0.15);
  border-radius: 999px;
  background: rgba(var(--stack-rule-rgb), 0.06);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stack-card-main {
  align-self: center;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  min-width: 0;
}

.stack-card-main span {
  color: rgba(var(--stack-rule-rgb), 0.54);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stack-card-main strong {
  color: rgba(31, 42, 55, 0.34);
  font-family: "Manrope", Arial, sans-serif;
  font-size: var(--stack-card-word-size, clamp(2.3rem, 7vw, 4.8rem));
  line-height: 1.08;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.stack-card-footer {
  display: block;
  overflow: hidden;
  max-width: 76%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flashcard-motion {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: inherit;
  transform:
    translate3d(var(--flash-swipe-x, 0px), var(--flash-swipe-y, 0px), 0)
    rotate(var(--flash-swipe-rotate, 0deg));
  transition: transform 230ms cubic-bezier(0.2, 0.84, 0.22, 1), opacity 180ms ease;
  will-change: transform;
}

.flashcard.is-swiping .flashcard-motion {
  transition: none;
}

.flashcard.is-swipe-committing .flashcard-motion {
  opacity: 0.12;
  transition: transform 230ms cubic-bezier(0.18, 0.86, 0.24, 1), opacity 170ms ease;
}

.flashcard.is-swipe-reset .flashcard-motion {
  transition: transform 230ms cubic-bezier(0.2, 0.84, 0.22, 1);
}

.flashcard.is-swiping .flashcard-stack--middle,
.flashcard.is-swipe-committing .flashcard-stack--middle {
  transform: translateY(8px) scaleX(0.986);
  opacity: 0.98;
}

.flashcard.is-swipe-prev .flashcard-stack--middle {
  transform: translateY(8px) rotate(-0.2deg) scaleX(0.986);
}

.flashcard.is-swipe-next .flashcard-stack--middle {
  transform: translateY(8px) rotate(0.2deg) scaleX(0.986);
}

.flashcard-inner {
  position: relative;
  width: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.flashcard.is-moving-next .flashcard-motion {
  animation: flashcard-slide-next 420ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

.flashcard.is-moving-prev .flashcard-motion {
  animation: flashcard-slide-prev 420ms cubic-bezier(0.2, 0.82, 0.2, 1);
}

@keyframes flashcard-slide-next {
  0% {
    opacity: 0.82;
    transform: translateX(64px) rotate(1.2deg) scale(0.985);
  }
  62% {
    opacity: 1;
    transform: translateX(-7px) rotate(-0.25deg) scale(1.002);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0) scale(1);
  }
}

@keyframes flashcard-slide-prev {
  0% {
    opacity: 0.82;
    transform: translateX(-64px) rotate(-1.2deg) scale(0.985);
  }
  62% {
    opacity: 1;
    transform: translateX(7px) rotate(0.25deg) scale(1.002);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(0) scale(1);
  }
}

.flashcard.is-flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard:focus-visible .card-face {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.1),
    0 24px 46px rgba(37, 99, 235, 0.14);
}

.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding: clamp(20px, 4vw, 34px);
  min-height: inherit;
  overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(var(--card-rule-rgb), 0.17);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(238, 244, 255, 0.76), rgba(255, 255, 255, 0.96) 42%),
    var(--white);
  box-shadow: 0 24px 46px rgba(37, 99, 235, 0.14);
}

.card-face--back {
  transform: rotateY(180deg);
  background:
    linear-gradient(135deg, var(--card-rule-soft), rgba(255, 255, 255, 0.96) 46%),
    var(--white);
  border-color: rgba(var(--card-rule-rgb), 0.32);
}

.card-topline,
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.card-topline span,
.side-mark {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(238, 244, 255, 0.82);
  border: 1px solid rgba(215, 227, 244, 0.96);
}

.card-face--back .card-topline span,
.card-face--back .side-mark {
  background: rgba(var(--card-rule-rgb), 0.1);
  border-color: rgba(var(--card-rule-rgb), 0.24);
}

.card-main {
  align-self: center;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(14px, 2vw, 22px);
  min-width: 0;
  text-align: center;
}

.card-main p {
  margin: 0;
  color: var(--trust-blue);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
}

.card-main h2 {
  margin: 0;
  max-width: 100%;
  font-family: "Manrope", Arial, sans-serif;
  font-size: var(--card-word-size, clamp(2.8rem, 8vw, 5.6rem));
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.card-face--back .card-main h2 {
  font-family: "IBM Plex Mono", monospace;
  color: var(--card-rule);
}

.ipa {
  display: inline-flex;
  margin-top: 18px;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft-gray);
  border: 1px solid var(--border-gray);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.05rem;
}

.card-face--back .ipa {
  color: var(--card-rule);
  background: rgba(var(--card-rule-rgb), 0.08);
  border-color: rgba(var(--card-rule-rgb), 0.25);
}

.card-footer {
  min-height: 46px;
  align-items: flex-end;
}

.card-footer span:first-child {
  max-width: 72%;
  line-height: 1.45;
}

.practice-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
}

.text-button,
.filter-tab,
.practice-audio-button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 700;
}

.text-button--primary {
  border-color: var(--trust-blue);
  background: var(--trust-blue);
  color: var(--white);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18);
}

.text-button:disabled,
.icon-button:disabled,
.choice-button:disabled,
.match-tile:disabled {
  cursor: default;
  opacity: 0.62;
}

.status-line {
  justify-self: end;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.practice-audio {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(215, 227, 244, 0.72);
}

.practice-audio-button {
  background: rgba(238, 244, 255, 0.76);
  border: 1px solid var(--border-gray);
  color: var(--deep-ink);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.practice-audio-button:hover {
  transform: translateY(-1px);
  border-color: rgba(20, 184, 166, 0.5);
  background: rgba(20, 184, 166, 0.12);
}

.filter-tab.is-active {
  color: var(--white);
  background: var(--trust-blue);
  border-color: var(--trust-blue);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% -10%, rgba(96, 165, 250, 0.14), transparent 34%),
    linear-gradient(180deg, #070b14 0%, #101b2f 100%);
}

html[data-theme="dark"] .app-header {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(17, 34, 64, 0.92) 62%, rgba(30, 41, 59, 0.9)),
    var(--white);
  border-color: rgba(52, 71, 101, 0.96);
}

html[data-theme="dark"] .mode-tabs {
  background: rgba(30, 41, 59, 0.72);
  border-color: rgba(52, 71, 101, 0.96);
}

html[data-theme="dark"] .decoder-shell,
html[data-theme="dark"] .study-shell,
html[data-theme="dark"] .games-shell,
html[data-theme="dark"] .quiz-shell,
html[data-theme="dark"] .game-log,
html[data-theme="dark"] .quiz-log {
  background: rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] .volume-control,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .decoder-now-playing,
html[data-theme="dark"] .reader-page-status,
html[data-theme="dark"] .reader-progress,
html[data-theme="dark"] .decoder-tools-toggle,
html[data-theme="dark"] .game-score-pill,
html[data-theme="dark"] .quiz-status-pill,
html[data-theme="dark"] .game-best-pill,
html[data-theme="dark"] .card-topline span,
html[data-theme="dark"] .side-mark,
html[data-theme="dark"] .ipa,
html[data-theme="dark"] .game-metrics span,
html[data-theme="dark"] .game-feedback,
html[data-theme="dark"] .game-log__item,
html[data-theme="dark"] .quiz-review-card,
html[data-theme="dark"] .decoder-row__number,
html[data-theme="dark"] .decoder-ipa {
  background: rgba(30, 41, 59, 0.78);
}

html[data-theme="dark"] .game-card,
html[data-theme="dark"] .quiz-builder,
html[data-theme="dark"] .quiz-card,
html[data-theme="dark"] .quiz-results,
html[data-theme="dark"] .card-face,
html[data-theme="dark"] .card-face--back {
  background:
    linear-gradient(135deg, rgba(17, 34, 64, 0.86), rgba(15, 23, 42, 0.98) 48%),
    var(--white);
}

html[data-theme="dark"] .reader-toolbar,
html[data-theme="dark"] .reader-example-tray,
html[data-theme="dark"] .decoder-search,
html[data-theme="dark"] .practice-set-builder,
html[data-theme="dark"] .reader-thumbnail,
html[data-theme="dark"] .interactive-pdf-stage {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(17, 34, 64, 0.7)),
    var(--soft-gray);
  border-color: rgba(52, 71, 101, 0.88);
}

html[data-theme="dark"] .reader-active-label {
  color: #c7d4e8;
}

html[data-theme="dark"] .reader-thumbnail strong,
html[data-theme="dark"] .decoder-tools-toggle {
  color: #f8fbff;
}

html[data-theme="dark"] .decoder-search input,
html[data-theme="dark"] .decoder-search-result,
html[data-theme="dark"] .decoder-search-empty,
html[data-theme="dark"] .game-finish-review__card {
  background: rgba(15, 23, 42, 0.74);
  border-color: rgba(52, 71, 101, 0.88);
}

html[data-theme="dark"] .practice-set-builder__top span {
  color: #7db7ff;
}

html[data-theme="dark"] .practice-set-builder__top strong {
  color: #f8fbff;
}

html[data-theme="dark"] .practice-set-builder__top em {
  color: #c7d4e8;
}

html[data-theme="dark"] .practice-scope-chip {
  border-color: rgba(147, 197, 253, 0.42);
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.92));
  color: #e7eefb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 16px rgba(2, 6, 23, 0.18);
}

html[data-theme="dark"] .practice-scope-chip:hover,
html[data-theme="dark"] .practice-scope-chip:focus-visible {
  border-color: rgba(191, 219, 254, 0.82);
  color: #ffffff;
  outline: none;
}

html[data-theme="dark"] .practice-scope-chip.is-active {
  border-color: rgba(147, 197, 253, 0.92);
  background: linear-gradient(135deg, #60a5fa, #2dd4bf);
  color: #06111f;
  box-shadow:
    0 12px 24px rgba(96, 165, 250, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

html[data-theme="dark"] .mode-tab--feedback {
  color: #7dd3fc;
}

html[data-theme="dark"] .feedback-dialog {
  border-color: rgba(71, 99, 140, 0.92);
  background:
    linear-gradient(135deg, rgba(17, 34, 64, 0.96), rgba(15, 23, 42, 0.98)),
    #101b2f;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"] .feedback-close,
html[data-theme="dark"] .feedback-form input[type="email"],
html[data-theme="dark"] .feedback-form textarea {
  border-color: rgba(71, 99, 140, 0.92);
  background: rgba(15, 23, 42, 0.86);
  color: #f8fbff;
}

html[data-theme="dark"] .feedback-intro,
html[data-theme="dark"] .feedback-status {
  color: #c7d4e8;
}

html[data-theme="dark"] .feedback-form label span {
  color: #7db7ff;
}

html[data-theme="dark"] .decoder-shell.is-reader-fullscreen,
html[data-theme="dark"] .decoder-shell:fullscreen {
  background:
    radial-gradient(ellipse at 50% 105%, rgba(96, 165, 250, 0.14), transparent 50%),
    linear-gradient(180deg, #08111f 0%, #101b2f 100%);
}

html[data-theme="dark"] .example-take-menu {
  border-color: rgba(147, 197, 253, 0.28);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.34);
}

html[data-theme="dark"] .book-page__paper {
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow:
    0 28px 58px rgba(2, 6, 23, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .card-face--back {
  background:
    linear-gradient(135deg, rgba(var(--card-rule-rgb), 0.22), rgba(15, 23, 42, 0.98) 52%),
    var(--white);
  border-color: rgba(var(--card-rule-rgb), 0.36);
}

html[data-theme="dark"] .flashcard-stack {
  background:
    linear-gradient(135deg, rgba(var(--stack-rule-rgb), 0.16), rgba(15, 23, 42, 0.84) 56%),
    var(--white);
  border-color: rgba(var(--stack-rule-rgb), 0.24);
}

html[data-theme="dark"] .stack-card-main strong {
  color: rgba(231, 238, 251, 0.24);
}

html[data-theme="dark"] .stack-card-main span,
html[data-theme="dark"] .stack-card-topline,
html[data-theme="dark"] .stack-card-footer {
  color: rgba(168, 181, 202, 0.56);
}

html[data-theme="dark"] .stack-card-topline span {
  background: rgba(var(--stack-rule-rgb), 0.1);
  border-color: rgba(var(--stack-rule-rgb), 0.2);
}

html[data-theme="dark"] .card-face--back .card-main h2,
html[data-theme="dark"] .card-face--back .ipa {
  color: rgb(var(--card-rule-rgb));
}

html[data-theme="dark"] .card-face--back .card-topline span,
html[data-theme="dark"] .card-face--back .side-mark,
html[data-theme="dark"] .card-face--back .ipa {
  background: rgba(var(--card-rule-rgb), 0.12);
  border-color: rgba(var(--card-rule-rgb), 0.28);
}

html[data-theme="dark"] .game-card.is-fullscreen {
  background:
    radial-gradient(circle at 12% 14%, rgba(96, 165, 250, 0.18), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(45, 212, 191, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(17, 34, 64, 0.96) 48%, rgba(8, 47, 73, 0.9)),
    var(--white);
}

html[data-theme="dark"] .quiz-field,
html[data-theme="dark"] .quiz-setting-group,
html[data-theme="dark"] .quiz-check,
html[data-theme="dark"] .quiz-prompt-card,
html[data-theme="dark"] .quiz-match-intro,
html[data-theme="dark"] .quiz-field select {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(147, 197, 253, 0.22);
}

html[data-theme="dark"] .quiz-builder__visual {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.16), rgba(17, 34, 64, 0.72)),
    url("assets/game-art/self-quiz-backdrop.jpg") center / cover no-repeat;
}

html[data-theme="dark"] .game-start-overlay {
  background:
    radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.5) 32%, transparent 68%),
    linear-gradient(180deg, rgba(30, 41, 59, 0.18), rgba(15, 23, 42, 0));
}

html[data-theme="dark"] .game-start-button {
  color: #eff6ff;
  border-color: rgba(147, 197, 253, 0.26);
  background:
    linear-gradient(135deg, #3b82f6, #2563eb 54%, #1d4ed8),
    var(--trust-blue);
  box-shadow:
    0 20px 44px rgba(2, 6, 23, 0.46),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .game-mastery {
  border-color: rgba(96, 165, 250, 0.22);
  background:
    linear-gradient(135deg, rgba(17, 34, 64, 0.84), rgba(15, 23, 42, 0.88)),
    #0f172a;
  box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.08);
}

html[data-theme="dark"] .game-mastery__summary,
html[data-theme="dark"] .game-mastery__chip {
  border-color: rgba(147, 197, 253, 0.22);
  background: rgba(15, 23, 42, 0.72);
}

html[data-theme="dark"] .game-mastery__summary strong,
html[data-theme="dark"] .game-mastery__chip strong {
  color: #e7eefb;
}

html[data-theme="dark"] .game-mastery__chip.is-done {
  border-color: rgba(45, 212, 191, 0.36);
  background: rgba(20, 184, 166, 0.16);
}

html[data-theme="dark"] .game-mastery__chip.is-done strong {
  color: #99f6e4;
}

html[data-theme="dark"] .game-mastery__next {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}

html[data-theme="dark"] .game-practice-coach {
  border-color: rgba(147, 197, 253, 0.22);
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.16), rgba(20, 184, 166, 0.12)),
    rgba(15, 23, 42, 0.82);
}

html[data-theme="dark"] .game-practice-coach strong {
  color: #e7eefb;
}

html[data-theme="dark"] .blocks-arena {
  border-color: rgba(96, 165, 250, 0.22);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.76), rgba(17, 34, 64, 0.7)),
    url("assets/game-art/usage-blocks-backdrop-ai.jpg") center / cover no-repeat,
    radial-gradient(circle at 14% 18%, rgba(45, 212, 191, 0.1), transparent 32%),
    radial-gradient(circle at 88% 80%, rgba(250, 204, 21, 0.08), transparent 28%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 34, 64, 0.88));
}

html[data-theme="dark"] .blocks-board,
html[data-theme="dark"] .blocks-panel,
html[data-theme="dark"] .blocks-piece,
html[data-theme="dark"] .blocks-usage-choice {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(147, 197, 253, 0.24);
}

html[data-theme="dark"] .blocks-cell {
  background: rgba(51, 65, 85, 0.68);
  border-color: rgba(71, 85, 105, 0.74);
}

html[data-theme="dark"] .blocks-cell.is-filled,
html[data-theme="dark"] .blocks-mini-cell.is-filled,
html[data-theme="dark"] .blocks-drag-cell.is-filled {
  border-color: rgba(226, 232, 240, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -2px 5px rgba(2, 6, 23, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .blocks-cell.is-teal,
html[data-theme="dark"] .blocks-mini-cell.is-teal,
html[data-theme="dark"] .blocks-drag-cell.is-teal {
  background: linear-gradient(135deg, #7dd3fc, #14b8a6);
}

html[data-theme="dark"] .blocks-cell.is-blue,
html[data-theme="dark"] .blocks-mini-cell.is-blue,
html[data-theme="dark"] .blocks-drag-cell.is-blue {
  background: linear-gradient(135deg, #bfdbfe, #3b82f6);
}

html[data-theme="dark"] .blocks-cell.is-green,
html[data-theme="dark"] .blocks-mini-cell.is-green,
html[data-theme="dark"] .blocks-drag-cell.is-green {
  background: linear-gradient(135deg, #bbf7d0, #22c55e);
}

html[data-theme="dark"] .blocks-cell.is-aqua,
html[data-theme="dark"] .blocks-mini-cell.is-aqua,
html[data-theme="dark"] .blocks-drag-cell.is-aqua {
  background: linear-gradient(135deg, #a5f3fc, #06b6d4);
}

html[data-theme="dark"] .blocks-cell.is-violet,
html[data-theme="dark"] .blocks-mini-cell.is-violet,
html[data-theme="dark"] .blocks-drag-cell.is-violet {
  background: linear-gradient(135deg, #ddd6fe, #8b5cf6);
}

html[data-theme="dark"] .blocks-cell.is-gold,
html[data-theme="dark"] .blocks-mini-cell.is-gold,
html[data-theme="dark"] .blocks-drag-cell.is-gold {
  background: linear-gradient(135deg, #fef3c7, #f59e0b);
}

html[data-theme="dark"] .blocks-cell.is-rose,
html[data-theme="dark"] .blocks-mini-cell.is-rose,
html[data-theme="dark"] .blocks-drag-cell.is-rose {
  background: linear-gradient(135deg, #fecdd3, #f43f5e);
}

html[data-theme="dark"] .blocks-cell.can-place:hover,
html[data-theme="dark"] .blocks-cell.can-place:focus-visible {
  background: rgba(30, 64, 175, 0.36);
}

html[data-theme="dark"] .blocks-cell.is-preview {
  border-color: rgba(45, 212, 191, 0.7);
  background: rgba(45, 212, 191, 0.22);
}

html[data-theme="dark"] .blocks-cell.is-preview-invalid {
  border-color: rgba(248, 113, 113, 0.78);
  background: rgba(248, 113, 113, 0.22);
}

html[data-theme="dark"] .blocks-question > em {
  color: #99f6e4;
  background: rgba(20, 184, 166, 0.18);
}

html[data-theme="dark"] .blocks-usage-choice.is-correct {
  color: #99f6e4;
  background: rgba(20, 184, 166, 0.18);
}

html[data-theme="dark"] .blocks-usage-choice.is-wrong {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.2);
}

html[data-theme="dark"] .match-board {
  border-color: rgba(147, 197, 253, 0.22);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(17, 34, 64, 0.72)),
    url("assets/game-art/audio-match-backdrop-ai.jpg") center / cover no-repeat,
    radial-gradient(circle at 50% 45%, rgba(45, 212, 191, 0.08), transparent 30%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(17, 34, 64, 0.78));
}

html[data-theme="dark"] .sprint-arena {
  border-color: rgba(147, 197, 253, 0.22);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(17, 34, 64, 0.68)),
    url("assets/game-art/sound-sprint-backdrop-ai.jpg") center / cover no-repeat,
    #0f172a;
}

html[data-theme="dark"] .sprint-arena::before {
  background:
    radial-gradient(circle at 52% 44%, rgba(15, 23, 42, 0.3), transparent 42%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0.7));
}

html[data-theme="dark"] .sprint-timer-wrap,
html[data-theme="dark"] .sprint-arena .sprint-prompt,
html[data-theme="dark"] .sprint-arena .choice-button {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(147, 197, 253, 0.24);
}

html[data-theme="dark"] .sprint-stopwatch {
  background:
    radial-gradient(circle at 35% 28%, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.9) 48%, rgba(45, 212, 191, 0.13)),
    #0f172a;
}

html[data-theme="dark"] .sprint-stopwatch__stem {
  background: #0f172a;
}

html[data-theme="dark"] .bloom-arena {
  border-color: rgba(96, 165, 250, 0.22);
  background:
    radial-gradient(circle at 16% 20%, rgba(96, 165, 250, 0.2), transparent 28%),
    radial-gradient(circle at 88% 72%, rgba(45, 212, 191, 0.14), transparent 30%),
    linear-gradient(135deg, #08111f 0%, #101b2f 54%, #102a34 100%);
}

html[data-theme="dark"] .bloom-hud,
html[data-theme="dark"] .bloom-timer {
  border-color: rgba(147, 197, 253, 0.24);
  background: rgba(15, 23, 42, 0.76);
}

html[data-theme="dark"] .bloom-sound-orb,
html[data-theme="dark"] .bloom-target {
  border-color: rgba(147, 197, 253, 0.28);
  background:
    radial-gradient(circle at 30% 24%, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.9) 46%, rgba(45, 212, 191, 0.13)),
    #0f172a;
}

html[data-theme="dark"] .bloom-target.is-correct {
  color: #99f6e4;
  background:
    radial-gradient(circle at 50% 50%, rgba(15, 118, 110, 0.42), rgba(20, 184, 166, 0.2) 58%, rgba(15, 23, 42, 0.9)),
    #0f172a;
}

html[data-theme="dark"] .bloom-target.is-wrong {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.64);
}

html[data-theme="dark"] .sprint-prompt,
html[data-theme="dark"] .type-prompt,
html[data-theme="dark"] .match-tile,
html[data-theme="dark"] .choice-button,
html[data-theme="dark"] .difficulty-tab,
html[data-theme="dark"] .type-form input,
html[data-theme="dark"] .type-tools span,
html[data-theme="dark"] .quiz-check,
html[data-theme="dark"] .quiz-field select,
html[data-theme="dark"] .example-take-option,
html[data-theme="dark"] .practice-audio-button,
html[data-theme="dark"] .reader-tool,
html[data-theme="dark"] .decoder-section-tab,
html[data-theme="dark"] .filter-tab,
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .mode-tab {
  background: rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] .type-prompt {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(17, 34, 64, 0.7)),
    url("assets/game-art/type-words-backdrop-ai.jpg") center / cover no-repeat,
    rgba(15, 23, 42, 0.78);
}

html[data-theme="dark"] .type-waveform {
  border-color: rgba(147, 197, 253, 0.16);
  background:
    radial-gradient(circle at 50% 100%, rgba(45, 212, 191, 0.13), transparent 52%),
    rgba(15, 23, 42, 0.44);
}

html[data-theme="dark"] .type-waveform span {
  background: rgba(96, 165, 250, 0.2);
}

html[data-theme="dark"] .type-waveform.is-listening span {
  background: linear-gradient(180deg, rgba(45, 212, 191, 1), rgba(96, 165, 250, 0.96));
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.22);
}

html[data-theme="dark"] .example-take-option {
  border-color: rgba(147, 197, 253, 0.26);
  color: #bfdbfe;
}

html[data-theme="dark"] .mode-tab.is-active,
html[data-theme="dark"] .difficulty-tab.is-active,
html[data-theme="dark"] .decoder-section-tab.is-active,
html[data-theme="dark"] .filter-tab.is-active,
html[data-theme="dark"] .icon-button--primary {
  background: var(--trust-blue);
  color: #06111f;
}

html[data-theme="dark"] .reader-tool--fullscreen.is-selected {
  border-color: rgba(96, 165, 250, 0.72);
  background: rgba(96, 165, 250, 0.2);
  color: #bfdbfe;
}

html[data-theme="dark"] .text-button--primary {
  border-color: rgba(147, 197, 253, 0.92);
  background: linear-gradient(135deg, #60a5fa, #2dd4bf);
  color: #06111f;
  box-shadow:
    0 14px 28px rgba(96, 165, 250, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

html[data-theme="dark"] .text-button--primary:hover,
html[data-theme="dark"] .text-button--primary:focus-visible {
  border-color: rgba(191, 219, 254, 0.98);
  background: linear-gradient(135deg, #93c5fd, #5eead4);
}

html[data-theme="dark"] .quiz-nav .text-button--primary:disabled {
  opacity: 1;
  border-color: rgba(96, 165, 250, 0.68);
  background: rgba(15, 23, 42, 0.78);
  color: #bfdbfe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .game-mode-tab.is-active {
  background: #23314c;
}

html[data-theme="dark"] .game-app-card {
  border-color: rgba(96, 165, 250, 0.36);
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .game-app-card::after {
  background:
    linear-gradient(180deg, rgba(7, 14, 30, 0.05) 0 18%, rgba(7, 14, 30, 0.42) 42%, rgba(7, 14, 30, 0.82) 64%, rgba(3, 7, 18, 0.97) 100%),
    radial-gradient(circle at 82% 16%, rgba(191, 219, 254, 0.28), transparent 22%);
}

html[data-theme="dark"] .game-app-card__content {
  background: linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.68) 30%, rgba(3, 7, 18, 0.9) 100%);
}

html[data-theme="dark"] .game-app-card__content strong {
  color: #ffffff;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.96),
    0 14px 28px rgba(0, 0, 0, 0.78);
}

html[data-theme="dark"] .game-app-card__content em {
  color: #f4f8ff;
}

html[data-theme="dark"] .game-app-card__cta {
  color: #06111f;
  background: rgba(248, 251, 255, 0.96);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .match-tile.is-matched,
html[data-theme="dark"] .choice-button.is-correct,
html[data-theme="dark"] .bloom-target.is-correct,
html[data-theme="dark"] .game-feedback.is-correct {
  color: #99f6e4;
  background: rgba(20, 184, 166, 0.18);
}

html[data-theme="dark"] .match-tile.is-wrong,
html[data-theme="dark"] .choice-button.is-wrong,
html[data-theme="dark"] .bloom-target.is-wrong,
html[data-theme="dark"] .game-feedback.is-wrong {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.2);
}

@media (max-width: 1180px) {
  .app-header {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 24px;
  }

  .brand-lockup {
    align-items: center;
  }

  .header-copy {
    max-width: 760px;
  }

  .header-copy h1 {
    font-size: clamp(2.8rem, 6vw, 3.85rem);
  }

  .header-copy p {
    max-width: 620px;
  }

  .header-controls {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    width: 100%;
    min-width: 0;
  }

  .mode-tabs {
    justify-content: stretch;
    width: 100%;
  }

  .mode-tab {
    flex: 1 1 0;
    text-align: center;
  }

  .header-utilities {
    justify-content: stretch;
  }

  .volume-control {
    flex: 1 1 280px;
    width: auto;
  }

  .theme-toggle {
    flex: 0 0 auto;
  }

  .quiz-builder {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  }

  .quiz-check-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  }
}

@media (max-width: 940px) {
  .reader-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: stretch;
    border-radius: 18px;
  }

  .reader-progress {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .reader-page-status {
    min-width: 0;
    width: 100%;
    padding-inline: 10px;
  }

  .quiz-builder {
    grid-template-columns: 1fr;
  }

  .quiz-builder__visual {
    min-height: 260px;
  }
}

@media (max-width: 720px) {
  .app {
    width: calc(100vw - 32px);
    max-width: 1080px;
    padding-top: 10px;
  }

  .app-header {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 16px 20px;
    min-height: 0;
    border-radius: 24px;
  }

  .brand-lockup {
    align-items: center;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    text-align: center;
  }

  .brand-logo {
    width: min(128px, 56vw);
    height: 58px;
    object-position: center;
  }

  .header-copy h1 {
    width: min(100%, 330px);
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(2rem, 8vw, 2.35rem);
    line-height: 1.01;
    overflow-wrap: break-word;
  }

  .header-copy p {
    width: min(100%, 310px);
    max-width: 100%;
    margin: 10px auto 0;
    font-size: 0.98rem;
    line-height: 1.45;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .header-copy,
  .header-controls {
    width: 100%;
    max-width: 100%;
  }

  .mode-tabs {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .mode-tab {
    min-width: 0;
    max-width: calc(50% - 4px);
    flex: 1 1 calc(50% - 4px);
    min-height: 48px;
    width: auto;
    padding: 0 8px;
    border: 1px solid rgba(196, 214, 241, 0.95);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 8px 18px rgba(31, 42, 55, 0.06);
    font-size: 0.92rem;
    text-align: center;
  }

  .mode-tab.is-active {
    border-color: var(--trust-blue);
    background: var(--trust-blue);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
  }

  html[data-theme="dark"] .mode-tab {
    border-color: rgba(71, 99, 140, 0.92);
    background: rgba(15, 23, 42, 0.86);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  }

  html[data-theme="dark"] .mode-tab.is-active {
    border-color: rgba(96, 165, 250, 0.95);
    background: var(--trust-blue);
    box-shadow: 0 12px 24px rgba(96, 165, 250, 0.18);
  }

  .header-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    justify-items: start;
    min-width: 0;
  }

  .header-utilities {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .volume-control {
    grid-template-columns: auto minmax(0, 1fr);
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 52px;
    min-height: 0;
    padding: 9px 14px;
  }

  .volume-control input {
    height: 32px;
  }

  .volume-control input::-webkit-slider-runnable-track {
    height: 8px;
  }

  .volume-control input::-webkit-slider-thumb {
    margin-top: -8.5px;
    width: 25px;
    height: 25px;
  }

  .volume-control input::-moz-range-track {
    height: 8px;
  }

  .volume-control input::-moz-range-thumb {
    width: 25px;
    height: 25px;
  }

  .volume-control__value {
    display: none;
  }

  .theme-toggle {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: auto auto;
    justify-content: space-between;
    min-height: 48px;
    padding: 9px 12px 9px 16px;
  }

  .theme-toggle:focus-within {
    outline-width: 2px;
    outline-offset: 2px;
  }

  .decoder-shell {
    padding: 12px;
    overflow: visible;
  }

  .study-shell,
  .games-shell,
  .quiz-shell {
    padding: 12px;
    border-radius: 22px;
  }

  .decoder-hero,
  .decoder-page__top {
    align-items: flex-start;
    flex-direction: column;
  }

  .decoder-hero > div,
  .games-hero > div,
  .quiz-hero > div {
    width: 100%;
    min-width: 0;
  }

  .decoder-hero h2 {
    width: min(100%, 330px);
    font-size: 1.55rem;
    overflow-wrap: break-word;
  }

  .decoder-now-playing {
    width: 100%;
    text-align: left;
  }

  .decoder-tool-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .decoder-tools-toggle {
    display: inline-flex;
  }

  .decoder-tool-grid {
    display: none;
  }

  .decoder-shell.is-tools-open .decoder-tool-grid {
    display: grid;
  }

  .decoder-search {
    grid-template-columns: 1fr;
  }

  .decoder-search__clear {
    justify-self: start;
    align-self: center;
  }

  .reader-thumbnail-rail {
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 10px;
  }

  .reader-thumbnail {
    flex-basis: 78px;
    border-radius: 14px;
  }

  .games-hero,
  .quiz-hero,
  .quiz-card__top,
  .quiz-builder__top,
  .game-card__top {
    align-items: stretch;
    flex-direction: column;
  }

  .games-hero h2,
  .quiz-hero h2,
  .game-card__top h3 {
    font-size: 1.55rem;
  }

  .game-score-pill,
  .quiz-status-pill {
    width: 100%;
    text-align: left;
  }

  .game-app-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .game-app-card {
    min-height: min(78vw, 340px);
    border-radius: 20px;
  }

  .game-app-card__content {
    padding: 18px;
  }

  .quiz-builder {
    grid-template-columns: 1fr;
  }

  .quiz-builder__visual {
    min-height: 240px;
  }

  .quiz-settings-grid,
  .quiz-check-grid,
  .quiz-choice-grid,
  .quiz-review-list {
    grid-template-columns: 1fr;
  }

  .quiz-match-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .quiz-nav,
  .quiz-builder__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .quiz-nav .text-button,
  .quiz-builder__actions .text-button {
    width: 100%;
  }

  .game-card__controls {
    align-items: stretch;
    flex-direction: column;
  }

  .game-card__top-actions {
    justify-content: stretch;
    width: 100%;
  }

  .game-card__top-actions .text-button {
    flex: 1 1 0;
    justify-content: center;
  }

  .game-card.is-fullscreen {
    inset: 0;
    height: 100dvh;
    border-radius: 0;
  }

  .game-card.is-fullscreen .game-card__top,
  .game-card.is-fullscreen .game-card__controls {
    align-items: stretch;
    flex-direction: column;
  }

  .game-card.is-fullscreen .game-playfield-wrap {
    overflow: auto;
  }

  .difficulty-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 142px), 1fr));
    width: 100%;
    gap: 10px;
  }

  .difficulty-tab {
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 18px;
    justify-items: center;
    text-align: center;
  }

  .difficulty-tab strong {
    font-size: 0.96rem;
    line-height: 1.05;
  }

  .difficulty-tab span {
    font-size: 0.72rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .game-best-pill {
    width: 100%;
  }

  .game-mastery {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .game-mastery__summary {
    min-width: 0;
  }

  .game-mastery__chips {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .game-mastery__chip {
    min-width: 0;
  }

  .game-mastery__next {
    justify-self: stretch;
    max-width: none;
    text-align: left;
  }

  .game-practice-coach {
    grid-template-columns: 1fr;
    align-items: start;
    border-radius: 18px;
  }

  .game-practice-coach strong {
    white-space: normal;
  }

  .game-mode-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .blocks-arena {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .blocks-board {
    width: min(100%, 360px);
    gap: var(--blocks-gap, 3px);
    padding: 8px;
    border-radius: 18px;
  }

  .blocks-cell {
    border-radius: 6px;
  }

  .blocks-panel {
    padding: 12px;
  }

  .blocks-pieces {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 88px), 1fr));
    gap: 8px;
  }

  .blocks-piece {
    min-height: 86px;
    padding: 8px;
  }

  .blocks-piece-grid {
    grid-template-columns: repeat(var(--piece-columns), 18px);
    grid-template-rows: repeat(var(--piece-rows), 18px);
    gap: 3px;
  }

  .blocks-mini-cell {
    width: 18px;
    height: 18px;
    border-radius: 5px;
  }

  .blocks-drag-ghost {
    grid-template-columns: repeat(var(--piece-columns), 22px);
    grid-template-rows: repeat(var(--piece-rows), 22px);
    gap: 3px;
  }

  .blocks-drag-cell {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }

  .blocks-question > strong {
    font-size: 2rem;
  }

  .bloom-arena {
    min-height: 520px;
  }

  .bloom-hud {
    align-items: flex-start;
    width: calc(100% - 24px);
    border-radius: 20px;
  }

  .bloom-field {
    top: 166px;
  }

  .bloom-target {
    width: min(var(--size), 34vw);
    min-height: min(var(--size), 34vw);
    padding: 10px;
    font-size: 0.82rem;
  }

  .game-card.is-fullscreen .blocks-arena,
  .game-card.is-fullscreen .sprint-arena,
  .game-card.is-fullscreen .match-board,
  .game-card.is-fullscreen .bloom-arena {
    height: auto;
    min-height: calc(100dvh - 330px);
  }

  .game-card.is-fullscreen .blocks-arena {
    grid-template-columns: 1fr;
  }

  .game-card.is-fullscreen .bloom-field {
    top: 168px;
  }

  .game-card.is-fullscreen .bloom-target {
    width: min(var(--size), 32vw);
    min-height: min(var(--size), 32vw);
    font-size: clamp(0.78rem, 3.4vw, 1rem);
  }

  .match-grid,
  .match-board,
  .choice-grid {
    grid-template-columns: 1fr 1fr;
  }

  .type-form {
    grid-template-columns: 1fr;
  }

  .game-log__list {
    grid-template-columns: 1fr 1fr;
  }

  .decoder-toolbar {
    align-items: stretch;
    justify-items: stretch;
  }

  .decoder-toolbar__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .reader-toolbar {
    top: 6px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: stretch;
    border-radius: 18px;
    padding: 7px;
  }

  .reader-active-label {
    min-height: 28px;
    font-size: 0.76rem;
  }

  .reader-page-status {
    min-width: 0;
    width: 100%;
    padding-inline: 10px;
  }

  .reader-example-tray {
    grid-template-columns: 1fr;
    justify-content: stretch;
    max-width: none;
    padding: 10px;
  }

  .reader-example-tray__buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decoder-workspace {
    grid-template-columns: 1fr;
  }

  .decoder-page-card {
    display: none;
  }

  .decoder-section-tabs {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    padding: 0 2px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .decoder-section-tabs::-webkit-scrollbar {
    display: none;
  }

  .decoder-section-tab {
    width: auto;
    min-width: max-content;
    padding-inline: 13px;
    scroll-snap-align: start;
  }

  .interactive-pdf-stage {
    width: 100%;
    min-height: 520px;
    max-width: 100%;
    overflow: hidden;
    padding: 18px 18px 30px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
  }

  .book-reader {
    --page-width: min(82vw, 410px);
  }

  .book-reader--single {
    --page-width: min(88vw, 540px);
  }

  .decoder-shell.is-reader-fullscreen,
  .decoder-shell:fullscreen {
    grid-template-rows: auto minmax(0, auto) minmax(0, 1fr);
    padding: 8px;
  }

  .decoder-shell.is-reader-fullscreen .decoder-hero,
  .decoder-shell:fullscreen .decoder-hero {
    align-items: center;
  }

  .decoder-shell.is-reader-fullscreen .decoder-hero h2,
  .decoder-shell:fullscreen .decoder-hero h2 {
    display: none;
  }

  .decoder-shell.is-reader-fullscreen .decoder-now-playing,
  .decoder-shell:fullscreen .decoder-now-playing {
    min-width: 0;
    max-width: 46vw;
    padding: 8px 10px;
  }

  .decoder-shell.is-reader-fullscreen .reader-toolbar,
  .decoder-shell:fullscreen .reader-toolbar {
    gap: 7px;
    padding: 8px;
  }

  .decoder-shell.is-reader-fullscreen .decoder-section-tabs,
  .decoder-shell:fullscreen .decoder-section-tabs {
    display: flex;
    gap: 7px;
  }

  .decoder-shell.is-reader-fullscreen .interactive-pdf-stage,
  .decoder-shell:fullscreen .interactive-pdf-stage {
    padding: 10px;
  }

  .decoder-shell.is-reader-fullscreen .book-reader,
  .decoder-shell:fullscreen .book-reader {
    --page-width: min(82vw, 42vh);
  }

  .decoder-shell.is-reader-fullscreen .book-reader--single,
  .decoder-shell:fullscreen .book-reader--single {
    --page-width: min(92vw, 60vh);
  }

  .decoder-table__head {
    display: none;
  }

  .decoder-row {
    grid-template-columns: 52px 1fr;
    gap: 8px;
    padding: 12px 0;
  }

  .decoder-row__number {
    min-height: 100%;
    grid-row: span 4;
  }

  .decoder-row__phrase,
  .decoder-row__sounds,
  .decoder-row__usage,
  .decoder-row__example {
    grid-column: 2;
  }

  .decoder-speed-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deck-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .deck-actions {
    width: 100%;
    justify-content: space-between;
  }

  .deck-actions .icon-button {
    width: 48px;
    height: 48px;
  }

  .deck-actions .icon-button--primary {
    width: 56px;
    height: 56px;
  }

  .flashcard {
    min-height: min(430px, 68vh);
    margin: 16px auto 52px;
  }

  .flashcard-stack--middle {
    transform: translateY(14px) scaleX(0.968);
  }

  .flashcard-stack--back {
    transform: translateY(26px) scaleX(0.94);
  }

  .stack-card-main strong {
    font-size: var(--stack-card-word-size, 2.8rem);
  }

  .stack-card-footer {
    max-width: 100%;
  }

  .card-main h2 {
    font-size: var(--card-word-size, clamp(2.65rem, 13vw, 3.3rem));
  }

  .card-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .card-footer span:first-child {
    max-width: 100%;
  }

  .practice-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .practice-row .text-button {
    min-height: 48px;
  }

  .practice-audio-button {
    flex: 1 1 calc(50% - 9px);
    min-height: 48px;
  }

  .status-line {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 420px) {
  .app {
    width: calc(100vw - 20px);
  }

  .reader-toolbar {
    gap: 7px;
    padding: 6px;
  }

  .reader-tool,
  .reader-page-status,
  .reader-progress {
    min-height: 40px;
    font-size: 0.78rem;
  }

  .reader-tool svg {
    width: 16px;
    height: 16px;
  }

  .reader-thumbnail {
    flex-basis: 68px;
    padding: 5px;
  }

  .reader-thumbnail strong {
    display: none;
  }

  .reader-thumbnail-rail {
    gap: 6px;
    padding-bottom: 6px;
  }

  .decoder-section-tabs {
    gap: 6px;
    padding-bottom: 6px;
  }

  .decoder-section-tab {
    min-height: 40px;
    padding-inline: 11px;
    font-size: 0.9rem;
  }

  .app-header {
    padding: 16px 12px 18px;
  }

  .brand-logo {
    height: 52px;
  }

  .header-copy h1 {
    font-size: clamp(1.86rem, 8.5vw, 2.18rem);
  }

  .header-copy p {
    font-size: 0.92rem;
  }

  .mode-tabs {
    gap: 7px;
  }

  .mode-tab {
    min-height: 46px;
    font-size: 0.88rem;
  }

  .feedback-modal {
    padding: 12px;
    align-items: end;
  }

  .feedback-dialog {
    max-height: 92vh;
    padding: 18px;
    border-radius: 22px;
  }

  .feedback-dialog__top {
    gap: 12px;
  }

  .feedback-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .feedback-actions .text-button {
    width: 100%;
  }

  .volume-control,
  .theme-toggle {
    min-height: 0;
    height: 50px;
    padding-inline: 12px;
  }

  .study-shell,
  .games-shell,
  .quiz-shell,
  .decoder-shell {
    padding: 10px;
    border-radius: 20px;
  }

  .decoder-hero h2,
  .games-hero h2,
  .quiz-hero h2,
  .game-card__top h3 {
    font-size: 1.42rem;
  }

  .game-mode-tabs {
    grid-template-columns: 1fr;
  }

  .game-app-card {
    min-height: 282px;
  }

  .game-app-card__content strong {
    font-size: 1.5rem;
  }

  .game-app-card__content em {
    font-size: 0.86rem;
  }

  .difficulty-tabs {
    grid-template-columns: 1fr;
  }

  .difficulty-tab {
    display: grid;
    grid-template-columns: minmax(74px, auto) minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    min-height: 54px;
    text-align: left;
  }

  .difficulty-tab span {
    text-align: right;
    justify-self: end;
  }

  .deck-actions {
    gap: 8px;
  }

  .flashcard {
    min-height: 398px;
  }

  .card-face {
    gap: 18px;
    padding: 18px 16px;
    border-radius: 22px;
  }

  .card-topline,
  .card-footer {
    font-size: 0.82rem;
  }

  .card-topline span,
  .side-mark {
    min-height: 30px;
    padding: 5px 10px;
  }

  .card-main p {
    margin: 0;
    font-size: 0.78rem;
  }

  .card-main h2 {
    font-size: var(--card-word-size, clamp(2.28rem, 14vw, 3rem));
  }

  .ipa {
    margin-top: 12px;
    font-size: 0.92rem;
  }

  .stack-card-topline,
  .stack-card-footer {
    font-size: 0.76rem;
  }

  .stack-card-main strong {
    font-size: var(--stack-card-word-size, 2.15rem);
  }

  .practice-audio {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .practice-audio-button {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
  }

  .practice-audio-button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .motion-reveal,
  .motion-reveal.is-visible {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .scroll-progress {
    transition: none !important;
  }

  .interactive-pdf-stage::before,
  .motion-pressable::after {
    animation: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms !important;
  }
}