:root {
  --bg-navy: #011b3c;
  --bg-navy-soft: #0c2954;
  --bg-cyan: #54c9f4;
  --bg-green: #87c545;
  --bg-orange: #f47820;
  --bg-surface: rgba(10, 29, 63, 0.88);
  --bg-surface-soft: rgba(16, 40, 83, 0.76);
  --bg-border: rgba(84, 201, 244, 0.28);
  --bg-text: #f6fbff;
  --bg-muted: #a9bcd5;
  --bg-shadow: 0 24px 60px rgba(1, 17, 38, 0.42);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--bg-text);
  background:
    radial-gradient(circle at top left, rgba(135, 197, 69, 0.12), transparent 26%),
    radial-gradient(circle at bottom right, rgba(244, 120, 32, 0.12), transparent 28%),
    linear-gradient(180deg, #08264e 0%, #01162f 54%, #031125 100%);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.app-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.atmosphere .gear {
  position: fixed;
  opacity: 0.08;
  pointer-events: none;
  animation: gearSpin 24s linear infinite;
}

.gear-orange {
  top: 12%;
  left: -2rem;
  width: 14rem;
}

.gear-blue {
  right: -2rem;
  top: 30%;
  width: 12rem;
  animation-direction: reverse;
}

.gear-green {
  left: 18%;
  bottom: -3rem;
  width: 10rem;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(1, 19, 42, 0.72);
  backdrop-filter: blur(16px);
}

.navbar {
  gap: 1rem;
  padding: 1rem 0;
}

.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
}

.brand-lockup img {
  width: 13rem;
  max-width: 100%;
}

.brand-lockup small {
  color: var(--bg-muted);
  letter-spacing: 0;
  font-size: 0.92rem;
  line-height: 1.2;
  text-align: center;
}

.navbar-nav .nav-link {
  color: rgba(246, 251, 255, 0.82);
  font-weight: 600;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #fff;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.language-switcher-label {
  color: var(--bg-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

.language-chip {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(246, 251, 255, 0.8);
  padding: 0.4rem 0.78rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.language-chip:hover,
.language-chip:focus {
  color: #fff;
  background: rgba(84, 201, 244, 0.16);
}

.language-chip.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--bg-orange), var(--bg-cyan));
}

.account-pill {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
  padding: 1rem 1.2rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  min-width: min(18rem, 100%);
}

.account-pill span {
  color: var(--bg-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

.account-pill strong {
  font-size: 1rem;
}

.account-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.06);
  min-width: 11rem;
}

.account-chip span {
  color: var(--bg-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}

.account-chip strong {
  font-size: 0.92rem;
}

.btn-brand {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--bg-orange), var(--bg-cyan));
  box-shadow: 0 10px 30px rgba(84, 201, 244, 0.24);
}

.btn-brand:hover,
.btn-brand:focus {
  color: #fff;
  filter: brightness(1.05);
}

.page-shell {
  position: relative;
  padding: 2rem 0 3rem;
}

.hero-panel,
.glass-card,
.auth-card,
.metric-card {
  border: 1px solid var(--bg-border);
  background: var(--bg-surface);
  border-radius: 1.75rem;
  box-shadow: var(--bg-shadow);
}

.hero-panel {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
}

.compact-hero {
  grid-template-columns: 1.5fr 0.7fr;
}

.hero-copy h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 0.9rem;
}

.hero-subtitle,
.muted-line,
.inline-helper,
.auth-help {
  color: var(--bg-muted);
}

.hero-visual {
  display: flex;
  justify-content: center;
}

.hero-visual img {
  max-width: min(100%, 20rem);
}

.hero-actions,
.section-card-footer,
.section-heading,
.card-grid,
.info-grid,
.metrics-grid,
.stack-list,
.stack-form {
  display: flex;
  gap: 1rem;
}

