:root { color-scheme: light; background: #f4bd27; }
* { box-sizing: border-box; }
html { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  background: #f4bd27;
  font-family: Inter, system-ui, sans-serif;
}
/*
 * Giữ canvas map ở khung 16:9 gốc, nhưng để phần viewport cao hơn có nền
 * cùng hệ với trang GDD. Strip chuyển tiếp nối màu cát sáng của map sang
 * cát base; background chỉ lấp viewport cao và không tham gia tính scroll height.
 */
body.menu-page-body {
  background-color: #f7bf32;
  background-image:
    url("../assets/menu-ui/full-menu-mockup/shell-tide-album-menu-bg-bottom-transition-1920x540.png"),
    url("../assets/backgrounds/loopable-1920x1080/shell-tide-bg-loop-02-scroll-1920x1080.webp");
  background-position:
    center 56.25vw,
    center 84.375vw;
  background-size:
    100vw 28.125vw,
    100vw 56.25vw;
  background-repeat: no-repeat, repeat-y;
}
.menu-page {
  position: relative;
  width: 100vw;
  min-height: 100%;
}
.map-shell { position: relative; width: 100vw; aspect-ratio: 16 / 9; background: transparent; }
.map-stage { display: block; width: 100%; height: 100%; outline: none; touch-action: manipulation; }
.rescue-journal {
  position: fixed;
  z-index: 5;
  top: calc(6.6667vw - 2px);
  right: max(10px, 1.0417vw);
  width: clamp(278px, 20vw, 326px);
  padding: clamp(6px, .55vw, 10px) clamp(10px, .8vw, 15px);
  border: 12px solid transparent;
  border-width: 12px 8px;
  border-image-source: url("../assets/menu-ui/generated-props/nine-slice-bars-v2/top-header/top-header-bar-sprite-200x126.png");
  border-image-slice: 52 31 fill;
  border-image-width: 12px 8px;
  border-image-repeat: stretch;
  color: #fff3cf;
  filter: drop-shadow(0 10px 14px rgba(8, 59, 72, .28));
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  pointer-events: none;
}
.rescue-journal__kicker {
  margin: 0 0 2px;
  color: #ffe783;
  font-size: clamp(8px, .62vw, 10px);
  font-weight: 950;
  letter-spacing: .13em;
  text-shadow: 0 2px 2px rgba(8, 59, 72, .48);
}
.rescue-journal h1 {
  margin: 0;
  color: #fff3cf;
  font-size: clamp(19px, 1.45vw, 27px);
  line-height: 1.05;
  -webkit-text-stroke: 1px #174d58;
  paint-order: stroke fill;
  text-shadow: 0 3px 3px rgba(8, 59, 72, .52);
}
.rescue-journal__progress {
  height: clamp(7px, .55vw, 10px);
  margin: clamp(5px, .5vw, 8px) 0;
  overflow: hidden;
  border: 1px solid rgba(255, 249, 221, .95);
  border-radius: 999px;
  background: rgba(8, 59, 72, .35);
  box-shadow: inset 0 1px 3px rgba(27, 89, 84, .2);
}
.rescue-journal__progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffbd3d, #f0784d);
  transition: width .25s ease;
}
.rescue-journal__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.rescue-journal__stats span {
  min-width: 0;
  color: rgba(255, 243, 207, .9);
  font-size: clamp(8px, .65vw, 11px);
  font-weight: 850;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(8, 59, 72, .52);
}
.rescue-journal__stats strong {
  display: block;
  margin-bottom: 2px;
  color: #fff8df;
  font-size: clamp(13px, 1vw, 18px);
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: .5px #174d58;
  paint-order: stroke fill;
}
.rescue-journal__selected {
  margin: clamp(5px, .55vw, 8px) 0;
  padding: clamp(5px, .45vw, 8px);
  border-radius: 12px;
  color: #7b471f;
  background: rgba(255, 247, 211, .92);
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.coach-dialog {
  width: min(1080px, calc(100vw - 32px));
  max-width: none;
  max-height: min(780px, calc(100dvh - 32px));
  margin: auto;
  padding: clamp(18px, 2.2vw, 28px);
  overflow: auto;
  border: 18px solid transparent;
  border-width: 18px 12px;
  border-image-source: url("../assets/menu-ui/generated-props/nine-slice-bars-v2/top-header/top-header-bar-sprite-200x126.png");
  border-image-slice: 52 31 fill;
  border-image-width: 18px 12px;
  border-image-repeat: stretch;
  color: #fff3cf;
  background: transparent;
  filter: drop-shadow(0 22px 42px rgba(8, 59, 72, .38));
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
}
.coach-dialog[open] { animation: coach-dialog-enter .28s cubic-bezier(.16, 1, .3, 1) both; }
.coach-dialog::backdrop {
  background: rgba(8, 59, 72, .62);
  backdrop-filter: blur(6px) saturate(.88);
}
.coach-dialog__header,
.coach-detail__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.coach-dialog__kicker,
.coach-detail__role {
  margin: 0 0 4px;
  color: #ffe783;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 2px 2px rgba(8, 59, 72, .48);
}
.coach-dialog h2,
.coach-dialog h3 { margin: 0; }
.coach-dialog h2 {
  color: #fff3cf;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  -webkit-text-stroke: 1px #174d58;
  paint-order: stroke fill;
  text-shadow: 0 3px 3px rgba(8, 59, 72, .52);
}
.coach-dialog__subtitle {
  max-width: 68ch;
  margin: 8px 0 18px;
  color: rgba(255, 243, 207, .9);
  font: 750 13px/1.45 "Trebuchet MS", Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(8, 59, 72, .42);
}
.coach-close,
.coach-carousel__arrow {
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 248, 219, .9);
  border-radius: 50%;
  color: #275b5d;
  background: #fff1bd;
  box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(8, 59, 72, .2);
  cursor: pointer;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), background-color .22s ease, opacity .22s ease;
}
.coach-close { width: 42px; height: 42px; flex: 0 0 auto; }
.coach-close svg { width: 20px; height: 20px; }
.coach-close svg,
.coach-carousel__arrow svg,
.coach-card__lock svg { fill: none; stroke: currentColor; stroke-width: 2.35; stroke-linecap: round; stroke-linejoin: round; }
.coach-close:hover,
.coach-carousel__arrow:hover:not(:disabled) { background: #fff7d8; transform: translateY(-2px); }
.coach-close:active,
.coach-carousel__arrow:active:not(:disabled) { transform: scale(.96); }
.coach-carousel {
  --coach-gap: 16px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 12px;
  align-items: center;
}
.coach-carousel__viewport {
  min-width: 0;
  overflow: hidden;
  padding: 4px;
}
.coach-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--coach-gap) * 2)) / 3);
  gap: var(--coach-gap);
  transform: translate3d(0, 0, 0);
  transition: transform .42s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.coach-carousel__arrow { width: 48px; height: 48px; }
