@font-face {
  font-family: Tide;
  src: url("assets/Fonts/FusionPixel-12px-Prop-zh_hans.ttf");
}
@font-face {
  font-family: TideBold;
  src: url("assets/Fonts/FusionPixel-12px-Prop-zh_hans-Bold.ttf");
  font-weight: 700;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #030c14;
  color: #f6eed8;
  font-family: Tide, system-ui;
}
#game {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 720px;
  transform-origin: center;
  overflow: hidden;
  isolation: isolate;
  background: #071420;
  touch-action: manipulation;
  box-shadow: 0 0 90px #0008;
}
button {
  font-family: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
.w {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  pointer-events: auto;
  line-height: 1.35;
}
.w.Label {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.w.Button {
  align-items: center;
  justify-content: center;
  appearance: none;
  border-radius: 0;
  margin: 0;
  touch-action: manipulation;
  user-select: none;
  border-width: 1px;
  border-color: #56412b;
  box-shadow: 0 3px 0 #030a12;
  transition:
    filter 60ms,
    transform 60ms;
}
.w.Button:hover:not(:disabled) {
  filter: brightness(1.13);
}
.w.Button:active:not(:disabled) {
  filter: brightness(0.9);
  transform: translateY(1px);
}
.w:focus-visible,
.gamepad .w:focus {
  outline: 3px solid #fff0bb;
  outline-offset: -3px;
}
.w.Button .caption {
  pointer-events: none;
  white-space: pre-wrap;
}
.paint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.ScrollView {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a67e42 #081928;
}
.progress-fill {
  height: 100%;
  pointer-events: none;
}
.no-pointer,
.no-pointer *,
.box-only .w {
  pointer-events: none !important;
}
#feature-window {
  position: absolute !important;
  inset: 28px 38px !important;
  width: auto !important;
  height: auto !important;
  padding: 14px !important;
  gap: 12px !important;
  box-shadow: 0 18px 65px #000a;
}
#feature-window > .w:first-child {
  min-height: 48px !important;
  padding: 0 0 8px !important;
}
#page-navigation {
  padding: 12px !important;
  background: #081928;
  border-right: 1px solid #56412b;
}
#feature-body {
  padding: 10px 12px !important;
}
#page-content > .w {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
  align-content: start;
  align-items: start;
}
#page-content > .w > .w {
  grid-column: 1/-1;
  width: 100% !important;
}
#page-content > .w > .chrome-card {
  grid-column: auto;
}
#page-content .Label,
#adventure-scroll .Label {
  font-size: 16px !important;
}
#page-content .Button,
#adventure-scroll .Button {
  font-size: 16px !important;
  min-height: 40px;
}
#adventure-window {
  inset: 28px 38px !important;
  border: 2px solid #a67e42;
  box-shadow: 0 18px 65px #000a;
  padding: 12px !important;
  background: #071420 !important;
}
#adventure-window:not([data-page="battle"]) > .w {
  display: grid !important;
  grid-template-columns: 184px minmax(0, 1fr);
  grid-template-rows: 48px auto minmax(0, 1fr);
  gap: 12px !important;
}
#adventure-window:not([data-page="battle"]) > .w > .w:first-child {
  grid-column: 1/-1;
  grid-row: 1;
  border-bottom: 1px solid #56412b;
}
#adventure-tabs {
  grid-column: 1;
  grid-row: 2/4;
  flex-direction: column !important;
  align-self: stretch;
  background: #081928;
  padding: 12px !important;
}
#adventure-tabs > .Button {
  width: 100% !important;
  flex: 0 0 44px !important;
  font-size: 17px !important;
}
#adventure-feedback {
  grid-column: 2;
  grid-row: 2;
  min-height: 24px !important;
  height: auto !important;
  padding: 4px 12px !important;
}
#adventure-scroll {
  grid-column: 2;
  grid-row: 3;
  padding: 8px 16px !important;
  background: #0f2334;
}
#adventure-return {
  grid-column: 2;
  grid-row: 2;
  z-index: 2;
}
#adventure-window[data-page="pets"] #adventure-content {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
  align-content: start;
}
#adventure-content > .w {
  min-width: 0;
}
#adventure-window[data-page="pets"] #adventure-content > .w {
  grid-column: 1/-1;
}
#adventure-window[data-page="pets"] #adventure-content > .chrome-card {
  grid-column: auto;
}
#adventure-window[data-page="story"] #adventure-content,
#adventure-window[data-page="beyond"] #adventure-content {
  max-width: 860px;
  margin: auto;
  gap: 16px !important;
}
#adventure-window[data-page="battle"] {
  inset: 18px 24px !important;
  padding: 16px !important;
}
#battle-controls {
  padding: 8px 12px !important;
  border-top: 1px solid #56412b;
}
#battle-controls > .w:last-child {
  width: 620px !important;
  align-self: center;
}
#battle-controls > .Label {
  font-size: 16px !important;
  text-align: center;
}
#battle-arena {
  min-height: 300px !important;
}
#battle-arena .Label {
  font-size: 14px !important;
}
#modal-window {
  padding: 22px !important;
  box-shadow: 0 20px 80px #000b;
}
#modal-window > .ScrollView {
  padding: 12px 16px;
}
#modal-window .Label {
  font-size: 17px !important;
}
#modal-window .Button {
  font-size: 17px !important;
}
#home-console #fishing-heading {
  font-size: 17px !important;
  height: 24px !important;
}
#home-console #fishing-detail {
  font-size: 13px !important;
  height: 20px !important;
}
#home-console #fishing-timing {
  height: 20px !important;
}
#home-console #home-fishing-status {
  height: 50px !important;
}
#home-school .Label {
  font-size: 14px !important;
}
#home-school .Button {
  font-size: 16px !important;
}
#orientation-hint {
  display: none;
  position: fixed;
  bottom: 10%;
  left: 12%;
  right: 12%;
  text-align: center;
  line-height: 1.7;
  color: #a7bbbc;
  font-size: 14px;
  pointer-events: none;
}
.portrait #orientation-hint {
  display: block;
}
#loading,
#error {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background: #071420;
  padding: 24px;
  text-align: center;
}
#loading b {
  font-size: 48px;
  color: #f2c46f;
}
#loading progress {
  accent-color: #f2c46f;
  width: 180px;
}
#error button {
  padding: 12px 24px;
  background: #f2c46f;
  color: #071420;
  border: 0;
}
#error[hidden],
#loading[hidden] {
  display: none;
}
#error-text {
  max-width: 600px;
  overflow-wrap: anywhere;
}
#home-fish:after {
  content: "空格 / A";
  position: absolute;
  right: 8px;
  bottom: 3px;
  font-size: 10px;
  color: #5b4b32;
  pointer-events: none;
}

