/* ==========================================================================
   Ocean Explorer — expedition interface (game HUD, map, albums, dialogs).
   Shares the design tokens defined on body.explorer-page in explorer.css.
   Class names are contractual: explorer-game.js creates them directly.
   ========================================================================== */

/* --- HUD: one action row + one tab row ------------------------------------ */

.game-hud { position: relative; z-index: 1; margin: 12px 0 0; }
.game-primary { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Secondary action — default button inside HUD and dialogs. */
.game-primary button,
.game-body button {
  border: 1px solid var(--xp-border-strong);
  background: transparent;
  color: var(--xp-text);
  border-radius: var(--xp-radius-sm);
  padding: 11px 16px;
  font: 500 13px/1.2 var(--xp-sans);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.game-primary button:hover,
.game-body button:hover { background: var(--xp-surface-raised); }
.game-primary button:disabled,
.game-body button:disabled { opacity: .5; cursor: default; }
.game-primary button:disabled:hover,
.game-body button:disabled:hover { background: transparent; }

/* Primary action — only the voyage CTA is filled. */
.game-primary .game-next {
  background: var(--xp-accent);
  color: var(--xp-accent-ink);
  border: 0;
  font-weight: 600;
}
.game-primary .game-next:hover { background: var(--xp-accent-strong); }

/* Navigation — quiet tabs, not pills. */
.game-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 12px;
  border-top: 1px solid var(--xp-border);
  padding-top: 8px;
}
.game-nav button {
  background: transparent;
  border: 0;
  border-radius: var(--xp-radius-sm);
  color: var(--xp-text-2);
  padding: 8px 12px;
  font: 500 13px/1.2 var(--xp-sans);
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.game-nav button:hover { color: var(--xp-text); background: var(--xp-surface); }

.game-hud #game-message {
  color: var(--xp-accent);
  font-size: 13px;
  min-height: 0;
  margin: 8px 0 0;
}

/* Onboarding note — one slim line, dismissible. */
.game-guide {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius-sm);
  color: var(--xp-text-2);
  margin-top: 12px;
  font-size: 12px;
}
.game-guide p { margin: 0; }
.game-guide button {
  flex-shrink: 0;
  border: 1px solid var(--xp-border-strong);
  border-radius: var(--xp-radius-sm);
  padding: 6px 10px;
  background: transparent;
  color: var(--xp-text);
  cursor: pointer;
  font: 500 12px/1 var(--xp-sans);
}
.game-guide button:hover { background: var(--xp-surface-raised); }

/* --- Dialog: one modal pattern, no blur theatre ----------------------------- */

.game-dialog {
  width: min(720px, calc(100% - 32px));
  max-height: 88dvh;
  padding: 0;
  border: 1px solid var(--xp-border-strong);
  border-radius: var(--xp-radius);
  background: var(--xp-surface);
  color: var(--xp-text);
  box-shadow: 0 24px 80px rgba(0, 4, 8, .55);
}
.game-dialog::backdrop { background: rgba(2, 12, 18, .72); }
.game-dialog > header {
  position: sticky;
  top: 0;
  background: var(--xp-surface);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 2;
  border-bottom: 1px solid var(--xp-border);
}
.game-dialog h2 { font: 400 20px/1.3 var(--xp-serif); margin: 0; }
.game-close {
  border: 0;
  background: none;
  color: var(--xp-text-2);
  font: 500 13px/1 var(--xp-sans);
  padding: 8px;
  cursor: pointer;
  border-radius: var(--xp-radius-sm);
}
.game-close:hover { color: var(--xp-text); background: var(--xp-surface-raised); }