.coach-carousel__arrow svg { width: 24px; height: 24px; }
.coach-carousel__arrow:disabled { opacity: .32; cursor: default; box-shadow: none; }
.coach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 342px;
  padding: 16px 14px 15px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 219, .52);
  border-radius: 22px;
  background: rgba(7, 80, 89, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 22px rgba(8, 59, 72, .18);
  text-align: center;
  animation: coach-card-enter .34s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--coach-order) * 55ms);
}
.coach-card.is-unlocked { border-color: rgba(255, 241, 189, .82); }
.coach-card.is-selected {
  border-color: #fff1bd;
  box-shadow: inset 0 0 0 2px rgba(255, 241, 189, .38), 0 12px 24px rgba(8, 59, 72, .22);
}
.coach-card.is-locked {
  color: rgba(232, 238, 225, .66);
  background: rgba(18, 45, 49, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.coach-card__portrait-wrap {
  display: grid;
  place-items: center;
  width: min(142px, 72%);
  aspect-ratio: 1;
  margin: 2px auto 12px;
  border-radius: 50%;
  background: rgba(255, 247, 211, .13);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 219, .22);
}
.coach-card__portrait {
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(8, 59, 72, .2));
  transition: filter .28s ease, opacity .28s ease, transform .28s ease;
}
.coach-card.is-unlocked:hover .coach-card__portrait { transform: translateY(-3px) scale(1.025); }
.coach-card.is-locked .coach-card__portrait {
  opacity: .32;
  filter: grayscale(1) brightness(.2) contrast(1.25);
}
.coach-card__silhouette {
  display: grid;
  place-items: center;
  width: 78%;
  aspect-ratio: 1.28;
  border-radius: 52% 48% 56% 44%;
  color: rgba(255, 255, 255, .32);
  background: rgba(3, 16, 18, .74);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 950;
  letter-spacing: .1em;
}
.coach-card__lock {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
}
.coach-card__lock {
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 248, 219, .46);
  border-radius: 50%;
  color: #fff1bd;
  background: rgba(16, 35, 38, .88);
}
.coach-card__lock svg { width: 17px; height: 17px; }
.coach-card__status {
  display: inline-flex;
  margin-bottom: 7px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 248, 219, .34);
  border-radius: 999px;
  color: #ffe783;
  background: rgba(8, 59, 72, .28);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.coach-card.is-locked .coach-card__status { color: rgba(238, 232, 202, .58); }