.hero-actions {
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.eyebrow {
  margin: 0 0 0.6rem;
  color: var(--bg-cyan);
  letter-spacing: 0.16rem;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

.metrics-grid,
.info-grid,
.card-grid {
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.metrics-grid > *,
.info-grid > *,
.card-grid > * {
  flex: 1 1 16rem;
}

.metric-card,
.glass-card,
.auth-card {
  padding: 1.5rem;
}

.metric-card span {
  display: block;
  color: var(--bg-muted);
  margin-bottom: 0.5rem;
}

.metric-card strong {
  font-size: 2.2rem;
}

.two-up > * {
  flex: 1 1 22rem;
}

.section-heading {
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1rem;
}

.card-grid,
.stack-list,
.stack-form {
  flex-direction: column;
}

.parent-dashboard-stack {
  margin-top: 1.25rem;
}

.section-card {
  padding: 1.25rem;
  border-radius: 1.2rem;
  background: var(--bg-surface-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.section-card h3,
.section-card h2,
.glass-card h1,
.glass-card h2 {
  margin-top: 0;
}

.course-pill,
.meta-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.76rem;
  font-weight: 700;
}

.course-pill {
  background: color-mix(in srgb, var(--pill-tone, var(--bg-cyan)) 22%, white 6%);
  color: var(--pill-tone, var(--bg-cyan));
  margin-bottom: 0.8rem;
}

.meta-chip {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.meta-chip.is-active {
  background: rgba(135, 197, 69, 0.16);
  color: var(--bg-green);
}

.meta-chip.is-inactive {
  background: rgba(226, 66, 72, 0.16);
  color: #ff9aa0;
}

.section-card-footer {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.info-list {
  display: grid;
  gap: 0.85rem;
}

.info-list div {
  display: grid;
  gap: 0.2rem;
}

.info-list dt {
  color: var(--bg-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
}

.info-list dd {
  margin: 0;
}

.auth-shell {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
}

.auth-card {
  width: min(100%, 32rem);
}

.auth-brand {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.auth-brand img {
  width: 3.4rem;
}

.auth-form,
.stack-form {
  margin-top: 1.25rem;
}

.portal-alert {
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.empty-state {
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--bg-muted);
}

.page-footer {
  padding: 1rem 0 2rem;
  color: var(--bg-muted);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  color: #fff;
}

.footer-brand img {
  width: 1.8rem;
}

.narrow-card {
  max-width: 32rem;
  margin: 0 auto;
}

.portal-landing {
  display: grid;
  gap: 1.75rem;
  justify-items: center;
  text-align: center;
  padding: 0.5rem 0 2.2rem;
}

.portal-landing-copy {
  display: grid;
  gap: 0.8rem;
  max-width: 44rem;
}

.portal-landing-title {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 0.96;
}

.portal-landing-description {
  margin: 0;
  color: var(--bg-muted);
  font-size: clamp(1rem, 1.45vw, 1.16rem);
  line-height: 1.6;
}

.portal-landing-stage {
  position: relative;
  width: min(100%, 56rem);
  min-height: 33rem;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 1rem 0 0.35rem;
  overflow: hidden;
}

.portal-landing-ring,
.portal-landing-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.portal-landing-ring {
  width: min(31rem, 82vw);
  aspect-ratio: 1;
  border: 1px solid rgba(84, 201, 244, 0.26);
  background:
    radial-gradient(circle, rgba(84, 201, 244, 0.18), transparent 58%),
    radial-gradient(circle at 55% 45%, rgba(244, 120, 32, 0.12), transparent 72%);
  box-shadow:
    0 0 0 1px rgba(84, 201, 244, 0.08),
    0 0 56px rgba(84, 201, 244, 0.14);
}

.portal-landing-glow {
  width: min(36rem, 92vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(84, 201, 244, 0.12), transparent 66%);
  filter: blur(18px);
}

.portal-floating-gear {
  position: absolute;
  opacity: 0.82;
  filter: drop-shadow(0 0 20px rgba(84, 201, 244, 0.14));
}

.portal-floating-gear-orange {
  width: 6.4rem;
  top: 2.8rem;
  left: 14%;
  animation: gearSpin 18s linear infinite;
}

.portal-floating-gear-blue {
  width: 5.7rem;
  right: 14%;
  top: 6rem;
  animation: gearSpin 20s linear infinite reverse;
}

.portal-floating-gear-green {
  width: 4.5rem;
  right: 21%;
  bottom: 4rem;
  animation: gearSpin 16s linear infinite;
}

.portal-rocko-figure {
  position: relative;
  width: min(23rem, 70vw);
  animation: mascotFloat 4.6s ease-in-out infinite;
}

.portal-rocko-body {
  display: block;
  width: 100%;
  height: auto;
}

.student-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.student-brand-head {
  width: 4.4rem;
  height: auto;
}

.topbar-link-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--bg-text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
}

.topbar-link-chip:hover,
.topbar-link-chip:focus {
  color: #fff;
  background: rgba(84, 201, 244, 0.16);
}

.student-activities-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  padding: 0.5rem 0 0.35rem;
}

.student-course-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.course-launch-card,
.student-empty-state,
.lesson-sidebar,
.lesson-stage,
.lesson-player-board-panel,
.lesson-detail-box {
  border: 1px solid var(--bg-border);
  background: var(--bg-surface);
  box-shadow: var(--bg-shadow);
}

.course-launch-card,
.student-empty-state,
.lesson-sidebar,
.lesson-stage,
.lesson-player-board-panel,
.lesson-detail-box,
.lesson-sidebar-item,
.lesson-activity-link,
.lesson-nav-button,
.lesson-player-status,
.lesson-command-button,
.lesson-command-token {
  border-radius: 8px;
}

.course-launch-card {
  display: grid;
  gap: 0.7rem;
  padding: 1.2rem;
  text-decoration: none;
  color: var(--bg-text);
  min-height: 18rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(12, 41, 84, 0.96), rgba(3, 17, 37, 0.96));
}

.course-launch-card:hover,
.course-launch-card:focus {
  color: #fff;
  border-color: color-mix(in srgb, var(--course-accent, var(--bg-cyan)) 60%, white 18%);
  transform: translateY(-2px);
}

.course-launch-card h2 {
  margin: 0;
  font-size: 1.65rem;
}

.course-launch-code,
.lesson-sidebar-code,
.lesson-sidebar-progress,
.course-launch-unlock {
  color: var(--bg-cyan);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
  margin: 0;
}

.course-launch-intro {
  color: var(--bg-muted);
  margin: 0;
  line-height: 1.55;
}

.course-launch-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.course-launch-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  background: color-mix(in srgb, var(--course-accent, var(--bg-cyan)) 24%, white 4%);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
}

.student-empty-state {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.5rem;
  padding: 1.25rem;
}

.student-empty-state h2,
.student-empty-state p {
  margin: 0;
}

.lesson-workspace {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
  gap: 1rem;
}

.lesson-sidebar,
.lesson-stage {
  padding: 1rem;
}

.lesson-sidebar {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.lesson-sidebar-top {
  display: grid;
  gap: 0.45rem;
}

.lesson-sidebar-top h1 {
  margin: 0;
  font-size: 2rem;
}

.lesson-sidebar-list {
  display: grid;
  gap: 0.75rem;
}

.lesson-sidebar-item {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lesson-sidebar-item.is-current {
  border-color: rgba(84, 201, 244, 0.46);
  background: rgba(84, 201, 244, 0.08);
}

.lesson-sidebar-item.is-locked {
  opacity: 0.72;
}

.lesson-sidebar-link,
.lesson-activity-link {
  display: grid;
  gap: 0.15rem;
  color: var(--bg-text);
  text-decoration: none;
}

.lesson-sidebar-link span,
.lesson-activity-link span,
.lesson-detail-box span {
  color: var(--bg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  font-size: 0.7rem;
  font-weight: 700;
}

.lesson-sidebar-link strong,
.lesson-activity-link strong {
  font-size: 0.98rem;
}

.lesson-sidebar-link small {
  color: var(--bg-muted);
  font-size: 0.82rem;
}

.lesson-activity-links {
  display: grid;
  gap: 0.45rem;
}

.lesson-activity-link {
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.lesson-activity-link.is-current {
  border-color: rgba(244, 120, 32, 0.48);
  background: rgba(244, 120, 32, 0.12);
}

.lesson-stage {
  display: grid;
  gap: 1rem;
}

.lesson-stage-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lesson-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bg-text);
  text-decoration: none;
  font-weight: 700;
}

.lesson-nav-button.lesson-nav-button-primary {
  border: 0;
  background: linear-gradient(135deg, var(--bg-orange), var(--bg-cyan));
}

.lesson-nav-button.is-disabled {
  opacity: 0.42;
  pointer-events: none;
}

.lesson-stage-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(140deg, rgba(84, 201, 244, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.04);
}

.lesson-stage-copy h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(2rem, 4vw, 3rem);
}

.lesson-stage-rocko {
  width: min(12rem, 24vw);
  height: auto;
}

.lesson-player-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(18rem, 0.66fr);
  gap: 1rem;
  align-items: start;
}

.lesson-player-board-panel {
  padding: 0.85rem;
}

.lesson-player-board {
  position: relative;
  height: clamp(30rem, 68vh, 46rem);
  min-height: 30rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(5, 25, 55, 0.98), rgba(1, 12, 27, 0.98));
}

.lesson-player-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%, transparent 78%, rgba(1, 11, 27, 0.35)),
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.16), transparent 18%),
    radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.08), transparent 22%);
}

