:root {
  color-scheme: dark;
  --bg: #141119;
  --panel: #1e1927;
  --edge: #342c40;
  --text: #e9e3ee;
  --muted: #978aa8;
  --mint: #92e2c1;
  --pink: #ec9fc8;
  --gold: #e8cb8e;
  --purple: #b09ae0;
  --font:
    "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui,
    sans-serif;
  --mono: "Cascadia Code", "Courier New", monospace;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  color: inherit;
  border: 0;
  background: none;
}
a {
  color: inherit;
  text-decoration: none;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}
svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h2 {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.4px;
}
h3 {
  font-size: 14px;
  font-weight: 600;
}
.icon-library {
  display: none;
}
.muted {
  color: var(--muted);
}
.small-text {
  font-size: 11px;
}
.mint {
  color: var(--mint);
}
.app-shell {
  min-height: 100vh;
  display: flex;
}
.nav-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 88px;
  background: #19151f;
  border-right: 1px solid #302736;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}
.brand-mark {
  height: 88px;
  width: 46px;
  position: relative;
  display: block;
}
.brand-mark span {
  background: var(--mint);
  position: absolute;
  width: 12px;
  height: 12px;
}
.brand-mark span:nth-child(1) {
  left: 5px;
  top: 24px;
}
.brand-mark span:nth-child(2) {
  left: 20px;
  top: 24px;
}
.brand-mark span:nth-child(3) {
  left: 5px;
  top: 39px;
}
.brand-mark span:nth-child(4) {
  left: 20px;
  top: 39px;
  background: var(--pink);
}
.nav-rail nav {
  width: 100%;
  padding: 23px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  width: 68px;
  min-height: 67px;
  color: #95869e;
  border-radius: 7px;
  font-size: 10px;
  letter-spacing: 0.2px;
  transition:
    background 0.15s,
    color 0.15s;
}
.nav-item svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.45;
}
.nav-item:hover {
  background: #28212f;
  color: #e1cfe6;
}
.nav-item.active {
  color: var(--mint);
  background: #26302d;
}
.nav-dot {
  width: 4px;
  height: 4px;
  background: var(--pink);
  position: absolute;
  right: 16px;
  top: 9px;
}
.rail-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 0;
}
.rail-bottom .nav-item {
  min-height: 54px;
  font-size: 10px;
}
.rail-bottom .nav-item svg {
  width: 20px;
  height: 20px;
}
.rail-version {
  color: #685b73;
  font: 10px var(--mono);
  margin-top: 12px;
}
.app-body {
  margin-left: 88px;
  width: calc(100% - 88px);
}
.topbar {
  height: 88px;
  border-bottom: 1px solid #2c2534;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #18141e;
}
.wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wordmark strong {
  font-size: 22px;
  letter-spacing: 4px;
  font-weight: 750;
}
.wordmark strong span {
  font: 9px var(--mono);
  vertical-align: top;
  letter-spacing: 0;
  margin-left: 4px;
  color: var(--mint);
}
.wordmark small {
  color: #a08da8;
  font: 9px var(--mono);
  letter-spacing: 1.4px;
}
.wallet {
  display: flex;
  gap: 35px;
  margin-left: auto;
  margin-right: 26px;
}
.currency {
  display: flex;
  align-items: center;
  gap: 12px;
}
.currency > svg {
  height: 26px;
  width: 26px;
}
.currency > div {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.currency span {
  font-size: 10px;
  color: #9a8ca6;
  letter-spacing: 0.5px;
}
.currency strong {
  font: 600 20px/1.35 var(--mono);
  letter-spacing: 0.6px;
}
.gold {
  color: var(--gold);
}
.lilac {
  color: var(--purple);
}
.pink {
  color: var(--pink);
}
.player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 11px;
  white-space: nowrap;
}
.player-avatar {
  height: 34px;
  width: 34px;
  background: #383042;
  color: #cfb9df;
  border: 1px solid #5f4c6f;
  display: grid;
  place-items: center;
  font: 600 11px var(--mono);
  border-radius: 7px;
}
.player-chevron {
  font-size: 17px;
  color: var(--muted);
  margin-left: 8px;
}
main {
  max-width: 1584px;
  margin: auto;
  padding: 32px 36px 0;
}
.page-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 20px;
}
.eyebrow {
  color: #9c8caa;
  font: 9px/1.5 var(--mono);
  letter-spacing: 1.2px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.live-dot {
  width: 5px;
  height: 5px;
  background: var(--mint);
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}
.page-intro h1 {
  font-size: 27px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 1.1px;
  margin: 9px 0 7px;
}
.page-intro em {
  font-style: normal;
  color: var(--mint);
}
.page-intro p {
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--muted);
}
.intro-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  margin-bottom: 3px;
}
.save-state {
  color: #8a7e95;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  margin-right: 10px;
  white-space: nowrap;
}
.save-state svg {
  width: 12px;
  height: 12px;
  color: #9bc1ab;
}
.icon-button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #221c2b;
  border: 1px solid #3b3046;
  border-radius: 5px;
  color: #b6a4c3;
  transition: 0.15s;
}
.icon-button:hover {
  background: #33293e;
  color: var(--mint);
}
.icon-button svg {
  width: 16px;
  height: 16px;
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 24px;
  align-items: start;
}
.main-column {
  min-width: 0;
}
.arcade-panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 9px;
  overflow: hidden;
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 57px;
  padding: 0 20px;
  gap: 10px;
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
}
.panel-title > svg {
  color: #a99aba;
  width: 18px;
  height: 18px;
}
.tag {
  padding: 2px 8px;
  background: #2d2538;
  border: 1px solid #45374e;
  color: #b8a4c3;
  border-radius: 3px;
  font-size: 9px;
  margin-left: 4px;
  white-space: nowrap;
}
.open-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--mint);
  font-size: 10px;
  white-space: nowrap;
}
.open-status i {
  width: 5px;
  height: 5px;
  background: var(--mint);
  border-radius: 50%;
}
.arcade-stats {
  margin: 0 20px;
  padding: 16px 0 19px;
  border-top: 1px solid #342a3f;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
}
.arcade-stats > div {
  padding-left: 22px;
  border-left: 1px solid #352c40;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.arcade-stats > div:first-child {
  border: 0;
  padding-left: 0;
}
.arcade-stats > div > span {
  font-size: 10px;
  color: var(--muted);
}
.arcade-stats strong {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 600 24px/1.2 var(--mono);
}
.arcade-stats strong > svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.4;
}
.arcade-stats small {
  font: 10px var(--font);
  color: var(--muted);
  white-space: nowrap;
  margin-left: 2px;
}
.arcade-stats .ambience {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding-left: 10px;
}
.ambience > span:last-child {
  font-size: 10px !important;
  color: #c4b1ce !important;
}
.ambience small {
  font: 7px/1.8 var(--mono);
  letter-spacing: 0.5px;
  margin: 0;
}
.equalizer {
  display: flex;
  gap: 3px;
  height: 22px;
  align-items: center;
}
.equalizer i {
  width: 3px;
  background: #ad92cd;
  animation: equalize 1.2s infinite alternate;
  transform-origin: bottom;
}
.equalizer i:nth-child(1) {
  height: 10px;
  animation-delay: 0.2s;
}
.equalizer i:nth-child(2) {
  height: 19px;
  animation-delay: 0.8s;
}
.equalizer i:nth-child(3) {
  height: 13px;
  animation-delay: 0.4s;
}
.equalizer i:nth-child(4) {
  height: 22px;
  animation-delay: 0.6s;
}
@keyframes equalize {
  to {
    transform: scaleY(0.4);
  }
}
.scene-wrap {
  position: relative;
  isolation: isolate;
  margin: 0 10px;
  border: 1px solid #40324c;
  overflow: hidden;
  background: #282033;
  border-radius: 3px;
}
.scene-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  cursor: pointer;
}
.scene-top {
  display: flex;
  justify-content: space-between;
  position: absolute;
  left: 18px;
  right: 18px;
  top: 14px;
  pointer-events: none;
  font: 8px var(--mono);
  letter-spacing: 0.8px;
  color: #b9a6c5;
}
.scene-top > span:first-child {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #c4e1cf;
}
.scene-top .live-dot {
  height: 4px;
  width: 4px;
}
.scene-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  padding: 5px 11px;
  background: #17121dcf;
  border: 1px solid #57415e;
  color: #cebad6;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
}
.mouse-icon {
  width: 9px;
  height: 13px;
  border: 1px solid #a697b5;
  border-radius: 4px;
  position: relative;
}
.mouse-icon:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 3px;
  top: 2px;
  left: 3px;
  background: var(--mint);
}
.arcade-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  gap: 12px;
}
.arcade-bottom > span {
  font-size: 9px;
  color: #a595b2;
}
.tiny-star {
  color: var(--gold);
  margin-right: 4px;
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  white-space: nowrap;
  color: #c6b4d3;
  padding: 3px 0;
}
.text-button:hover {
  color: var(--mint);
}
.text-button svg {
  width: 14px;
  height: 14px;
}
.text-button .small {
  width: 12px;
  height: 12px;
}
.collection-section {
  margin-top: 26px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 15px;
  gap: 12px;
}
.section-heading h2 {
  display: flex;
  gap: 12px;
  align-items: center;
}
.section-heading h2 > span {
  font: 500 12px var(--mono);
  color: var(--mint);
  letter-spacing: 0;
}
.section-heading h2 small {
  font-size: 10px;
  color: #8f7b9d;
}
.section-heading p {
  font-size: 10px;
  margin-top: 5px;
  color: #8f7e9c;
}
.cartridge-shelf {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}
.cartridge-card {
  text-align: left;
  padding: 0;
  background: #211c2a;
  border: 1px solid #3b2e48;
  border-radius: 5px;
  overflow: hidden;
  transition:
    transform 0.15s,
    border-color 0.15s;
  position: relative;
  min-width: 0;
}
.cartridge-card:hover {
  transform: translateY(-4px);
  border-color: var(--cart-color);
}
.cartridge-card canvas {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}
.cart-rarity {
  position: absolute;
  top: 7px;
  left: 7px;
  background: #17131edb;
  border: 1px solid #66506e;
  border-radius: 2px;
  color: var(--cart-color);
  font-size: 8px;
  line-height: 1;
  padding: 3px 4px;
}
.cartridge-meta {
  padding: 9px 8px 10px;
  border-top: 1px solid #3b2e47;
}
.cartridge-meta strong {
  display: block;
  font-size: 10px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d7c6df;
}
.cartridge-meta > span {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #8f7c9e;
  margin-top: 4px;
}
.cartridge-meta b {
  font: 9px var(--mono);
  color: #b5a2c5;
}
.cartridge-meta .cart-on {
  color: #8cbaa7;
}
.bottom-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  color: #8c7c9c;
  margin-top: 17px;
  min-height: 24px;
}
.bottom-note .live-dot {
  background: #b091c6;
  width: 4px;
  height: 4px;
}
.ticker-index {
  margin-left: auto;
  font: 8px var(--mono);
  color: #65556e;
  white-space: nowrap;
}
.right-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 8px;
  overflow: hidden;
}
.right-column .panel-heading {
  min-height: 53px;
  padding: 0 17px;
}
.right-column .panel-heading h2 {
  font-size: 13px;
}
.subtle-icon {
  display: flex;
  padding: 3px;
  color: #897896;
}
.subtle-icon svg {
  height: 14px;
  width: 14px;
}
.destination-art {
  height: 119px;
  position: relative;
  margin: 0 10px;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid #44334f;
}
.destination-art canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.sector-label {
  position: absolute;
  left: 10px;
  top: 9px;
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: #d3b8e2;
  padding: 3px 5px;
  background: #2920369e;
  border: 1px solid #665071;
}
.expedition-content {
  padding: 14px 16px 10px;
}
.destination-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.destination-select h3 {
  font-size: 13px;
}
.destination-select p {
  font-size: 9px;
  color: #9b86a9;
  margin-top: 4px;
}
.icon-button.tiny {
  width: 25px;
  height: 25px;
  border-color: #483553;
  background: #30243a;
}
.icon-button.tiny svg {
  width: 12px;
  height: 12px;
}
.loot-preview {
  display: flex;
  gap: 12px;
  margin: 13px 0 15px;
  color: #b6a4c4;
  font-size: 9px;
}
.loot-preview > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.loot-preview svg {
  width: 13px;
  height: 13px;
  color: var(--purple);
}
.loot-preview b {
  font-weight: 400;
  color: #c4afd6;
}
.primary-button {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--mint);
  color: #203e35;
  border: 1px solid #b1f2d5;
  border-radius: 4px;
  box-shadow: 0 3px 0 #497c67;
  width: 100%;
  font-size: 11px;
  font-weight: 650;
  transition:
    background 0.15s,
    transform 0.15s;
}
.primary-button:hover:not(:disabled) {
  background: #aff4d6;
  transform: translateY(-1px);
}
.primary-button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: none;
}
.primary-button svg {
  width: 15px;
  height: 15px;
}
.primary-button small {
  font-size: 9px;
  font-weight: 400;
  border-left: 1px solid #619f85;
  padding-left: 9px;
  margin-left: 3px;
  white-space: nowrap;
}
.helper-text {
  display: flex;
  justify-content: space-between;
  color: #7f6d8c;
  font-size: 8px;
  margin-top: 11px;
}
.helper-text > span {
  font: 9px var(--mono);
}
.count-badge {
  color: #bba1cf;
  font: 10px var(--mono);
  background: #372840;
  padding: 1px 6px;
  border: 1px solid #50375d;
  border-radius: 3px;
}
.repair-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 16px 14px;
}
.repair-icon {
  width: 49px;
  height: 45px;
  image-rendering: pixelated;
  border: 1px solid #4d3b59;
  object-fit: cover;
  border-radius: 3px;
}
.repair-info {
  flex: 1;
  min-width: 0;
}
.repair-info h3 {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repair-info p {
  font-size: 9px;
  color: #927e9f;
  margin-top: 3px;
}
.repair-button {
  padding: 5px 10px;
  font-size: 10px;
  border: 1px solid #75608c;
  border-radius: 3px;
  background: #3b2d48;
  color: #d5bfe6;
  white-space: nowrap;
}
.repair-button:hover {
  background: #513c60;
}
.repair-foot {
  padding: 9px 16px;
  border-top: 1px solid #362a41;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  color: #85728f;
}
.repair-foot > span {
  display: flex;
  gap: 5px;
  align-items: center;
}
.repair-foot svg {
  height: 12px;
  width: 12px;
}
.repair-foot button {
  font-size: 9px;
  color: #b69dca;
  padding: 0;
}
.task-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-top: 1px solid #302639;
}
.task-item:first-child {
  padding-top: 0;
  border: 0;
}
.task-icon {
  width: 21px;
  height: 21px;
  border: 1px solid #51415e;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #867395;
}
.task-icon svg {
  width: 11px;
  height: 11px;
}
.task-icon.done {
  color: var(--mint);
  border-color: #638b76;
}
.task-details {
  flex: 1;
}
.task-details strong {
  font-size: 10px;
  font-weight: 500;
  display: block;
}
.task-details small {
  font-size: 8px;
  color: #8d7999;
}
.task-reward {
  font: 9px var(--mono);
  color: #c5b081;
  display: flex;
  align-items: center;
  gap: 3px;
}
.task-reward svg {
  width: 12px;
  height: 12px;
}
.task-claim {
  font-size: 9px;
  color: var(--mint);
  border: 1px solid #4c7761;
  border-radius: 3px;
  padding: 3px 6px;
}
.claimed-label {
  font-size: 9px;
  color: #77687f;
}
.side-quote {
  padding: 4px 0 0 18px;
  display: grid;
  grid-template-columns: 30px auto;
  gap: 6px 8px;
  color: #8e759e;
  opacity: 0.85;
}
.side-quote > svg {
  height: 25px;
  width: 25px;
  color: #b597ca;
  grid-row: span 2;
  margin-top: 2px;
  stroke-width: 1.2;
}
.side-quote p {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 1px;
}
.side-quote p span {
  font-family: var(--mono);
  color: #bda1d3;
}
.side-quote small {
  font: 7px var(--mono);
  letter-spacing: 1.8px;
  color: #766280;
}
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #2b2233;
  margin-top: 28px;
  min-height: 57px;
  font-size: 9px;
  color: #76677f;
}
footer i {
  font-style: normal;
  color: #5e5068;
  margin-left: 7px;
}
footer > span:nth-child(2) {
  display: flex;
  gap: 7px;
  align-items: center;
}
footer .live-dot {
  height: 4px;
  width: 4px;
  background: #8b739b;
}
footer button {
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9c86ad;
}
footer svg {
  height: 12px;
  width: 12px;
}
.pause-cover {
  position: absolute;
  inset: 0;
  background: #1a1429df;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(2px);
  z-index: 3;
}
.pause-cover[hidden] {
  display: none;
}
.pause-cover svg {
  color: var(--mint);
  height: 32px;
  width: 32px;
}
.pause-cover strong {
  font-size: 20px;
}
.pause-cover span {
  font-size: 11px;
  color: var(--muted);
}
.progress-track {
  height: 4px;
  background: #3d3049;
  overflow: hidden;
  border-radius: 2px;
  margin-top: 8px;
}
.progress-fill {
  height: 100%;
  background: var(--mint);
  transition: width 0.5s;
}
.expedition-active {
  border: 1px solid #4c3a5c;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: #292033;
}
.expedition-active > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
}
.expedition-active small {
  color: var(--muted);
  font: 9px var(--mono);
}
.expedition-active button {
  padding: 2px 8px;
  border: 1px solid #85c3a4;
  color: var(--mint);
  font-size: 9px;
  border-radius: 3px;
}
.empty-repair {
  font-size: 11px;
  color: var(--muted);
  padding: 0 16px 17px;
}
.toast-region {
  position: fixed;
  right: 30px;
  bottom: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 12px 20px;
  background: #30273b;
  border: 1px solid #6c567d;
  border-left: 3px solid var(--mint);
  color: #e7dcef;
  border-radius: 5px;
  font-size: 12px;
  max-width: min(420px, 90vw);
  box-shadow: 0 8px 24px #0004;
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

dialog {
  background: #211b2b;
  border: 1px solid #594267;
  border-radius: 10px;
  color: var(--text);
  padding: 0;
  width: 700px;
  max-width: calc(100vw - 28px);
  max-height: 87vh;
  box-shadow: 0 24px 100px #0008;
}
dialog::backdrop {
  background: #100d18c9;
  backdrop-filter: blur(5px);
}
.dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 25px 19px;
  border-bottom: 1px solid #3d2f49;
  position: sticky;
  top: 0;
  background: #211b2b;
  z-index: 5;
}
.dialog-top h2 {
  font-size: 22px;
  margin-top: 6px;
}
.dialog-top .eyebrow {
  color: var(--mint);
  font-size: 9px;
}
.dialog-top .icon-button {
  flex-shrink: 0;
}
#dialog-content {
  padding: 24px;
}
.dialog-copy {
  color: #b09ebc;
  font-size: 12px;
  line-height: 1.9;
}
.detail-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 25px;
}
.detail-art canvas {
  width: 100%;
  display: block;
  image-rendering: pixelated;
  border: 1px solid #594263;
  border-radius: 5px;
}
.detail-label {
  color: var(--muted);
  font: 10px var(--mono);
  text-align: center;
  padding: 9px;
}
.detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.rarity-label {
  font-size: 10px;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 3px;
}
.detail-info h3 {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 12px;
}
.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid #44334f;
  border-bottom: 1px solid #44334f;
  padding: 14px 0;
  margin: 15px 0;
}
.detail-stats span {
  display: block;
  font-size: 10px;
  color: var(--muted);
}
.detail-stats b {
  font: 20px/1.7 var(--mono);
  color: var(--mint);
}
.detail-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid #6d537e;
  border-radius: 4px;
  font-size: 11px;
  padding: 6px 12px;
  color: #d0b8e0;
  background: #35273f;
}
.secondary-button:hover {
  background: #45334f;
}
.secondary-button svg {
  width: 15px;
  height: 15px;
}
.soul-ready {
  margin: 14px 0;
  color: var(--gold);
  font-size: 11px;
}
.soul-progress {
  font-size: 10px;
  color: var(--muted);
  margin: 14px 0;
}
.collection-toolbar {
  display: flex;
  gap: 9px;
  margin-bottom: 20px;
}
.search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.search-wrap svg {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 15px;
  height: 15px;
  color: #947b9f;
}
.search-wrap input {
  width: 100%;
  padding: 9px 9px 9px 33px;
}
input,
select {
  background: #18141e;
  color: var(--text);
  border: 1px solid #574064;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 11px;
}
select {
  max-width: 125px;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.collection-grid .cartridge-meta strong {
  font-size: 11px;
}
.collection-grid .cartridge-card.locked {
  opacity: 0.6;
}
.collection-summary {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 15px;
}
.collection-empty {
  color: var(--muted);
  padding: 30px;
  text-align: center;
  grid-column: 1/-1;
}
.soul-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.soul-card {
  padding: 12px;
  border: 1px solid #4d395b;
  border-radius: 5px;
  background: #292031;
}
.soul-card canvas {
  width: 100%;
  image-rendering: pixelated;
}
.soul-card h3 {
  margin: 8px 0 3px;
}
.soul-card p {
  font-size: 10px;
  color: var(--muted);
}
.soul-card button {
  margin-top: 12px;
  width: 100%;
}
.help-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.help-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
}
.help-number {
  background: #303d34;
  color: var(--mint);
  height: 30px;
  display: grid;
  place-items: center;
  font: 15px var(--mono);
  border: 1px solid #556f5d;
  border-radius: 4px;
}
.help-step h3 {
  font-size: 13px;
  margin-bottom: 4px;
}
.help-step p {
  font-size: 11px;
  line-height: 1.8;
  color: var(--muted);
}
.help-footer {
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #45314f;
  color: #a38ab2;
  font-size: 10px;
}
.settings-row {
  padding: 16px 0;
  border-bottom: 1px solid #403049;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.settings-row:first-child {
  padding-top: 0;
}
.settings-row h3 {
  font-size: 12px;
}
.settings-row p {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.switch {
  width: 38px;
  height: 22px;
  border-radius: 20px;
  background: #50405c;
  padding: 3px;
  display: flex;
  transition: 0.2s;
  flex-shrink: 0;
}
.switch span {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #c7b6d4;
}
.switch.on {
  background: #5b9d7e;
}
.switch.on span {
  transform: translateX(16px);
  background: #baf7d7;
}
.settings-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}
.settings-notice {
  font-size: 10px;
  color: #aa94b9;
  line-height: 1.9;
  background: #2b2234;
  padding: 14px;
  border-radius: 4px;
}
.mission-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mission-card {
  border: 1px solid #53405f;
  padding: 15px;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: center;
}
.mission-card canvas {
  width: 100%;
  image-rendering: pixelated;
  border: 1px solid #614a6d;
}
.mission-card p {
  font-size: 10px;
  color: var(--muted);
  margin: 5px 0 9px;
}
.mission-card .primary-button {
  max-width: 240px;
}
.achievement-row {
  display: flex;
  gap: 16px;
  padding: 19px 0;
  border-bottom: 1px solid #42314d;
  align-items: center;
}
.achievement-row:last-child {
  border: 0;
}
.achievement-row > svg {
  color: var(--gold);
  height: 30px;
  width: 30px;
}
.achievement-row > div {
  flex: 1;
}
.achievement-row p {
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}
.achievement-row > span {
  font: 11px var(--mono);
  color: var(--mint);
}
.mini-screen {
  width: 100%;
  background: #131923;
  border: 4px solid #584264;
  image-rendering: pixelated;
  display: block;
  aspect-ratio: 100/60;
  max-height: 45vh;
  touch-action: none;
}
.mini-hud {
  display: flex;
  justify-content: space-between;
  color: var(--mint);
  font: 13px var(--mono);
  margin-bottom: 12px;
}
.mini-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.mini-controls p {
  font-size: 10px;
  color: var(--muted);
}
.touch-buttons {
  display: flex;
  gap: 8px;
}
.touch-buttons button {
  min-width: 45px;
  min-height: 40px;
  border: 1px solid #755987;
  background: #3f2d4d;
  border-radius: 4px;
  touch-action: none;
}
.mini-result {
  font-size: 11px;
  color: var(--gold);
  margin-top: 12px;
}
.repair-progress-row {
  padding: 0 16px 15px;
}
.repair-progress-row > div {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
}
.expand-preview {
  display: flex;
  justify-content: center;
  gap: 24px;
  align-items: center;
  margin: 18px 0 28px;
}
.expand-preview > div {
  text-align: center;
}
.expand-preview strong {
  font: 40px var(--mono);
  color: var(--mint);
}
.expand-preview span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.expand-preview svg {
  color: #8d739f;
}
.expansion-info {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 20px;
}
.pending-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pending-row {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #4c3957;
  border-radius: 5px;
  padding: 12px;
}
.pending-row canvas {
  width: 85px;
  image-rendering: pixelated;
}
.pending-row > div {
  flex: 1;
}
.pending-row p {
  font-size: 10px;
  color: var(--muted);
  margin-top: 5px;
}
.pending-row button {
  width: 100px;
}
.reduced-motion * {
  animation: none !important;
  transition: none !important;
}
@media (min-width: 1650px) {
  main {
    padding-top: 38px;
  }
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .right-column {
    gap: 22px;
  }
  .destination-art {
    height: 140px;
  }
  .expedition-content {
    padding-top: 20px;
    padding-bottom: 16px;
  }
  .right-column .panel-heading {
    min-height: 60px;
  }
  .task-item {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
@media (max-width: 1250px) {
  .topbar {
    padding: 0 26px;
  }
  .wallet {
    gap: 22px;
    margin-right: 8px;
  }
  .currency {
    gap: 8px;
  }
  main {
    padding: 27px 24px 0;
  }
  .game-layout {
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 270px;
  }
  .panel-heading {
    padding: 0 15px;
  }
  .panel-title {
    gap: 7px;
  }
  .tag {
    font-size: 8px;
    padding: 2px 5px;
  }
  .arcade-stats {
    margin: 0 15px;
    grid-template-columns: 1.25fr 1fr 1fr;
  }
  .arcade-stats .ambience {
    display: none;
  }
  .arcade-stats strong {
    font-size: 22px;
  }
  .arcade-stats > div {
    padding-left: 17px;
  }
  .cartridge-shelf {
    gap: 8px;
  }
  .cartridge-meta {
    padding: 8px 6px;
  }
  .cartridge-meta strong {
    font-size: 9px;
  }
  .arcade-bottom > span {
    font-size: 8px;
  }
  .arcade-bottom {
    padding: 12px 13px;
  }
  .page-intro h1 {
    font-size: 25px;
  }
  .side-quote {
    display: none;
  }
  .right-column {
    gap: 15px;
  }
  .destination-art {
    height: 107px;
  }
  .ticker-index {
    display: none;
  }
  .wallet .currency > svg {
    width: 23px;
    height: 23px;
  }
  .player-chevron {
    display: none;
  }
  .currency strong {
    font-size: 18px;
  }
  .currency span {
    font-size: 9px;
  }
}
@media (max-width: 1020px) {
  .nav-rail {
    width: 73px;
  }
  .nav-item {
    width: 56px;
    font-size: 9px;
  }
  .nav-rail nav {
    padding-left: 8px;
    padding-right: 8px;
  }
  .app-body {
    margin-left: 73px;
    width: calc(100% - 73px);
  }
  .wordmark strong {
    font-size: 19px;
  }
  .wordmark small {
    font-size: 7px;
  }
  .topbar {
    gap: 16px;
    height: 80px;
    padding: 0 22px;
  }
  .wallet {
    gap: 18px;
    margin: 0;
  }
  .currency {
    gap: 7px;
  }
  .currency strong {
    font-size: 16px;
  }
  .currency > svg {
    height: 20px !important;
    width: 20px !important;
  }
  .player > span:nth-child(2) {
    display: none;
  }
  .game-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .right-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .expedition-panel {
    grid-row: span 2;
  }
  .tasks-panel {
    grid-column: 2;
  }
  .destination-art {
    height: 140px;
  }
  .scene-wrap canvas {
    max-height: 540px;
    object-fit: cover;
  }
  .arcade-stats {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
  .arcade-stats .ambience {
    display: flex;
  }
  .cartridge-meta strong {
    font-size: 11px;
  }
  .cartridge-meta {
    padding: 10px;
  }
  .right-column .panel-heading {
    min-height: 50px;
  }
  .cartridge-shelf {
    gap: 12px;
  }
  .page-intro {
    margin-bottom: 23px;
  }
  .intro-actions .save-state {
    display: none;
  }
  footer > span:nth-child(2) {
    display: none;
  }
}
@media (max-width: 650px) {
  .nav-rail {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 66px;
    width: 100%;
    border: 0;
    border-top: 1px solid #49374f;
    flex-direction: row;
    background: #201927f5;
    backdrop-filter: blur(8px);
  }
  .brand-mark,
  .rail-bottom {
    display: none;
  }
  .nav-rail nav {
    flex-direction: row;
    justify-content: space-around;
    padding: 3px 5px;
    gap: 0;
  }
  .nav-item {
    min-height: 54px;
    width: 60px;
    border-radius: 5px;
    gap: 4px;
    font-size: 9px;
  }
  .nav-item svg {
    width: 20px;
    height: 20px;
  }
  .nav-dot {
    top: 4px;
    right: 14px;
  }
  .app-body {
    margin: 0;
    width: 100%;
    padding-bottom: 66px;
  }
  .topbar {
    height: 75px;
    padding: 0 17px;
    gap: 12px;
  }
  .wordmark strong {
    font-size: 18px;
    letter-spacing: 2px;
  }
  .wordmark small {
    font-size: 6px;
    letter-spacing: 0.7px;
  }
  .wallet {
    gap: 14px;
    margin-left: auto;
  }
  .currency {
    gap: 5px;
  }
  .currency strong {
    font-size: 14px;
  }
  .currency span {
    font-size: 8px;
  }
  .currency > svg {
    height: 17px !important;
    width: 17px !important;
  }
  .wallet .currency:nth-child(3) {
    display: none;
  }
  .player {
    display: none;
  }
  main {
    padding: 23px 14px 0;
  }
  .eyebrow {
    font-size: 7px;
    letter-spacing: 0.75px;
  }
  .page-intro {
    gap: 5px;
    align-items: start;
    margin-bottom: 20px;
  }
  .page-intro h1 {
    font-size: 20px;
    letter-spacing: 0.1px;
    margin: 8px 0 7px;
  }
  .page-intro p {
    font-size: 9px;
    letter-spacing: 0;
    max-width: 260px;
  }
  .intro-actions {
    align-self: flex-start;
    margin-top: 24px;
    gap: 5px;
  }
  .icon-button {
    width: 28px;
    height: 28px;
  }
  .icon-button svg {
    width: 14px;
    height: 14px;
  }
  .panel-heading {
    min-height: 51px;
    padding: 0 13px;
  }
  .panel-title h2 {
    font-size: 13px;
  }
  .panel-title > svg {
    width: 16px;
    height: 16px;
  }
  .tag {
    margin-left: 0;
    font-size: 8px;
  }
  .open-status {
    font-size: 9px;
    gap: 5px;
  }
  .arcade-stats {
    margin: 0 13px;
    padding: 13px 0 15px;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 0;
  }
  .arcade-stats > div > span {
    font-size: 9px;
  }
  .arcade-stats > div {
    padding-left: 12px;
    gap: 7px;
  }
  .arcade-stats strong {
    font-size: 20px;
    gap: 4px;
  }
  .arcade-stats strong svg {
    display: none;
  }
  .arcade-stats small {
    font-size: 8px;
  }
  .arcade-stats .ambience {
    display: none;
  }
  .scene-wrap {
    margin: 0 6px;
  }
  .scene-wrap canvas {
    aspect-ratio: 1.37;
    object-fit: cover;
    width: 128%;
    max-width: none;
    margin-left: -14%;
  }
  .scene-top {
    left: 10px;
    right: 10px;
    top: 10px;
    font-size: 6px;
    letter-spacing: 0.3px;
  }
  .scene-top .live-dot {
    width: 3px;
    height: 3px;
  }
  .scene-hint {
    font-size: 8px;
    padding: 4px 8px;
    bottom: 9px;
  }
  .arcade-bottom {
    padding: 10px 11px;
    gap: 5px;
  }
  .arcade-bottom > span {
    max-width: 190px;
    font-size: 8px;
    line-height: 1.6;
  }
  .tiny-star {
    display: none;
  }
  .text-button {
    font-size: 9px;
    gap: 4px;
  }
  .text-button svg {
    width: 12px;
    height: 12px;
  }
  .arcade-bottom .text-button > svg:first-child {
    display: none;
  }
  .collection-section {
    margin-top: 23px;
  }
  .section-heading h2 {
    font-size: 14px;
    gap: 9px;
  }
  .section-heading p {
    font-size: 9px;
  }
  .section-heading {
    margin-bottom: 12px;
  }
  .cartridge-shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
  }
  .cartridge-meta {
    padding: 9px;
  }
  .cartridge-meta strong {
    font-size: 11px;
  }
  .cartridge-meta > span {
    font-size: 9px;
  }
  .cartridge-meta b {
    font-size: 9px;
  }
  .cartridge-card canvas {
    aspect-ratio: 1.55;
    object-fit: cover;
  }
  .bottom-note {
    margin-top: 12px;
    font-size: 8px;
  }
  .right-column {
    display: flex;
    gap: 15px;
  }
  .game-layout {
    gap: 21px;
  }
  .destination-art {
    height: 150px;
  }
  .expedition-content {
    padding: 16px;
  }
  .destination-select h3 {
    font-size: 14px;
  }
  .destination-select p {
    font-size: 10px;
  }
  .loot-preview {
    font-size: 10px;
    margin: 14px 0 17px;
  }
  .primary-button {
    min-height: 42px;
    font-size: 12px;
  }
  .helper-text {
    font-size: 9px;
  }
  .right-column .panel-heading {
    min-height: 53px;
  }
  .panel-heading h2 {
    font-size: 14px !important;
  }
  .task-item {
    padding: 14px 17px;
  }
  .task-details strong {
    font-size: 12px;
  }
  .task-details small {
    font-size: 10px;
  }
  .task-reward {
    font-size: 11px;
  }
  .task-icon {
    height: 25px;
    width: 25px;
  }
  .repair-info h3 {
    font-size: 12px;
  }
  .repair-info p {
    font-size: 10px;
  }
  .repair-button {
    font-size: 11px;
    padding: 6px 13px;
  }
  .repair-foot {
    font-size: 10px;
    padding: 11px 16px;
  }
  .repair-foot button {
    font-size: 10px;
  }
  .side-quote {
    display: grid;
    max-width: 240px;
    align-self: center;
    margin: 12px 0;
  }
  .side-quote p {
    font-size: 15px;
  }
  .side-quote small {
    font-size: 8px;
  }
  footer {
    margin-top: 20px;
    font-size: 8px;
    min-height: 52px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: 12px 0;
  }
  footer button {
    font-size: 8px;
  }
  footer > span:first-child {
    width: 100%;
    text-align: center;
  }
  .toast-region {
    right: 14px;
    bottom: 81px;
  }
  .toast {
    font-size: 11px;
    padding: 11px 15px;
  }
  .dialog-top {
    padding: 18px;
  }
  .dialog-top h2 {
    font-size: 19px;
  }
  #dialog-content {
    padding: 18px;
  }
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .detail-art {
    max-width: 220px;
    margin: auto;
  }
  .detail-info h3 {
    font-size: 14px;
  }
  .detail-stats {
    margin-top: 12px;
  }
  .collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .collection-grid .cartridge-meta {
    padding: 7px 5px;
  }
  .collection-grid .cartridge-meta strong {
    font-size: 9px;
  }
  .collection-toolbar {
    flex-wrap: wrap;
  }
  .search-wrap {
    flex-basis: 100%;
  }
  .collection-toolbar select {
    flex: 1;
    max-width: none;
  }
  .soul-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .soul-card {
    padding: 9px;
  }
  .mission-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mission-card canvas {
    max-height: 140px;
    object-fit: cover;
  }
  .mission-card .primary-button {
    max-width: none;
  }
  .pending-row {
    gap: 9px;
    padding: 9px;
  }
  .pending-row canvas {
    width: 58px;
  }
  .pending-row h3 {
    font-size: 11px;
  }
  .pending-row button {
    width: 76px;
    font-size: 10px;
  }
  .mini-controls {
    align-items: start;
    flex-direction: column;
  }
  .mini-controls p {
    line-height: 1.7;
  }
  .touch-buttons {
    align-self: center;
  }
  .touch-buttons button {
    min-width: 70px;
  }
  .mini-screen {
    aspect-ratio: 1.3;
  }
  .settings-row p {
    max-width: 210px;
  }
  .settings-row {
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.scene-top button {
  pointer-events: auto;
  color: #b9a6c5;
  font: 8px var(--mono);
  letter-spacing: 0.5px;
  padding: 3px 6px;
  background: #241b2fa8;
  border: 1px solid #51405e;
  border-radius: 2px;
}
.scene-top button:hover {
  color: var(--mint);
  border-color: #90bba8;
}
.scene-top button b {
  font-weight: 400;
  margin-left: 4px;
}
@media (max-width: 370px) {
  .page-intro h1 {
    font-size: 17px;
  }
  .page-intro p {
    font-size: 8px;
  }
  .eyebrow {
    font-size: 6px;
  }
  .intro-actions {
    margin-top: 23px;
    gap: 4px;
  }
  .intro-actions .icon-button {
    width: 25px;
    height: 25px;
  }
  .wallet {
    gap: 10px;
  }
  .wordmark strong {
    font-size: 16px;
  }
  .currency strong {
    font-size: 13px;
  }
}

/* The game uses cartridge serials and pixel display captions as deliberate small type. */
:root {
  --muted: #ad9abb;
}
.nav-item {
  font-size: 11px;
}
.rail-version,
.ticker-index,
footer,
footer i {
  color: #a18daa;
}
.helper-text,
.repair-foot,
.repair-info p,
.task-details small {
  color: #a28daf;
}
.side-quote small {
  color: #ab90ba;
}
.side-quote {
  opacity: 1;
}
.section-heading p,
.cartridge-meta > span,
.claimed-label {
  color: #a38eb0;
}
.save-state {
  color: #ae9abb;
}
.page-intro p,
.destination-select p {
  color: #b29bbe;
}
.primary-button {
  box-shadow: none;
}
.primary-button:active:not(:disabled) {
  box-shadow: none;
}
.tiny-star {
  display: none;
}
@media (min-width: 1021px) {
  .topbar {
    height: 78px;
  }
  .brand-mark {
    height: 78px;
  }
  main {
    padding-top: 25px;
  }
  .page-intro {
    margin-bottom: 22px;
  }
  .page-intro h1 {
    font-size: 26px;
    margin-top: 8px;
  }
  .panel-heading {
    min-height: 51px;
  }
  .arcade-stats {
    padding: 13px 0 15px;
  }
  .scene-wrap canvas {
    aspect-ratio: 1000/460;
    object-fit: fill;
  }
  .page-intro p,
  .arcade-bottom > span,
  .text-button,
  .helper-text,
  .repair-foot,
  .repair-foot button,
  .repair-info p,
  .task-details small,
  .destination-select p,
  .loot-preview,
  .section-heading p,
  .cartridge-meta > span,
  .task-reward {
    font-size: 11px;
  }
  .task-details strong,
  .repair-info h3,
  .primary-button {
    font-size: 12px;
  }
  .cartridge-meta strong {
    font-size: 12px;
  }
  .arcade-stats > div > span,
  .currency span,
  .save-state {
    font-size: 11px;
  }
  .arcade-bottom {
    min-height: 43px;
  }
  .destination-art {
    height: 115px;
  }
  .right-column .panel-heading {
    min-height: 49px;
  }
  .right-column {
    gap: 15px;
  }
  .side-quote {
    display: none;
  }
  .cartridge-card canvas {
    aspect-ratio: 1.65;
    object-fit: cover;
  }
  .collection-section {
    margin-top: 22px;
  }
  .bottom-note {
    font-size: 10px;
  }
  footer {
    margin-top: 20px;
  }
}
@media (max-width: 650px) {
  main {
    padding-left: 16px;
    padding-right: 16px;
  }
  .nav-item {
    font-size: 10px;
  }
  .page-intro p {
    font-size: 10px;
  }
  .destination-select p,
  .helper-text,
  .repair-foot,
  .repair-foot button,
  .repair-info p,
  .task-details small,
  .section-heading p,
  .cartridge-meta > span {
    font-size: 11px;
  }
  .scene-wrap canvas {
    aspect-ratio: auto;
    object-fit: fill;
    width: 128%;
    height: auto;
    margin-left: -14%;
  }
}
@media (max-width: 370px) {
  .page-intro h1 {
    font-size: 17px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .page-intro p {
    font-size: 9px;
  }
  .intro-actions {
    gap: 3px;
  }
  .intro-actions .icon-button {
    width: 23px;
    height: 25px;
  }
  .page-intro {
    position: relative;
  }
  .intro-actions {
    position: absolute;
    right: 0;
    top: -27px;
  }
  .currency span {
    font-size: 8px;
  }
}

.mobile-only {
  display: none;
}
@media (max-width: 650px) {
  .mobile-only {
    display: flex;
  }
  .nav-rail nav .nav-item {
    flex: 1;
    min-width: 0;
    width: auto;
    max-width: 60px;
  }
  .nav-rail nav {
    gap: 0;
  }
}

/* Pixel Echo, cartridge edition — the machine is a doorway, not a thumbnail. */
[hidden] {
  display: none !important;
}
html {
  scrollbar-color: #57405f #18131f;
  scrollbar-width: thin;
}
.scene-wrap {
  box-shadow: inset 0 0 35px #110d1e;
}
.arcade-panel {
  border-color: #44334e;
}
.cart-game-type {
  color: var(--cart-color) !important;
}
.cart-game-type i {
  font: 9px var(--mono);
  font-style: normal;
  color: #a18bad;
}
.cart-stars {
  position: absolute;
  right: 7px;
  bottom: 74px;
  color: #f0d497;
  font-size: 9px;
  letter-spacing: 1px;
}
.cartridge-card canvas {
  background: #292132;
}
.cartridge-meta {
  background: #211a2c;
}
.cartridge-card:hover {
  box-shadow: 0 7px 0 #0f0d15;
}
.dialog-toasts {
  position: sticky;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
  padding: 0 20px;
}
.dialog-toasts .toast {
  margin-bottom: 12px;
  max-width: none;
  font-size: 11px;
}
.guide-replay {
  width: 100%;
  margin-top: 14px;
}
dialog[data-view="detail"],
dialog[data-view="mini"] {
  width: 960px;
}
dialog[data-view="intro"] {
  width: 1040px;
  max-height: 90vh;
  border-color: #76507c;
  background: #211a2b;
}
dialog[data-view="intro"] .dialog-top {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 10;
}
dialog[data-view="intro"] .dialog-top > div {
  display: none;
}
dialog[data-view="intro"] #dialog-content {
  padding: 0;
}
.welcome-experience {
  display: grid;
  grid-template-columns: 0.88fr 1fr;
  min-height: 622px;
}
.welcome-visual {
  position: relative;
  overflow: hidden;
  background: #282034;
  border-right: 1px solid #5d416b;
  isolation: isolate;
}
.welcome-visual canvas {
  position: absolute;
  left: -53%;
  top: 0;
  height: 100%;
  width: 205%;
  object-fit: cover;
  image-rendering: pixelated;
  opacity: 0.58;
}
.welcome-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1a122847;
  z-index: 0;
}
.welcome-art-title {
  position: absolute;
  left: 35px;
  top: 53px;
  z-index: 1;
}
.welcome-art-title > span {
  font: 9px var(--mono);
  letter-spacing: 2px;
  color: #c4a0d4;
  display: block;
  margin-bottom: 22px;
}
.welcome-art-title strong {
  font: 900 70px/0.94 var(--mono);
  letter-spacing: 1px;
  display: block;
  color: #f4e3ef;
  text-shadow: 4px 4px #5e3c6a;
}
.welcome-art-title em {
  font-style: normal;
  color: #92e6c8;
}
.welcome-art-title small {
  display: block;
  color: #e2bcd7;
  font-size: 15px;
  letter-spacing: 6px;
  margin-top: 19px;
}
.welcome-art-footer {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 27px;
  z-index: 2;
  color: #d8bedf;
  font-size: 11px;
  letter-spacing: 0.8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #82618c;
}
.welcome-art-footer i {
  height: 5px;
  width: 5px;
  background: var(--mint);
}
.welcome-copy {
  padding: 49px 38px 29px;
}
.welcome-kicker {
  font-size: 10px;
  letter-spacing: 2px;
  color: #baa0ca;
}
.welcome-copy h3 {
  font-size: 32px;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: 2px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.welcome-copy h3 span {
  color: var(--mint);
}
.welcome-copy > p {
  color: #baa7c7;
  line-height: 2.1;
  font-size: 12px;
}
.welcome-features {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 24px 0;
}
.welcome-features > div {
  display: flex;
  gap: 12px;
  align-items: center;
}
.welcome-features svg {
  color: #c29ed7;
  width: 21px;
  height: 21px;
}
.welcome-features b {
  font-size: 12px;
  font-weight: 500;
  display: block;
  letter-spacing: 0.3px;
}
.welcome-features small {
  font-size: 10px;
  color: #a68ab8;
  display: block;
  margin-top: 2px;
}
.welcome-start {
  min-height: 43px;
  font-size: 12px;
  justify-content: space-between;
  padding: 0 15px;
}
.welcome-skip {
  display: block;
  margin: 15px auto 0;
  color: #c9b4d6;
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.welcome-skip:hover {
  color: var(--mint);
}
.welcome-note {
  font-size: 9px;
  color: #9b80af;
  text-align: center;
  margin-top: 15px;
  letter-spacing: 0.5px;
}
.cartridge-dossier {
  --game-accent: #92e2c1;
}
.dossier-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  align-items: start;
}
.dossier-screen {
  position: relative;
  padding: 8px;
  background: #10101b;
  border: 1px solid #766080;
  border-radius: 6px;
  box-shadow: 0 5px 0 #100d17;
}
.dossier-screen canvas {
  width: 100%;
  display: block;
  image-rendering: pixelated;
  aspect-ratio: 1.6;
  object-fit: fill;
}
.dossier-screen-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 8px var(--mono);
  letter-spacing: 0.6px;
  color: #b0a0c1;
  position: absolute;
  left: 15px;
  bottom: 13px;
  background: #21192bd9;
  padding: 4px 6px;
}
.dossier-screen-label i {
  height: 4px;
  width: 4px;
  background: var(--game-accent);
}
.dossier-physical {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  padding: 13px 0;
  border-top: 1px solid #4a3654;
  border-bottom: 1px solid #4a3654;
}
.dossier-physical canvas {
  width: 91px;
  height: 67px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1px solid #574162;
  border-radius: 3px;
}
.dossier-physical > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dossier-physical > div > span {
  font: 8px var(--mono);
  color: #b09bc0;
  letter-spacing: 1px;
}
.dossier-physical strong {
  font: 10px var(--mono);
  color: var(--game-accent);
  letter-spacing: 0.3px;
}
.dossier-physical small {
  font-size: 10px;
  color: #ae94bc;
}
.dossier-stamp {
  margin-left: auto;
  border: 1px solid var(--game-accent);
  color: var(--game-accent);
  padding: 4px 6px;
  font-size: 10px;
  writing-mode: vertical-lr;
  letter-spacing: 3px;
}
.dossier-badges {
  display: flex;
  gap: 6px;
  margin-bottom: 13px;
}
.dossier-badges span {
  border: 1px solid #665072;
  border-radius: 3px;
  font-size: 10px;
  color: #d7bfdc;
  padding: 2px 7px;
}
.dossier-badges span:first-child {
  border-color: var(--game-accent);
  color: var(--game-accent);
}
.dossier-story {
  font-size: 12px;
  color: #c1abc9;
  line-height: 1.95;
}
.dossier-objective {
  margin-top: 15px;
  background: #30263a;
  padding: 12px 14px;
  border-left: 2px solid var(--game-accent);
}
.dossier-objective > span {
  font-size: 9px;
  color: #af94bf;
}
.dossier-objective strong {
  display: block;
  font-size: 14px;
  color: var(--game-accent);
  margin: 4px 0;
}
.dossier-objective p {
  font-size: 11px;
  color: #c2accd;
}
.dossier-numbers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 17px 0;
  padding-bottom: 13px;
  border-bottom: 1px solid #47314f;
  gap: 12px;
}
.dossier-numbers > div > span {
  display: block;
  color: #b09bbd;
  font-size: 10px;
}
.dossier-numbers b {
  font: 23px/1.7 var(--mono);
  color: #ebdbed;
}
.dossier-numbers > div > small {
  display: block;
  font-size: 10px;
  color: var(--game-accent);
}
.dossier-numbers b small {
  font: 10px var(--font);
  color: #b8a0c7;
}
.dossier-play {
  min-height: 40px;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 12px;
}
.dossier-play svg {
  width: 16px;
  height: 16px;
}
.dossier-play > span {
  font-size: 10px;
  font-weight: 400;
  margin-left: auto;
}
.dossier-management {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.dossier-management .secondary-button {
  font-size: 10px;
  padding: 5px;
}
.game-manual {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #503b5b;
}
.manual-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.manual-heading h3 {
  font-size: 15px;
}
.manual-heading > span {
  font: 8px var(--mono);
  letter-spacing: 1.5px;
  color: #ad8dbc;
}
.manual-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1fr;
  gap: 20px;
  margin-top: 18px;
}
.manual-grid > div > span {
  font-size: 10px;
  color: var(--game-accent);
  letter-spacing: 0.5px;
}
.manual-grid p {
  font-size: 11px;
  color: #baa4c8;
  line-height: 1.95;
  margin-top: 8px;
}
.chapter-rule {
  display: flex;
  align-items: start;
  gap: 11px;
  margin-top: 21px;
  padding: 13px 15px;
  background: #2b2135;
  border: 1px solid #4b3656;
  border-radius: 4px;
}
.chapter-rule > svg {
  color: var(--game-accent);
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.chapter-rule strong {
  font-size: 11px;
  font-weight: 500;
}
.chapter-rule p {
  font-size: 11px;
  color: #b49bbf;
  margin-top: 3px;
  line-height: 1.8;
}
.challenge-reward-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #b99dc6;
  margin-top: 14px;
  line-height: 1.8;
}
.challenge-reward-note svg {
  width: 14px;
  height: 14px;
  color: var(--pink);
}
.micro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 204px;
  gap: 23px;
  --game-accent: #92e2c1;
}
.micro-main {
  min-width: 0;
}
.micro-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.micro-hud > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.micro-hud small {
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: #b8a0c5;
}
.micro-hud b {
  font: 20px var(--mono);
  letter-spacing: 1px;
  color: var(--game-accent);
}
.micro-hud .micro-life {
  color: #e9a3c3;
  font-size: 14px;
  letter-spacing: 2px;
  flex: 1;
  align-items: center;
}
.micro-life i {
  font-style: normal;
  color: #725d80;
}
.micro-stage {
  position: relative;
  padding: 5px;
  border: 1px solid #7a5d89;
  background: #12101b;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 5px 0 #100e18;
}
.micro-stage canvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1.6;
  image-rendering: pixelated;
  display: block;
  outline-offset: 0;
}
.micro-splash {
  position: absolute;
  inset: 5px;
  background: #171525e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  text-align: center;
  padding: 20px;
}
.micro-splash > span {
  font: 8px var(--mono);
  letter-spacing: 1.5px;
  color: #b4a0c2;
}
.micro-splash h3 {
  font-size: 20px;
  line-height: 1.8;
}
.micro-splash h3 em {
  font: 25px var(--mono);
  font-style: normal;
  color: var(--game-accent);
}
.micro-splash p {
  font-size: 11px;
  color: #c7b0d4;
  max-width: 330px;
}
.micro-splash .primary-button {
  max-width: 225px;
  min-height: 37px;
}
.micro-splash small {
  font-size: 9px;
  color: #b298bf;
  max-width: 330px;
  line-height: 1.9;
}
.micro-countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #1c14285c;
  color: #e9d9ed;
  font: 80px var(--mono);
  text-shadow: 4px 4px #6b4273;
}
.micro-progress {
  margin-top: 18px;
}
.micro-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  color: #c6adcf;
}
.micro-progress b {
  font: 11px var(--mono);
  color: var(--game-accent);
  white-space: nowrap;
}
.micro-progress .progress-fill {
  width: 0;
  background: var(--game-accent);
}
.micro-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 19px;
  gap: 15px;
}
.micro-dpad {
  display: grid;
  grid-template-columns: 32px 32px 32px;
  grid-template-rows: 27px 27px;
  gap: 4px;
}
.micro-dpad button {
  width: 32px;
  height: 27px;
  border: 1px solid #695179;
  background: #3a2b46;
  border-radius: 4px;
  color: #dbc5e4;
  touch-action: none;
  font: 16px var(--mono);
}
.micro-dpad button:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}
.micro-dpad button:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.micro-dpad button:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}
.micro-dpad button:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
}
.micro-action-buttons {
  display: flex;
  gap: 9px;
}
.micro-action-buttons button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  background: #3c2b48;
  border: 1px solid #82608f;
  border-radius: 5px;
  font-size: 11px;
  touch-action: none;
  min-height: 42px;
}
.micro-action-buttons b {
  font: 12px var(--mono);
  color: #f0d2a7;
  border: 1px solid #b18baf;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  display: grid;
  place-items: center;
}
.micro-action-buttons button:first-child {
  border-color: #79af97;
  background: #2f443d;
}
.micro-action-buttons button:first-child b {
  color: var(--mint);
  border-color: #74b599;
}
.micro-controls button:active {
  background: #664872;
  transform: translateY(2px);
}
.micro-manual {
  border-left: 1px solid #4b3657;
  padding-left: 20px;
}
.micro-manual-tag {
  font: 7px var(--mono);
  letter-spacing: 1.1px;
  color: #a98bbb;
}
.micro-manual > h3 {
  font-size: 18px;
  color: var(--game-accent);
  margin: 13px 0 12px;
}
.micro-manual > p,
.micro-manual-tip p,
.micro-chapter p {
  font-size: 11px;
  line-height: 1.95;
  color: #c5acd0;
}
.micro-manual-tip {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #4a3355;
}
.micro-manual-tip span,
.micro-chapter span {
  font-size: 10px;
  color: #d9c191;
  display: block;
  margin-bottom: 7px;
}
.micro-chapter {
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid #4a3355;
}
.micro-chapter span {
  color: #b9cbbd;
}
.micro-manual > small {
  font-size: 10px;
  color: #aa8fba;
  line-height: 1.9;
  display: block;
  margin-top: 18px;
}
.micro-result {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 23px;
  border: 1px solid #6c527c;
  border-radius: 5px;
  padding: 18px;
  background: #2b2335;
  align-items: center;
}
.micro-result > div > span {
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: var(--mint);
}
.micro-result h3 {
  font-size: 15px;
  margin: 6px 0;
}
.micro-result p {
  font-size: 11px;
  color: #dec092;
}
.micro-result > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 160px;
}
.micro-result .primary-button,
.micro-result .secondary-button {
  font-size: 10px;
}
.tutorial-guide {
  position: fixed;
  left: 113px;
  bottom: 25px;
  width: 370px;
  border: 1px solid #72977f;
  border-radius: 7px;
  background: #242b2a;
  box-shadow: 0 15px 50px #0008;
  z-index: 20;
  overflow: hidden;
}
.tutorial-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 11px 15px;
  border-bottom: 1px solid #405248;
  font-size: 10px;
  color: #c8dfcd;
}
.tutorial-top b {
  font: 9px var(--mono);
  color: var(--mint);
  margin-left: 7px;
}
.tutorial-top button {
  font-size: 9px;
  color: #b0c4b8;
  padding: 0;
}
.tutorial-body {
  display: flex;
  align-items: start;
  gap: 12px;
  padding: 15px;
}
.tutorial-badge {
  height: 33px;
  width: 33px;
  background: #324c3f;
  display: grid;
  place-items: center;
  border: 1px solid #5d806b;
  border-radius: 4px;
  flex-shrink: 0;
  color: var(--mint);
}
.tutorial-badge svg {
  width: 19px;
  height: 19px;
}
.tutorial-body h3 {
  font-size: 12px;
  font-weight: 600;
  color: #e1efdf;
}
.tutorial-body p {
  font-size: 11px;
  color: #b8c9bd;
  line-height: 1.9;
  margin-top: 5px;
}
.tutorial-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 0 15px 14px;
}
.tutorial-dots {
  display: flex;
  gap: 4px;
}
.tutorial-dots i {
  height: 3px;
  width: 18px;
  background: #486151;
}
.tutorial-dots i.done {
  background: var(--mint);
}
.tutorial-bottom button {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--mint);
  font-size: 10px;
}
.tutorial-bottom svg {
  width: 13px;
  height: 13px;
}
.tutorial-focus {
  outline: 2px solid #8ddbb9 !important;
  outline-offset: 4px;
  box-shadow: 0 0 25px #82d8ad26;
}
.game-manual .manual-grid > div {
  border-top: 1px solid #4f395b;
  padding-top: 13px;
}
@media (max-width: 850px) {
  .dossier-layout {
    gap: 18px;
  }
  .micro-layout {
    grid-template-columns: minmax(0, 1fr) 175px;
    gap: 15px;
  }
  .micro-manual {
    padding-left: 15px;
  }
  .micro-action-buttons button {
    padding: 8px;
  }
  .micro-action-buttons b {
    height: 20px;
    width: 20px;
  }
  .micro-splash {
    gap: 9px;
  }
  .micro-splash h3 {
    font-size: 17px;
  }
  .micro-splash h3 em {
    font-size: 21px;
  }
  .micro-splash small {
    font-size: 8px;
  }
  .welcome-copy {
    padding: 42px 25px 23px;
  }
  .welcome-copy h3 {
    font-size: 27px;
  }
  .welcome-visual {
    min-height: 610px;
  }
  .welcome-art-title {
    left: 23px;
  }
  .welcome-art-title strong {
    font-size: 55px;
  }
  .welcome-art-title small {
    font-size: 12px;
    letter-spacing: 4px;
  }
  .welcome-art-title > span {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .welcome-art-footer {
    left: 20px;
    right: 20px;
    font-size: 10px;
  }
  .tutorial-guide {
    left: 92px;
    width: 350px;
  }
  .manual-grid {
    gap: 15px;
  }
}
@media (max-width: 650px) {
  .welcome-experience {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .welcome-visual {
    min-height: 190px;
    max-height: 190px;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #60416f;
  }
  .welcome-visual canvas {
    left: 0;
    top: -35%;
    height: 175%;
    width: 100%;
    object-fit: cover;
    opacity: 0.5;
  }
  .welcome-art-title {
    top: 22px;
    left: 23px;
  }
  .welcome-art-title > span {
    font-size: 7px;
    margin-bottom: 10px;
  }
  .welcome-art-title strong {
    font-size: 38px;
    line-height: 0.9;
  }
  .welcome-art-title strong br {
    display: none;
  }
  .welcome-art-title strong em {
    margin-left: 8px;
  }
  .welcome-art-title small {
    font-size: 11px;
    letter-spacing: 5px;
    margin-top: 12px;
  }
  .welcome-art-footer {
    bottom: 14px;
    font-size: 9px;
    padding-top: 10px;
    left: 23px;
    right: 23px;
  }
  .welcome-copy {
    padding: 23px 24px 23px;
  }
  .welcome-kicker {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .welcome-copy h3 {
    font-size: 25px;
    line-height: 1.5;
    margin: 10px 0 12px;
    letter-spacing: 1px;
  }
  .welcome-copy h3 br {
    display: none;
  }
  .welcome-copy > p {
    font-size: 11px;
    line-height: 1.9;
  }
  .welcome-features {
    gap: 13px;
    margin: 20px 0;
  }
  .welcome-features b {
    font-size: 11px;
  }
  .welcome-features small {
    font-size: 10px;
  }
  .welcome-features svg {
    width: 19px;
    height: 19px;
  }
  .welcome-start {
    font-size: 11px;
    min-height: 40px;
  }
  .welcome-note {
    font-size: 9px;
    margin-top: 13px;
  }
  .welcome-skip {
    margin-top: 14px;
  }
  .dossier-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dossier-screen canvas {
    max-height: 210px;
    object-fit: fill;
  }
  .dossier-physical {
    padding: 10px 0;
    margin-top: 13px;
  }
  .dossier-physical canvas {
    width: 75px;
    height: 55px;
  }
  .dossier-physical strong {
    font-size: 10px;
  }
  .dossier-story {
    font-size: 12px;
  }
  .dossier-numbers {
    margin: 14px 0;
  }
  .manual-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .manual-grid p {
    font-size: 12px;
    margin-top: 6px;
  }
  .manual-grid > div > span {
    font-size: 11px;
  }
  .game-manual {
    margin-top: 23px;
  }
  .chapter-rule p {
    font-size: 11px;
  }
  .challenge-reward-note {
    align-items: start;
    font-size: 10px;
  }
  .micro-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .micro-manual {
    border: 0;
    border-top: 1px solid #4b3657;
    padding: 17px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 18px;
  }
  .micro-manual-tag {
    grid-column: 1/-1;
  }
  .micro-manual > h3 {
    font-size: 15px;
    margin: 0;
    grid-column: 1/-1;
  }
  .micro-manual > p {
    grid-column: 1/-1;
  }
  .micro-manual-tip,
  .micro-chapter {
    margin: 5px 0 0;
    padding-top: 10px;
  }
  .micro-manual > small {
    grid-column: 1/-1;
    font-size: 10px;
    margin-top: 5px;
  }
  .micro-manual > small br {
    display: none;
  }
  .micro-stage canvas {
    max-height: none;
    aspect-ratio: 1.6;
  }
  .micro-hud b {
    font-size: 17px;
  }
  .micro-hud .micro-life {
    font-size: 11px;
    letter-spacing: 1px;
  }
  .micro-splash {
    gap: 9px;
    padding: 12px;
  }
  .micro-splash > span {
    font-size: 7px;
  }
  .micro-splash h3 {
    font-size: 15px;
    line-height: 1.5;
  }
  .micro-splash h3 em {
    font-size: 18px;
  }
  .micro-splash p {
    font-size: 10px;
  }
  .micro-splash small {
    display: none;
  }
  .micro-splash .primary-button {
    min-height: 33px;
    font-size: 10px;
    max-width: 190px;
  }
  .micro-progress > div:first-child {
    font-size: 10px;
    line-height: 1.8;
  }
  .micro-controls {
    gap: 8px;
    margin-top: 15px;
  }
  .micro-dpad {
    grid-template-columns: 29px 29px 29px;
    grid-template-rows: 26px 26px;
    gap: 3px;
  }
  .micro-dpad button {
    height: 26px;
    width: 29px;
    font-size: 15px;
  }
  .micro-action-buttons {
    gap: 6px;
    flex: 1;
    justify-content: flex-end;
  }
  .micro-action-buttons button {
    padding: 8px 7px;
    gap: 4px;
    font-size: 10px;
    min-height: 40px;
  }
  .micro-action-buttons b {
    height: 19px;
    width: 19px;
    font-size: 10px;
  }
  .micro-result {
    align-items: stretch;
    flex-direction: column;
    padding: 15px;
    gap: 14px;
  }
  .micro-result > div:last-child {
    flex-direction: row;
    width: 100%;
    gap: 10px;
  }
  .micro-result > div:last-child > button {
    flex: 1;
  }
  .tutorial-guide {
    left: 14px;
    right: 14px;
    bottom: 81px;
    width: auto;
    max-width: 390px;
    margin: auto;
  }
  .tutorial-body {
    padding: 12px;
    gap: 10px;
  }
  .tutorial-top {
    padding: 9px 12px;
  }
  .tutorial-bottom {
    padding: 0 12px 12px;
  }
  .tutorial-body h3 {
    font-size: 12px;
  }
  .tutorial-body p {
    font-size: 11px;
    line-height: 1.8;
  }
  .tutorial-focus {
    outline-offset: 2px;
  }
  .cart-stars {
    bottom: 81px;
    font-size: 8px;
  }
  .dossier-management .secondary-button {
    min-height: 37px;
  }
  .dossier-play {
    font-size: 11px;
  }
  .dossier-play > span {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .welcome-art-title {
    animation: signal-arrives 0.7s ease-out;
  }
  .welcome-copy {
    animation: signal-arrives 0.65s ease-out 0.12s both;
  }
  .dossier-screen-label i {
    animation: signal-pulse 2s ease-in-out infinite;
  }
  .tutorial-guide {
    animation: toast-in 0.3s ease-out;
  }
  .cartridge-card:hover canvas {
    filter: brightness(1.12);
  }
}
@keyframes signal-arrives {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes signal-pulse {
  50% {
    opacity: 0.3;
  }
}

.collection-intro {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #47324f;
}
.collection-intro > span {
  font: 24px var(--mono);
  color: var(--mint);
  white-space: nowrap;
}
.collection-intro small {
  font: 10px var(--font);
  color: #b5a0c2;
}
.collection-intro p {
  font-size: 11px;
  line-height: 1.9;
  color: #bda6cb;
  max-width: 380px;
  margin-left: auto;
}
.gameplay-tabs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 0 0 15px;
}
.gameplay-tabs button {
  font-size: 10px;
  color: #b49ac2;
  border: 1px solid #4d3659;
  padding: 5px 9px;
  border-radius: 3px;
}
.gameplay-tabs button:hover {
  color: var(--mint);
}
.gameplay-tabs button.selected {
  color: #b8ead2;
  background: #2d4239;
  border-color: #5f8e75;
}
dialog[data-view="collection"] {
  width: 860px;
}
.dossier-trial {
  margin-top: 2px;
}
@media (max-width: 650px) {
  .collection-intro {
    flex-wrap: wrap;
    gap: 9px 18px;
    margin-bottom: 16px;
  }
  .collection-intro > span {
    font-size: 20px;
  }
  .collection-intro p {
    margin: 0;
    flex-basis: 100%;
    font-size: 11px;
  }
  .gameplay-tabs {
    gap: 6px;
  }
  .gameplay-tabs button {
    font-size: 10px;
    padding: 5px 8px;
  }
  .collection-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.currency strong,
.arcade-stats strong,
.dossier-numbers b,
.micro-hud b {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 360px) {
  .micro-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  .micro-action-buttons {
    flex-basis: 100%;
    justify-content: center;
  }
  .micro-splash > p {
    display: none;
  }
  .micro-splash {
    gap: 7px;
    padding: 10px;
  }
  .micro-splash h3 {
    font-size: 14px;
  }
  .micro-splash h3 em {
    font-size: 16px;
  }
  .micro-life {
    font-size: 10px !important;
    letter-spacing: 0 !important;
  }
  .dossier-physical strong {
    font-size: 9px;
  }
}