:root {
  --navy-950: #000b14;
  --navy-900: #001423;
  --navy-850: #00192b;
  --navy-800: #002238;
  --navy-700: #06334d;
  --gold-700: #8d5e22;
  --gold-600: #b47c32;
  --gold-500: #d3a451;
  --gold-400: #e6be70;
  --cream: #f7f4ed;
  --muted: #9cabba;
  --line: rgba(211, 164, 81, 0.24);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.48);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--navy-950);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 10%, rgba(6, 51, 77, 0.65), transparent 36%),
    var(--navy-950);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.is-hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  margin: 0;
  color: var(--gold-500);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
}

/* Login */
.login-screen {
  display: grid;
  place-items: center;
  padding: 42px 24px;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 16, 28, .82), rgba(0, 11, 20, .92)),
    var(--navy-900);
}

.login-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.login-watermark {
  position: absolute;
  inset: -5% -3%;
  opacity: .105;
  background: url("assets/map-watermark-v2.png") center 54% / min(1440px, 116vw) auto no-repeat;
  filter: saturate(.28) contrast(.74) brightness(1.28);
  transform: translate(var(--login-water-x, 0), var(--login-water-y, 0)) scale(1.035);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  animation: watermarkTide 13s ease-in-out infinite alternate;
  will-change: transform, background-position;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(211, 164, 81, 0.12);
  border-radius: 50%;
}

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  border: inherit;
  border-radius: inherit;
}

.orbit-one {
  width: 540px;
  height: 540px;
  left: -210px;
  top: -160px;
  animation: slowSpin 32s linear infinite;
}

.orbit-one::before {
  inset: 48px;
}

.orbit-one::after {
  inset: 110px;
  border-style: dashed;
}

.orbit-two {
  width: 680px;
  height: 680px;
  right: -300px;
  bottom: -360px;
  animation: slowSpin 45s linear infinite reverse;
}

.orbit-two::before {
  inset: 70px;
  border-style: dashed;
}

.orbit-two::after {
  inset: 145px;
}

.north-star {
  position: absolute;
  right: 8%;
  top: 13%;
  color: var(--gold-500);
  font-size: 4rem;
  opacity: 0.24;
  filter: drop-shadow(0 0 24px rgba(211, 164, 81, 0.8));
}

.login-card {
  position: relative;
  z-index: 2;
  width: min(100%, 480px);
  padding: 26px 38px 38px;
  border: 1px solid rgba(211, 164, 81, 0.26);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(0, 34, 56, 0.96), rgba(0, 16, 28, 0.98));
  box-shadow: var(--shadow), inset 0 0 0 5px rgba(255, 255, 255, 0.012);
}

.login-card::before,
.login-card::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: var(--gold-500);
  opacity: 0.65;
}

.login-card::before {
  left: -1px;
  top: -1px;
  border-left: 2px solid;
  border-top: 2px solid;
}

.login-card::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.login-brand {
  height: 110px;
  margin: -6px 0 14px;
}

.login-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.login-copy {
  margin-bottom: 28px;
  text-align: center;
}

.login-copy h1 {
  margin: 10px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 400;
}

.login-copy p:last-child {
  margin: 0 auto;
  max-width: 340px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.field-label {
  display: block;
  margin: 16px 0 8px;
  color: #d9e0e6;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.input-shell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(0, 8, 15, 0.5);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.input-shell:focus-within {
  border-color: rgba(211, 164, 81, 0.72);
  box-shadow: 0 0 0 3px rgba(211, 164, 81, 0.08);
}

.password-shell {
  position: relative;
  transform-origin: 50% 100%;
}

.password-shell::after {
  content: "";
  position: absolute;
  left: 42px;
  right: 70px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(235, 193, 101, 0.9), transparent);
  opacity: 0;
  transform: scaleX(0.15);
}

.password-shell.key-pressed {
  animation: typewriterPress 150ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.password-shell.key-pressed::after {
  animation: typewriterInk 260ms ease-out both;
}

.password-shell.key-pressed .typewriter-lever {
  animation: typewriterLever 150ms cubic-bezier(0.2, 0.9, 0.35, 1) both;
}

.input-shell > span {
  color: var(--gold-500);
}

.input-shell input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--cream);
  background: transparent;
  font-size: 0.95rem;
}

.input-shell input::placeholder {
  color: #718291;
}

.typewriter-track {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-height: 23px;
  padding: 5px 3px 0;
  overflow: hidden;
}

.typewriter-key {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 17px;
  flex: 0 0 18px;
  border: 1px solid rgba(211, 164, 81, 0.38);
  border-radius: 4px 4px 6px 6px;
  color: #d8b66d;
  background: linear-gradient(155deg, rgba(230, 190, 112, 0.16), rgba(0, 9, 16, 0.82));
  box-shadow: 0 3px 0 rgba(50, 29, 5, 0.8), inset 0 1px 0 rgba(255, 238, 179, 0.18);
  transform: perspective(70px) rotateX(12deg);
}

.typewriter-key i {
  font-family: Georgia, serif;
  font-size: 0.8rem;
  font-style: normal;
  line-height: 1;
}

.typewriter-key.is-new {
  animation: typewriterKey 230ms cubic-bezier(0.18, 1.35, 0.34, 1) both;
}

.input-shell-readonly {
  opacity: 0.72;
}

.reveal-button {
  border: 0;
  color: var(--gold-400);
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-message {
  min-height: 22px;
  margin: 10px 0 2px;
  color: #f1a7a0;
  font-size: 0.84rem;
  text-align: center;
}

.primary-button,
.complete-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--gold-400);
  color: #07121b;
  background: linear-gradient(100deg, var(--gold-600), var(--gold-400), var(--gold-600));
  box-shadow: 0 8px 28px rgba(211, 164, 81, 0.18);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.primary-button:hover,
.complete-button:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 12px 38px rgba(211, 164, 81, 0.28);
}

.button-arrow {
  font-size: 1.25rem;
}

.login-card.shake {
  animation: shake 420ms ease;
}

/* Cover */
.cover-screen {
  display: grid;
  place-items: center;
  padding: 72px 24px 48px;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 13, 24, 0.42), rgba(0, 8, 15, 0.82)),
    radial-gradient(ellipse at center, rgba(13, 65, 93, 0.58), transparent 57%),
    var(--navy-950);
  animation: fadeIn 500ms ease both;
}

.cover-screen::before {
  content: "";
  position: absolute;
  width: min(88vw, 980px);
  aspect-ratio: 1;
  border: 1px solid rgba(211, 164, 81, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(211, 164, 81, 0.025),
    0 0 0 145px rgba(211, 164, 81, 0.018);
  animation: slowSpin 70s linear infinite;
}

.cover-light {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211, 164, 81, 0.13), transparent 67%);
  filter: blur(10px);
  animation: breathe 4s ease-in-out infinite;
}

.cover-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 900px);
  text-align: center;
}

.cover-content > img {
  display: block;
  width: min(100%, 820px);
  margin: 10px auto 20px;
  mix-blend-mode: screen;
  filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.35));
}

.seal-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: -6px;
  padding: 12px 24px 12px 12px;
  border: 1px solid rgba(211, 164, 81, 0.58);
  border-radius: 100px;
  color: var(--cream);
  background: rgba(0, 19, 32, 0.88);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45), 0 0 36px rgba(211, 164, 81, 0.1);
  cursor: pointer;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.seal-button:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--gold-400);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 45px rgba(211, 164, 81, 0.2);
}

.seal-compass {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  color: var(--gold-400);
  font-size: 1.75rem;
  background: radial-gradient(circle, rgba(211, 164, 81, 0.12), transparent 68%);
  animation: compassPulse 2.2s ease-in-out infinite;
}

.seal-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.seal-copy strong {
  color: var(--gold-400);
  font-size: 0.79rem;
  letter-spacing: 0.2em;
}

.seal-copy small {
  color: #bac6cf;
  font-size: 0.78rem;
}

.sound-control {
  position: absolute;
  z-index: 4;
  right: 28px;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 100px;
  color: #bec9d1;
  background: rgba(0, 12, 21, 0.62);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.sound-control.muted .sound-icon {
  opacity: 0.35;
  text-decoration: line-through;
}

.cover-footnote {
  position: absolute;
  bottom: 28px;
  margin: 0;
  color: rgba(247, 244, 237, 0.4);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
}

.cover-screen.opening .cover-content {
  animation: coverDepart 520ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

.map-opening-scene {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: none;
  place-items: center;
  overflow: hidden;
  background: rgba(0, 8, 15, 0.8);
  backdrop-filter: blur(9px);
}

.cover-screen.opening .map-opening-scene {
  display: grid;
  animation: fadeIn 260ms ease both;
}

.opening-glow {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(76vw, 850px);
  height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(211, 164, 81, 0.23), transparent 65%);
  filter: blur(30px);
  animation: openingGlow 1.7s ease both;
}

.opening-scroll {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(88vw, 920px);
  height: min(52vw, 470px);
  min-height: 310px;
  filter: drop-shadow(0 32px 50px rgba(0, 0, 0, 0.62));
}

.opening-map-sheet {
  position: relative;
  width: calc(100% - 42px);
  height: 86%;
  overflow: hidden;
  border-top: 2px solid rgba(194, 151, 75, 0.72);
  border-bottom: 2px solid rgba(194, 151, 75, 0.72);
  background: #f7f5ef url("assets/map-opening-white.png") center / cover no-repeat;
  box-shadow: inset 0 0 42px rgba(80, 65, 42, 0.2), 0 24px 54px rgba(0, 0, 0, 0.4);
  transform: scaleX(0.025);
  transform-origin: center;
  animation: unfurlSheet 1.55s cubic-bezier(0.22, 0.78, 0.16, 1) 180ms forwards;
}

.opening-map-sheet::before,
.opening-map-sheet::after {
  display: none;
}

.opening-map-sheet::before {
  left: -120px;
  top: -110px;
  box-shadow: 0 0 0 42px rgba(211, 164, 81, 0.035), 0 0 0 84px rgba(211, 164, 81, 0.02);
}

.opening-map-sheet::after {
  right: -130px;
  bottom: -140px;
  box-shadow: 0 0 0 55px rgba(211, 164, 81, 0.025);
}

.scroll-rod {
  position: absolute;
  z-index: 4;
  top: 1%;
  width: 25px;
  height: 98%;
  border: 1px solid #d6b16b;
  border-radius: 12px;
  background: linear-gradient(90deg, #321b0c, #9a6429 30%, #e0ba70 48%, #704419 70%, #241206);
  box-shadow: 0 0 24px rgba(211, 164, 81, 0.28), inset 0 0 5px rgba(255, 235, 187, 0.38);
}

.scroll-rod::before,
.scroll-rod::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 43px;
  height: 20px;
  transform: translateX(-50%);
  border: 1px solid #e4bc6c;
  border-radius: 50%;
  background: linear-gradient(#a8732d, #3f2209);
}

.scroll-rod::before { top: -8px; }
.scroll-rod::after { bottom: -8px; }

.rod-left {
  left: calc(50% - 21px);
  animation: rodLeft 1.55s cubic-bezier(0.22, 0.78, 0.16, 1) 180ms forwards;
}

.rod-right {
  right: calc(50% - 21px);
  animation: rodRight 1.55s cubic-bezier(0.22, 0.78, 0.16, 1) 180ms forwards;
}

.opening-compass {
  position: absolute;
  left: 8%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  transform: translateY(-50%);
  border: 2px solid rgba(37, 46, 52, 0.66);
  border-radius: 50%;
  color: #29333a;
  font-size: 3.3rem;
  opacity: 0;
  animation: compassInk 500ms ease 1s forwards;
}

.opening-route {
  position: absolute;
  inset: 14% 9%;
  z-index: 2;
  width: 82%;
  height: 72%;
}

.opening-route path {
  fill: none;
  stroke: #9b6d26;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 12;
  opacity: 0;
  animation: openingRoute 780ms ease 940ms forwards;
}

.opening-destination {
  position: absolute;
  z-index: 3;
  right: 7%;
  top: 12%;
  color: #9b6d26;
  font-family: Georgia, serif;
  font-size: 5rem;
  opacity: 0;
  animation: openingInk 420ms ease 1.45s forwards;
}

.opening-map-letters {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 10%;
  display: flex;
  gap: 24px;
  transform: translateX(-50%);
  color: #26333b;
  font-family: Georgia, serif;
  font-size: clamp(1.6rem, 4vw, 3rem);
  letter-spacing: 0.12em;
}

.opening-map-letters span {
  opacity: 0;
  transform: translateY(8px);
  animation: openingInk 300ms ease forwards;
}

.opening-map-letters span:nth-child(1) { animation-delay: 1s; }
.opening-map-letters span:nth-child(2) { animation-delay: 1.16s; }
.opening-map-letters span:nth-child(3) { animation-delay: 1.32s; }
.opening-map-letters span:nth-child(4) { animation-delay: 1.48s; }

.map-opening-scene > p {
  position: absolute;
  bottom: 9%;
  margin: 0;
  color: rgba(247, 244, 237, 0.82);
  font-family: Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  animation: openingInk 400ms ease 900ms forwards;
}

/* Map */
.map-screen {
  min-height: 100vh;
  padding: 0 0 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(7, 60, 88, 0.48), transparent 46%),
    linear-gradient(rgba(0, 11, 20, 0.91), rgba(0, 20, 34, 0.97)),
    repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(211, 164, 81, 0.028) 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(211, 164, 81, 0.028) 50px),
    var(--navy-900);
  animation: mapUnroll 900ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
  transform-origin: center top;
}

.map-header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(320px, 520px) minmax(90px, 1fr);
  align-items: center;
  gap: 28px;
  min-height: 82px;
  padding: 12px clamp(18px, 4vw, 58px);
  border-bottom: 1px solid rgba(211, 164, 81, 0.16);
  background: #001522;
  backdrop-filter: none;
}