.lesson-player-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.lesson-player-board.is-ready .lesson-player-canvas {
  opacity: 1;
}

.lesson-player-loading {
  position: absolute;
  inset: 1rem;
  z-index: 3;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--bg-muted);
  font-weight: 700;
  transition: opacity 0.18s ease;
}

.lesson-player-board.is-ready .lesson-player-loading {
  opacity: 0;
  pointer-events: none;
}

.lesson-player-grid,
.lesson-player-cell,
.lesson-player-goal,
.lesson-player-rocko {
  display: none;
}

.lesson-stage-copy.theme-ocean {
  background:
    linear-gradient(135deg, rgba(84, 201, 244, 0.2), rgba(8, 31, 65, 0.38) 58%),
    rgba(255, 255, 255, 0.04);
}

.lesson-stage-copy.theme-ice {
  background:
    linear-gradient(135deg, rgba(196, 240, 255, 0.22), rgba(17, 42, 79, 0.42) 56%),
    rgba(255, 255, 255, 0.04);
}

.lesson-stage-copy.theme-fossil {
  background:
    linear-gradient(135deg, rgba(135, 197, 69, 0.18), rgba(32, 47, 19, 0.38) 60%),
    rgba(255, 255, 255, 0.04);
}

.lesson-stage-copy.theme-pyramid,
.lesson-stage-copy.theme-desert {
  background:
    linear-gradient(135deg, rgba(244, 120, 32, 0.18), rgba(66, 33, 9, 0.42) 58%),
    rgba(255, 255, 255, 0.04);
}