.coach-card h3 {
  color: #fff8df;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.06;
  text-shadow: 0 2px 2px rgba(8, 59, 72, .46);
}
.coach-card__title {
  margin: 5px 0 0;
  color: rgba(255, 243, 207, .75);
  font: 800 11px/1.3 "Trebuchet MS", Arial, sans-serif;
}
.coach-card__unlock {
  margin: 10px 0 0;
  color: rgba(255, 248, 223, .88);
  font: 750 10px/1.35 "Trebuchet MS", Arial, sans-serif;
}
.coach-card__select {
  min-height: 36px;
  margin: auto 14px 0;
  padding: 9px 12px;
  border: 1px solid rgba(255, 248, 219, .82);
  border-radius: 12px;
  color: #69431f;
  background: #fff1bd;
  box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(8, 59, 72, .18);
  font: 950 10px/1 "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), opacity .2s ease, background-color .2s ease;
}
.coach-card__select:hover:not(:disabled) { background: #fff8df; transform: translateY(-2px); }
.coach-card__select:active:not(:disabled) { transform: scale(.97); }
.coach-card__select:disabled {
  opacity: .46;
  color: rgba(255, 248, 223, .76);
  background: rgba(7, 80, 89, .42);
  box-shadow: none;
  cursor: default;
}
.coach-detail {
  margin-top: 18px;
  padding: 17px 18px;
  border: 1px solid rgba(255, 248, 219, .52);
  border-radius: 20px;
  background: rgba(255, 241, 189, .94);
  color: #68431f;
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(8, 59, 72, .16);
  animation: coach-detail-enter .3s cubic-bezier(.16, 1, .3, 1) both;
}
.coach-detail[hidden] { display: none; }
.coach-detail__role { color: #247178; text-shadow: none; }
.coach-detail h3 { color: #68431f; font-size: clamp(21px, 2vw, 28px); }
.coach-detail__grid {
  display: grid;
  grid-template-columns: .8fr 1.1fr 1.1fr;
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid rgba(39, 91, 93, .2);
}
.coach-detail__grid > div { min-width: 0; padding: 12px 14px 0 0; }
.coach-detail__grid > div + div { padding-left: 14px; border-left: 1px solid rgba(39, 91, 93, .2); }
.coach-detail__grid span { display: block; margin-bottom: 4px; color: #247178; font-size: 9px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.coach-detail__grid strong { font-size: 14px; }
.coach-detail__grid p { margin: 0; font: 750 11px/1.45 "Trebuchet MS", Arial, sans-serif; }
.coach-close:focus-visible,
.coach-carousel__arrow:focus-visible,
.coach-card__select:focus-visible { outline: 3px solid #ffe783; outline-offset: 2px; }
@keyframes coach-dialog-enter { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes coach-card-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes coach-detail-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.settings-dialog {
  width: min(720px, calc(100vw - 28px));
  max-width: none;
  max-height: min(620px, calc(100dvh - 28px));
  margin: auto;
  padding: 22px;
  overflow: auto;
  border: 18px solid transparent;
  border-width: 18px 12px;
  border-image-source: url("../assets/menu-ui/generated-props/nine-slice-bars-v2/top-header/top-header-bar-sprite-200x126.png");
  border-image-slice: 52 31 fill;
  border-image-width: 18px 12px;
  border-image-repeat: stretch;
  color: #fff3cf;
  background: transparent;
  filter: drop-shadow(0 18px 34px rgba(8, 59, 72, .34));
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
}
.settings-dialog::backdrop {
  background: rgba(8, 59, 72, .58);
  backdrop-filter: blur(5px) saturate(.9);
}
.settings-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.settings-dialog__kicker,
.settings-panel__label {
  margin: 0 0 4px;
  color: #ffe783;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 2px 2px rgba(8, 59, 72, .48);
}
.settings-dialog h2,
.settings-dialog h3 { margin: 0; }
.settings-dialog h2 {
  color: #fff3cf;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  -webkit-text-stroke: 1px #174d58;
  paint-order: stroke fill;
  text-shadow: 0 3px 3px rgba(8, 59, 72, .52);
}
.settings-dialog__subtitle {
  max-width: 54ch;
  margin: 8px 0 20px;
  color: rgba(255, 243, 207, .88);
  font-size: 13px;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(8, 59, 72, .42);
}
.settings-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid rgba(255, 248, 219, .9);
  border-radius: 50%;
  color: #275b5d;
  background: #fff1bd;
  box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(8, 59, 72, .2);
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.settings-close:hover { background: #fff7d8; }
.settings-close:active { transform: scale(.96); }
.settings-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.settings-dialog__layout {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.settings-tabs { display: grid; align-content: start; gap: 7px; }
.settings-tab,
.locale-options button {
  border: 1px solid rgba(255, 248, 219, .48);
  color: #fff3cf;
  background: rgba(10, 107, 116, .42);
  font: 900 13px/1.2 "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.settings-tab {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 13px;
  text-align: left;
}
.settings-tab:hover,
.locale-options button:hover { background: rgba(255, 247, 211, .2); }
.settings-tab:active,
.locale-options button:active { transform: scale(.98); }
.settings-tab.is-active {
  border-color: #fff8df;
  color: #71431f;
  background: #fff1bd;
  box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(8, 59, 72, .16);
}
.settings-content {
  min-height: 282px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(255, 248, 219, .44);
  border-radius: 20px;
  background: rgba(7, 80, 89, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.settings-panel[hidden] { display: none; }
.settings-panel h3 {
  color: #fff8df;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.15;
  text-shadow: 0 2px 2px rgba(8, 59, 72, .46);
}
.settings-panel > p:not(.settings-panel__label):not(.settings-version) {
  margin: 10px 0 0;
  color: rgba(255, 248, 223, .9);
  font: 700 13px/1.55 "Trebuchet MS", Arial, sans-serif;
}
.settings-panel__note {
  padding: 11px 13px;
  border-radius: 12px;
  color: #70451f !important;
  background: rgba(255, 241, 189, .94);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}
.locale-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.locale-options button {
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 15px;
}
.locale-options button[aria-pressed="true"] {
  border-color: #fff8df;
  color: #71431f;
  background: #fff1bd;
}
.locale-options button span { display: block; margin-bottom: 2px; font-size: 10px; letter-spacing: .12em; }
.credits-list { display: grid; gap: 0; margin: 16px 0 0; }
.credits-list div {
  display: grid;
  grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr);
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 248, 219, .24);
}
.credits-list dt { color: rgba(255, 243, 207, .72); font-size: 11px; font-weight: 800; }
.credits-list dd { margin: 0; color: #fff8df; font-size: 13px; font-weight: 900; }
.settings-version {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 248, 219, .28);
  color: rgba(255, 243, 207, .72);
  font-size: 11px;
}
.settings-version strong { color: #fff8df; font-size: 12px; }
.settings-tab:focus-visible,
.settings-close:focus-visible,
.locale-options button:focus-visible { outline: 3px solid #ffe783; outline-offset: 2px; }
.map-stage canvas,
.chrome-stage canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
}
.map-stage:focus-visible { box-shadow: inset 0 0 0 5px rgba(255, 249, 205, .92); }
.chrome-stage { position: fixed; left: 0; width: 100%; z-index: 10; pointer-events: auto; }
.chrome-stage--header { top: 0; }
.chrome-stage--footer { bottom: 0; height: 7.5vw; }
.chrome-stage--footer canvas { height: 100% !important; }
.menu-resource-triggers {
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100%;
  height: 6.6667vw;
  pointer-events: none;
}
.menu-resource-trigger {
  position: absolute;
  top: 13%;
  height: 74%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.menu-resource-trigger--wallet { left: 59.4%; width: 9.2%; }
.menu-resource-trigger--starfish { left: 70.5%; width: 8.3%; }
.menu-resource-trigger:hover,
.menu-resource-trigger[aria-expanded="true"] { background: rgba(255, 248, 218, .09); }
.menu-resource-trigger:active { transform: scale(.97); }
.menu-resource-trigger:focus-visible { outline: 3px solid #ffe783; outline-offset: -3px; }
.menu-resource-info {
  position: fixed;
  z-index: 12;
  width: min(340px, calc(100vw - 24px));
  padding: 14px 16px 16px;
  border: 14px solid transparent;
  border-width: 14px 9px;
  border-image-source: url("../assets/menu-ui/generated-props/nine-slice-bars-v2/top-header/top-header-bar-sprite-200x126.png");
  border-image-slice: 52 31 fill;
  border-image-width: 14px 9px;
  border-image-repeat: stretch;
  color: #fff3cf;
  background: transparent;
  filter: drop-shadow(0 14px 20px rgba(8, 59, 72, .32));
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  transform-origin: 50% 0;
  animation: menu-resource-info-enter .22s cubic-bezier(.16, 1, .3, 1) both;
}
.menu-resource-info[hidden] { display: none; }
.menu-resource-info__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.menu-resource-info__kicker {
  margin: 0 0 2px;
  color: #ffe783;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .13em;
  text-shadow: 0 2px 2px rgba(8, 59, 72, .48);
}
.menu-resource-info h2 {
  margin: 0;
  color: #fff8df;
  font-size: 23px;
  line-height: 1;
  -webkit-text-stroke: .7px #174d58;
  paint-order: stroke fill;
  text-shadow: 0 2px 2px rgba(8, 59, 72, .48);
}
.menu-resource-info__close {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 248, 219, .9);
  border-radius: 50%;
  color: #275b5d;
  background: #fff1bd;
  box-shadow: inset 0 1px 0 #fff, 0 4px 9px rgba(8, 59, 72, .2);
  cursor: pointer;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .2s ease;
}
.menu-resource-info__close:hover { background: #fff7d8; transform: translateY(-1px); }
.menu-resource-info__close:active { transform: scale(.95); }
.menu-resource-info__description {
  margin: 10px 0 12px;
  color: rgba(255, 248, 223, .92);
  font: 750 13px/1.4 "Trebuchet MS", Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(8, 59, 72, .4);
}
.menu-resource-info__value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 248, 219, .72);
  border-radius: 13px;
  color: #75431f;
  background: rgba(255, 247, 211, .94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
}
.menu-resource-info__value span { font-size: 11px; font-weight: 900; }
.menu-resource-info__value strong { color: #164f59; font-size: 19px; font-variant-numeric: tabular-nums; }
@keyframes menu-resource-info-enter {
  from { opacity: 0; transform: translate3d(0, -7px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.loading-state {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  color: #fff8df;
  background: #f2c83e;
  opacity: 1;
  transition: opacity .28s cubic-bezier(.16, 1, .3, 1);
}
.loading-state.is-leaving { opacity: 0; pointer-events: none; }
.loading-state[hidden] { display: none; }
.loading-state__art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.778vh);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f2c83e url("../assets/backgrounds/loopable-1920x1080/shell-tide-bg-loop-02-scroll-1920x1080.webp") center / 100% 100% no-repeat;
  transform: translate3d(-50%, -50%, 0);
}
.loading-state__sea {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 60.2084%;
  height: 44.3519%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.loading-state__trail { position: absolute; inset: 0; z-index: 1; }
.loading-state__footprint {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: clamp(42px, 3.75%, 76px);
  height: auto;
  opacity: 0;
  filter: brightness(.86) saturate(.9) sepia(.06);
  translate: var(--offset-x, 0px) var(--offset-y, 0px);
  rotate: calc(var(--rotation) + var(--offset-rotation, 0deg));
  animation: loading-footprint-cycle 4.6s cubic-bezier(.45, 0, .55, 1) infinite;
  animation-delay: calc(var(--step) * .32s - 3.2s);
  will-change: opacity;
}
@keyframes loading-footprint-cycle {
  0%, 10% { opacity: 0; }
  20%, 38% { opacity: .8; }
  70%, 100% { opacity: 0; }
}
.loading-state__label {
  position: absolute;
  right: max(18px, 4vw);
  bottom: max(18px, 5vh);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: min(360px, calc(100vw - 36px));
  margin: 0;
  padding: 13px 16px;
  border: 1px solid rgba(255, 248, 219, .88);
  border-radius: 15px;
  color: #fff8df;
  background: rgba(8, 112, 128, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 8px 18px rgba(102, 73, 21, .16);
  text-shadow: 0 2px 2px rgba(7, 74, 87, .4);
  font: 900 clamp(12px, 1.25vw, 17px)/1.2 "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
}
.loading-state__label span { flex: 1; }
.loading-state__label strong { min-width: 3.2ch; color: #ffe783; text-align: right; font-size: 1.08em; }
.loading-state.has-error .loading-state__label { background: rgba(125, 63, 38, .92); }
.loading-state.has-error .loading-state__label strong { display: none; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (min-width: 681px) and (max-width: 1100px) {
  .rescue-journal {
    width: 184px;
    padding: 5px 8px;
    border-width: 12px 8px;
    border-image-width: 12px 8px;
  }
  .rescue-journal__kicker,
  .rescue-journal__progress { display: none; }
  .rescue-journal h1 { font-size: 18px; }
  .rescue-journal__selected { margin-bottom: 0; }
}

@media (max-width: 680px) {
  .coach-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 14px 10px; }
  .coach-dialog__subtitle { margin-bottom: 12px; font-size: 11px; }
  .coach-carousel { --coach-gap: 8px; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 5px; }
  .coach-carousel__arrow { width: 34px; height: 34px; }
  .coach-card { min-height: 272px; padding: 10px 6px; border-radius: 15px; }
  .coach-card__portrait-wrap { width: 78%; margin-bottom: 8px; }
  .coach-card__lock { top: 6px; right: 6px; width: 27px; height: 27px; }
  .coach-card h3 { font-size: 13px; }
  .coach-card__title { font-size: 9px; }
  .coach-card__unlock { margin-top: 7px; font-size: 8px; }
  .coach-card__select { min-height: 31px; margin: auto 2px 0; padding: 7px 4px; font-size: 8px; }
  .coach-detail { padding: 13px; }
  .coach-detail__grid { grid-template-columns: 1fr; }
  .coach-detail__grid > div,
  .coach-detail__grid > div + div { padding: 9px 0; border-left: 0; border-top: 1px solid rgba(39, 91, 93, .16); }
  .settings-dialog { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); padding: 16px; }
  .settings-dialog__subtitle { margin-bottom: 14px; }
  .settings-dialog__layout { grid-template-columns: 1fr; gap: 10px; }
  .settings-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-tab { text-align: center; }
  .settings-content { min-height: 250px; padding: 17px; }
  .locale-options { grid-template-columns: 1fr; }
  .credits-list div { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .coach-dialog[open],
  .coach-card,
  .coach-detail { animation: none; }
  .coach-carousel__track { transition: none; }
  .loading-state,
  .loading-state__footprint { transition: none; }
  .loading-state__footprint { animation: none; opacity: .8; }
  .menu-resource-info { animation: none; }
  .menu-resource-trigger,
  .menu-resource-info__close { transition: none; }
}