/* Waterways: a wide atlas sheet whose scene art remains the primary wayfinding. */
.game-dialog.is-waterways {
  width: min(1070px, calc(100% - 48px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border-color: rgba(108, 218, 239, .72);
  border-radius: 28px;
  background: rgba(3, 42, 59, .97);
  box-shadow: 0 32px 100px rgba(0, 5, 12, .72), inset 0 1px rgba(220, 250, 255, .1);
}
.game-dialog.is-waterways::backdrop {
  background: rgba(0, 16, 28, .74);
  backdrop-filter: blur(2px);
}
.game-dialog.is-waterways > header {
  position: relative;
  margin: 0 24px;
  padding: 22px 12px 10px;
  background: transparent;
  border: 0;
}
.game-dialog.is-waterways h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #f4fcff;
  font: 400 36px/1.12 var(--xp-serif);
}
.game-waterways-title-icon { width: 56px; height: 40px; object-fit: contain; }
.game-dialog.is-waterways .game-close {
  padding: 10px 8px;
  color: #e8f9fd;
  font: 600 14px/1 var(--xp-sans);
}
.game-dialog.is-waterways .game-body { padding: 0 24px 28px; }
.game-waterways-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
  gap: 32px;
  align-items: end;
  padding: 0 12px 18px;
}
.game-body .game-waterways-intro p { max-width: 700px; margin: 0; color: #c8e8f0; font: 400 18px/1.45 var(--xp-serif); }
.game-body .game-waterways-intro .game-waterways-quote {
  max-width: 250px;
  justify-self: end;
  color: rgba(144, 210, 224, .72);
  font-size: 16px;
  font-style: italic;
  text-align: right;
}

/* Mystery encounter: immersive editorial reveal, grounded in the live game state. */
.game-dialog.is-mystery {
  width: min(1180px, calc(100% - 48px));
  max-height: min(760px, calc(100dvh - 48px));
  overflow: auto;
  border-color: rgba(108, 218, 239, .7);
  border-radius: 24px;
  background: rgba(3, 43, 61, .96);
  box-shadow: 0 32px 100px rgba(0, 5, 12, .72), inset 0 1px rgba(220, 250, 255, .1);
}
.game-dialog.is-mystery::backdrop {
  background: rgba(0, 16, 28, .68);
  backdrop-filter: blur(2px);
}
.game-dialog.is-mystery > header {
  position: relative;
  margin: 0 68px;
  padding: 24px 0 20px;
  background: transparent;
  border-bottom-color: rgba(128, 215, 230, .2);
}
.game-dialog.is-mystery h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--xp-text-2);
  font: 500 13px/1.4 var(--xp-sans);
}
.game-dialog-context { color: var(--xp-text-2); }
.game-dialog-current { color: var(--xp-text); font-weight: 650; }
.game-dialog-separator { width: 12px; height: 12px; opacity: .55; filter: brightness(2); }
.game-dialog.is-mystery .game-close {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0 0 3px;
  border: 1px solid rgba(108, 218, 239, .62);
  border-radius: 50%;
  color: var(--xp-text);
  font: 300 28px/1 var(--xp-sans);
}
.game-dialog.is-mystery .game-close:hover { border-color: var(--xp-accent-strong); background: rgba(65, 186, 211, .14); }
.game-dialog.is-mystery .game-dialog-message { margin: 0 68px; padding: 10px 0; }
.game-dialog.is-mystery .game-body { padding: 28px 68px 52px; }
.mystery-encounter { display: grid; grid-template-columns: minmax(0, .96fr) minmax(410px, 1.04fr); gap: clamp(36px, 5vw, 74px); align-items: center; }
.game-body .mystery-title { margin: 0; color: #f3fbff; font: 400 clamp(42px, 4vw, 56px)/1.08 var(--xp-serif); }
.mystery-lead { margin: 18px 0 14px; color: #e9f8fb; font: 400 27px/1.25 var(--xp-serif); }
.mystery-intro { max-width: 460px; margin: 0 0 20px; color: var(--xp-text-2); font: 400 16px/1.65 var(--xp-sans); }
.mystery-clues { display: grid; gap: 10px; }
.mystery-clue {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 18px;
  border: 1px solid rgba(93, 205, 226, .58);
  border-radius: 16px;
  background: rgba(17, 90, 115, .3);
  color: #effcff;
  box-sizing: border-box;
}
.mystery-clue img, .mystery-note img, .mystery-badge img { object-fit: contain; }
.mystery-clue img { filter: saturate(.75) brightness(1.35); }
.mystery-clue strong { font: 600 15px/1.4 var(--xp-sans); }
.mystery-clue span { display: grid; color: #f1fbfd; font: 500 15px/1.4 var(--xp-sans); }
.mystery-clue small { color: var(--xp-text-2); font: 500 12px/1.3 var(--xp-sans); }
.mystery-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 18px; color: var(--xp-text-2); font-size: 12px; }
.mystery-note img { opacity: .8; filter: brightness(1.5); }
.mystery-actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(150px, .8fr); gap: 12px; }
.game-body .mystery-actions button { width: 100%; margin: 0; min-height: 58px; border-radius: 16px; font-size: 15px; }
.game-body .mystery-reveal { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 24px; border-color: #ffdf7d; background: #ffdf7d; color: #082634; font-weight: 700; }
.game-body .mystery-reveal:hover { border-color: #ffe89d; background: #ffe89d; }
.mystery-button-icon { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(13%) sepia(21%) saturate(1847%) hue-rotate(153deg) brightness(91%) contrast(99%); }
.game-body .mystery-back { min-height: 34px; margin: 12px 0 0; padding: 4px 2px; border: 0; color: var(--xp-text-2); }
.game-body .mystery-back:hover { color: var(--xp-text); background: transparent; }
.mystery-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(108, 218, 239, .56);
  border-radius: 20px;
  background: rgba(3, 45, 64, .38) url('/assets/explorer-reef-v2.webp') center / cover no-repeat;
  box-shadow: inset 0 0 70px rgba(0, 24, 40, .24);
  isolation: isolate;
}
.mystery-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 50, 72, .18); box-shadow: inset 0 -120px 120px rgba(1, 28, 44, .58); }
.mystery-visual .game-silhouette { width: 88%; height: 68%; margin: 18px 0 0; object-fit: contain; filter: brightness(0); opacity: .8; }
.mystery-badge { position: absolute; top: 26px; right: 26px; display: flex; align-items: center; gap: 9px; max-width: 150px; padding: 9px 14px; border: 1px solid rgba(108, 218, 239, .58); border-radius: 22px; background: rgba(2, 46, 66, .68); color: #eafcff; font: 700 10px/1.35 var(--xp-sans); text-transform: uppercase; }
.mystery-badge img { filter: brightness(1.6) sepia(.6) saturate(2); }
.mystery-visual-copy { position: absolute; right: 28px; bottom: 26px; max-width: 220px; margin: 0; padding-top: 8px; border-bottom: 1px solid rgba(206, 247, 250, .52); color: rgba(219, 247, 250, .82); text-align: right; font: italic 18px/1.45 var(--xp-serif); }
.mystery-footer { display: flex; align-items: center; gap: 20px; margin: 30px auto 0; max-width: 470px; color: var(--xp-text-3); font: italic 11px/1.4 var(--xp-serif); letter-spacing: .22em; text-align: center; text-transform: uppercase; }
.mystery-footer::before, .mystery-footer::after { content: ""; height: 1px; flex: 1; background: rgba(151, 221, 229, .44); }

.game-dialog-message:empty { display: none; }
.game-dialog-message {
  padding: 10px 24px;
  margin: 0;
  color: var(--xp-accent-strong);
  font-size: 13px;
  border-bottom: 1px solid var(--xp-border);
}

.game-body { padding: 20px 24px 32px; line-height: 1.7; font-size: 14px; }
.game-body > p:first-child { margin-top: 0; color: var(--xp-text-2); }
.game-body h3 { font: 400 17px/1.4 var(--xp-serif); margin: 28px 0 12px; }
.game-body a { color: var(--xp-accent-strong); text-underline-offset: 4px; }
.game-body button { margin: 4px 8px 4px 0; min-height: 40px; }

.game-body select,
.game-body input[readonly] {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  color: var(--xp-text);
  background: var(--xp-bg);
  border: 1px solid var(--xp-border-strong);
  border-radius: var(--xp-radius-sm);
  font: 400 14px/1.4 var(--xp-sans);
}
.game-body input[type="checkbox"] { accent-color: var(--xp-accent); width: 16px; height: 16px; }

.game-privacy { font-size: 12px; color: var(--xp-text-3); line-height: 1.7; }

/* Danger action — quiet, not red-filled. */
.game-body .game-danger {
  border-color: transparent;
  color: var(--xp-danger);
}
.game-body .game-danger:hover { background: rgba(229, 160, 141, .08); }

/* --- Scene map: illustrated themes with two visible route rows -------------- */

.game-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.game-scene-card {
  overflow: hidden;
  border: 1px solid rgba(82, 181, 204, .48);
  border-radius: 20px;
  background: #052f43;
  box-shadow: inset 0 1px rgba(229, 251, 255, .05);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.game-scene-card:hover { transform: translateY(-2px); border-color: rgba(112, 217, 237, .82); }
.game-scene-card.is-selected { border-color: #8fe6f4; box-shadow: 0 0 0 2px rgba(94, 207, 228, .16), inset 0 1px rgba(229, 251, 255, .08); }
.game-body .game-region {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  height: 244px;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 128px 18px 14px;
  border: 0;
  border-radius: 0;
  background: #06344a;
  color: #f4fcff;
  text-align: left;
}
.game-body .game-region::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 30, 45, .36); }
.game-body .game-region:hover { background: #06344a; }
.game-body .game-region:disabled { opacity: .62; cursor: default; }
.game-region-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.game-region-number {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(178, 235, 246, .76);
  border-radius: 50%;
  background: rgba(3, 49, 68, .74);
  color: #dff8fd;
  font: 500 15px/1 var(--xp-sans);
}
.game-body .game-region h3 { margin: 0 0 8px; color: #fff; font: 400 22px/1.12 var(--xp-serif); text-shadow: 0 2px 10px rgba(0, 10, 18, .85); }
.game-body .game-region p { margin: 0; color: #c7eaf2; font: 400 15px/1.45 var(--xp-sans); text-shadow: 0 2px 8px rgba(0, 10, 18, .9); }
.game-region-progress { display: none; }
.game-scene-routes { display: grid; gap: 8px; padding: 9px 12px 12px; }
.game-body .game-scene-route {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 39px;
  margin: 0;
  padding: 5px 12px 5px 7px;
  border-color: rgba(91, 194, 216, .62);
  border-radius: 22px;
  color: #edfaff;
  text-align: left;
}
.game-body .game-scene-route:hover { background: rgba(56, 155, 181, .18); }
.game-scene-route-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(129, 218, 236, .62);
  border-radius: 50%;
  background: rgba(62, 151, 177, .42);
  color: #e9fbff;
  font: 600 12px/1 var(--xp-sans);
}
.game-scene-route > span:nth-child(2) { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.game-scene-route img, .game-route-arrow { filter: brightness(0) invert(1); opacity: .88; }

/* --- Voyage list: two cinematic continuation cards ------------------------- */

.game-route-panel { margin-top: 20px; padding: 18px 0 0; border-top: 1px solid rgba(97, 191, 211, .48); }
.game-route-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.game-route-heading h3 { display: flex; align-items: center; gap: 12px; margin: 0; color: #f4fcff; font-size: 24px; }
.game-route-heading h3 img { width: 32px; height: 32px; object-fit: contain; filter: brightness(1.55) saturate(.7); }
.game-route-heading > p { margin: 0; color: rgba(156, 215, 226, .78); font: italic 14px/1.4 var(--xp-serif); }
.game-route-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.game-voyage {
  position: relative;
  isolation: isolate;
  min-height: 174px;
  overflow: hidden;
  padding: 18px 20px;
  border: 1px solid rgba(91, 194, 216, .58);
  border-radius: 18px;
  background: #07384e;
}
.game-voyage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 34, 49, .52); }
.game-voyage-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.game-voyage-copy { position: relative; z-index: 1; max-width: 68%; }
.game-voyage strong { color: #fff; font: 400 19px/1.25 var(--xp-serif); text-shadow: 0 2px 8px rgba(0, 8, 15, .9); }
.game-voyage p { margin: 8px 0 12px; color: #c9eaf1; font: 400 15px/1.5 var(--xp-sans); text-shadow: 0 2px 8px rgba(0, 8, 15, .9); }
.game-body .game-voyage button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  margin: 0;
  padding: 9px 14px 9px 16px;
  border-color: #8de3f4;
  border-radius: 13px;
  background: rgba(4, 48, 67, .72);
  color: #fff;
  font-weight: 650;
}

/* --- Discovery book and Keepsakes sheet ----------------------------------------- */

.game-dialog.is-book {
  width: min(1084px, calc(100% - 48px));
  height: min(900px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border-color: rgba(108, 218, 239, .78);
  border-radius: 24px;
  background-color: rgba(2, 37, 55, .98);
  box-shadow: 0 32px 100px rgba(0, 5, 12, .76), inset 0 1px rgba(220, 250, 255, .12);
}
.game-dialog.is-book[open] { display: flex; flex-direction: column; }
.game-dialog.is-book::backdrop { background: rgba(0, 15, 27, .78); backdrop-filter: blur(3px); }
.game-dialog.is-book > header {
  position: relative;
  flex: 0 0 auto;
  min-height: 98px;
  padding: 18px 28px;
  border-bottom-color: rgba(108, 218, 239, .28);
  background-color: rgba(4, 57, 79, .92);
  background-image: url('/assets/explorer-reef-v2.webp');
  background-position: center 35%;
  background-size: cover;
  background-blend-mode: multiply;
}
.game-dialog.is-book h2 { display: flex; align-items: center; gap: 14px; color: #f5fcff; font: 400 40px/1 var(--xp-serif); text-shadow: 0 2px 12px rgba(0, 10, 18, .9); }
.game-dialog.is-book h2 > span { display: grid; gap: 7px; }
.game-dialog.is-book h2 small { color: #a9dce8; font: 400 15px/1.3 var(--xp-serif); }
.game-book-title-icon { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 8, 16, .5)); }
.game-dialog.is-book .game-close { align-self: flex-start; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(135, 225, 242, .55); border-radius: 50%; color: #effcff; font-size: 27px; }
.game-dialog.is-book .game-dialog-message:empty { display: none; }
.game-dialog.is-book .game-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0; }
.game-book { position: relative; height: 100%; min-height: 0; overflow: hidden; background-color: rgba(2, 35, 52, .94); }
.game-book-pages { height: 100%; box-sizing: border-box; overflow: auto; padding: 18px 28px 92px; scrollbar-color: rgba(139, 222, 238, .5) transparent; }
.game-book-album { margin: 0 0 18px; }
.game-book-album > header {
  display: grid;
  grid-template-columns: 38px auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 5px 12px;
  border: 1px solid rgba(105, 211, 233, .52);
  border-radius: 14px;
  background-color: rgba(5, 99, 137, .58);
}
.game-book-album.is-reef > header { background-color: rgba(4, 121, 119, .54); border-color: rgba(75, 233, 208, .58); }
.game-book-album.is-river > header { background-color: rgba(74, 74, 159, .6); border-color: rgba(164, 147, 255, .62); }
.game-book-album.is-blue > header { background-color: rgba(18, 82, 129, .62); }
.game-book-album-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background-color: #94e5f5; color: #064763; font: 600 18px/1 var(--xp-serif); box-shadow: 0 0 16px rgba(110, 225, 245, .45); }
.game-book-album.is-reef .game-book-album-number { background-color: #71e6d7; }
.game-book-album.is-river .game-book-album-number { background-color: #d0c4ff; color: #453692; }
.game-book-album > header h3 { margin: 0; color: #fff; font: 400 20px/1.2 var(--xp-serif); white-space: nowrap; }
.game-book-album-count { color: #aee8f3; font: 500 14px/1 var(--xp-sans); white-space: nowrap; }
.game-book-album > header p { justify-self: end; margin: 0; color: #bce6ee; font: 400 13px/1.25 var(--xp-serif); text-align: right; }
.game-book-voyage { margin: 16px 0 20px; }
.game-book-voyage > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 4px; }
.game-book-voyage h4 { min-width: 0; margin: 0; color: var(--xp-text); font: 400 17px/1.4 var(--xp-serif); }
.game-book-voyage-count { flex-shrink: 0; color: var(--xp-text-2); font: 500 12px/1.4 var(--xp-sans); }
.game-book-album .game-fish-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 10px 4px 0; }
.game-book-album .game-fish { min-height: 184px; padding: 10px 8px; border-color: rgba(77, 198, 223, .62); background-color: rgba(2, 47, 69, .78); }
.game-book-album .game-fish img { height: 88px; }
.game-book-album .game-fish strong { min-height: 40px; display: grid; place-items: center; color: #f4fbff; font-size: 13px; }
.game-book-album .game-fish button { min-height: 34px; margin-top: auto; padding: 7px 17px; border-color: rgba(126, 224, 242, .7); border-radius: 12px; background-color: rgba(4, 87, 119, .72); }
.game-book-album .game-fish.is-unknown { background-color: rgba(1, 25, 40, .7); }
.game-book-scrim { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: rgba(0, 12, 21, .7) !important; opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.game-book.is-keepsakes-open .game-book-scrim { opacity: 1; pointer-events: auto; }
.game-keepsakes-sheet { position: absolute; inset: auto 0 0; z-index: 3; height: 68px; overflow: hidden; box-sizing: border-box; border: 1px solid rgba(118, 221, 242, .82); border-radius: 22px 22px 0 0; background-color: rgba(3, 58, 82, .98); box-shadow: 0 -14px 36px rgba(0, 10, 20, .54), inset 0 1px rgba(229, 253, 255, .12); transition: height .3s ease; }
.game-book.is-keepsakes-open .game-keepsakes-sheet { height: 55%; }
.game-body .game-keepsakes-toggle { display: grid; grid-template-columns: 48px minmax(140px, auto) auto 150px minmax(220px, 1fr) 0 38px; align-items: center; gap: 14px; width: 100%; height: 68px; margin: 0; padding: 8px 20px; overflow: hidden; border: 0; border-radius: 0; background-color: rgba(4, 73, 99, .94); text-align: left; transition: height .3s ease, padding .3s ease; }
.game-body .game-keepsakes-toggle:hover { background-color: rgba(8, 88, 116, .96); }
.game-keepsakes-mark { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(116, 224, 241, .42)); transition: width .3s ease, height .3s ease; }
.game-keepsakes-copy { display: grid; gap: 2px; min-width: 0; }
.game-keepsakes-copy strong { color: #fff; font: 400 22px/1 var(--xp-serif); }
.game-keepsakes-copy small,.game-keepsakes-total { color: #a9ddea; font: 500 12px/1.2 var(--xp-sans); white-space: nowrap; }
.game-keepsakes-meter { width: 150px; height: 9px; accent-color: #64d7ee; }
.game-keepsakes-preview { display: flex; justify-content: center; gap: 9px; min-width: 0; }
.game-keepsakes-preview img { width: 30px; height: 30px; object-fit: contain; }
.game-keepsakes-preview img.is-locked { filter: grayscale(1); opacity: .32; }
.game-keepsakes-quote { grid-column: 6; display: none; color: #a9ddea; font: italic 400 13px/1.35 var(--xp-serif); text-align: right; }
.game-keepsakes-caret { grid-column: 7; width: 18px; height: 18px; object-fit: contain; transform: rotate(-90deg); transition: transform .25s ease; }
.game-book.is-keepsakes-open .game-keepsakes-toggle { grid-template-columns: 60px minmax(190px, auto) auto 220px minmax(100px, 1fr) minmax(150px, 210px) 42px; height: 88px; padding: 10px 26px; border-bottom: 1px solid rgba(112, 220, 240, .2); background-color: rgba(3, 65, 91, .98); }
.game-book.is-keepsakes-open .game-keepsakes-mark { width: 56px; height: 56px; }
.game-book.is-keepsakes-open .game-keepsakes-copy strong { font-size: 30px; }
.game-book.is-keepsakes-open .game-keepsakes-copy small { font: 400 14px/1.25 var(--xp-serif); }
.game-book.is-keepsakes-open .game-keepsakes-total { color: #d8f8ff; font-size: 15px; }
.game-book.is-keepsakes-open .game-keepsakes-caret { width: 24px; height: 24px; transform: rotate(90deg); }
.game-book.is-keepsakes-open .game-keepsakes-preview { display: none; }
.game-book.is-keepsakes-open .game-keepsakes-quote { display: block; }
.game-keepsakes-panel { height: calc(100% - 68px); overflow: auto; box-sizing: border-box; padding: 10px 22px 14px; scrollbar-width: none; background-image: url('/assets/explorer-reef-v2.webp'); background-position: center bottom; background-size: cover; background-blend-mode: multiply; background-color: rgba(2, 55, 79, .92); }
.game-keepsakes-panel::-webkit-scrollbar { display: none; }
.game-book.is-keepsakes-open .game-keepsakes-panel { height: calc(100% - 88px); }
.game-keepsakes-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.game-keepsake { position: relative; isolation: isolate; display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 86px; overflow: hidden; padding: 8px 10px; box-sizing: border-box; border: 1px solid rgba(103, 200, 224, .62); border-radius: 16px; background-color: rgba(2, 42, 63, .86); background-position: left center; background-size: cover; background-blend-mode: multiply; box-shadow: inset 0 1px rgba(217, 250, 255, .08); }
.game-keepsake.reward-album-starter { background-image: url('/assets/explorer-waterways/reef-garden.webp'); }
.game-keepsake.reward-album-reef { background-image: url('/assets/explorer-waterways/reef-afterglow.webp'); }
.game-keepsake.reward-album-river { background-image: url('/assets/explorer-waterways/freshwater-paths.webp'); }
.game-keepsake.reward-album-blue { background-image: url('/assets/explorer-waterways/into-blue.webp'); }
.game-keepsake.reward-observer-3 { background-image: url('/assets/explorer-waterways/rainforest-reflections.webp'); }
.game-keepsake.reward-observer-12 { background-image: url('/assets/explorer-waterways/midnight-current.webp'); }
.game-keepsake.reward-voyager-3 { background-image: url('/assets/explorer-waterways/into-blue.webp'); }
.game-keepsake.reward-voyager-6 { background-image: url('/assets/explorer-waterways/reef-garden.webp'); }
.game-keepsake.is-earned { border-color: #54f2df; background-color: rgba(2, 64, 76, .68); box-shadow: 0 0 18px rgba(66, 235, 218, .26), inset 0 1px rgba(230, 255, 253, .25); }
.game-keepsake-art { display: grid; place-items: center; align-self: stretch; margin: -8px 0 -8px -10px; background-color: rgba(0, 35, 52, .38); }
.game-keepsake-art img { width: 56px; height: 56px; object-fit: contain; filter: grayscale(1) drop-shadow(0 5px 8px rgba(0, 10, 18, .7)); opacity: .62; }
.game-keepsake.is-earned .game-keepsake-art img { filter: drop-shadow(0 5px 10px rgba(0, 10, 18, .72)); opacity: 1; }
.game-keepsake-copy { min-width: 0; }
.game-keepsake strong { display: block; color: #f5fcff; font: 400 15px/1.25 var(--xp-serif); text-shadow: 0 2px 8px rgba(0, 8, 15, .9); }
.game-keepsake p { min-height: 0; margin: 3px 0 5px; overflow: hidden; color: #b3dfE9; font: 400 11px/1.35 var(--xp-sans); text-overflow: ellipsis; text-shadow: 0 2px 6px rgba(0, 8, 15, .9); white-space: nowrap; }
.game-keepsake-status { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 9px; border: 1px solid rgba(117, 197, 216, .62); border-radius: 14px; background-color: rgba(0, 31, 49, .7); color: #d1e4e9; font: 600 10px/1 var(--xp-sans); }
.game-keepsake-status img { width: 16px; height: 16px; object-fit: contain; }
.game-keepsake-status.is-collected { border-color: rgba(69, 232, 196, .78); background-color: rgba(3, 119, 103, .72); color: #e5fff9; }
.game-keepsake-status.is-progress { border-color: rgba(73, 200, 235, .8); background-color: rgba(0, 111, 163, .68); color: #e4faff; }
.game-body .game-keepsakes-result { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; margin: 9px auto 0; padding: 7px 26px; border-color: #74e8fb; border-radius: 26px; background-color: #087fac; color: #fff; font: 500 15px/1 var(--xp-serif); box-shadow: 0 0 16px rgba(45, 218, 245, .28), inset 0 1px rgba(232, 254, 255, .2); }
.game-body .game-keepsakes-result:hover { background-color: #0a91bd; }
.game-keepsakes-result img { object-fit: contain; }
.game-keepsakes-motto { margin: 7px 0 0; color: #9bd3df; font: italic 400 11px/1.3 var(--xp-serif); text-align: center; }
.game-keepsake-legacy { margin: 10px 0 0; color: #b9dce5; text-align: center; }

/* --- Result card keepsake modal ------------------------------------------------ */
/* --- Today: one focused encounter ------------------------------------------- */
.game-dialog.is-today {
  width: min(858px, calc(100% - 48px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border-color: #71d9eb;
  border-radius: 22px;
  background: #063b50 url('/assets/explorer-result/ocean.webp') center / cover no-repeat;
  background-blend-mode: multiply;
  box-shadow: 0 34px 110px rgba(0, 4, 12, .82), inset 0 1px rgba(226, 253, 255, .2);
}
.game-dialog.is-today::backdrop { background: rgba(0, 15, 27, .78); backdrop-filter: blur(3px); }
.game-dialog.is-today > header { position: relative; min-height: 102px; padding: 26px 46px 20px; border-bottom: 1px solid rgba(139, 218, 230, .58); background: rgba(1, 48, 67, .3); }
.game-dialog.is-today h2 { color: #fff; font: 400 46px/1 var(--xp-serif); text-shadow: 0 3px 18px rgba(0, 12, 22, .8); }
.game-dialog.is-today .game-close { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; padding: 0; border: 1px solid #70e4f4; border-radius: 50%; background: rgba(2, 62, 82, .64); color: #ecfdff; font-size: 29px; box-shadow: 0 0 18px rgba(72, 224, 241, .28); }
.game-dialog.is-today .game-close:hover { border-color: #b7f5fc; background: rgba(15, 115, 137, .74); }
.game-dialog.is-today .game-dialog-message:empty { display: none; }
.game-dialog.is-today .game-body { padding: 20px 42px 24px; background: rgba(0, 34, 50, .12); }
.game-today { color: #eafdff; }
.game-today-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 24px; margin-bottom: 16px; }
.game-today-eyebrow strong { display: flex; align-items: center; color: #fff; font: 700 14px/1.3 var(--xp-serif); letter-spacing: .26em; white-space: nowrap; }
.game-today-eyebrow strong::before { content: ''; flex: 0 0 38px; margin-right: 18px; border-top: 1px solid #8ae8f5; }
.game-today-eyebrow span { color: #b7dfe6; font: 500 10px/1.4 var(--xp-serif); letter-spacing: .3em; text-align: right; }
.game-today-card { box-sizing: border-box; display: flex; min-height: 376px; padding: 34px 28px 22px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #69d9ec; border-radius: 24px; background: #04364a url('/assets/explorer-result/ocean.webp') center / cover no-repeat; box-shadow: inset 0 0 48px rgba(0, 19, 33, .22); text-align: center; }
.game-today-fish { display: block; width: min(520px, 84%); height: 174px; margin: -8px auto 0; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 7, 16, .5)); transform: translateY(-8px) scale(1.75); }
.game-body .game-today-card h3 { margin: 3px 0 1px; color: #fff; font: 400 27px/1.2 var(--xp-serif); text-shadow: 0 3px 12px rgba(0, 8, 17, .9); }
.game-today-scientific { margin: 0 0 16px; color: #d0eaf0; font: italic 400 12px/1.4 var(--xp-serif); letter-spacing: .28em; text-transform: uppercase; }
.game-body .game-today-visit { display: flex; align-items: center; justify-content: center; gap: 15px; min-width: 210px; min-height: 60px; margin: 0; padding: 12px 30px; border: 1px solid #58e7f5; border-radius: 999px; background: rgba(18, 140, 163, .82); color: #fff; font: 600 17px/1 var(--xp-sans); box-shadow: inset 0 0 20px rgba(111, 246, 255, .22), 0 0 22px rgba(29, 220, 236, .28); }
.game-body .game-today-visit:hover { border-color: #baf9ff; background: rgba(31, 166, 186, .92); }
.game-dialog.is-today .game-close:focus-visible,.game-body .game-today-visit:focus-visible { outline-color: #8ae8f5; }
.game-today-visit img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.game-today-motto { margin: 19px 0 0; color: #b9dce3; font: 500 9px/1.4 var(--xp-serif); letter-spacing: .34em; text-align: center; }
.game-today-empty { min-height: 280px; display: grid; place-items: center; color: #c5e6ec; font: 400 18px/1.5 var(--xp-serif); }

.game-dialog.is-result { width: min(946px, calc(100% - 48px)); height: auto; max-height: calc(100dvh - 64px); overflow: auto; scrollbar-width: thin; scrollbar-color: #9facae #182d38; border-color: rgba(116, 224, 243, .82); border-radius: 22px; background: linear-gradient(rgba(0, 33, 50, .6), rgba(0, 26, 40, .84)), #032c40 url('/assets/explorer-result/ocean.webp') center top / auto 100% no-repeat; box-shadow: 0 32px 100px rgba(0, 4, 10, .78), inset 0 1px rgba(226, 253, 255, .14); }
.game-dialog.is-result[open] { display: block; }
.game-dialog.is-result::backdrop { background: rgba(0, 15, 27, .72); backdrop-filter: blur(2px); }
.game-dialog.is-result > header { position: relative; min-height: 168px; box-sizing: border-box; padding: 32px 28px 22px 156px; align-items: flex-start; border-bottom: 0; background: transparent; }
.game-dialog.is-result h2 > span { display: grid; gap: 8px; }
.game-dialog.is-result h2 > span > span { color: #fff; font: 400 42px/1.1 Georgia, 'Times New Roman', serif; }
.game-dialog.is-result h2 small { max-width: 640px; color: #9bdce8; font: italic 400 22px/1.3 Georgia, 'Times New Roman', serif; }
.game-dialog.is-result .game-close { flex: 0 0 50px; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid rgba(126, 218, 238, .24); border-radius: 50%; background-color: rgba(1, 43, 66, .6); color: #f1fcff; font-size: 28px; }
.game-dialog.is-result .game-dialog-message:empty { display: none; }
.game-dialog.is-result .game-body { min-height: 0; overflow: visible; padding: 0 84px 40px; background: transparent; }
.game-result-preview { padding: 0 0 60px; }
.game-dialog.is-result .game-result { box-sizing: border-box; display: block; width: 100%; aspect-ratio: 960 / 500; max-height: none; object-fit: contain; border: 1px solid #66d9ee; border-radius: 26px; background-color: #073e58; box-shadow: 0 12px 30px rgba(0, 12, 24, .36); }
 .game-dialog.is-result > header::before { content: ''; position: absolute; left: 66px; top: 42px; width: 64px; height: 52px; background: url('/assets/explorer-waterways/waterways-wave.webp') center / contain no-repeat; }
.game-result-share-intro { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 15px; }
.game-result-action { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 0 -24px; }
.game-dialog.is-result .game-result-action > a,.game-dialog.is-result .game-result-share { display: flex; align-items: center; justify-content: center; gap: 28px; min-height: 96px; margin: 0; padding: 16px; border: 1px solid #52edff; border-radius: 30px; color: #fff; font: 400 24px/1.25 var(--xp-sans); text-decoration: none; background: linear-gradient(115deg,rgba(49,191,200,.75),rgba(0,75,113,.85)); box-shadow: inset 0 0 20px #32c9d54d,0 0 24px #05badb26; }
.game-dialog.is-result .game-result-share { border-color: #83d8ed; background: linear-gradient(120deg,#16485fc9,#002343dd); box-shadow: none; }
.game-dialog.is-result .game-result-action > a:hover,.game-dialog.is-result .game-result-share:hover { filter: brightness(1.2); }
.game-dialog.is-result .game-result-action img { width: 36px; height: 36px; }
.game-result-sharing[hidden] { display: none; }
.game-result-icon { box-sizing: border-box; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(115, 204, 228, .44); border-radius: 50%; background-color: rgba(0, 42, 62, .4); }
.game-result-icon img { width: 26px; height: 26px; }
.game-result-action > div,.game-result-share-intro > div { display: grid; gap: 6px; }
.game-result-action strong { color: #f3fcff; font: 400 16px/1.25 var(--xp-sans); }
.game-result-share-intro strong { color: #f3fcff; font: 400 14px/1.4 var(--xp-sans); }
.game-result-action small { color: #88b5c7; font: 400 13px/1.4 var(--xp-sans); }
.game-result-share-intro small { color: #d0e3ed; font: 400 12px/1.4 var(--xp-sans); }
.game-result-action > a,.game-body .game-result-create-share { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; box-sizing: border-box; margin: 0; padding: 10px 20px; border: 1px solid #53d3e2; border-radius: 17px; background-color: #075270; box-shadow: inset 3px 2px 10px rgba(91, 240, 238, .7), 0 0 14px rgba(65, 220, 243, .22); color: #fff; font: 400 14px/1 var(--xp-sans); text-decoration: none; white-space: nowrap; }
.game-result-action > a:hover,.game-body .game-result-create-share:hover { background-color: #0a7291; }
.game-result-action > a > img,.game-result-create-share > img,.game-result-share-row button > img { width: 22px; height: 22px; object-fit: contain; }
.game-result-sharing { margin-top: 14px; padding: 20px 18px 16px; border: 1px solid rgba(130, 188, 207, .38); border-radius: 13px; background-color: rgba(24, 69, 88, .63); }
.game-result-share-intro { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
.game-result-share-intro .game-result-icon { width: 44px; height: 44px; }
.game-result-share-output { margin: 8px 0 0 56px; }
.game-result-share-output:empty { display: none; }
.game-result-share-list { display: grid; gap: 8px; margin-top: 18px; }
.game-result-share-list:empty { display: none; }
.game-result-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px; border: 1px solid rgba(130, 188, 207, .3); border-radius: 13px; background-color: rgba(20, 61, 80, .55); }
.game-result-share-row > a { flex: 1 1 140px; padding: 3px 12px 3px 6px; border-right: 1px solid rgba(130, 188, 207, .25); overflow: hidden; color: #e7f6fa; font-size: 14px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.game-body .game-result-share-row button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; margin: 0; padding: 10px 16px; border: 1px solid #65aac0; border-radius: 13px; background-color: rgba(1, 44, 65, .6); font-size: 13px; font-weight: 400; }
.game-body .game-result-share-row .game-result-revoke { border-color: #e85d68; background-color: rgba(75, 23, 36, .46); color: #ff6f7b; }
.game-result-share-row input { flex-basis: 100%; width: 100%; box-sizing: border-box; }
.game-result-motto { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 84px 0 0; color: #67d7ed; font: 500 11px/1.4 var(--xp-sans); letter-spacing: .4em; text-align: center; text-transform: uppercase; }
.game-result-motto::before,.game-result-motto::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg,transparent,#a0c9d4,transparent); }
.game-result-signin { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 20px; max-width: 580px; margin: 90px auto; padding: 28px; border: 1px solid rgba(103, 214, 235, .55); border-radius: 18px; background-color: rgba(4, 71, 96, .72); }
.game-result-signin > img { width: 72px; height: 72px; object-fit: contain; }
.game-result-signin h3 { margin: 0 0 8px; font-size: 26px; }
.game-result-signin p { margin: 0 0 16px; color: #b5dce5; }
.game-result-signin a { display: inline-flex; padding: 9px 18px; border: 1px solid #6ee2f4; border-radius: 20px; background-color: #087fa9; color: #fff; text-decoration: none; }
/* --- Fish tiles ---------------------------------------------------------------- */

.game-fish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.game-fish {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius);
  background: var(--xp-bg);
  text-align: center;
}
.game-fish img { width: 100%; height: 96px; object-fit: contain; }
.game-fish strong { font: 400 14px/1.4 var(--xp-serif); color: var(--xp-text); }
.game-fish.is-unknown { border-style: dashed; }
.game-fish.is-unknown img { filter: brightness(0); opacity: .4; }
.game-fish.is-unknown strong { color: var(--xp-text-3); }
.game-observed { color: var(--xp-foam); font-size: 12px; }

/* --- Rewards & settings --------------------------------------------------------- */

.game-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin: 8px 0 16px; }
.game-rewards p { margin: 6px 0; color: var(--xp-text-3); font-size: 13px; }
.game-rewards .is-earned, .game-rewards p.is-earned { color: var(--xp-accent-strong); }

.game-setting {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  color: var(--xp-text-2);
  font-size: 13px;
  cursor: pointer;
}

.game-result { width: 100%; border: 1px solid var(--xp-border); border-radius: var(--xp-radius); }
.game-silhouette { display: block; margin: 12px auto; filter: brightness(0); opacity: .5; max-width: 100%; }

/* --- Observation challenge ----------------------------------------------------- */

.observation-step { color: var(--xp-accent); font: 600 11px/1.5 var(--xp-sans); letter-spacing: .1em; }
.observation-intro { color: var(--xp-text-2); }
.observation-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 16px 0; }
.observation-fact { color: var(--xp-accent-strong); margin: 4px 0 0; font-size: 13px; }
.observation-feedback {
  padding: 12px 16px;
  border-left: 2px solid var(--xp-accent);
  background: var(--xp-accent-soft);
  border-radius: 0 var(--xp-radius-sm) var(--xp-radius-sm) 0;
  font-size: 13px;
  color: var(--xp-text);
}
.observation-explanation { font-size: 15px; color: var(--xp-text); }
.game-answer.is-eliminated { text-decoration: line-through; opacity: .5; }

/* --- Discovery book fold -------------------------------------------------------- */

.journey-book-fold summary {
  cursor: pointer;
  padding: 12px 16px;
  border: 1px solid var(--xp-border);
  border-radius: var(--xp-radius-sm);
  color: var(--xp-text-2);
  font-size: 13px;
  list-style-position: inside;
}
.journey-book-fold summary:hover { color: var(--xp-text); border-color: var(--xp-border-strong); }
.journey-book-fold[open] summary { margin-bottom: 16px; }

/* --- Responsive ------------------------------------------------------------------ */

@media (max-width: 700px) {
  .game-hud { margin-top: 10px; }
  .game-primary { gap: 8px; }
  .game-primary button { padding: 10px 14px; font-size: 13px; }
  .game-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    padding-bottom: 4px;
    /* Fade hint that the row scrolls. */
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .game-nav button { flex-shrink: 0; font-size: 12px; padding: 8px 10px; }

  .game-dialog[open] {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    max-width: 100vw;
    max-height: 88dvh;
    box-sizing: border-box;
    margin: 0;
    border-radius: var(--xp-radius) var(--xp-radius) 0 0;
  }
  .game-dialog.is-mystery[open] {
    inset: 10px;
    width: calc(100% - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    margin: auto;
    border-radius: 18px;
  }
  .game-dialog.is-mystery > header { margin: 0 18px; padding: 18px 0 14px; }
  .game-dialog.is-mystery > header::before { display: none; }
  .game-dialog.is-mystery h2 { gap: 7px; font-size: 12px; }
  .game-dialog.is-mystery .game-close { width: 38px; height: 38px; flex-basis: 38px; font-size: 25px; }
  .game-dialog.is-mystery .game-dialog-message { margin: 0 18px; }
  .game-dialog.is-mystery .game-body { padding: 22px 18px calc(28px + env(safe-area-inset-bottom)); }
  .game-dialog.is-waterways[open] {
    inset: 8px;
    width: calc(100% - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin: auto;
    border-radius: 18px;
  }
  .game-dialog.is-waterways > header { margin: 0 12px; padding: 16px 0 10px; }
  .game-dialog.is-waterways > header::before { display: none; }
  .game-dialog.is-waterways h2 { gap: 10px; font-size: 28px; }
  .game-waterways-title-icon { width: 46px; height: 30px; }
  .game-dialog.is-waterways .game-close { min-width: auto; padding: 10px 4px; }
  .game-dialog.is-waterways .game-body { padding: 0 12px calc(20px + env(safe-area-inset-bottom)); }
  .game-waterways-intro { grid-template-columns: 1fr; gap: 7px; padding: 0 0 14px; }
  .game-body .game-waterways-intro p { font-size: 16px; }
  .game-body .game-waterways-intro .game-waterways-quote { justify-self: start; text-align: left; font-size: 14px; }
  .mystery-encounter { grid-template-columns: 1fr; gap: 26px; }
  .game-body .mystery-title { font-size: 38px; }
  .mystery-lead { font-size: 23px; }
  .mystery-intro { font-size: 14px; }
  .mystery-visual { min-height: 340px; }
  .mystery-actions { grid-template-columns: 1fr; }
  .mystery-footer { margin-top: 24px; gap: 12px; letter-spacing: .12em; }
  .game-dialog > header { padding: 14px 16px 12px; }
  /* Drag handle for the bottom sheet. */
  .game-dialog > header::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--xp-border-strong);
  }
  .game-dialog h2 { font-size: 18px; }
  .game-body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
  .game-dialog-message { padding: 10px 16px; }

  .game-map { grid-template-columns: 1fr; }
  .game-body .game-region { min-height: 0; padding: 14px 16px; }
  .game-route-list { grid-template-columns: 1fr; gap: 0; }
  .game-dialog.is-waterways .game-map { gap: 12px; }
  .game-dialog.is-waterways .game-region { height: 225px; padding: 122px 16px 12px; }
  .game-dialog.is-waterways .game-route-list { gap: 12px; }
  .game-route-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .game-route-heading h3 { font-size: 20px; }
  .game-voyage-copy { max-width: 78%; }
  .game-fish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-fish img { height: 84px; }
  .game-rewards { grid-template-columns: 1fr; }
}

@media (min-width: 701px) and (max-width: 980px) {
  .game-dialog.is-waterways .game-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .game-dialog, .game-dialog *, .game-hud * { animation: none !important; transition: none !important; }
}

@media (min-width: 701px) and (max-width: 980px) {
  .game-book-album .game-fish-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-body .game-keepsakes-toggle { grid-template-columns: 48px minmax(130px, auto) auto 120px minmax(0, 1fr) 0 38px; }
  .game-book.is-keepsakes-open .game-keepsakes-toggle { grid-template-columns: 62px minmax(160px, auto) auto 160px minmax(0, 1fr) 0 38px; }
  .game-book.is-keepsakes-open .game-keepsakes-quote { grid-column: 6; display: none; }
  .game-keepsakes-preview { display: none; }
  .game-keepsakes-meter { width: 120px; }
  .game-keepsakes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .game-dialog.is-today[open] { inset: 8px; width: calc(100% - 16px); max-width: calc(100vw - 16px); height: fit-content; max-height: calc(100dvh - 16px); margin: auto; border-radius: 18px; }
  .game-dialog.is-today > header { min-height: 76px; padding: 14px 16px; }
  .game-dialog.is-today h2 { font-size: 31px; }
  .game-dialog.is-today .game-close { flex-basis: 42px; width: 42px; height: 42px; font-size: 24px; }
  .game-dialog.is-today .game-body { padding: 14px 12px calc(18px + env(safe-area-inset-bottom)); }
  .game-today-eyebrow { align-items: flex-start; gap: 10px; margin-bottom: 12px; }
  .game-today-eyebrow strong { font-size: 10px; letter-spacing: .16em; }
  .game-today-eyebrow strong::before { flex-basis: 18px; margin-right: 8px; }
  .game-today-eyebrow span { max-width: 130px; font-size: 8px; letter-spacing: .16em; }
  .game-today-card { min-height: 430px; padding: 28px 14px 24px; border-radius: 18px; }
  .game-today-fish { width: 100%; height: 210px; margin-top: -10px; transform: translateY(-5px) scale(1.4); }
  .game-body .game-today-card h3 { margin-top: 5px; font-size: 25px; }
  .game-today-scientific { margin-bottom: 22px; font-size: 10px; letter-spacing: .18em; }
  .game-body .game-today-visit { min-width: 182px; min-height: 54px; padding: 10px 24px; font-size: 16px; }
  .game-today-motto { margin-top: 16px; font-size: 8px; letter-spacing: .22em; }

  .game-dialog.is-book[open] { inset: 8px; width: calc(100% - 16px); max-width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); margin: auto; border-radius: 18px; }
  .game-dialog.is-book > header { min-height: 76px; padding: 14px 16px; }
  .game-dialog.is-book > header::before { display: none; }
  .game-dialog.is-book h2 { gap: 9px; font-size: 27px; }
  .game-dialog.is-book h2 > span { gap: 4px; }
  .game-dialog.is-book h2 small { max-width: 225px; font-size: 11px; }
  .game-book-title-icon { width: 40px; height: 40px; }
  .game-dialog.is-book .game-close { flex: 0 0 38px; width: 38px; height: 38px; font-size: 24px; }
  .game-book-pages { padding: 12px 12px 86px; }
  .game-book-album { margin-bottom: 14px; }
  .game-book-album > header { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; min-height: 44px; padding: 5px 8px; }
  .game-book-album-number { width: 30px; height: 30px; font-size: 16px; }
  .game-book-album > header h3 { overflow: hidden; font-size: 17px; text-overflow: ellipsis; }
  .game-book-album > header p { display: none; }
  .game-book-album-count { font-size: 12px; }
  .game-book-album .game-fish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; }
  .game-book-album .game-fish { min-height: 170px; }
  .game-book-album .game-fish img { height: 76px; }
  .game-keepsakes-sheet { height: 64px; border-radius: 18px 18px 0 0; }
  .game-book.is-keepsakes-open .game-keepsakes-sheet { height: 55%; }
  .game-body .game-keepsakes-toggle { grid-template-columns: 42px minmax(0, 1fr) auto 30px; gap: 9px; height: 64px; padding: 7px 12px; }
  .game-keepsakes-mark { width: 42px; height: 42px; }
  .game-keepsakes-copy strong { font-size: 19px; }
  .game-keepsakes-copy small { overflow: hidden; font-size: 10px; text-overflow: ellipsis; }
  .game-keepsakes-total { font-size: 11px; }
  .game-keepsakes-meter,.game-keepsakes-preview { display: none; }
  .game-keepsakes-caret { width: 16px; height: 16px; }
  .game-keepsakes-panel { height: calc(100% - 64px); padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); }
  .game-keepsakes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .game-keepsake { grid-template-columns: 46px minmax(0, 1fr); gap: 7px; min-height: 106px; padding: 8px; }
  .game-keepsake-art img { width: 44px; height: 44px; }
  .game-keepsake strong { font-size: 12px; }
  .game-keepsake p { min-height: 26px; margin: 3px 0 5px; font-size: 9px; }
  .game-keepsake-status { min-height: 21px; padding: 2px 6px; font-size: 9px; }
  .game-keepsake-status img { width: 14px; height: 14px; }
  .game-body .game-keepsakes-result { margin-top: 10px; font-size: 12px; }
}

/* --- Result and Keepsakes responsive refinements ------------------------------- */
@media (max-width: 700px) {
  .game-dialog.is-result[open] { inset: 8px; width: calc(100% - 16px); max-width: calc(100vw - 16px); height: fit-content; max-height: calc(100dvh - 16px); margin: auto; border-radius: 18px; }
  .game-dialog.is-result > header { min-height: 92px; padding: 17px 16px 14px; }
  .game-dialog.is-result > header::before { display: none; }
  .game-dialog.is-result h2 > span > span { font-size: 26px; }
  .game-dialog.is-result h2 small { max-width: 250px; font-size: 11px; }
  .game-dialog.is-result .game-close { flex: 0 0 38px; width: 38px; height: 38px; font-size: 24px; }
  .game-dialog.is-result .game-body { padding: 0 12px calc(18px + env(safe-area-inset-bottom)); }
  .game-result-preview { padding-bottom: 12px; }
  .game-result { max-height: 300px; border-radius: 14px; }
  .game-result-action,.game-result-share-intro { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .game-result-icon { width: 42px; height: 42px; }
  .game-result-action { padding: 12px; }
  .game-result-action > a,.game-body .game-result-create-share { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
  .game-result-sharing { padding: 12px; }
  .game-result-share-output { margin-left: 0; }
  .game-result-share-row { gap: 8px; }
  .game-result-share-row > a { flex-basis: 100%; border-right: 0; }
  .game-body .game-result-share-row button { padding-inline: 7px; gap: 5px; font-size: 11px; }
  .game-result-signin { grid-template-columns: 1fr; justify-items: center; margin: 44px auto; padding: 22px; text-align: center; }

  .game-body .game-keepsakes-toggle { grid-template-columns: 42px minmax(0, 1fr) auto 0 0 0 30px; }
  .game-book.is-keepsakes-open .game-keepsakes-toggle { grid-template-columns: 54px minmax(0, 1fr) auto 32px; height: 82px; padding: 9px 12px; }
  .game-book.is-keepsakes-open .game-keepsakes-mark { width: 52px; height: 52px; }
  .game-book.is-keepsakes-open .game-keepsakes-copy strong { font-size: 23px; }
  .game-book.is-keepsakes-open .game-keepsakes-copy small { max-width: 150px; font-size: 10px; }
  .game-book.is-keepsakes-open .game-keepsakes-total { font-size: 12px; }
  .game-book.is-keepsakes-open .game-keepsakes-caret { grid-column: 4; }
  .game-book.is-keepsakes-open .game-keepsakes-meter,
  .game-book.is-keepsakes-open .game-keepsakes-preview,
  .game-book.is-keepsakes-open .game-keepsakes-quote { display: none; }
  .game-book.is-keepsakes-open .game-keepsakes-panel { height: calc(100% - 82px); }
  .game-keepsake { grid-template-columns: 52px minmax(0, 1fr); min-height: 108px; padding: 8px; }
  .game-keepsake-art { margin: -8px 0 -8px -8px; }
  .game-keepsake-art img { width: 46px; height: 46px; }
  .game-keepsakes-motto { display: none; }
}
@media (max-width: 700px) {
 .game-dialog.is-result .game-result-action { margin: 0; gap: 10px; padding: 0; grid-template-columns: repeat(2,minmax(0,1fr)); }
 .game-dialog.is-result .game-result-action > a,.game-dialog.is-result .game-result-share-toggle { grid-column: auto; min-height: 70px; padding: 12px 6px; gap: 8px; border-radius: 20px; font-size: 15px; white-space: normal; }
 .game-dialog.is-result .game-result-action img { width: 24px; height: 24px; }
 .game-result-motto { margin-top: 48px; font-size: 9px; letter-spacing: .22em; gap: 10px; }
}