.lesson-stage-copy.theme-moon {
  background:
    linear-gradient(135deg, rgba(178, 190, 227, 0.22), rgba(20, 28, 58, 0.42) 58%),
    rgba(255, 255, 255, 0.04);
}

.lesson-player-side {
  display: grid;
  gap: 1rem;
}

.lesson-detail-box {
  display: grid;
  gap: 0.45rem;
  padding: 1rem;
}

.lesson-detail-box h3,
.lesson-detail-box p {
  margin: 0;
}

.lesson-command-palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.lesson-command-button {
  display: grid;
  place-items: center;
  min-height: 4.1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--bg-text);
  font-weight: 700;
  font-size: 2rem;
}

.lesson-command-button:hover,
.lesson-command-button:focus {
  background: rgba(84, 201, 244, 0.16);
}

.lesson-command-button[data-tone="forward"] {
  background: rgba(135, 197, 69, 0.24);
  border-color: rgba(135, 197, 69, 0.46);
  color: #f5ffe9;
}

.lesson-command-button[data-tone="turn-left"] {
  background: rgba(255, 213, 92, 0.24);
  border-color: rgba(255, 213, 92, 0.48);
  color: #fff8dd;
}

.lesson-command-button[data-tone="turn-right"] {
  background: rgba(244, 95, 80, 0.24);
  border-color: rgba(244, 95, 80, 0.46);
  color: #fff0ee;
}

.lesson-command-button[data-tone="activate"] {
  background: rgba(54, 111, 229, 0.28);
  border-color: rgba(111, 159, 255, 0.52);
  color: #eef5ff;
}

.lesson-command-button[data-tone="function"] {
  background: rgba(116, 224, 255, 0.24);
  border-color: rgba(116, 224, 255, 0.48);
  color: #eefcff;
}

.lesson-command-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lesson-command-queue {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.lesson-command-empty {
  color: var(--bg-muted);
}

.lesson-command-token {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  min-height: 3.2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lesson-command-token span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: rgba(84, 201, 244, 0.2);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
}

.lesson-command-token strong {
  font-size: 1.5rem;
  line-height: 1;
}

.lesson-command-token[data-tone="forward"] {
  background: rgba(135, 197, 69, 0.2);
  border-color: rgba(135, 197, 69, 0.38);
}

.lesson-command-token[data-tone="turn-left"] {
  background: rgba(255, 213, 92, 0.18);
  border-color: rgba(255, 213, 92, 0.36);
}

.lesson-command-token[data-tone="turn-right"] {
  background: rgba(244, 95, 80, 0.18);
  border-color: rgba(244, 95, 80, 0.36);
}

.lesson-command-token[data-tone="activate"] {
  background: rgba(54, 111, 229, 0.22);
  border-color: rgba(111, 159, 255, 0.38);
}

.lesson-command-token[data-tone="function"] {
  background: rgba(116, 224, 255, 0.18);
  border-color: rgba(116, 224, 255, 0.36);
}

.lesson-command-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.lesson-player-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--bg-muted);
}