.brand-lockup {
  display: block;
  align-items: center;
  justify-self: start;
  width: clamp(160px, 15vw, 210px);
  height: 64px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brand-lockup img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.progress-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.progress-copy {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.progress-copy span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.progress-copy strong {
  margin-top: 4px;
  color: #e5e9ec;
  font-size: 0.82rem;
  font-weight: 600;
}

.method-track {
  display: flex;
  align-items: center;
  gap: 10px;
}

.method-letter {
  position: relative;
  display: grid;
  place-items: center;
  align-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 2px solid #41474b;
  border-radius: 50%;
  color: #596066;
  background:
    radial-gradient(circle at 31% 24%, rgba(255, 255, 255, 0.2) 0 5%, transparent 16%),
    radial-gradient(circle at 50% 52%, transparent 0 49%, rgba(255, 255, 255, 0.08) 50% 53%, rgba(0, 0, 0, 0.38) 55% 59%, transparent 60%),
    conic-gradient(from 20deg, #151b1f, #4e5559 14%, #20272c 30%, #596065 47%, #171d21 65%, #454c51 82%, #151b1f);
  box-shadow:
    inset 0 0 0 2px #11171a,
    inset 0 0 0 4px rgba(220, 228, 232, 0.12),
    inset 4px 5px 8px rgba(255, 255, 255, 0.08),
    inset -5px -7px 9px rgba(0, 0, 0, 0.66),
    0 3px 0 #0b1013,
    0 7px 12px rgba(0, 0, 0, 0.38);
  filter: grayscale(1) brightness(0.62);
  transition: color 450ms ease, border-color 450ms ease, box-shadow 450ms ease, background 450ms ease, filter 450ms ease, transform 450ms ease;
}

.method-letter::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.36);
}

.method-letter::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.14), transparent 32%, rgba(0, 0, 0, 0.28) 72%);
  pointer-events: none;
}

.method-letter strong {
  position: relative;
  z-index: 2;
  font-family: Georgia, serif;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.13), 0 -1px 0 rgba(0, 0, 0, 0.7);
}

