.game-logo,
.atlas-menu-toggle { display: none; }

.game-shell.atlas-enabled {
  --atlas-accent: #16876d;
  --atlas-accent-light: #d7f1dc;
  --atlas-rail-width: 66px;
  grid-template-columns: var(--atlas-rail-width) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
}

.game-shell.atlas-enabled.atlas-menu-expanded { --atlas-rail-width: 160px; }
.game-shell.atlas-enabled.atlas-region-r2 { --atlas-accent: #b56a27; --atlas-accent-light: #fff0bc; }
.game-shell.atlas-enabled.atlas-region-r3 { --atlas-accent: #247f8d; --atlas-accent-light: #d9f2ed; }
.game-shell.atlas-enabled.atlas-region-r4 { --atlas-accent: #855a9c; --atlas-accent-light: #f0e4f8; }
.game-shell.atlas-enabled.atlas-region-r5 { --atlas-accent: #bb4d38; --atlas-accent-light: #ffe5cc; }
.game-shell.atlas-enabled.atlas-region-r6 { --atlas-accent: #5a7d47; --atlas-accent-light: #e9f0d7; }
.game-shell.atlas-enabled.atlas-region-r7 { --atlas-accent: #536d9b; --atlas-accent-light: #e8edfb; }
.atlas-enabled .hud { display: contents; }

.atlas-enabled .hud-overview {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 84px;
  gap: 18px;
  overflow: hidden;
  padding: 8px 14px;
  border: 2px solid #aa8b50;
  border-radius: 15px 15px 6px 6px;
  color: #163744;
  background: #f8eecb url('../assets/images/atlas/top-panel.webp') center / 100% 100% no-repeat;
  box-shadow: 0 3px 0 #715e3c, inset 0 0 0 3px #fff8dd;
}

.atlas-enabled .hud-overview::after {
  position: absolute;
  right: 11px;
  bottom: 4px;
  left: 11px;
  height: 2px;
  content: '';
  background: linear-gradient(90deg, transparent, #ba994e 12%, var(--atlas-accent) 50%, #ba994e 88%, transparent);
  opacity: .6;
}

.atlas-enabled .brand {
  display: flex;
  flex: 0 0 310px;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: #173442;
  font: 900 20px/1.02 var(--font-ui);
  letter-spacing: -.025em;
}

.atlas-enabled .brand-copy { min-width: 0; white-space: normal; }
.atlas-enabled .brand-copy > span { color: #b6412d; font: 400 25px/1 var(--font-hanzi); }
.atlas-enabled .brand small { margin-top: 5px; color: #16473f; font: 900 12px/1.2 var(--font-ui); letter-spacing: .025em; text-transform: none; }
.atlas-region-r2 .brand small { color: #8d5521; }

.atlas-enabled .game-logo {
  display: block;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #49372f66);
}

.atlas-enabled .hud-status {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 13px;
  min-width: 0;
  width: auto;
}

.atlas-enabled .hud-stat { flex: 0 0 auto; gap: 3px; color: #173442; font: 700 11px/1.1 var(--font-ui); }
.atlas-enabled .hud-stat span { color: #385e5b; }
.atlas-enabled .hud-stat b { color: #173442; font: 900 14px/1.1 var(--font-ui); }
.atlas-enabled .hud-stat.curriculum,
.atlas-enabled .hud-stat.location,
.atlas-enabled .hud-stat.streak { display: none; }

.atlas-enabled .hud-stat.player-level { order: 1; min-width: 55px; padding: 5px 8px; border-radius: 8px; background: #fff9e8db; box-shadow: inset 0 0 0 1px #b59967; }
.atlas-enabled .hud-stat.player-level b { font-size: 21px; }
.atlas-enabled .hud-stat.hp,
.atlas-enabled .hud-stat.xp {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) auto;
  flex-basis: 146px;
  order: 2;
  column-gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: #fff9e8e8;
  box-shadow: inset 0 0 0 1px #b59967;
}
.atlas-enabled .hud-stat.xp { order: 3; }
.atlas-enabled .hud-stat.hp span,
.atlas-enabled .hud-stat.xp span { grid-column: 1 / -1; }
.atlas-enabled .hud-stat.hp i,
.atlas-enabled .hud-stat.xp i { height: 12px; background: #bdc7bd; box-shadow: inset 0 1px 2px #5d674950; }
.atlas-enabled .hud-stat.hp em { background: linear-gradient(90deg, #1c9c77, #36b98e); }
.atlas-enabled .hud-stat.xp em { background: linear-gradient(90deg, #e8a52b, #f4c249); }
.atlas-enabled .hud-stat.hp b,
.atlas-enabled .hud-stat.xp b { color: #173442; font: 900 11px/1 var(--font-ui); }
.atlas-enabled .hud-stat.coins { order: 4; }
.atlas-enabled .hud-stat.spirits { order: 5; }
.atlas-enabled .hud-stat.battles {
  order: 6;
  min-width: 70px;
  padding: 7px 8px 6px;
  border: 2px solid #fff2cf;
  border-radius: 9px;
  background: #b94333;
  box-shadow: 0 0 0 2px #9a302a;
  text-align: center;
}
.atlas-enabled .hud-stat.battles span,
.atlas-enabled .hud-stat.battles b { color: white; }
.atlas-enabled .hud-stat.battles span { font-size: 10px; }
.atlas-enabled .hud-stat.battles b { font-size: 13px; }

.atlas-enabled .hud-actions {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 6px;
  border: 2px solid #47616a;
  border-radius: 6px 6px 12px 12px;
  background: #0d3245 url('../assets/images/atlas/side-panel.webp') center / 100% 100% no-repeat;
  box-shadow: inset -3px 0 #d6b36866, 3px 0 0 #091e2a44;
  scrollbar-width: thin;
}

.atlas-enabled .atlas-menu-toggle {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px;
  border: 1px solid #a8bdaf6b;
  border-radius: 8px;
  color: #fff7d7;
  background: #28556a;
  font: 800 13px var(--font-ui);
}
.atlas-enabled .atlas-menu-chevron { font: 900 28px/1 var(--font-ui); }
.atlas-enabled .atlas-menu-label { display: none; }
.atlas-enabled.atlas-menu-expanded .atlas-menu-label { display: inline; }
.atlas-enabled.atlas-menu-expanded .atlas-menu-toggle { justify-content: flex-start; padding-left: 15px; }

.atlas-enabled .hud-button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  gap: 11px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #fff8e8;
  background: transparent;
  font: 800 13px/1.1 var(--font-ui);
  text-align: left;
}
.atlas-enabled .hud-button svg { width: 30px; height: 30px; padding: 3px; color: #fff7de; background: transparent; }
.atlas-enabled .hud-button:hover,
.atlas-enabled .hud-button:focus-visible { border-color: #a6e5ed; background: #24697a; }
.atlas-enabled .hud-actions :focus-visible,
.atlas-enabled .dpad button:focus-visible { outline-color: #a6e5ed; }
.atlas-enabled .hud-button.restored-pointer-focus:not(.tutorial-arrow):focus-visible { border-color: transparent; background: transparent; }
.atlas-enabled .hud-button.utility { color: #fbe5bc; }
.atlas-enabled .hud-button.utility svg { color: #f4ca70; }
.atlas-enabled .hud-button span { display: none; }
.atlas-enabled:not(.atlas-menu-expanded) .hud-button.debug-only { display: none; }
.atlas-enabled.atlas-menu-expanded .hud-button { justify-content: flex-start; padding-left: 12px; }
.atlas-enabled.atlas-menu-expanded .hud-button span { display: inline; }
.atlas-enabled #parent-button { margin-top: auto; border-top: 1px solid #ffffff38; }

.atlas-enabled .stage {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  border: 3px solid #bd9f5a;
  border-radius: 6px 6px 12px 12px;
  box-shadow: 0 0 0 2px #153744, inset 0 0 0 3px #fff6dc;
}
.atlas-enabled .objective {
  grid-column: 2;
  grid-row: 2;
  z-index: 4;
  display: grid;
  align-self: start;
  justify-self: start;
  gap: 3px;
  width: min(325px, calc(100% - 26px));
  max-height: 160px;
  margin: 14px;
  overflow: auto;
  padding: 11px 14px;
  border: 2px solid #bc9750;
  border-radius: 4px 13px 5px 14px;
  color: #243a3a;
  background: #fff8e7f2;
  box-shadow: 4px 5px 0 #15374450, inset 0 0 0 3px #fffdf1;
  font: 700 13px/1.35 var(--font-ui);
  pointer-events: none;
}
.atlas-enabled .objective b { color: #a63129; font: 700 15px/1.2 var(--font-ui); }
.objective-pin { display: inline-block; width: 15px; height: 15px; margin-right: 7px; border: 4px solid #a63129; border-radius: 50% 50% 50% 0; transform: rotate(-45deg) translateY(1px); vertical-align: -1px; }
.atlas-enabled .objective small { margin: 2px 0 0; color: #4d655e; font: 700 10px/1 var(--font-ui); }
.tutorial-guide-mark { display: grid; flex: 0 0 43px; place-items: center; width: 43px; height: 43px; border: 2px solid #f3d98b; border-radius: 50%; color: #203c42; background: #f8e4aa; font: 900 23px/1 serif; }
body[data-tutorial-step="2"] .atlas-enabled .objective,
body[data-tutorial-step="2"] .guide-map,
body[data-tutorial-step="6"] .atlas-enabled:not(.atlas-menu-expanded) .atlas-menu-toggle { outline: 5px solid #ffdf68; outline-offset: 3px; animation: tutorial-target-pulse .85s ease-in-out infinite alternate; }
body[data-tutorial-step="5"] .tutorial-bag-cue { outline: 4px solid #ffdf68; outline-offset: 3px; }
body[data-tutorial-step="6"] .book-panel .tutorial-spirit-card { outline: 5px solid #ffdf68; outline-offset: 3px; cursor: pointer; text-align: left; }
.tutorial-skill-list { display: grid; gap: 7px; padding-left: 22px; text-align: left; }
.overlay .tutorial-dialog-card { display: grid; grid-template-columns: 43px minmax(0, 1fr); gap: 8px 14px; width: min(540px, 100%); border: 3px solid #e8c66c; border-radius: 16px 16px 16px 5px; color: #fff8e4; background: #143b47; box-shadow: 6px 8px 0 #10283499, 0 18px 45px #0719239c; }
.tutorial-dialog-copy { min-width: 0; }
.tutorial-dialog-card .speaker { margin: 0 0 7px; color: #f3d98b; font: 900 14px var(--font-ui); }
.overlay .tutorial-dialog-card [data-type-dialogue] { min-height: 58px; margin: 0; color: #fff8e4; font: 600 clamp(16px, 2vw, 19px)/1.5 var(--font-ui); }
.tutorial-dialog-card button { grid-column: 2; justify-self: end; min-width: 98px; min-height: 44px; border: 2px solid #ffe9a0; color: #213b3a; background: #f3d98b; }
.tutorial-arrow { outline: 5px solid #ffdf68 !important; outline-offset: 4px; animation: tutorial-target-pulse .85s ease-in-out infinite alternate; }
body:not([data-tutorial-step]) .tutorial-arrow { outline: none !important; animation: none; }
body:not([data-tutorial-step]) .tutorial-pointer { display: none; }
.tutorial-pointer { position: fixed; z-index: 1000; width: 42px; height: 36px; background: #173744; clip-path: polygon(0 25%, 55% 25%, 55% 0, 100% 50%, 55% 100%, 55% 75%, 0 75%); pointer-events: none; animation: tutorial-pointer-pulse .7s ease-in-out infinite alternate; }
.tutorial-pointer::after { position: absolute; inset: 3px; background: #ffcf50; clip-path: polygon(0 25%, 55% 25%, 55% 0, 100% 50%, 55% 100%, 55% 75%, 0 75%); content: ''; }
.tutorial-pointer.points-left { transform: scaleX(-1); }
.tutorial-pointer[hidden] { display: none; }
@keyframes tutorial-target-pulse { from { outline-color: #ffdf68; box-shadow: 0 0 0 0 #ffdf6800; } to { outline-color: #ff9a31; box-shadow: 0 0 0 9px #ffdf6866; } }
@keyframes tutorial-pointer-pulse { from { opacity: .85; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tutorial-arrow, body[data-tutorial-step="2"] .atlas-enabled .objective, body[data-tutorial-step="2"] .guide-map, body[data-tutorial-step="6"] .atlas-enabled:not(.atlas-menu-expanded) .atlas-menu-toggle, .tutorial-pointer { animation: none; } }
.atlas-enabled .dpad button { border-color: #f7e7b7; background: #104d56e8; box-shadow: inset 0 0 0 2px #478c82; }
.atlas-enabled .dpad button.is-active { background: #bf5540; }

@media (max-width: 900px) {
  .atlas-enabled .hud-overview { display: grid; gap: 6px; min-height: 105px; padding: 7px 12px; }
  .atlas-enabled .brand { flex-basis: auto; font-size: 19px; }
  .atlas-enabled .game-logo { width: 48px; height: 48px; flex-basis: 48px; }
  .atlas-enabled .hud-status { justify-content: space-between; }
}

@media (max-width: 600px) {
  .game-shell.atlas-enabled { --atlas-rail-width: 54px; height: calc(100dvh - 14px); min-height: 480px; gap: 5px; }
  .game-shell.atlas-enabled.atlas-menu-expanded { --atlas-rail-width: 150px; }
  .atlas-enabled .hud-overview { min-height: 119px; }
  .atlas-enabled .brand { gap: 8px; font-size: 17px; }
  .atlas-enabled .game-logo { width: 39px; height: 39px; flex-basis: 39px; }
  .atlas-enabled .brand-copy > span { font-size: 20px; }
  .atlas-enabled .brand small { font-size: 11px; }
  .atlas-enabled .hud-status { display: grid; grid-template-columns: 56px repeat(2, minmax(0, 1fr)) 64px; gap: 4px 6px; }
  .atlas-enabled .hud-stat.player-level { grid-column: 1; grid-row: 1; }
  .atlas-enabled .hud-stat.hp { grid-column: 2; grid-row: 1; }
  .atlas-enabled .hud-stat.xp { grid-column: 3; grid-row: 1; }
  .atlas-enabled .hud-stat.battles { grid-column: 4; grid-row: 1; }
  .atlas-enabled .hud-stat.coins,
  .atlas-enabled .hud-stat.spirits { display: none; }
  .atlas-enabled .hud-stat.hp,
  .atlas-enabled .hud-stat.xp { grid-template-columns: minmax(26px, 1fr) auto; }
  .atlas-enabled .hud-stat.hp b,
  .atlas-enabled .hud-stat.xp b { font-size: 10px; }
  .atlas-enabled .hud-stat.hp,
  .atlas-enabled .hud-stat.xp { padding: 5px; }
  .atlas-enabled .hud-button { min-height: 48px; padding: 5px; }
  .atlas-enabled .hud-button svg { width: 27px; height: 27px; }
  .atlas-enabled .objective { width: min(280px, calc(100% - 18px)); max-height: 135px; margin: 9px; padding: 8px 10px; font-size: 12px; }
  .atlas-enabled .objective b { font-size: 19px; }
}

@media (max-height: 780px) {
  .atlas-enabled .hud-actions { gap: 2px; padding-block: 4px; }
  .atlas-enabled .hud-button { min-height: 46px; }
  .atlas-enabled .hud-button.debug-only { min-height: 42px; font-size: 11px; }
  .atlas-enabled .objective { width: min(265px, calc(100% - 18px)); margin: 9px; padding: 7px 10px; font-size: 12px; }
  .atlas-enabled .objective b { font-size: 19px; }
}

.game-shell.atlas-enabled.atlas-pregame {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.atlas-pregame .hud-overview { min-height: 76px; }
.atlas-pregame .hud-status,
.atlas-pregame .hud-actions,
.atlas-pregame .objective,
.atlas-pregame .stage canvas,
.atlas-pregame .dpad { display: none; }
.atlas-pregame .stage {
  grid-column: 1;
  grid-row: 2;
  background: linear-gradient(180deg, #102d3c85, #102d3cd9), url('../assets/images/intro/dictionary-tree.jpg') center / cover no-repeat, #173744;
}
.atlas-pregame .overlay { background: transparent; }
.atlas-level-picker {
  width: min(640px, 100%);
  border: 2px solid #b5965c;
  border-radius: 9px 24px 9px 24px;
  color: #173744;
  background: #fff7df;
  box-shadow: 0 15px 35px #061d2a9c, inset 0 0 0 5px #ecd7a0;
}
.atlas-level-picker h1 { margin-bottom: 9px; color: #173744; font: 900 clamp(25px, 4vw, 36px)/1.15 var(--font-ui); }
.atlas-level-picker > p { max-width: 55ch; margin: 0; color: #405b58; font: 600 15px/1.5 var(--font-ui); }
.atlas-level-picker > .panel-kicker { margin-bottom: 8px; color: #9a5a2d; font: 800 12px/1.4 var(--font-ui); letter-spacing: .09em; text-transform: uppercase; }
.atlas-player-picker .player-grid { display: grid; gap: 10px; margin: 22px 0; }
.atlas-player-picker .player-row { display: flex; align-items: stretch; gap: 8px; }
.atlas-player-picker .player-row .player-card { flex: 1; }
.atlas-player-picker .player-row > .secondary { min-width: 76px; }
.atlas-player-picker .player-card { display: grid; gap: 5px; min-height: 72px; padding: 12px 16px; border: 2px solid #9c804e; border-radius: 9px; color: #173744; background: #fffcf1; text-align: left; box-shadow: 0 3px 0 #bba16b; }
.atlas-player-picker .player-card b { font: 900 20px/1.2 var(--font-ui); }
.atlas-player-picker .player-card span { color: #526c65; font: 700 12px/1.3 var(--font-ui); }
.atlas-player-picker .player-card:hover, .atlas-player-picker .player-card:focus-visible { border-color: #187a69; background: #e9f5e7; }
.atlas-player-picker .player-name-form { display: grid; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #ceb985; }
.atlas-player-picker .player-name-form label { font: 800 15px var(--font-ui); }
.atlas-player-picker .player-name-form > div { display: flex; flex-wrap: wrap; gap: 8px; }
.atlas-player-picker .player-name-form input { flex: 1 1 180px; min-height: 44px; padding: 8px 11px; border: 2px solid #9c804e; border-radius: 8px; font: 700 16px var(--font-ui); }
.atlas-player-picker .player-error { margin: 0; color: #9b302d; font: 700 13px/1.4 var(--font-ui); }
.atlas-level-picker .level-card {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-content: center;
  align-items: center;
  min-height: 100px;
  gap: 2px 13px;
  border: 2px solid #9c804e;
  border-radius: 9px;
  color: #173744;
  background: #fffcf1;
  box-shadow: 0 3px 0 #bba16b;
}
.atlas-level-picker .level-card i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  color: #fff6d8;
  background: #245867;
  font: 900 30px/1 var(--font-hanzi);
  font-style: normal;
}
.atlas-level-picker .level-card b { font: 900 22px/1.1 var(--font-ui); }
.atlas-level-picker .level-card span { margin: 0; color: #526c65; font: 700 12px/1.3 var(--font-ui); }
.atlas-level-picker .level-card:not([disabled]):hover,
.atlas-level-picker .level-card:not([disabled]):focus-visible { border-color: #187a69; background: #e9f5e7; }
.atlas-level-picker .level-card[disabled] { border-style: solid; }
@media (max-width: 600px) {
  .atlas-pregame .hud-overview { min-height: 68px; }
  .atlas-level-picker .level-grid { gap: 10px; }
}

.gate-transition { position: fixed; inset: 0; z-index: 10000; display: flex; overflow: hidden; align-items: center; justify-content: center; background: #f5d68a; transition: opacity 1.05s ease; }
.gate-transition-leaf { position: absolute; top: 0; bottom: 0; width: 50%; background-image: url('../assets/images/atlas/gate-opening.webp'); background-size: 200% 100%; transition: transform 2.1s cubic-bezier(.52, .04, .27, 1); }
.gate-transition-leaf.left { left: 0; background-position: left center; }
.gate-transition-leaf.right { right: 0; background-position: right center; }
.gate-transition.opening .left { transform: translateX(-100%); }
.gate-transition.opening .right { transform: translateX(100%); }
.gate-transition.arrived { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .gate-transition, .gate-transition-leaf { transition-duration: .1s; } }