.lesson-player-status.is-success {
  color: #e9ffd5;
  background: rgba(135, 197, 69, 0.18);
}

.lesson-player-status.is-error {
  color: #ffd0d0;
  background: rgba(244, 120, 32, 0.16);
}

.lesson-status-link {
  color: #fff;
  font-weight: 700;
}

.lesson-player-board.theme-ocean {
  background:
    radial-gradient(circle at 20% 18%, rgba(92, 220, 255, 0.25), transparent 22%),
    radial-gradient(circle at 78% 70%, rgba(14, 120, 180, 0.28), transparent 24%),
    linear-gradient(180deg, rgba(12, 62, 108, 0.98), rgba(2, 16, 36, 0.98));
}

.lesson-player-board.theme-ice {
  background:
    radial-gradient(circle at 24% 16%, rgba(220, 248, 255, 0.22), transparent 20%),
    radial-gradient(circle at 76% 74%, rgba(125, 198, 255, 0.2), transparent 26%),
    linear-gradient(180deg, rgba(28, 62, 109, 0.98), rgba(5, 18, 40, 0.98));
}

.lesson-player-board.theme-fossil {
  background:
    radial-gradient(circle at 18% 18%, rgba(189, 166, 102, 0.22), transparent 22%),
    radial-gradient(circle at 82% 72%, rgba(115, 154, 70, 0.2), transparent 24%),
    linear-gradient(180deg, rgba(66, 55, 27, 0.98), rgba(15, 22, 10, 0.98));
}

.lesson-player-board.theme-pyramid,
.lesson-player-board.theme-desert {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 204, 122, 0.24), transparent 24%),
    radial-gradient(circle at 80% 68%, rgba(244, 120, 32, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(122, 73, 24, 0.98), rgba(25, 16, 7, 0.98));
}

.lesson-player-board.theme-moon {
  background:
    radial-gradient(circle at 24% 18%, rgba(207, 218, 255, 0.2), transparent 20%),
    radial-gradient(circle at 78% 24%, rgba(108, 127, 216, 0.18), transparent 18%),
    linear-gradient(180deg, rgba(24, 29, 57, 0.98), rgba(4, 7, 18, 0.98));
}

@media (max-width: 991.98px) {
  .hero-panel,
  .compact-hero {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-landing-stage {
    min-height: 28rem;
  }

  .portal-rocko-figure {
    width: min(20rem, 76vw);
  }

  .lesson-workspace,
  .lesson-player-shell,
  .lesson-stage-copy {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  html {
    font-size: 15px;
  }

  .page-shell {
    padding: 1.5rem 0 2.5rem;
  }

  .hero-panel,
  .metric-card,
  .glass-card,
  .auth-card {
    padding: 1.2rem;
    border-radius: 1.25rem;
  }

  .brand-lockup img {
    width: 10.5rem;
  }

  .brand-lockup small {
    font-size: 0.82rem;
  }

  .language-switcher {
    justify-content: center;
    width: 100%;
  }

  .portal-landing {
    gap: 1.25rem;
  }

  .portal-landing-stage {
    min-height: 22rem;
  }

  .portal-floating-gear-orange {
    width: 4.8rem;
    top: 2rem;
    left: 4%;
  }

  .portal-floating-gear-blue {
    width: 4.1rem;
    top: 3rem;
    right: 7%;
  }

  .portal-floating-gear-green {
    width: 3.5rem;
    right: 16%;
    bottom: 2.7rem;
  }

  .portal-rocko-figure {
    width: min(16rem, 72vw);
  }

  .student-topbar-actions {
    width: 100%;
  }

  .topbar-link-chip {
    width: 100%;
  }

  .student-course-grid {
    grid-template-columns: 1fr;
  }

  .course-launch-footer,
  .lesson-player-status {
    flex-direction: column;
    align-items: start;
  }

  .lesson-player-board {
    height: clamp(24rem, 58vh, 31rem);
    min-height: 24rem;
  }

  .lesson-command-palette {
    grid-template-columns: 1fr;
  }
}

@keyframes gearSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes mascotFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}