#home-header .Button .caption {
  white-space: nowrap;
}

/* English needs proportional Latin metrics; preserve the original Chinese layout. */
html:lang(en) .w { font-family: system-ui, sans-serif !important; }
html:lang(en) #home-header > .Label { font-size: 19px !important; }
html:lang(en) #home-header .Button { font-size: 12px !important; }
html:lang(en) #home-navigation .Label { font-size: 12px !important; }
html:lang(en) #home-fish:after { content: "Space / A"; }
.Button[aria-pressed="true"] { outline: 2px solid #f2c46f; outline-offset: -2px; }

/* The action caption and shortcut each have their own vertical space. */
#home-fish {
  padding: 3px 8px 16px !important;
}
#home-fish .caption {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:lang(en) #home-fish { font-size: 20px !important; }
#home-fish:after { line-height: 12px; }

/* Desktop reading hierarchy: quiet surfaces, distinct modules, one accent per action. */
#game .calm-panel {
  background: #0d1924 !important;
  border: 1px solid #3a5261 !important;
  border-radius: 12px;
  color: #e7edf0;
  box-shadow: 0 24px 80px #000b;
}
#game .calm-panel .w,
#game .calm-panel button {
  font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0 !important;
}
#game .calm-panel .Label {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #d5e0e6 !important;
}
#game .calm-panel .Label[data-tone="muted"] {color: #9aadb9 !important;font-size: 13px !important;}
#game .calm-panel .Label[data-tone="teal"] {color: #87c9bb !important;}
#game .calm-panel .Label[data-tone="gold"] {color: #e5c68d !important;}
#game .calm-panel .Label[data-tone="danger"] {color: #e9a393 !important;}
#game .calm-panel .Label[data-text-role="heading"] {
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
  color: #eef3f6 !important;
}
#game .calm-panel .Label[data-text-role="tag"] {
  font-size: 12px !important;
  border-color: #354c5a !important;
  border-radius: 4px;
}
#feature-window {padding: 18px !important;gap: 16px !important;}
#feature-window > .w:first-child,
#adventure-window:not([data-page="battle"]) > .w > .w:first-child,
#modal-heading {
  background: transparent !important;
  border-color: #2c4251 !important;
  min-height: 52px !important;
}
#page-navigation, #adventure-tabs {
  padding: 8px !important;
  gap: 8px !important;
  background: #101f2b !important;
  border: 1px solid #233b4a !important;
  border-radius: 8px;
}
#feature-body {padding: 0 4px 0 0 !important;background: transparent !important;}
#page-content, #adventure-scroll {
  background: transparent !important;
  padding: 0 12px 8px 4px !important;
}
#page-content > .w {gap: 18px !important;}
#page-content > .w > .panel-section {grid-column: 1/-1;}
#game .calm-panel .chrome-card,
#game .calm-panel .panel-section {
  padding: 18px !important;
  gap: 12px !important;
  border: 1px solid #304858 !important;
  border-radius: 8px;
  background: #172a38 !important;
  box-shadow: 0 3px 10px #0002;
  min-width: 0;
}
.panel-section {display: flex;flex-direction: column;}
#game .calm-panel .panel-section > .w {max-width: 100%;}
#game .calm-panel .chrome-card .chrome-card {
  background: #112330 !important;
  border-color: #263f50 !important;
  padding: 12px !important;
}
#game .calm-panel .chrome-card > .Label:first-child {
  font-size: 17px !important;
  font-weight: 650;
  color: #e7edf0 !important;
}
#game .calm-panel .Button {
  border: 1px solid #3a5668 !important;
  border-radius: 5px;
  background: #203b4d !important;
  color: #dce8ef !important;
  font-size: 14px !important;
  line-height: 1.35;
  min-height: 42px;
  box-shadow: none !important;
}
#game .calm-panel .Button[data-chrome="primary"] {
  background: #dfbb78 !important;
  border-color: #dfbb78 !important;
  color: #15222d !important;
}
#game .calm-panel .Button[data-chrome="quiet"] {
  border-color: transparent !important;
  background: transparent !important;
  color: #aebfc9 !important;
}
#game .calm-panel .Button[data-chrome="tab"] {
  border-color: transparent !important;
  background: #142632 !important;
  color: #9fb3c0 !important;
  font-weight: 500 !important;
}
#game .calm-panel .Button[aria-current="page"] {
  background: #2b4351 !important;
  border-left: 3px solid #dfbb78 !important;
  color: #f2d69e !important;
  font-weight: 650 !important;
}
#game .calm-panel .Button:disabled {
  background: #142632 !important;
  border-color: #283f4d !important;
  color: #7f96a5 !important;
}
#game .calm-panel .Button[data-chrome="danger"] {color: #e9a393 !important;border-color: #86564e !important;}
#game .calm-panel .ProgressBar {border-radius: 3px;overflow: hidden;}
#game .calm-panel .ScrollView {scrollbar-color: #486170 transparent;}
#game .calm-panel .reading-note {min-width: 0;display: flex;flex-direction: column;gap: 4px;}
#game .calm-panel .reading-note:not(.expanded) > .Label {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#game .calm-panel .reading-toggle {
  align-self: flex-start;
  background: transparent;
  color: #93b8cb;
  border: 0;
  border-bottom: 1px solid #436172;
  font-size: 12px;
  padding: 4px 0;
  min-height: 28px;
  text-align: left;
}
.reading-toggle:focus-visible {outline: 2px solid #e5c68d;outline-offset: 3px;}
#adventure-window[data-page="pets"] #adventure-content > .panel-section {grid-column: 1/-1;}
#adventure-window[data-page="bag"] #adventure-content {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px !important;
  align-items: start;
}
#adventure-window[data-page="bag"] #adventure-content > .panel-section {grid-column: 1/-1;}
#adventure-window[data-page="bag"] #adventure-content > .chrome-card {width: 100% !important;}
#game #adventure-feedback:empty {display: none !important;}
/* Formation, companion selection, and care are separate work areas. */
#game .calm-panel .formation-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
#game .calm-panel .formation-grid .Button {height: auto !important;min-height: 68px;padding: 10px !important;font-size: 13px !important;}
#game .calm-panel .pet-picker {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px !important;
}
#game .calm-panel .pet-picker > .Panel {display: contents !important;}
#game .calm-panel .pet-picker .Button {width: 100% !important;height: auto !important;min-height: 44px;font-size: 13px !important;padding: 8px !important;}
#game .calm-panel h3 {font-size: 15px;line-height: 1.5;font-weight: 600;color: #dfeaf0;margin: 0 0 4px;grid-column: 1/-1;}
#game #adventure-content > [id^="pet-card-"] {
  grid-column: 1/-1;
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px !important;
  align-items: start;
}
#game #adventure-content > [id^="pet-card-"] > .w,
#game #adventure-content > [id^="pet-card-"] > .reading-note {grid-column: 1/-1;}
#game .calm-panel .pet-actions {
  display: flex;flex-direction: column;gap: 8px;
  padding: 14px;background: #10232f;border: 1px solid #2c4554;border-radius: 6px;min-width: 0;
}
#game .calm-panel .pet-actions .Button {height: auto !important;min-height: 44px;padding: 10px !important;font-size: 13px !important;}
#game .calm-panel .recipe-actions {display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 10px;}
#game .calm-panel .recipe-card > .Label:first-child {font-size: 17px !important;color: #eef3f6 !important;font-weight: 650;}
#game #page-close {width: 108px !important;}
#game #adventure-close {width: 100px !important;}
#game .calm-panel .pet-picker > [id^="campaign-equip-"] {grid-column: 1/-1;}
#game #adventure-feedback:has(> .caption:empty),
#game #modal-window > .Label:has(> .caption:empty) {display: none !important;}
#game #adventure-window[data-page="pets"] #adventure-content > [id^="pet-card-"] {grid-column: 1/-1 !important;width: 100% !important;}
#game .calm-panel .Button {height: auto !important;padding-top: 8px !important;padding-bottom: 8px !important;}
#game .calm-panel .recipe-card {display: flex;flex-direction: column;}

/* Shared pacing and navigation across every feature, adventure and settings page. */
#page-content, #adventure-scroll, .calm-panel .ScrollView {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
#page-content > .w {align-items: stretch;gap: 16px !important;}
#game .calm-panel .chrome-card,
#game .calm-panel .panel-section {padding: 16px !important;gap: 10px !important;}
#game .calm-panel .Label {line-height: 1.5 !important;}
#page-content > .w > .chrome-card > .Button:last-child {margin-top: auto !important;}
#game .calm-panel .Button:focus-visible {
  outline: 2px solid #f2d69e;
  outline-offset: 2px;
}
@keyframes panel-arrive {from {opacity: .35} to {opacity: 1}}
#game[data-motion="true"] .calm-panel {animation: panel-arrive 100ms ease-out;}
@media (prefers-reduced-motion: reduce) {
  #game .calm-panel {animation: none !important;}
  .w.Button {transition: none !important;}
}
#game[data-motion="false"] .w.Button {transition: none !important;}