.method-letter.earned {
  color: #6b3b08;
  border-color: #f6d67c;
  background:
    radial-gradient(circle at 30% 22%, #fff7c5 0 4%, rgba(255, 246, 185, 0.7) 8%, transparent 18%),
    radial-gradient(circle at 50% 52%, transparent 0 49%, rgba(255, 242, 170, 0.7) 50% 52%, #9b5a0b 54% 58%, transparent 59%),
    repeating-conic-gradient(from 8deg, rgba(255, 249, 200, 0.12) 0deg 2deg, transparent 2deg 9deg),
    conic-gradient(from 18deg, #81500d, #f7d875 12%, #ba7617 27%, #ffec9d 43%, #a9630f 60%, #ecc05b 78%, #754108);
  box-shadow:
    inset 0 0 0 2px #8b520d,
    inset 0 0 0 4px rgba(255, 240, 160, 0.82),
    inset 5px 6px 8px rgba(255, 250, 205, 0.56),
    inset -6px -8px 10px rgba(105, 55, 4, 0.58),
    0 3px 0 #6d3b08,
    0 7px 13px rgba(0, 0, 0, 0.42),
    0 0 20px rgba(238, 192, 91, 0.24);
  filter: none;
  transform: translateY(-2px);
}

.method-letter.earned::before {
  border-color: rgba(111, 60, 5, 0.48);
  box-shadow: inset 0 0 0 1px rgba(255, 247, 190, 0.54);
}

.method-letter.earned strong {
  text-shadow: 0 1px 0 #ffe99b, 0 -1px 0 #5f3205, 1px 0 0 rgba(255, 239, 161, 0.65), -1px 0 0 rgba(95, 50, 5, 0.5);
}

.method-letter.just-earned {
  animation: coinDock 900ms cubic-bezier(0.16, 1.45, 0.32, 1) both;
}

.sound-control-map {
  position: static;
}

.map-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.coin-wallet { display:flex; align-items:center; gap:5px; min-height:40px; padding:0 11px; border:1px solid rgba(211,164,81,.34); border-radius:999px; color:var(--gold-300); background:rgba(0,12,21,.72); white-space:nowrap; }
.wallet-coin { display:grid; place-items:center; width:23px; height:23px; border:1px solid #f2cb68; border-radius:50%; color:#6b3a04; background:radial-gradient(circle at 30% 25%,#fff4ae,#d69229 45%,#7c4408); box-shadow:inset 0 0 0 2px rgba(101,51,3,.38),0 0 9px rgba(221,171,61,.2); }
.coin-wallet strong { color:#fff; font-size:.78rem; font-variant-numeric:tabular-nums; }
.coin-wallet small { color:#8999a3; font-size:.48rem; font-weight:800; letter-spacing:.12em; }
.coin-wallet.coin-earned { animation:walletReward 700ms cubic-bezier(.2,1.4,.4,1); }

.context-control {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid rgba(211, 164, 81, 0.32);
  border-radius: 50%;
  color: var(--gold-400);
  background: rgba(0, 12, 21, 0.62);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}
.context-control.has-pending {
  border-color: rgba(240, 198, 100, 0.82);
  color: #ffe09a;
  background: linear-gradient(145deg, rgba(169, 109, 27, 0.72), rgba(91, 53, 8, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 234, 168, 0.22), 0 5px 16px rgba(0, 0, 0, 0.24);
}
.action-pending-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #061a27;
  border-radius: 999px;
  color: #071722;
  background: linear-gradient(145deg, #ffe79a, #c88927 72%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.54);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.action-pending-badge[hidden] { display: none; }
.context-control.pending-arrived { animation: actionPendingArrived 760ms cubic-bezier(.2, 1.45, .35, 1); }
@keyframes actionPendingArrived {
  0% { transform: scale(.86); }
  45% { transform: scale(1.13); box-shadow: 0 0 0 9px rgba(222, 172, 65, .14); }
  100% { transform: scale(1); }
}
.context-control svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; }
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }
.action-plan-link { min-height: 36px; padding: 0 12px; border: 1px solid var(--gold-700); background: transparent; color: var(--gold-400); font-family: inherit; font-size: .6rem; font-weight: 700; letter-spacing: .08em; cursor: pointer; white-space: nowrap; }
.mission-block.mission-action-block { position:relative; overflow:hidden; padding:12px 16px; border-color:rgba(228,182,78,.72); background:linear-gradient(125deg,rgba(61,40,8,.42),rgba(7,29,41,.93) 58%); box-shadow:inset 3px 0 0 #d8a844,0 12px 34px rgba(0,0,0,.2); animation:actionBlockReveal 520ms ease both; }
.mission-action-block .block-heading { align-items:center; margin-bottom:0; }
.mission-action-block .block-heading h3 { font-size:1.05rem; }
.mission-action-kicker { margin:0 0 3px!important; color:var(--gold-400)!important; font-size:.55rem!important; font-weight:900; letter-spacing:.16em; }
.mission-action-glow { position:absolute; right:22%; top:50%; color:rgba(242,201,102,.13); font-size:7rem; transform:translateY(-50%); pointer-events:none; }
.mission-action-block .action-plan-link { min-height:43px; padding:0 17px; color:#081722; border-color:#f0ce77; background:linear-gradient(135deg,#f4d47c,#bd7924); box-shadow:0 8px 22px rgba(0,0,0,.24); }
.mission-action-block .action-plan-link:hover { filter:brightness(1.1); transform:translateY(-1px); }
.action-panel { width: min(980px,96vw); }
.result-expand { order:99; color:#071722; border-color:#f1cd70; background:#d6a449; box-shadow:none; font-size:1rem; font-weight:700; }
.result-expand:hover { filter:brightness(1.1); }
.result-block.result-expanded { position:fixed; z-index:30; inset:18px; display:flex; flex-direction:column; min-height:0; margin:0!important; padding:24px; border-color:rgba(224,178,79,.62); background:#001522; box-shadow:0 24px 80px rgba(0,0,0,.72),inset 0 0 70px rgba(15,68,91,.16); }
.result-block.result-expanded .block-heading { flex:0 0 auto; }
.result-block.result-expanded .result-expand { order:99; color:#071722; border-color:#f1cd70; background:#d6a449; box-shadow:none; font-size:1.15rem; font-weight:700; }
.result-block.result-expanded .result-expand:hover { filter:brightness(1.1); }
.result-block.result-expanded textarea { flex:1 1 auto; height:auto!important; min-height:260px!important; max-height:none!important; }
.result-block.result-expanded .result-footer { flex:0 0 auto; margin-top:14px; }
.action-book-sections { padding: 22px 28px 32px; overflow-y:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; scrollbar-color:var(--gold-600) var(--navy-950); }
.action-book-sections.detail-view { display:block; }
.action-module { position:relative; min-height:170px; padding:19px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(4,28,43,.96),rgba(0,14,24,.96)); color:var(--cream); text-align:left; cursor:pointer; transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease; }
.action-module:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--gold-500); box-shadow:0 12px 28px rgba(0,0,0,.24); }
.action-module.is-complete { border-color:rgba(224,178,79,.66); background:linear-gradient(145deg,rgba(74,50,12,.72),rgba(5,33,45,.96)); }
.action-module.is-complete strong { color:#f2cf7a; }
.action-module:disabled { opacity:.42; filter:grayscale(.65); cursor:not-allowed; }
.action-module>span,.action-detail-intro>span { color:var(--gold-400); font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.action-module>div { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:8px; }
.action-module h3 { margin:0; font:400 1.15rem Georgia,serif; }
.action-module strong { color:var(--gold-400); font-size:.72rem; white-space:nowrap; }
.action-module p { margin:10px 0 24px; color:var(--muted); font-size:.78rem; line-height:1.45; }
.action-module small { position:absolute; left:19px; bottom:16px; color:var(--gold-400); font-size:.57rem; font-weight:800; letter-spacing:.13em; }
.action-back { margin:0 0 14px; padding:8px 0; border:0; background:transparent; color:var(--gold-400); font-family:inherit; font-size:.7rem; font-weight:700; letter-spacing:.08em; cursor:pointer; }
.action-back:hover { color:var(--gold-200); }
.action-detail { display:grid; gap:12px; }
.action-detail-intro { position:relative; padding:18px 20px; border:1px solid var(--line); background:linear-gradient(110deg,rgba(9,38,55,.9),rgba(0,15,25,.78)); }
.action-detail-intro h3 { margin:6px 0; font:400 1.35rem Georgia,serif; }
.action-detail-intro p { max-width:720px; margin:0; color:var(--muted); font-size:.82rem; line-height:1.5; }
.action-detail-intro strong { position:absolute; right:20px; top:20px; color:var(--gold-400); font-size:.68rem; letter-spacing:.08em; }
.action-task { display:grid; grid-template-columns:28px minmax(0,1fr); gap:13px; padding:17px 18px; border:1px solid rgba(211,164,81,.22); background:rgba(0,15,25,.76); }
.action-task>div { min-width:0; }
.action-question-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:1px 0 10px; }
.action-task label { display:block; margin:0; color:#edf1ef; font:400 1rem/1.4 Georgia,serif; cursor:pointer; }
.action-help { position:relative; flex:0 0 auto; }
.action-help summary { display:grid; place-items:center; width:24px; height:24px; border:1px solid rgba(224,178,79,.68); border-radius:50%; color:var(--gold-400); background:rgba(0,10,18,.86); font-size:.72rem; font-weight:900; cursor:pointer; list-style:none; transition:color 160ms ease,background 160ms ease,transform 160ms ease; }
.action-help summary::-webkit-details-marker { display:none; }
.action-help summary:hover,.action-help[open] summary { color:#071621; background:var(--gold-400); transform:scale(1.04); }
.action-help p { position:absolute; z-index:8; right:0; top:30px; width:min(360px,72vw); margin:0; padding:13px 14px; border:1px solid rgba(224,178,79,.58); color:#dce4e8; background:#00121f; box-shadow:0 16px 36px rgba(0,0,0,.55); font-size:.76rem; line-height:1.5; }
.action-help p::before { content:"COMO RESPONDER"; display:block; margin-bottom:6px; color:var(--gold-400); font-size:.53rem; font-weight:900; letter-spacing:.14em; }
.action-task-reward { display:block; margin:-5px 0 10px; color:var(--gold-500); font-size:.55rem; font-weight:800; letter-spacing:.1em; }
.action-task input[type="checkbox"] { appearance:none; display:grid; place-items:center; width:24px; height:24px; margin:0; border:1px solid var(--gold-500); border-radius:50%; background:rgba(0,10,18,.9); cursor:pointer; transition:background 150ms ease,box-shadow 150ms ease,transform 150ms ease; }
.action-task input[type="checkbox"]::after { content:"✓"; color:#092033; font:900 14px/1 Arial,sans-serif; transform:scale(0); transition:transform 140ms ease; }
.action-task input[type="checkbox"]:checked { background:linear-gradient(145deg,#f7db86,#bd7922); box-shadow:0 0 14px rgba(226,177,73,.42),inset 0 1px 0 #fff2b8; }
.action-task input[type="checkbox"]:checked::after { transform:scale(1); }
.action-task input[type="checkbox"]:focus-visible { outline:2px solid var(--gold-300); outline-offset:3px; }
.action-task textarea { box-sizing:border-box; width:100%; min-height:96px; padding:12px 13px; border:1px solid rgba(211,164,81,.2); background:rgba(0,9,16,.78); color:var(--cream); font:inherit; line-height:1.5; resize:vertical; scrollbar-color:var(--gold-600) var(--navy-950); }
.action-character-count { display:block; margin-top:7px; color:#82949f; font-size:.68rem; text-align:right; }
.action-character-count.complete { color:var(--gold-400); font-weight:700; }
.mission-action-block.is-complete { border-color:rgba(238,199,104,.9); background:linear-gradient(125deg,rgba(83,57,11,.54),rgba(7,35,44,.95) 60%); }
.mission-action-block.is-complete .step-marker { color:#071722; border-color:#f5d77f; background:#dfae4b; }
.mission-action-block .action-plan-link.is-complete { color:#10222a; background:linear-gradient(135deg,#f7dfa0,#c99235); }
.action-task textarea:focus { outline:1px solid var(--gold-500); border-color:var(--gold-500); }
.action-task textarea::placeholder { color:#70818c; }
@media(max-width:700px){.action-book-sections{grid-template-columns:1fr;padding:16px}.action-plan-link{width:100%}.action-detail-intro strong{position:static;display:block;margin-top:12px}.action-task{grid-template-columns:26px minmax(0,1fr);padding:15px 13px}.action-task textarea{min-height:112px}}

.brain-icon {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 4px rgba(224, 178, 91, 0.36));
}

.context-control:hover {
  border-color: rgba(230, 190, 112, 0.8);
  background: rgba(211, 164, 81, 0.1);
  color: var(--gold-300);
  transform: translateY(-1px);
}

.context-control:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

.reset-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(211, 164, 81, 0.24);
  border-radius: 100px;
  color: #c6a15f;
  background: rgba(0, 12, 21, 0.62);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.reset-control:hover {
  color: #ffe5a2;
  border-color: rgba(230, 190, 112, 0.72);
  background: rgba(77, 42, 8, 0.32);
  transform: translateY(-1px);
}

.reset-control:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

.reset-icon {
  font-size: 1rem;
  line-height: 1;
}

.map-intro {
  position: relative;
  z-index: 2;
  margin: 32px auto 4px;
  padding: 0 24px;
  text-align: center;
}

.map-intro h1 {
  margin: 7px 0 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: 400;
}

.map-intro > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.map-scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-color: var(--gold-700) transparent;
}

.map-canvas {
  position: relative;
  width: min(1280px, calc(100vw - 64px));
  min-width: 1040px;
  height: 570px;
  margin: 0 auto;
}

.map-watermark {
  position: absolute;
  z-index: 0;
  inset: -4% -2%;
  pointer-events: none;
  opacity: .075;
  background: url("assets/map-watermark-v2.png") center / contain no-repeat;
  filter: saturate(.28) contrast(.72) brightness(1.28);
  transform: translate(var(--water-x, 0), var(--water-y, 0)) scale(1.035);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  animation: watermarkTide 13s ease-in-out infinite alternate;
}

@keyframes watermarkTide {
  from { background-position: 49.5% 50.5%; }
  to { background-position: 50.5% 49.5%; }
}

.map-rings, .coordinates, .route-line, .route-origin, .route-destination, .stage-grid { z-index: 2; }
.map-rings, .coordinates, .route-origin, .route-destination { position: absolute; }

@media (prefers-reduced-motion: reduce) {
  .map-watermark,
  .login-watermark { animation: none; transition: none; }
}

.map-canvas::before {
  content: "";
  position: absolute;
  inset: 24px 12px 6px;
  border: 1px solid rgba(211, 164, 81, 0.1);
  clip-path: polygon(0 9%, 4% 2%, 43% 0, 47% 3%, 93% 1%, 100% 9%, 99% 94%, 94% 100%, 51% 98%, 47% 100%, 4% 97%, 0 91%);
}

.map-rings {
  display: none;
  position: absolute;
  left: 49%;
  top: 48%;
  width: 470px;
  height: 470px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(211, 164, 81, 0.06);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(211, 164, 81, 0.025),
    0 0 0 112px rgba(211, 164, 81, 0.018);
}

.map-rings::before,
.map-rings::after {
  content: "";
  position: absolute;
  inset: 70px;
  border: 1px dashed rgba(211, 164, 81, 0.08);
  border-radius: 50%;
}

.map-rings::after {
  inset: 150px;
  border-style: solid;
}

.coordinates {
  position: absolute;
  color: rgba(211, 164, 81, 0.24);
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
}

.coordinates-one {
  left: 4%;
  top: 9%;
}

.coordinates-two {
  right: 4%;
  bottom: 5%;
}

.route-line {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 9%;
  width: 92%;
  height: 88%;
  overflow: visible;
}

.route-shadow,
.route-active {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 5 13;
  vector-effect: non-scaling-stroke;
}

.route-shadow {
  stroke: rgba(255, 255, 255, 0.17);
  stroke-width: 3;
}

.route-active {
  stroke: var(--gold-400);
  stroke-width: 3;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  filter: drop-shadow(0 0 7px rgba(230, 190, 112, 0.65));
  transition: stroke-dashoffset 900ms cubic-bezier(0.3, 0.7, 0.2, 1);
}

.route-origin,
.route-destination {
  position: absolute;
  z-index: 2;
  color: var(--gold-400);
  text-shadow: 0 0 18px rgba(230, 190, 112, 0.7);
  opacity: 0;
  transition: opacity 500ms ease, transform 500ms ease;
}

.map-canvas.has-progress .route-origin,
.map-canvas.is-complete .route-destination {
  opacity: 1;
}

.route-origin {
  left: 6.8%;
  bottom: 25%;
  font-size: 1.5rem;
}

.route-destination {
  right: 6.2%;
  top: 30%;
  font-family: Georgia, serif;
  font-size: 3.6rem;
}

.stage-grid {
  position: absolute;
  inset: 0;
}

.stage-node {
  --stage-color: var(--gold-500);
  position: absolute;
  z-index: 3;
  width: 190px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.stage-node:nth-child(1) {
  left: 12%;
  top: 29%;
}

.stage-node:nth-child(2) {
  left: 34%;
  top: 11%;
}

.stage-node:nth-child(3) {
  left: 57%;
  top: 38%;
}

.stage-node:nth-child(4) {
  left: 78%;
  top: 15%;
}

.stage-card-frame {
  position: relative;
  width: 148px;
  height: 206px;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid rgba(211, 164, 81, 0.56);
  background: #00111d;
  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.46);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.stage-card-frame::before,
.stage-card-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-color: var(--gold-400);
  opacity: 0;
  transition: opacity 200ms ease;
}

.stage-card-frame::before {
  left: -4px;
  top: -4px;
  border-left: 2px solid;
  border-top: 2px solid;
}

.stage-card-frame::after {
  right: -4px;
  bottom: -4px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.stage-card-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #00111d;
}

.stage-node:not(.locked):hover .stage-card-frame {
  transform: translateY(-8px) scale(1.025);
  border-color: var(--gold-400);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.58), 0 0 35px rgba(211, 164, 81, 0.14);
}

.stage-node:not(.locked):hover .stage-card-frame::before,
.stage-node:not(.locked):hover .stage-card-frame::after {
  opacity: 1;
}

.node-state {
  position: absolute;
  z-index: 4;
  right: -10px;
  top: -10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  color: var(--navy-950);
  background: var(--gold-400);
  box-shadow: 0 0 18px rgba(230, 190, 112, 0.42);
  font-size: 0.88rem;
  font-weight: 900;
}

.stage-node.locked {
  cursor: not-allowed;
}

.stage-node.locked .stage-card-frame {
  border-color: rgba(205, 218, 226, 0.3);
  box-shadow: 0 13px 34px rgba(0, 0, 0, 0.55), inset 0 0 28px rgba(202, 219, 229, 0.05);
}

.stage-node.locked .stage-card-frame img {
  filter: grayscale(1) brightness(0.42) contrast(1.06);
}

.locked-card-state {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(235, 241, 245, 0.58);
  border-radius: 50%;
  color: #edf2f5;
  background: rgba(2, 18, 29, 0.82);
  box-shadow: 0 0 0 7px rgba(4, 23, 35, 0.34), 0 8px 24px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
}

.locked-card-state .lock-icon { width: 27px; height: 27px; }

.stage-node.locked .node-state {
  display: none;
}

.stage-node.completed .stage-card-frame {
  box-shadow: 0 15px 42px rgba(0, 0, 0, 0.5), 0 0 28px rgba(211, 164, 81, 0.2);
}

.stage-node.completed .node-state {
  animation: completedPulse 2.4s ease-in-out infinite;
}

.stage-node.available .stage-card-frame {
  border-color: rgba(247, 244, 237, 0.48);
  animation: availableGlow 2.8s ease-in-out infinite;
}

.stage-node.available .node-state {
  display: none;
}

.stage-label {
  min-height: 54px;
  margin-bottom: 10px;
}

.stage-label h2 {
  margin: 0 0 3px;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 400;
}

.stage-label p {
  margin: 0;
  color: var(--gold-500);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stage-node.locked .stage-label h2,
.stage-node.locked .stage-label p {
  color: #9aa9b3;
}

.stage-node.available .stage-label p {
  color: #c3cdd4;
}

.map-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: -4px;
  color: #82929e;
  font-size: 0.72rem;
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #52626e;
}

.legend-dot.available {
  background: var(--cream);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}

.legend-dot.completed {
  background: var(--gold-400);
  box-shadow: 0 0 8px rgba(230, 190, 112, 0.7);
}

/* Stage modal */
.stage-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  perspective: 1800px;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 7, 13, 0.82);
  backdrop-filter: blur(12px);
  cursor: default;
}

.stage-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(480px, 1.6fr);
  width: min(1180px, 96vw);
  max-height: min(850px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(211, 164, 81, 0.4);
  background: #001522;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.7);
  transform-origin: left center;
  backface-visibility: hidden;
  animation: pageTurnIn 760ms cubic-bezier(0.18, 0.78, 0.18, 1) both;
}

.stage-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 7%, transparent 88%, rgba(0, 0, 0, 0.32));
  opacity: 0;
  animation: pageSheen 760ms ease both;
}

.close-button {
  position: absolute;
  z-index: 8;
  right: 18px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: var(--cream);
  background: rgba(0, 11, 20, 0.72);
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 300;
}

.stage-visual {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background: #00111d;
}

.stage-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.stage-visual-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 54%, #001522 100%), linear-gradient(0deg, rgba(0, 13, 23, 0.45), transparent 45%);
}

.stage-number {
  position: absolute;
  left: 24px;
  top: 22px;
  color: rgba(247, 244, 237, 0.85);
  font-family: Georgia, serif;
  font-size: 0.84rem;
  letter-spacing: 0.18em;
}

.stage-workspace {
  padding: 44px clamp(28px, 4vw, 58px) 42px;
  overflow-y: auto;
}

.stage-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-right: 48px;
  margin-bottom: 28px;
}

.stage-heading h2 {
  margin: 5px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  font-weight: 400;
}

.stage-status {
  flex: 0 0 auto;
  margin-top: 5px;
  padding: 7px 10px;
  border: 1px solid rgba(211, 164, 81, 0.3);
  color: var(--gold-400);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.stage-status.done {
  color: #07121b;
  background: var(--gold-400);
}

.mission-block {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 8, 14, 0.34);
}

.mission-block + .mission-block {
  margin-top: 16px;
}

.positioning-tool-card {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid rgba(211, 164, 81, 0.28);
  background: rgba(5, 25, 37, 0.72);
}

.positioning-tool-card[hidden] { display: none !important; }
.positioning-tool-card img { width: 66px; height: 76px; object-fit: cover; }
.positioning-tool-card .eyebrow { margin: 0 0 5px; font-size: 0.56rem; }
.positioning-tool-card strong,
.positioning-tool-card span { display: block; }
.positioning-tool-card strong { color: var(--cream); font: 1rem/1.25 Georgia, serif; }
.positioning-tool-card span { margin-top: 4px; color: #91a3ad; font-size: 0.72rem; line-height: 1.45; }
.positioning-tool-card button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(151, 185, 203, 0.38);
  color: #d9e7ee;
  background: #12384d;
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
}
.positioning-tool-card.is-owned { border-color: rgba(87, 154, 186, 0.48); }

.tool-offer-dialog {
  width: min(690px, calc(100vw - 28px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(211, 164, 81, 0.55);
  border-radius: 0;
  color: var(--cream);
  background: #071e2b;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.65);
}
.tool-offer-dialog::backdrop { background: rgba(0, 8, 14, 0.78); backdrop-filter: blur(8px); }
.tool-offer-dialog[open] { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.tool-offer-dialog > img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.tool-offer-dialog > div { padding: 38px 34px 30px; }
.tool-offer-dialog h2 { margin: 8px 0 12px; font: 1.75rem/1.12 Georgia, serif; }
.tool-offer-dialog p:not(.eyebrow) { color: #a1b2bb; font-size: 0.84rem; line-height: 1.65; }
.tool-offer-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: var(--cream); background: rgba(0,11,20,.82); font-size: 1.45rem; cursor: pointer; }
.tool-offer-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.tool-offer-actions > button:first-child { border: 0; color: #9babb3; background: transparent; font-size: .65rem; font-weight: 800; cursor: pointer; }
.tool-offer-actions .complete-button { min-width: 170px; }

.tool-training-card.is-progression-locked .training-card-cover { filter: saturate(.45) brightness(.62); }
.tool-training-card.is-progression-locked .training-card-cover::after { content:"🔒"; position:absolute; inset:0; display:grid; place-items:center; color:#f0c562; background:rgba(0,15,25,.34); font-size:1.55rem; }
.tool-training-card.is-progression-locked .training-card-action { color:#91a3ad; background:#123144; border-color:rgba(255,255,255,.12); font-size:.55rem; }

.block-heading,
.block-heading > div:first-child {
  display: flex;
  align-items: center;
}

.block-heading {
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}

.block-heading > div:first-child {
  gap: 12px;
}

.step-marker {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex: 0 0 32px;
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 1px solid var(--gold-600);
  border-radius: 50%;
  color: var(--gold-400);
  font-family: Georgia, serif;
  font-size: 0.84rem;
}

.block-heading h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  font-weight: 400;
}

.block-heading p {
  margin: 3px 0 0;
  color: #8fa0ad;
  font-size: 0.78rem;
  line-height: 1.4;
}

.copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(211, 164, 81, 0.55);
  color: var(--gold-400);
  background: rgba(211, 164, 81, 0.04);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.copy-button.copied {
  color: #05101a;
  background: var(--gold-400);
}

.copy-button:disabled {
  border-color: rgba(255, 255, 255, 0.08);
  color: #5f707b;
  background: rgba(5, 20, 30, 0.5);
  cursor: not-allowed;
  opacity: 0.7;
}

.result-heading-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.copy-icon-button {
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  padding: 0;
  border: 1px solid rgba(211, 164, 81, 0.34);
  border-radius: 50%;
  color: var(--gold-400);
  background: rgba(211, 164, 81, 0.035);
  cursor: pointer;
  font-size: 0.92rem;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.copy-icon-button:hover:not(:disabled) {
  color: #fff0ba;
  border-color: rgba(230, 190, 112, 0.74);
  background: rgba(211, 164, 81, 0.1);
  transform: translateY(-1px);
}

.copy-icon-button:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

.copy-icon-button:disabled {
  color: #5f707b;
  border-color: rgba(255, 255, 255, 0.08);
  background: transparent;
  cursor: not-allowed;
  opacity: 0.56;
}

.copy-icon-button.copied {
  color: #06121b;
  border-color: var(--gold-400);
  background: var(--gold-400);
}

.mission-block textarea {
  display: block;
  width: 100%;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  outline: 0;
  color: #dce3e8;
  background: rgba(0, 7, 12, 0.68);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.6;
}

.mission-block textarea:focus {
  border-color: rgba(211, 164, 81, 0.6);
}

#promptText {
  min-height: 134px;
  padding: 15px;
}

#resultText {
  min-height: 142px;
  padding: 15px;
}

#resultText[hidden], #resultImportHub[hidden], #importEditorialResult[hidden], #expandResult[hidden], #autosaveState[hidden] { display:none!important; }

#resultText::placeholder {
  color: #667986;
}

.editorial-import-button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--gold-500);
  color: #071722;
  background: var(--gold-400);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.result-import-hub { display:grid; gap:10px; }
.result-import-summary { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:74px; padding:14px 16px; border:1px solid rgba(211,164,81,.22); background:rgba(0,7,12,.45); }
.result-import-summary strong { display:block; color:#f1f4f5; font-family:Georgia,serif; font-size:1rem; }
.result-import-summary span { color:#8395a0; font-size:.7rem; }
.result-import-summary button { flex:0 0 auto; border:1px solid rgba(211,164,81,.38); color:var(--gold-300); background:transparent; padding:9px 12px; font-size:.61rem; font-weight:800; }
.result-import-actions { display:flex; align-items:center; gap:7px; }
.result-import-summary .result-import-trash { display:grid; place-items:center; width:34px; height:34px; padding:0; border-color:rgba(202,110,88,.35); color:#e3a493; font-size:.78rem; }
.result-import-summary .result-import-trash:hover { color:#fff; border-color:#b85b48; background:#73372e; }
.result-import-empty { padding:22px; border:1px dashed rgba(211,164,81,.28); color:#8da0ab; text-align:center; font-size:.76rem; }
.result-block.is-editorial-result .result-footer { margin-top:10px; }

html[data-theme="light"] .result-import-summary { background:#f8f8f5; border-color:rgba(168,116,22,.25); }
html[data-theme="light"] .result-import-summary strong { color:#153242; }
html[data-theme="light"] .result-import-empty { color:#617680; }
html[data-theme="light"] .result-import-summary .result-import-trash { color:#9b4638; }

.autosave-state {
  color: #718491;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.autosave-state.saving {
  color: var(--gold-400);
}

.result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
}

.result-footer > span {
  color: #80919d;
  font-size: 0.72rem;
  line-height: 1.4;
}

.complete-button {
  width: auto;
  min-width: 202px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.66rem;
}

.complete-button:disabled {
  border-color: rgba(255, 255, 255, 0.08);
  color: #637580;
  background: #0a1f2c;
  box-shadow: none;
  cursor: not-allowed;
}

/* General context */
.context-overlay {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 7, 12, 0.76);
  backdrop-filter: blur(9px);
}

.context-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: default;
}

.context-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1040px, 94vw);
  max-height: min(820px, 92vh);
  overflow: hidden;
  border: 1px solid rgba(211, 164, 81, 0.42);
  background: linear-gradient(145deg, rgba(3, 29, 45, 0.99), rgba(0, 15, 25, 0.99));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.64), inset 0 1px rgba(255, 255, 255, 0.035);
}

.context-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid rgba(211, 164, 81, 0.16);
}

.context-header h2 {
  margin: 5px 0 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 400;
}

.context-header > div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.context-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: var(--cream);
  background: rgba(0, 11, 20, 0.7);
  cursor: pointer;
  font-size: 1.45rem;
}

.context-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  padding: 18px 26px;
  overflow-y: auto;
  scrollbar-color: var(--gold-600) var(--navy-950);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.context-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 8, 14, 0.46);
}

.context-card.has-content {
  border-color: rgba(211, 164, 81, 0.27);
}

.context-card-heading {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 31px;
  align-items: center;
  gap: 10px;
}

.context-mini-coin {
  margin: 0;
}

.context-card-heading h3 {
  margin: 0 0 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
}

.context-card-heading > div > span {
  color: #82939f;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.context-card-content {
  max-height: 132px;
  margin-top: 12px;
  padding: 12px;
  overflow-y: auto;
  scrollbar-color: var(--gold-600) rgba(0, 11, 20, 0.92);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  color: #cbd5db;
  background: rgba(0, 5, 9, 0.5);
  font-size: 0.79rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.context-result-page + .context-result-page {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(196, 145, 62, 0.28);
}

.context-result-page h4,
.context-action-page h5 {
  margin: 0 0 10px;
  color: #f4ead7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}

.context-result-page pre,
.context-action-page pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
}

.context-action-page {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(196, 145, 62, 0.42);
  background: linear-gradient(145deg, rgba(196, 145, 62, 0.11), rgba(3, 22, 32, 0.5));
}

.context-action-page h5 {
  color: #d7a94f;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.context-sections::-webkit-scrollbar,
.context-card-content::-webkit-scrollbar {
  width: 9px;
}

.context-sections::-webkit-scrollbar-track,
.context-card-content::-webkit-scrollbar-track {
  border-left: 1px solid rgba(211, 164, 81, 0.1);
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950));
}

.context-sections::-webkit-scrollbar-thumb,
.context-card-content::-webkit-scrollbar-thumb {
  border: 2px solid var(--navy-950);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-700));
  box-shadow: inset 0 1px rgba(255, 246, 201, 0.55), 0 0 7px rgba(211, 164, 81, 0.24);
}

.context-sections::-webkit-scrollbar-thumb:hover,
.context-card-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f0cf83, var(--gold-600));
}

.context-sections::-webkit-scrollbar-button,
.context-card-content::-webkit-scrollbar-button {
  display: none;
}

.context-card.is-empty .context-card-content {
  color: #667986;
  font-style: italic;
}

.context-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 26px;
  border-top: 1px solid rgba(211, 164, 81, 0.16);
}

.context-footer > span {
  color: #80919d;
  font-size: 0.72rem;
}

.context-copy-all {
  min-width: 245px;
}

.context-copy-all.copied {
  color: #07131b;
  background: var(--gold-400);
}

/* Achievement */
.achievement {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--cream);
  background: rgba(0, 9, 16, 0.88);
  backdrop-filter: blur(18px);
  text-align: center;
  animation: fadeIn 250ms ease both;
}

.achievement::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(211, 164, 81, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(211, 164, 81, 0.04), 0 0 0 100px rgba(211, 164, 81, 0.02);
  animation: achievementRing 1.4s ease both;
}

.achievement p,
.achievement h2,
.achievement small,
.achievement-coin-stage,
.achievement-coin-label,
.achievement-coins,
.achievement-action {
  position: relative;
  z-index: 2;
}

.achievement p {
  margin: 0 0 9px;
  color: var(--gold-500);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.28em;
}

.achievement h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 400;
}

.achievement-coin-stage {
  display: grid;
  place-items: center;
  width: 190px;
  height: 160px;
  margin: 22px 0 8px;
  perspective: 900px;
}

.achievement-coin {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border: 4px solid #f9da79;
  border-radius: 50%;
  color: #633704;
  background:
    radial-gradient(circle at 31% 23%, #fff7bd 0 5%, rgba(255, 246, 174, 0.72) 10%, transparent 23%),
    radial-gradient(circle at 50% 52%, transparent 0 50%, rgba(255, 245, 176, 0.85) 51% 54%, #9b5b0a 55% 59%, transparent 60%),
    repeating-conic-gradient(from 8deg, rgba(255, 252, 215, 0.18) 0deg 2deg, transparent 2deg 10deg),
    conic-gradient(from 15deg, #82500c, #f9dd7d 12%, #b66f12 28%, #fff0a3 44%, #9e5b0b 61%, #edc25d 79%, #704006);
  box-shadow:
    inset 0 0 0 3px #8b500b,
    inset 0 0 0 7px rgba(255, 241, 155, 0.82),
    inset 8px 9px 12px rgba(255, 252, 214, 0.55),
    inset -9px -11px 14px rgba(91, 44, 2, 0.62),
    0 7px 0 #6f3b05,
    0 18px 28px rgba(0, 0, 0, 0.48),
    0 0 54px rgba(235, 185, 73, 0.45);
  transform-style: preserve-3d;
  animation: coinReward 1.05s cubic-bezier(0.18, 1.2, 0.35, 1) both;
}

.achievement-coin::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(104, 55, 4, 0.48);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 184, 0.46);
}

.achievement-coin::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(118deg, transparent 22%, rgba(255, 255, 228, 0.62) 43%, transparent 59%);
  transform: translateX(-75%) rotate(-12deg);
  animation: coinShine 1.15s 500ms ease-out both;
}

.achievement-coin strong {
  position: relative;
  z-index: 2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 1;
  text-shadow: 0 2px 0 #ffe99b, 0 -2px 0 #542a02, 2px 0 0 rgba(255, 238, 148, 0.58), -2px 0 0 rgba(84, 42, 2, 0.48);
}

.coin-orbit {
  position: absolute;
  width: 148px;
  height: 148px;
  border: 1px solid rgba(238, 194, 98, 0.3);
  border-radius: 50%;
  animation: coinOrbit 1.3s 220ms ease-out both;
}

.coin-orbit-two {
  width: 176px;
  height: 176px;
  border-style: dashed;
  animation-delay: 340ms;
}

.achievement-coin-label {
  margin-bottom: 12px;
  color: #d9b86d;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.24em;
}

.achievement-coins { margin:-3px 0 13px; color:#ffe083; font-size:1rem; font-weight:900; letter-spacing:.16em; text-shadow:0 0 18px rgba(235,185,73,.52); }
.achievement-action { min-height:43px; margin-top:18px; padding:0 22px; border:1px solid #e0b24f; color:#081722; background:linear-gradient(135deg,#f5d57d,#bd7924); font-size:.67rem; font-weight:900; letter-spacing:.12em; cursor:pointer; box-shadow:0 10px 25px rgba(0,0,0,.3); }
.achievement-action:hover { filter:brightness(1.1); transform:translateY(-1px); }

.coin-toast { position:fixed; right:26px; bottom:26px; z-index:100; display:grid; grid-template-columns:32px auto; column-gap:10px; align-items:center; min-width:230px; padding:13px 16px; border:1px solid rgba(231,187,88,.65); color:var(--cream); background:rgba(0,18,30,.96); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.coin-toast>span { grid-row:1/3; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#704006; background:linear-gradient(145deg,#fff0a0,#b96d13); }
.coin-toast strong { color:var(--gold-300); font-size:.72rem; letter-spacing:.1em; }
.coin-toast small { color:#96a6af; font-size:.65rem; }
.coin-toast.show { animation:coinToast 1.8s ease both; }
.flying-coin { position:fixed; z-index:120; display:grid; place-items:center; width:25px; height:25px; margin:-12px 0 0 -12px; border:1px solid #ffe189; border-radius:50%; color:#6f3b05; background:radial-gradient(circle at 30% 24%,#fff5b0,#da962d 48%,#794107); box-shadow:0 0 14px rgba(239,191,77,.65); pointer-events:none; animation:coinFly 920ms var(--coin-delay) cubic-bezier(.3,.05,.35,1) both; }

@keyframes walletReward { 40% { transform:scale(1.14); border-color:#f5d475; box-shadow:0 0 24px rgba(236,186,72,.35); } }
@keyframes coinToast { 0%{opacity:0;transform:translateY(18px)} 14%,78%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(8px)} }
@keyframes coinFly { 0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)} 15%{opacity:1;transform:translate(0,-32px) scale(1.15) rotate(90deg)} 100%{opacity:.25;transform:translate(var(--coin-x),var(--coin-y)) scale(.45) rotate(720deg)} }
@keyframes actionBlockReveal { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }

.final-compass,
.achievement-method {
  display: none;
}

.achievement.journey-complete {
  background:
    radial-gradient(circle at center, rgba(16, 77, 105, 0.72), transparent 44%),
    rgba(0, 8, 15, 0.96);
}

.achievement.journey-complete::before {
  width: min(70vw, 620px);
  height: min(70vw, 620px);
  border-style: dashed;
  box-shadow: 0 0 0 70px rgba(211, 164, 81, 0.035), 0 0 0 140px rgba(211, 164, 81, 0.018);
  animation: finalOrbit 8s linear infinite;
}

.achievement.journey-complete p {
  color: var(--cream);
}

.achievement.journey-complete .achievement-method {
  position: relative;
  z-index: 2;
  display: flex;
  gap: clamp(12px, 3vw, 30px);
  margin: 24px 0 18px;
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 7vw, 5rem);
}

.achievement.journey-complete .achievement-method span {
  display: grid;
  place-items: center;
  width: clamp(48px, 7vw, 70px);
  height: clamp(48px, 7vw, 70px);
  border: 2px solid #f1ce72;
  border-radius: 50%;
  color: var(--gold-400);
  background: radial-gradient(circle at 30% 24%, #fff3ae, #cf8e26 36%, #7a4308 100%);
  opacity: 0;
  transform: translateY(28px) scale(0.7);
  box-shadow: inset 0 0 0 3px rgba(111, 59, 6, 0.55), 0 7px 13px rgba(0, 0, 0, 0.36);
  text-shadow: 0 1px 0 #fff1a8, 0 -1px 0 #5d3004;
  filter: drop-shadow(0 0 12px rgba(230, 190, 112, 0.4));
  animation: methodReveal 650ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

.achievement.journey-complete .achievement-method span:nth-child(1) { animation-delay: 350ms; }
.achievement.journey-complete .achievement-method span:nth-child(2) { animation-delay: 560ms; }
.achievement.journey-complete .achievement-method span:nth-child(3) { animation-delay: 770ms; }
.achievement.journey-complete .achievement-method span:nth-child(4) { animation-delay: 980ms; }

.achievement small {
  color: #aebbc4;
  font-size: 0.9rem;
}

@keyframes slowSpin {
  to { transform: rotate(360deg); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.62; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes compassPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211, 164, 81, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(211, 164, 81, 0), 0 0 22px rgba(211, 164, 81, 0.22); }
}

@keyframes coverDepart {
  to { opacity: 0; transform: scale(1.16); filter: blur(8px); }
}

@keyframes unfurlSheet {
  0% { transform: scaleX(0.025); filter: brightness(0.65); }
  65% { filter: brightness(1.35); }
  100% { transform: scaleX(1); filter: brightness(1); }
}

@keyframes rodLeft {
  from { left: calc(50% - 21px); }
  to { left: 0; }
}

@keyframes rodRight {
  from { right: calc(50% - 21px); }
  to { right: 0; }
}

@keyframes openingRoute {
  from { opacity: 0; stroke-dashoffset: 180; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes compassInk {
  from { opacity: 0; transform: translateY(-50%) scale(0.7) rotate(-24deg); }
  to { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
}

@keyframes openingInk {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes openingGlow {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes mapUnroll {
  from { opacity: 0; transform: perspective(1000px) rotateX(-9deg) scaleY(0.15); filter: brightness(1.8); }
  to { opacity: 1; transform: perspective(1000px) rotateX(0) scaleY(1); filter: brightness(1); }
}

@keyframes availableGlow {
  0%, 100% { box-shadow: 0 15px 38px rgba(0, 0, 0, 0.46), 0 0 0 rgba(211, 164, 81, 0); }
  50% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.54), 0 0 28px rgba(211, 164, 81, 0.18); }
}

@keyframes completedPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(230, 190, 112, 0.45); }
  50% { box-shadow: 0 0 24px rgba(230, 190, 112, 0.85); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.78) translateY(30px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pageTurnIn {
  0% { opacity: 0; transform: translateX(18%) rotateY(-72deg) scale(0.94); filter: brightness(0.58); }
  52% { opacity: 1; filter: brightness(1.18); }
  100% { opacity: 1; transform: translateX(0) rotateY(0) scale(1); filter: brightness(1); }
}

@keyframes pageSheen {
  0% { opacity: 0.8; transform: translateX(-18%); }
  72% { opacity: 0.28; }
  100% { opacity: 0; transform: translateX(0); }
}

@keyframes coinReward {
  0% { opacity: 0; transform: translateY(-110px) rotateY(-720deg) scale(0.35); }
  58% { opacity: 1; transform: translateY(10px) rotateY(28deg) scale(1.08); }
  76% { transform: translateY(-8px) rotateY(-12deg) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}

@keyframes coinShine {
  from { opacity: 0; transform: translateX(-75%) rotate(-12deg); }
  35% { opacity: 1; }
  to { opacity: 0; transform: translateX(75%) rotate(-12deg); }
}

@keyframes coinOrbit {
  from { opacity: 0; transform: scale(0.55) rotate(-90deg); }
  45% { opacity: 1; }
  to { opacity: 0; transform: scale(1.35) rotate(70deg); }
}

@keyframes coinDock {
  0% { opacity: 0; transform: translateY(-26px) rotateY(-180deg) scale(1.55); }
  62% { opacity: 1; transform: translateY(-5px) rotateY(18deg) scale(1.16); }
  100% { opacity: 1; transform: translateY(-2px) rotateY(0) scale(1); }
}

@keyframes achievementRing {
  from { opacity: 0; transform: scale(0.45) rotate(-20deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes finalOrbit {
  from { opacity: 0.45; transform: rotate(0) scale(0.82); }
  40% { opacity: 1; transform: rotate(120deg) scale(1); }
  to { opacity: 0.7; transform: rotate(360deg) scale(1); }
}

@keyframes finalCompass {
  from { opacity: 0; transform: scale(0.2) rotate(-90deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes methodReveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(7px); }
  75% { transform: translateX(-4px); }
}

@keyframes typewriterPress {
  0%, 100% { transform: translateY(0) rotateX(0); }
  45% { transform: translateY(2px) rotateX(-1deg); box-shadow: 0 0 0 3px rgba(211, 164, 81, 0.11); }
}

@keyframes typewriterInk {
  0% { opacity: 0; transform: scaleX(0.12); }
  42% { opacity: 1; transform: scaleX(0.82); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes typewriterLever {
  0%, 100% { transform: translateY(0) rotate(0); }
  48% { transform: translateY(3px) rotate(-14deg); color: #f2cf79; }
}

@keyframes typewriterKey {
  0% { opacity: 0; transform: perspective(70px) translateY(-7px) rotateX(48deg) scale(0.72); }
  55% { opacity: 1; transform: perspective(70px) translateY(2px) rotateX(-8deg) scale(1.08); }
  100% { opacity: 1; transform: perspective(70px) translateY(0) rotateX(12deg) scale(1); }
}

@media (max-width: 900px) {
  .map-header {
    grid-template-columns: 1fr auto;
  }

  .context-panel {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
  }

  .context-overlay {
    padding: 0;
  }

  .context-header {
    padding: 18px 16px 15px;
  }

  .context-sections {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }

  .context-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 14px 16px 18px;
  }

  .context-copy-all {
    width: 100%;
  }

  .progress-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    padding: 8px 0 2px;
  }

  .map-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .map-canvas {
    min-width: 980px;
  }

  .stage-panel {
    grid-template-columns: 230px minmax(420px, 1fr);
    width: 98vw;
  }
}

@media (max-width: 820px) {
  .login-screen {
    padding: 20px 14px;
  }

  .login-card {
    padding: 22px 20px 26px;
  }

  .login-brand {
    height: 86px;
  }

  .cover-screen {
    padding: 60px 18px 74px;
  }

  .cover-content > img {
    width: 118%;
    max-width: none;
  }

  .cover-footnote {
    max-width: 90%;
    text-align: center;
    line-height: 1.8;
  }

  .sound-label {
    display: none;
  }

  .sound-control {
    right: 16px;
    top: 16px;
    width: 40px;
    justify-content: center;
    padding: 0;
  }

  .map-header {
    gap: 10px;
    padding: 10px 16px;
  }

  .reset-control {
    min-height: 40px;
    padding-inline: 10px;
  }

  .progress-panel {
    align-items: flex-end;
    gap: 12px;
  }

  .method-track {
    min-width: 0;
    width: min(100%, 330px);
  }

  .method-letter {
    justify-content: center;
    min-width: 0;
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .map-intro {
    margin-top: 24px;
  }

  .map-scroll {
    padding-bottom: 10px;
    overflow-x: hidden;
  }

  .map-canvas {
    width: 100%;
    min-width: 0;
    height: 1240px;
    margin: 0 auto;
  }

  .map-canvas::before {
    inset: 25px 18px;
  }

  .map-rings {
    left: 50%;
    top: 50%;
    width: min(82vw, 410px);
    height: min(82vw, 410px);
    opacity: 0.55;
  }

  .route-line {
    display: none;
  }

  .map-canvas::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc(50% - 1px);
    top: 0;
    width: 3px;
    height: 1100px;
    background: linear-gradient(
      to bottom,
      var(--gold-400) 0%,
      var(--gold-400) var(--route-progress, 0%),
      rgba(255, 255, 255, 0.18) var(--route-progress, 0%),
      rgba(255, 255, 255, 0.18) 100%
    );
    -webkit-mask: repeating-linear-gradient(to bottom, #000 0 6px, transparent 6px 14px);
    mask: repeating-linear-gradient(to bottom, #000 0 6px, transparent 6px 14px);
    transform: none;
  }

  .stage-node {
    width: 190px;
    left: 50% !important;
    transform: translateX(-50%);
  }

  .stage-node .stage-label {
    padding: 4px 8px 3px;
    background: radial-gradient(ellipse at center, #001522 0 54%, rgba(0, 21, 34, 0.96) 67%, transparent 72%);
  }

  .stage-node:nth-child(1) { top: 108px; }
  .stage-node:nth-child(2) { top: 383px; }
  .stage-node:nth-child(3) { top: 658px; }
  .stage-node:nth-child(4) { top: 933px; }

  .route-origin { left: calc(50% - 10px); bottom: auto; top: 20px; }
  .route-destination { right: auto; left: calc(50% - 22px); top: auto; bottom: 14px; }

  .stage-overlay {
    padding: 0;
  }

  .stage-panel {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    border: 0;
  }

  .stage-visual {
    min-height: 290px;
    height: 38vh;
  }

  .stage-visual-shade {
    background: linear-gradient(0deg, #001522 0%, transparent 55%);
  }

  .stage-workspace {
    padding: 20px 16px 32px;
  }

  .stage-heading {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .stage-heading h2 {
    font-size: 2.2rem;
  }

  .stage-status {
    display: none;
  }

  .block-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .copy-button {
    width: 100%;
  }

  .result-heading-actions {
    width: auto;
    align-self: stretch;
    margin-left: 44px;
  }

  .result-heading-actions .autosave-state {
    margin-left: 0;
  }

  .result-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .complete-button {
    width: 100%;
  }

  .map-legend {
    gap: 12px;
    padding: 0 12px;
  }
}

@media (min-width: 821px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .screen {
    min-height: 0;
    height: 100dvh;
    overflow: hidden;
  }

  .login-screen,
  .cover-screen {
    min-height: 0;
    height: 100dvh;
  }

  .map-screen {
    display: grid;
    grid-template-rows: clamp(70px, 8vh, 82px) auto minmax(0, 1fr) 28px;
    height: 100dvh;
    min-height: 0;
    padding: 0;
  }

  .map-header {
    grid-template-columns: minmax(176px, 1fr) minmax(315px, 510px) minmax(54px, 1fr);
    min-height: 0;
    height: 100%;
    padding-block: 7px;
  }

  .progress-panel {
    grid-column: auto;
    grid-row: auto;
    justify-content: center;
    padding: 0;
  }

  .map-actions {
    grid-column: auto;
    grid-row: auto;
  }

  .map-intro {
    margin: clamp(10px, 1.8vh, 22px) auto 0;
  }

  .map-intro h1 {
    margin: 4px 0 2px;
    font-size: clamp(1.55rem, 2.6vw, 2.65rem);
  }

  .map-intro > p:last-child {
    font-size: clamp(0.78rem, 1.2vw, 0.9rem);
  }

  .map-scroll {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .map-canvas {
    width: min(1280px, calc(100vw - 48px));
    min-width: 0;
    height: 100%;
    min-height: 0;
  }

  .map-rings {
    width: min(39vw, 46vh, 470px);
    height: min(39vw, 46vh, 470px);
  }

  .stage-node {
    width: clamp(145px, 13vw, 190px);
  }

  .stage-card-frame {
    width: clamp(102px, 17vh, 148px);
    height: auto;
    aspect-ratio: 148 / 206;
  }

  .stage-label {
    min-height: clamp(42px, 5.8vh, 54px);
    margin-bottom: 6px;
  }

  .stage-label h2 {
    font-size: clamp(1rem, 1.55vw, 1.25rem);
  }

  .map-legend {
    align-items: center;
    height: 28px;
    margin: 0;
  }

  /* A etapa ocupa a altura disponível e distribui o conteúdo sem depender do zoom. */
  .stage-panel {
    height: min(850px, calc(100dvh - 48px));
    max-height: none;
  }

  .stage-visual {
    min-height: 0;
    height: 100%;
  }

  .stage-workspace {
    display: block;
    min-width: 0;
    min-height: 0;
    padding: clamp(18px, 3.4vh, 36px) clamp(22px, 3.2vw, 48px) clamp(16px, 2.8vh, 30px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .stage-heading,
  .mission-nav,
  .mission-title,
  .mission-feedback,
  .legacy-notice,
  .mission-block,
  .mission-block + .mission-block {
    margin-top: 0;
    margin-bottom: 0;
  }

  .stage-heading h2 {
    font-size: clamp(1.8rem, 3.1vh, 2.75rem);
  }

  .mission-title {
    font-size: clamp(1.05rem, 2.1vh, 1.35rem);
  }

  .mission-block {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 12px !important;
    padding: clamp(12px, 1.8vh, 18px);
  }

  .block-heading {
    flex: 0 0 auto;
    margin-bottom: clamp(7px, 1.2vh, 12px);
  }

  .mission-block textarea {
    min-height: 150px !important;
    resize: vertical;
  }

  .result-footer {
    flex: 0 0 auto;
    margin-top: clamp(7px, 1.2vh, 12px);
  }

  .result-import-hub {
    max-height: min(34dvh, 330px);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

@media (min-width: 821px) and (max-height: 720px) {
  .stage-overlay { padding: 12px; }
  .stage-panel { height: calc(100dvh - 24px); width: min(1240px, 98vw); }
  .stage-workspace { padding: 14px 24px 18px; }
  .stage-heading { margin: 0; }
  .stage-heading h2 { margin-top: 1px; font-size: 1.65rem; }
  .stage-heading .eyebrow { font-size: 0.58rem; }
  .mission-nav { gap: 6px; }
  .mission-tab { padding: 8px 10px; font-size: 0.76rem; }
  .mission-title { font-size: 1rem; }
  .mission-block { padding: 10px 12px; }
  .block-heading { margin-bottom: 6px; }
  .block-heading h3 { font-size: 0.96rem; }
  .block-heading p { font-size: 0.68rem; line-height: 1.25; }
  .step-marker { width: 27px; height: 27px; min-width:27px; min-height:27px; flex-basis:27px; }
  .mission-block textarea { padding: 9px !important; font-size: 0.74rem; line-height: 1.35; }
  .complete-button { min-height: 38px; }
}

.context-card-actions { display: flex; gap: 6px; margin-left: auto; }
.copy-icon-button.export-format { font: 700 9px Arial, sans-serif; letter-spacing: 0; width: 34px; min-width: 34px; border-radius: 7px; }
.result-heading-actions { flex-wrap: wrap; }

@media (max-width: 1100px) {
  .stage-panel { grid-template-columns: 210px minmax(0, 1fr); width: calc(100vw - 24px); }
  .stage-workspace { padding-inline: 20px; }
  .stage-heading { gap: 12px; padding-right: 42px; }
  .block-heading { align-items: flex-start; flex-wrap: wrap; }
  .block-heading > div:first-child { min-width: 0; }
  .block-heading > div:first-child > div { min-width: 0; }
  .result-heading-actions { width: 100%; justify-content: flex-end; }
  .editorial-import-button { white-space: normal; }
  .positioning-tool-card { grid-template-columns: 56px minmax(0,1fr); }
  .positioning-tool-card img { width: 56px; height: 66px; }
  .positioning-tool-card button { grid-column: 2; justify-self: start; }
}

@media (max-width: 820px) {
  .positioning-tool-card { grid-template-columns: 54px minmax(0,1fr); }
  .positioning-tool-card img { width: 54px; height: 64px; }
  .positioning-tool-card button { grid-column: 1 / -1; width: 100%; }
  .result-import-summary { align-items: flex-start; flex-direction: column; }
  .result-import-actions { width: 100%; justify-content: flex-end; }
  .tool-offer-dialog[open] { display: block; }
  .tool-offer-dialog > img { width: 100%; height: 170px; min-height: 0; object-position: center 34%; }
  .tool-offer-dialog > div { padding: 25px 20px 22px; }
  .tool-offer-dialog h2 { font-size: 1.45rem; padding-right: 24px; }
  .tool-offer-actions { align-items: stretch; flex-direction: column-reverse; }
  .tool-offer-actions button { width: 100%; min-height: 42px; }
}

html[data-theme="light"] .positioning-tool-card { background: #f5f8f9; border-color: rgba(156, 109, 29, .25); }
html[data-theme="light"] .positioning-tool-card strong { color: #153242; }
html[data-theme="light"] .positioning-tool-card span { color: #617680; }
.pdf-preview-dialog { width: min(1000px, calc(100vw - 24px)); height: calc(100dvh - 32px); max-height: 960px; padding: 0; border: 1px solid var(--gold-700); border-radius: 12px; background: var(--navy-900); color: var(--cream); }
.pdf-preview-dialog[open] { display: flex; flex-direction: column; }
.pdf-preview-dialog::backdrop { background: #000c; }
.pdf-preview-dialog header, .pdf-preview-dialog footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; }
.pdf-preview-dialog h2 { font: 24px Georgia, serif; margin: 0; }
.pdf-preview-dialog .eyebrow { margin: 0 0 6px; }
.pdf-page-preview { flex: 1; width: 100%; min-height: 0; overflow: auto; background: #d9dee2; padding: 20px; text-align: center; scrollbar-width: thin; scrollbar-color: var(--gold-600) var(--navy-950); }
.pdf-page-preview canvas { width: min(100%, 760px); height: auto; background: white; box-shadow: 0 4px 20px #0002; }
.pdf-navigation { display: flex; align-items: center; gap: 12px; }
.pdf-preview-dialog footer span { font-size: 12px; color: var(--muted); }
.pdf-preview-dialog footer a { text-decoration: none; white-space: nowrap; }
#pdfPreviewStatus { margin: 0; padding: 6px 22px; color: var(--gold-400); font-size: 12px; }
#downloadPreviewPdf[hidden] { display: none; }
@media(max-width:600px) { .pdf-preview-dialog footer { flex-wrap: wrap; } .context-card-heading { gap: 6px; } .context-card-actions { gap: 3px; } }
.context-card-heading { grid-template-columns: 46px minmax(0, 1fr) auto; }
.context-footer { flex-direction: row; flex-wrap: wrap; }
.context-footer > span { flex: 1 1 240px; }
.context-footer .context-copy-all { width: auto; min-width: 0; flex: 1 1 220px; }
.context-card-actions .copy-icon-button { flex-shrink: 0; }
#downloadGeneralContext { flex-shrink: 0; }
.map-profile { position: relative; order: 10; }
.map-profile-session { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.profile-session-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--gold-400); cursor: pointer; }
.profile-session-button svg { width: 22px; height: 22px; }
.profile-session-button:hover { background: #b88e3e15; border-color: var(--gold-700); }
.profile-session-button:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }
.volume-muted, .muted .volume-waves { display: none; }
.muted .volume-muted { display: block; }
.map-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 1px solid var(--gold-600); color: var(--gold-400); background: var(--navy-950); display: grid; place-items: center; overflow: hidden; padding: 0; }
button.map-avatar { cursor: pointer; }
.map-avatar svg { width: 25px; height: 25px; }
.map-avatar img { width: 100%; height: 100%; object-fit: contain; }
.map-profile-panel { position: absolute; z-index: 100; right: 0; top: calc(100% + 12px); width: min(320px, calc(100vw - 32px)); padding: 18px; border: 1px solid var(--gold-700); border-radius: 16px; background: #071c29; box-shadow: 0 18px 60px #0009; }
.map-profile-panel[hidden] { display: none; }
.map-profile-panel { width: min(420px, calc(100vw - 32px)); }
.add-map-button { width: 100%; margin-bottom: 14px; padding: 12px; border: 1px solid var(--gold-700); border-radius: 10px; background: #b88e3e15; color: var(--gold-400); text-align: left; font: inherit; font-size: 0.9rem; cursor: pointer; }
.map-profile-row { display: flex; align-items: center; gap: 4px; }
.map-profile-row .map-profile-item { min-width: 0; flex: 1; gap: 8px; padding: 8px 6px; }
.map-profile-row .map-avatar { width: 34px; height: 34px; flex-basis: 34px; }
.map-row-actions { display: flex; flex-shrink: 0; gap: 2px; }
.map-row-actions button { display: grid; place-items: center; width: 32px; height: 36px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--gold-400); cursor: pointer; }
.map-row-actions svg { width: 17px; height: 17px; }
.map-row-actions button:hover { border-color: var(--gold-700); background: #b88e3e15; }
.profile-session-button.profile-logout { width: auto; display: flex; gap: 10px; padding: 0 12px; font: inherit; }
#deleteMapDescription { color: #f0b8a6; }
#confirmDeleteMap:disabled { opacity: 0.35; cursor: not-allowed; }
.map-profile-panel .eyebrow { margin: 0 0 14px; font-size: 0.7rem; }
.map-profile-list { max-height: min(340px, 45vh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold-600) var(--navy-950); }
.map-profile-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--cream); font: inherit; text-align: left; cursor: pointer; }
.map-profile-item > span:last-child { min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.map-profile-item[aria-pressed="true"] { background: #b88e3e15; border-color: var(--gold-700); }
.map-profile-item:hover { background: #ffffff09; }
.map-profile-tools { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 14px; }
.map-profile-tools button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--gold-400); background: transparent; font-size: 25px; cursor: pointer; }
.map-profile-tools button:hover { border-color: var(--gold-500); background: #b88e3e15; }
.map-profile-tools svg { width: 20px; height: 20px; }
#mapProfileStatus { margin: 10px 0 0; font-size: 0.8rem; color: var(--muted); }
#mapProfileStatus:empty { display: none; }

.brand-dialog { width:min(980px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); padding:0; border:1px solid var(--gold-700); border-radius:16px; color:var(--cream); background:#071c29; box-shadow:0 28px 90px #000c; }
.brand-dialog[open] { display:block; }
.brand-dialog::backdrop { background:rgba(0,8,14,.82); backdrop-filter:blur(8px); }
.brand-dialog form { display:grid; grid-template-rows:auto minmax(0,1fr) auto; max-height:calc(100dvh - 30px); }
.brand-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:24px 28px 20px; border-bottom:1px solid var(--line); }
.brand-dialog-header .eyebrow { margin:0 0 7px; }
.brand-dialog-header h2 { margin:0; font:400 2rem Georgia,serif; }
.brand-dialog-header p:last-child { margin:7px 0 0; color:var(--muted); font-size:.88rem; }
.brand-dialog-close { width:42px; height:42px; flex:0 0 42px; border:1px solid var(--line); border-radius:50%; color:var(--cream); background:#0b2c3c; font-size:1.45rem; cursor:pointer; }
.brand-dialog-body { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:20px 24px; min-height:0; padding:24px 28px; overflow-y:auto; }
.brand-field { display:grid; gap:7px; }
.brand-field-wide { grid-column:1/-1; }
.brand-field span,.brand-colors > label > span { color:var(--cream); font-weight:700; }
.brand-field small { color:var(--muted); }
.brand-field input { min-height:46px; padding:0 14px; border:1px solid var(--line); border-radius:8px; color:var(--cream); background:#04141e; font:inherit; }
.brand-assets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; grid-column:1/-1; }
.brand-asset-card { display:grid; grid-template-rows:118px auto auto; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#0a2432; }
.brand-asset-card.is-light { color:#102d3c; background:#f4f3ee; }
.brand-asset-card.is-dark { background:#04131d; }
.brand-asset-card > div:nth-child(2) { display:grid; gap:4px; }
.brand-asset-card strong { font-size:.85rem; }
.brand-asset-card small { color:#8fa1aa; font-size:.72rem; line-height:1.4; }
.brand-asset-card.is-light small { color:#60727b; }
.brand-asset-preview { display:grid; place-items:center; min-height:0; overflow:hidden; border:1px dashed rgba(197,157,73,.42); border-radius:8px; background:rgba(255,255,255,.04); }
.brand-asset-preview img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-photo-preview { width:92px; height:92px; align-self:center; justify-self:center; border-radius:50%; }
.brand-photo-preview img { object-fit:cover; }
.brand-asset-preview span { color:#8698a1; font-size:.62rem; font-weight:800; letter-spacing:.12em; }
.brand-upload-button,.brand-asset-actions button { display:grid; place-items:center; min-height:36px; padding:0 10px; border:1px solid var(--gold-700); border-radius:7px; color:var(--gold-300); background:transparent; font-size:.62rem; font-weight:900; letter-spacing:.07em; cursor:pointer; }
.brand-asset-card.is-light .brand-upload-button,.brand-asset-card.is-light .brand-asset-actions button { color:#76531e; }
.brand-asset-actions { display:grid; grid-template-columns:1fr auto; gap:7px; }
.brand-asset-actions button { color:#8fa1aa; border-color:rgba(132,151,161,.35); }
.brand-colors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-content:start; }
.brand-colors label { display:grid; gap:8px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#081f2c; }
.brand-colors label > div { display:flex; align-items:center; gap:10px; }
.brand-colors input[type="color"] { width:48px; height:38px; padding:2px; border:1px solid var(--line); border-radius:7px; background:transparent; cursor:pointer; }
.brand-colors output { color:var(--muted); font:700 .76rem monospace; }
.brand-document-preview { min-height:178px; padding:20px; border-radius:12px; color:var(--brand-primary,#12364a); background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.brand-document-preview > div { display:flex; align-items:center; width:120px; height:38px; margin-bottom:19px; }
.brand-document-preview > div img { max-width:100%; max-height:100%; object-fit:contain; }
.brand-document-preview > div span { font-size:.65rem; font-weight:900; letter-spacing:.14em; }
.brand-document-preview p { margin:0 0 5px; color:var(--brand-accent,#c9973f); font-size:.6rem; font-weight:900; letter-spacing:.14em; }
.brand-document-preview h3 { margin:0; font:400 1.45rem Georgia,serif; }
.brand-document-preview > span { display:block; width:100%; height:3px; margin:16px 0; background:var(--brand-accent,#c9973f); }
.brand-document-preview small { color:#647680; line-height:1.4; }
.brand-status { grid-column:1/-1; min-height:18px; margin:0; color:var(--gold-300); font-size:.78rem; }
.brand-dialog-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 28px; border-top:1px solid var(--line); }
.brand-dialog-footer > button:first-child { padding:0 20px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; }

@media(max-width:760px) {
  .brand-dialog-header,.brand-dialog-body,.brand-dialog-footer { padding-left:18px; padding-right:18px; }
  .brand-dialog-body { grid-template-columns:1fr; }
  .brand-assets { grid-template-columns:1fr; }
  .brand-asset-card { grid-template-columns:100px 1fr; grid-template-rows:auto auto; align-items:center; }
  .brand-asset-card .brand-asset-preview { grid-row:1/3; height:92px; }
  .brand-asset-card .brand-asset-actions,.brand-asset-card > .brand-upload-button { align-self:end; }
  .brand-document-preview { grid-column:1; }
}

@media(max-width:480px) {
  .brand-colors { grid-template-columns:1fr; }
  .brand-dialog-footer { display:grid; grid-template-columns:1fr 1.4fr; }
}
.map-header { position: relative; z-index: 20; }
@media (min-width: 861px) {
  .map-header { grid-template-columns: minmax(160px, 1fr) auto auto; gap: 20px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .progress-copy { display: none; }
  .map-header { gap: 14px; padding-inline: 24px; }
  .coin-wallet small { display:none; }
}
.map-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.map-switcher select, .map-switcher button, .new-map-actions button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--navy-900);
  color: var(--gold-400);
  padding: 7px 12px;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.map-switcher select { max-width: min(42vw, 320px); text-overflow: ellipsis; }
.map-switcher #deleteMap { color: var(--muted); }
.map-switcher button:hover, .mission-tab:hover:not(:disabled) { border-color: var(--gold-500); }
.map-intro h1 { overflow-wrap: anywhere; }
.mission-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.mission-tab {
  flex: 1 1 160px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: var(--navy-950);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.mission-tab.active { color: var(--gold-400); border-color: var(--gold-500); background: #102630; }
.mission-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.lock-icon { width: 17px; height: 17px; flex: 0 0 17px; vertical-align: middle; }
.stage-label p { display: flex; align-items: center; justify-content: center; gap: 6px; }
.stage-label .lock-icon { width: 14px; height: 14px; flex-basis: 14px; }
.mission-tab:disabled { display: flex; align-items: center; gap: 8px; opacity: 0.65; }
.mission-title { font: 400 1.35rem Georgia, serif; color: var(--cream); margin: 0 0 16px; }
.mission-feedback { color: var(--gold-400); font-size: 0.875rem; }
.mission-feedback:empty { display: none; }
.legacy-notice { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.stage-workspace, #promptText, #resultText { scrollbar-color: var(--gold-600) var(--navy-950); scrollbar-width: thin; }
.result-heading-actions { flex-wrap:nowrap; align-items:center; gap:8px; }
.result-heading-actions .autosave-state { display:none; }
.new-map-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--navy-900);
  color: var(--cream);
  box-shadow: var(--shadow);
}
.new-map-dialog::backdrop { background: #000b14d9; backdrop-filter: blur(8px); }
.new-map-dialog h2 { font: 400 2rem Georgia, serif; margin: 8px 0 24px; }
.new-map-dialog label { display: block; font-size: 0.9rem; margin-bottom: 8px; }
.new-map-dialog input { width: 100%; padding: 13px; border: 1px solid var(--gold-700); border-radius: 6px; background: var(--navy-950); color: var(--cream); font: inherit; }
.new-map-dialog p:not(.eyebrow) { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.new-map-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.new-map-actions .complete-button { background: var(--gold-500); color: var(--navy-950); }

/* Loja e área de membros */
.training-owned-badge {
  position:absolute;
  top:-6px;
  right:-6px;
  display:grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border:2px solid #071722;
  border-radius:999px;
  color:#071722;
  background:#e8b94f;
  font-size:.62rem;
  font-weight:900;
}
.training-owned-badge[hidden] { display:none; }
.context-control.has-training { color:#ffe49b; border-color:rgba(233,190,91,.66); }
.store-tabs { display:flex; gap:8px; padding:18px 24px 0; border-top:1px solid rgba(211,164,81,.16); }
.store-tabs button { min-height:40px; padding:0 18px; border:1px solid rgba(211,164,81,.24); color:#8fa2ac; background:transparent; font-size:.64rem; font-weight:900; letter-spacing:.11em; cursor:pointer; }
.store-tabs button.is-active { border-color:#ddb252; color:#09202c; background:linear-gradient(135deg,#f0ce75,#bd7824); }
.tool-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; min-height:0; padding:22px 24px 28px; overflow-y:auto; }
.tool-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(211,164,81,.25); background:rgba(0,9,15,.72); box-shadow:0 16px 30px rgba(0,0,0,.2); transition:transform 200ms ease,border-color 200ms ease; }
.tool-card:hover { transform:translateY(-4px); border-color:rgba(235,193,101,.6); }
.tool-card-visual { position:relative; aspect-ratio:3/4; overflow:hidden; background:#03131e; }
.tool-card-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,15,24,.08),rgba(2,15,24,.76)); }
.tool-card-visual img { width:100%; height:100%; object-fit:cover; }
.tool-card-visual > span { position:absolute; z-index:2; right:24px; top:50%; transform:translateY(-50%); color:#f2ce77; font-size:4.2rem; text-shadow:0 0 26px rgba(237,185,73,.45); }
.tool-card-copy { flex:1; padding:18px 18px 15px; }
.tool-card-copy h3 { margin:6px 0 8px; color:#f3eee3; font:400 1.45rem/1.2 Georgia,serif; }
.tool-card-copy > p:not(.eyebrow) { margin:0; color:#9baab2; font-size:.78rem; line-height:1.55; }
.tool-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 17px; border-top:1px solid rgba(211,164,81,.13); background:rgba(0,13,22,.92); }
.tool-card .is-owned-action { width:100%; min-height:48px; border-color:#28536a; color:#fff; background:#0b2e42; }
.tool-library-content { min-height:0; overflow-y:auto; }
.tool-unlock-toast { position:fixed; z-index:300; top:92px; right:28px; display:flex; align-items:center; gap:12px; max-width:360px; padding:14px 18px; border:1px solid #e2b755; color:#fff; background:#092637; box-shadow:0 18px 46px rgba(0,0,0,.42); animation:toolToastIn .45s cubic-bezier(.2,.8,.2,1); }
.tool-unlock-toast > span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#0a202b; background:#e4b64e; font-size:1.35rem; }
.tool-unlock-toast strong,.tool-unlock-toast small { display:block; }
.tool-unlock-toast strong { color:#f4d47e; font-size:.68rem; letter-spacing:.11em; }
.tool-unlock-toast small { margin-top:4px; color:#bfd0d8; font-size:.72rem; line-height:1.35; }
.tool-unlock-toast.is-hidden { display:none; }
.context-control.tool-added { animation:toolMenuAdded 1.15s ease both; }
@keyframes toolMenuAdded { 0%{transform:scale(.7);filter:brightness(1)} 40%{transform:scale(1.24);filter:brightness(1.8);box-shadow:0 0 0 10px rgba(231,184,74,.18),0 0 35px rgba(231,184,74,.65)} 100%{transform:scale(1);filter:brightness(1)} }
@keyframes toolToastIn { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} }
.coin-wallet.coin-spent { animation:walletSpent 680ms cubic-bezier(.2,.9,.3,1); }
@keyframes walletSpent { 0%{transform:scale(1)} 34%{transform:scale(.9);filter:brightness(1.55)} 68%{transform:scale(1.08)} 100%{transform:scale(1)} }

.learning-panel { width:min(1320px,96vw); max-height:min(880px,94vh); }
.learning-header { align-items:center; }
.learning-header-actions { display:flex; align-items:center; gap:14px; }
.learning-balance { display:grid; grid-template-columns:auto auto; align-items:end; column-gap:7px; min-width:124px; padding:9px 13px; border:1px solid rgba(211,164,81,.58); border-radius:999px; opacity:1; background:#061722; box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 5px 14px rgba(0,0,0,.16); }
.learning-balance span { grid-column:1/-1; color:#81939d; font-size:.48rem; font-weight:800; letter-spacing:.16em; }
.learning-balance strong { color:#fff1bd; font-size:1rem; font-variant-numeric:tabular-nums; }
.learning-balance small { padding-bottom:2px; color:#aab7bd; font-size:.48rem; font-weight:800; letter-spacing:.1em; }
.training-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; min-height:0; padding:22px 24px 28px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold-600) var(--navy-950); }
.training-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid rgba(211,164,81,.22); background:rgba(0,8,14,.58); box-shadow:0 16px 30px rgba(0,0,0,.2); transition:transform 200ms ease,border-color 200ms ease,box-shadow 200ms ease; }
.training-card:hover { transform:translateY(-4px); border-color:rgba(235,193,101,.58); box-shadow:0 22px 38px rgba(0,0,0,.34); }
.training-card-cover { position:relative; aspect-ratio:3/4; overflow:hidden; background:#020d16; }
.training-card-cover::after { content:""; position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(transparent,rgba(0,7,12,.86)); pointer-events:none; }
.training-card-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.training-card-status { position:absolute; z-index:2; top:11px; left:11px; padding:6px 9px; border:1px solid rgba(242,204,111,.64); color:#f4d688; background:rgba(1,12,20,.86); font-size:.52rem; font-weight:900; letter-spacing:.12em; }
.training-card.is-owned .training-card-status { color:#09202c; background:#e5b953; }
.training-card-content { display:flex; flex:1; flex-direction:column; padding:16px 16px 12px; }
.training-card-content h3 { margin:5px 0 5px; color:#f3eee3; font:400 1.35rem Georgia,serif; }
.training-card-content > strong { min-height:32px; color:#ddb968; font-size:.74rem; line-height:1.35; text-transform:uppercase; }
.training-card-content > p:not(.eyebrow) { margin:10px 0 14px; color:#9baab2; font-size:.75rem; line-height:1.55; }
.training-card-meta { display:flex; gap:7px; flex-wrap:wrap; margin-top:auto; }
.training-card-meta span { padding:5px 7px; border:1px solid rgba(255,255,255,.09); color:#91a2ab; font-size:.55rem; letter-spacing:.06em; text-transform:uppercase; }
.training-card footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px 16px; border-top:1px solid rgba(211,164,81,.13); }
.training-price { display:flex; flex-direction:column; }
.training-price span { color:#788b96; font-size:.47rem; font-weight:800; letter-spacing:.13em; }
.training-price strong { margin-top:3px; color:#f2d280; font-size:.92rem; }
.training-price small { font-size:.48rem; letter-spacing:.08em; }
.training-card-action { min-height:38px; padding:0 12px; border:1px solid #d8a648; color:#071722; background:linear-gradient(135deg,#f0ce75,#bd7824); font-size:.56rem; font-weight:900; letter-spacing:.08em; cursor:pointer; }
.training-card-action:disabled { border-color:rgba(255,255,255,.08); color:#6f8089; background:#0a1d28; cursor:not-allowed; }
.store-training-card { background:rgba(0,9,15,.72); }
.store-training-card .training-card-cover { aspect-ratio:3/4; }
.store-training-card footer { min-height:74px; padding:13px 14px; background:rgba(0,13,22,.92); }
.store-training-card .training-price strong { display:flex; align-items:center; gap:7px; font-size:1rem; }
.store-training-card .training-price strong i { display:grid; place-items:center; width:22px; height:22px; border:1px solid #f3d072; border-radius:50%; color:#70410a; background:radial-gradient(circle at 30% 24%,#fff4ae,#d79329 47%,#774107); box-shadow:inset 0 0 0 2px rgba(100,50,4,.35); font-style:normal; font-size:.62rem; }
.store-training-card .training-card-action { min-width:102px; }
.store-training-card.is-owned footer { padding:12px; }
.store-training-card.is-owned .training-card-action.is-owned-action { width:100%; min-height:50px; border-color:#28536a; color:#fff; background:#0b2e42; box-shadow:0 8px 20px rgba(0,24,38,.34); font-size:.62rem; }
.store-training-card.is-owned .training-card-action.is-owned-action:hover { border-color:#3e718a; background:#123f56; }
#trainingLibraryGrid { grid-template-columns:repeat(auto-fill,minmax(220px,280px)); justify-content:start; }
.library-training-card { background:rgba(0,9,15,.72); }
.library-training-card .training-card-cover { aspect-ratio:3/4; }
.library-training-card footer { padding:12px; background:rgba(0,13,22,.94); }
.library-training-card .training-card-action { width:100%; min-height:42px; }
.training-library-content { min-height:0; overflow-y:auto; }
.library-empty { display:grid; place-items:center; max-width:520px; margin:8vh auto; padding:38px; border:1px solid rgba(211,164,81,.22); text-align:center; }
.library-empty > span { color:#d6a84e; font-size:3rem; }
.library-empty h3 { margin:8px 0; font:400 1.7rem Georgia,serif; }
.library-empty p { margin:0 0 22px; color:#91a3ad; line-height:1.6; }

.course-panel { grid-template-rows:auto minmax(0,1fr); width:min(1380px,97vw); height:min(900px,95vh); max-height:none; }
.course-topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; min-height:62px; padding:10px 18px; border-bottom:1px solid rgba(211,164,81,.18); }
.course-topbar > span { color:#9fb0b8; font-size:.6rem; font-weight:800; letter-spacing:.13em; }
.course-topbar .context-close { justify-self:end; }
.course-back { justify-self:start; border:0; color:#d8b35d; background:transparent; font-size:.62rem; font-weight:900; letter-spacing:.12em; cursor:pointer; }
.course-layout { display:grid; grid-template-columns:310px minmax(0,1fr); min-height:0; }
.course-sidebar { min-height:0; padding:20px; overflow-y:auto; border-right:1px solid rgba(211,164,81,.17); background:rgba(0,8,14,.48); }
.course-sidebar > img { display:block; width:150px; aspect-ratio:3/4; margin:0 auto 18px; object-fit:cover; border:1px solid rgba(211,164,81,.35); box-shadow:0 15px 35px rgba(0,0,0,.35); }
.course-sidebar h2 { margin:5px 0 7px; color:#f3eee3; font:400 1.7rem Georgia,serif; }
.course-sidebar > div > p:last-child { margin:0; color:#a0afb6; font-size:.78rem; line-height:1.5; }
.course-sidebar nav { display:grid; gap:8px; margin-top:20px; }
.course-sidebar nav button { display:grid; grid-template-columns:32px minmax(0,1fr); gap:3px 9px; width:100%; padding:11px; border:1px solid rgba(255,255,255,.08); color:#98a8b0; background:rgba(0,12,20,.55); text-align:left; cursor:pointer; }
.course-sidebar nav button.active { border-color:rgba(222,177,77,.55); color:#f2d47f; background:rgba(181,125,32,.1); }
.course-sidebar nav button span { grid-row:1/3; align-self:center; color:#d9ae55; font:400 1rem Georgia,serif; }
.course-sidebar nav button strong { overflow:hidden; color:inherit; font-size:.69rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.course-sidebar nav button small { color:#71858f; font-size:.48rem; letter-spacing:.08em; }
.course-content { min-height:0; padding:24px clamp(22px,3vw,44px) 38px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold-600) var(--navy-950); }
.video-placeholder { display:grid; place-items:center; align-content:center; aspect-ratio:16/9; max-height:480px; border:1px solid rgba(211,164,81,.3); color:#ebc66c; background:radial-gradient(circle at 50% 45%,rgba(34,80,98,.3),rgba(0,7,12,.96) 63%),url("assets/map-watermark-v2.png") center/cover; box-shadow:0 22px 50px rgba(0,0,0,.3); }
.video-placeholder iframe { width:100%; height:100%; border:0; }
.video-placeholder .video-play { display:grid; place-items:center; width:66px; height:66px; margin-bottom:13px; padding-left:5px; border:1px solid rgba(239,199,103,.65); border-radius:50%; background:rgba(0,15,25,.82); font-size:1.25rem; }
.video-placeholder strong { font-size:.72rem; letter-spacing:.18em; }
.video-placeholder small { margin-top:7px; color:#91a5af; }
.lesson-copy { padding:25px 0 22px; border-bottom:1px solid rgba(211,164,81,.15); }
.lesson-copy h3,.course-comments h3 { margin:6px 0 8px; color:#f3eee3; font:400 1.65rem Georgia,serif; }
.lesson-copy > p:last-child,.course-comments > div > p:last-child { max-width:760px; margin:0; color:#a7b4ba; font-size:.85rem; line-height:1.65; }
.course-comments { padding-top:24px; }
.course-comments form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; margin:18px 0; }
.course-comments textarea { min-height:94px; padding:13px; resize:vertical; border:1px solid rgba(211,164,81,.25); color:#e4e9e9; background:rgba(0,8,14,.68); font:inherit; line-height:1.5; }
.course-comment-list { display:grid; gap:10px; }
.course-comment-list article { padding:14px 16px; border:1px solid rgba(255,255,255,.08); background:rgba(0,8,14,.44); }
.course-comment-list article > div { display:flex; justify-content:space-between; gap:16px; }
.course-comment-list article strong { color:#e1bc67; font-size:.75rem; }
.course-comment-list time { color:#748994; font-size:.65rem; }
.course-comment-list article p { margin:8px 0 0; color:#c1cbd0; font-size:.8rem; line-height:1.55; white-space:pre-wrap; }
.course-comments-empty { padding:18px; border:1px dashed rgba(211,164,81,.2); color:#81949e; font-size:.78rem; text-align:center; }

.purchase-dialog { width:min(620px,calc(100vw - 28px)); }
.purchase-summary { display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:18px; margin:14px 0 20px; }
.purchase-summary img { width:92px; aspect-ratio:3/4; object-fit:cover; border:1px solid rgba(211,164,81,.4); }
.purchase-summary h2 { margin:0 0 7px; }
.purchase-summary p { margin:0; }
.purchase-numbers { display:grid; gap:9px; padding:16px; border:1px solid rgba(211,164,81,.2); background:rgba(0,8,14,.44); }
.purchase-numbers span { display:flex; justify-content:space-between; gap:18px; color:#99aab2; font-size:.78rem; }
.purchase-numbers strong { color:#edd080; }
.purchase-warning { color:#d8b56d!important; }

@media (max-width:1100px) {
  .training-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .training-card-cover { aspect-ratio:4/5; }
  .course-layout { grid-template-columns:250px minmax(0,1fr); }
  .course-sidebar > img { width:120px; }
}
@media (max-width:700px) {
  .learning-header { align-items:flex-start; }
  .learning-header-actions { gap:7px; }
  .learning-balance { display:none; }
  .training-grid { grid-template-columns:1fr; padding:14px; }
  .tool-grid { grid-template-columns:1fr; padding:14px; }
  .training-card { display:grid; grid-template-columns:118px minmax(0,1fr); }
  .store-training-card { display:flex; }
  .library-training-card { display:flex; }
  .store-training-card .training-card-cover { aspect-ratio:3/4; }
  .store-training-card footer { align-items:center; flex-direction:row; }
  .library-training-card footer { align-items:center; flex-direction:row; }
  .training-card-cover { grid-row:1/3; aspect-ratio:3/4; }
  .training-card footer { align-items:flex-start; flex-direction:column; }
  .training-card-action { width:100%; }
  .course-panel { width:100%; height:100%; }
  .course-layout { display:block; overflow-y:auto; }
  .course-sidebar { overflow:visible; border-right:0; border-bottom:1px solid rgba(211,164,81,.17); }
  .course-sidebar > img { width:100px; margin-left:0; }
  .course-content { overflow:visible; }
  .course-comments form { grid-template-columns:1fr; }
}

/* Light workspace — the header intentionally remains unchanged. */
html[data-theme="light"] body { color:#132b38; background:#edf2f3; }
html[data-theme="light"] .coin-wallet #coinBalance { color:#fff !important; }
html[data-theme="light"] .map-screen {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.96), rgba(238,243,243,.9) 62%, rgba(219,227,228,.94)),
    #f7f8f5;
}
html[data-theme="light"] .map-intro h1,
html[data-theme="light"] .stage-label h2 { color:#102c3a; }
html[data-theme="light"] .map-intro > p:last-child,
html[data-theme="light"] .map-legend { color:#536a76; }
html[data-theme="light"] .stage-node.available .stage-label p { color:#536a76; }
html[data-theme="light"] .stage-node.locked .stage-label h2,
html[data-theme="light"] .stage-node.locked .stage-label p { color:#768892; }
html[data-theme="light"] .map-canvas::before { border-color:rgba(24,57,71,.14); }
html[data-theme="light"] .map-watermark { opacity:.095; filter:grayscale(.28) saturate(.32) contrast(.7) brightness(1.22); }
html[data-theme="light"] .map-rings { border-color:rgba(36,69,81,.09); box-shadow:0 0 0 55px rgba(35,69,81,.025),0 0 0 112px rgba(35,69,81,.018); }
html[data-theme="light"] .coordinates { color:rgba(58,76,82,.35); }

html[data-theme="light"] .overlay-backdrop,
html[data-theme="light"] .context-overlay { background:rgba(224,231,232,.78); }
html[data-theme="light"] .stage-panel { color:#17313d; background:#fff; box-shadow:0 30px 90px rgba(13,31,41,.25); }
html[data-theme="light"] .stage-visual {
  background:#001522;
  border-right:1px solid rgba(211,164,81,.28);
}
html[data-theme="light"] .stage-visual-shade { display:none; background:none; }
html[data-theme="light"] .stage-workspace { background:#fff; }
html[data-theme="light"] .stage-heading h2,
html[data-theme="light"] .mission-title,
html[data-theme="light"] .block-heading h3 { color:#102b38; }
html[data-theme="light"] .block-heading p,
html[data-theme="light"] .result-hint { color:#5d717c; }
html[data-theme="light"] .mission-tab { color:#38515e; background:rgba(255,255,255,.7); }
html[data-theme="light"] .mission-tab.active { color:#805518; background:rgba(213,164,76,.11); }
html[data-theme="light"] .mission-block { border-color:rgba(20,57,72,.13); background:rgba(255,255,255,.72); }
html[data-theme="light"] .mission-block textarea,
html[data-theme="light"] .action-task textarea { color:#203944; border-color:rgba(19,56,71,.18); background:#f4f7f5; }
html[data-theme="light"] .mission-block textarea::placeholder,
html[data-theme="light"] .action-task textarea::placeholder { color:#758790; }
html[data-theme="light"] .mission-action-block { background:linear-gradient(125deg,rgba(226,186,99,.24),rgba(255,255,255,.92) 62%); }
html[data-theme="light"] .close-button,
html[data-theme="light"] .context-close { color:#fff; background:#0b2b3a; }

html[data-theme="light"] .context-panel { color:#17313d; background:linear-gradient(145deg,#fbfcfa,#edf2f1); box-shadow:0 30px 90px rgba(13,31,41,.24); }
html[data-theme="light"] .context-header > div > p:last-child,
html[data-theme="light"] .action-detail-intro p { color:#60747e; }
html[data-theme="light"] .action-module,
html[data-theme="light"] .action-detail-intro,
html[data-theme="light"] .action-task,
html[data-theme="light"] .context-card { color:#17313d; border-color:rgba(22,57,70,.14); background:rgba(255,255,255,.76); }
html[data-theme="light"] .action-module.is-complete { border-color:rgba(171,118,33,.52); background:linear-gradient(145deg,rgba(244,218,158,.56),rgba(255,255,255,.9)); }
html[data-theme="light"] .action-task label,
html[data-theme="light"] .context-card-heading h3,
html[data-theme="light"] .context-result-page h4 { color:#17313d; }
html[data-theme="light"] .action-task input[type="checkbox"] { background:#fff; }
html[data-theme="light"] .context-card-content { color:#2a434f; background:rgba(230,236,235,.72); scrollbar-color:var(--gold-600) #e6eceb; }
html[data-theme="light"] .context-action-page { background:linear-gradient(145deg,rgba(225,188,108,.2),rgba(255,255,255,.72)); }
html[data-theme="light"] .context-footer { background:rgba(239,244,243,.94); }
html[data-theme="light"] .action-help p { color:#e5ecee; }
@media (max-width:700px) {
  .store-tabs { padding:12px 14px 0; }
  .store-tabs button { flex:1; padding:0 8px; }
  .tool-grid { grid-template-columns:1fr; padding:14px; }
  .tool-card-visual { aspect-ratio:3/4; }
  .tool-unlock-toast { top:82px; right:12px; left:12px; max-width:none; }
}
html[data-theme="light"] .training-card { border-color:rgba(22,57,70,.15); background:#fff; box-shadow:0 15px 30px rgba(20,42,53,.1); }
html[data-theme="light"] .tool-card { border-color:rgba(22,57,70,.15); background:#fff; box-shadow:0 15px 30px rgba(20,42,53,.1); }
html[data-theme="light"] .tool-card-copy h3 { color:#17313f; }
html[data-theme="light"] .tool-card-copy > p:not(.eyebrow) { color:#5e737d; }
html[data-theme="light"] .tool-card footer { border-color:rgba(22,57,70,.11); background:#f4f7f6; }
html[data-theme="light"] .training-card:hover { border-color:rgba(180,127,37,.55); box-shadow:0 20px 36px rgba(20,42,53,.17); }
html[data-theme="light"] .training-card-content h3,
html[data-theme="light"] .course-sidebar h2,
html[data-theme="light"] .lesson-copy h3,
html[data-theme="light"] .course-comments h3 { color:#17313d; }
html[data-theme="light"] .training-card-content > p:not(.eyebrow),
html[data-theme="light"] .course-sidebar > div > p:last-child,
html[data-theme="light"] .lesson-copy > p:last-child,
html[data-theme="light"] .course-comments > div > p:last-child { color:#5e737d; }
html[data-theme="light"] .training-card-meta span { border-color:rgba(22,57,70,.13); color:#5e737d; background:#f4f7f6; }
html[data-theme="light"] .training-card footer { border-color:rgba(22,57,70,.11); }
html[data-theme="light"] .training-price span { color:#71858f; }
html[data-theme="light"] .course-sidebar { border-color:rgba(22,57,70,.13); background:#f2f6f5; }
html[data-theme="light"] .course-sidebar nav button { color:#526a75; border-color:rgba(22,57,70,.13); background:#fff; }
html[data-theme="light"] .course-sidebar nav button.active { color:#8a5e18; border-color:rgba(184,132,43,.5); background:#f8f0df; }
html[data-theme="light"] .course-content { background:#fff; scrollbar-color:var(--gold-600) #edf2f1; }
html[data-theme="light"] .course-comments textarea { color:#203944; border-color:rgba(22,57,70,.18); background:#f4f7f5; }
html[data-theme="light"] .course-comment-list article { border-color:rgba(22,57,70,.12); background:#f5f8f7; }
html[data-theme="light"] .course-comment-list article p { color:#334e5a; }
html[data-theme="light"] .course-comments-empty { color:#607681; border-color:rgba(184,132,43,.28); }
html[data-theme="light"] .purchase-numbers { background:#f3f7f6; border-color:rgba(22,57,70,.14); }

@media (max-width: 820px) {
  .map-watermark { position:fixed; inset:90px -22% 0; background-size:cover; opacity:.065; }
  html[data-theme="light"] .map-watermark { opacity:.08; }
}
@media (min-width: 861px) {
  .map-screen { grid-template-rows: clamp(76px, 12vh, 110px) auto minmax(0, 1fr) 28px; }
  .map-intro { margin-top: 8px; }
  .map-intro > .eyebrow { display: none; }
  .map-intro h1 { font-size: clamp(1.3rem, 2.4vw, 2rem); max-width: 80vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 600px) {
  .block-heading { flex-wrap: wrap; }
  .stage-heading { gap: 10px; }
  .stage-status { white-space: normal; }
  .map-switcher select { max-width: 50vw; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}