/* =====================================================================
 * Tidebound — style.css
 * VN layout over CSS-painted island backdrops. No images, no fonts.
 * =================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ===== Color themes ==================================================
 * Two independent axes, both picked from the in-game menu and persisted
 * in tidebound.settings: body[data-theme] restyles the text boxes
 * (dialogue panel, portrait plate, choice buttons) and body[data-bars]
 * recolors the five status-bar fills. Defaults match the classic look. */
:root {
  --panel-bg: #04101ae0; --panel-border: #ffffff2e;
  --panel-text: #f2ede2; --panel-em: #ffe9b8;
  --btn-bg: #ffffff14; --btn-bg-hover: #ffffff2b;
  --btn-border: #ffffff30; --btn-bg-strong: #ffffff1f;
  --divider: #ffffff24;
  --c-health: #e35d6a; --c-hunger: #e0a558; --c-thirst: #58aee0;
  --c-energy: #b9d857; --c-hope: #d5a7e8;
}
body[data-theme="driftwood"] { /* sun-bleached parchment */
  --panel-bg: #f0e6ccf0; --panel-border: #7a5c3547;
  --panel-text: #2e2417; --panel-em: #8a4a1a;
  --btn-bg: #5c3d1a14; --btn-bg-hover: #5c3d1a2e;
  --btn-border: #5c3d1a47; --btn-bg-strong: #5c3d1a1f;
  --divider: #5c3d1a33;
}
body[data-theme="lagoon"] { /* the glowing lagoon at night */
  --panel-bg: #042420e8; --panel-border: #2fe0c942;
  --panel-text: #e8f5ee; --panel-em: #9ff5d9;
  --btn-bg: #2fe0c914; --btn-bg-hover: #2fe0c930;
  --btn-border: #2fe0c945; --btn-bg-strong: #2fe0c91f;
  --divider: #2fe0c933;
}
body[data-theme="ember"] { /* firelight at camp */
  --panel-bg: #20100ae8; --panel-border: #ffb37a3d;
  --panel-text: #f5e8dc; --panel-em: #ffca8f;
  --btn-bg: #ff9d5e17; --btn-bg-hover: #ff9d5e33;
  --btn-border: #ff9d5e47; --btn-bg-strong: #ff9d5e22;
  --divider: #ff9d5e33;
}
body[data-theme="abyss"] { /* high contrast */
  --panel-bg: #000000f2; --panel-border: #ffffff59;
  --panel-text: #ffffff; --panel-em: #ffe28a;
  --btn-bg: #ffffff1a; --btn-bg-hover: #ffffff3b;
  --btn-border: #ffffff59; --btn-bg-strong: #ffffff26;
  --divider: #ffffff40;
}
body[data-bars="tropic"] { /* vivid */
  --c-health: #ff4d67; --c-hunger: #ffa726; --c-thirst: #29d3f5;
  --c-energy: #8ef05e; --c-hope: #d67cff;
}
body[data-bars="seaglass"] { /* soft pastels */
  --c-health: #f0a3ab; --c-hunger: #f0cf9e; --c-thirst: #a3d5f0;
  --c-energy: #d5eda0; --c-hope: #e8c6f5;
}
body[data-bars="signal"] { /* colorblind-friendly (Okabe–Ito) */
  --c-health: #d55e00; --c-hunger: #f0e442; --c-thirst: #56b4e9;
  --c-energy: #009e73; --c-hope: #cc79a7;
}
body {
  font-family: Georgia, 'Times New Roman', serif;
  color: #f2ede2;
  background: #06121d;
  overflow: hidden;
}

#crashBanner {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 99;
  background: #7a1020; color: #fff; padding: 6px 12px;
  font: 13px/1.4 monospace;
}

/* ===== Backdrop layers ============================================== */
#backdrop { position: fixed; inset: 0; z-index: 0; transition: filter 1.2s; }
#backdrop .sky  { position: absolute; inset: 0; transition: background 1.2s; }
#backdrop .sun  { position: absolute; width: 90px; height: 90px; border-radius: 50%;
  top: 12%; left: 68%; transition: all 1.2s; }
#backdrop .sea  { position: absolute; left: 0; right: 0; top: 52%; bottom: 0; transition: background 1.2s; }
#backdrop .sand { position: absolute; left: 0; right: 0; top: 78%; bottom: 0; transition: background 1.2s; }
#backdrop .palms { position: absolute; bottom: 14%; left: 4%; font-size: 64px;
  filter: brightness(.35) saturate(.6); letter-spacing: -10px; transition: opacity 1.2s; }

/* Generated art layer (art/ folder). Sits over the CSS-painted scene;
   if an image is missing the painted scene simply shows through. */
#backdrop .art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bg-title .art       { background-image: url('art/bg-title.webp'); }
.bg-sky .art         { background-image: url('art/bg-sky.webp'); }
.bg-ocean-night .art { background-image: url('art/bg-ocean-night.webp'); }
.bg-beach-day .art   { background-image: url('art/bg-beach-day.webp'); }
.bg-beach-dusk .art  { background-image: url('art/bg-beach-dusk.webp'); }
.bg-beach-night .art { background-image: url('art/bg-beach-night.webp'); }
.bg-jungle .art      { background-image: url('art/bg-jungle.webp'); }
.bg-tidepools .art   { background-image: url('art/bg-tidepools.webp'); }
.bg-camp-fringe .art  { background-image: url('art/bg-camp-fringe.webp'); }
.bg-cliff-camp .art   { background-image: url('art/bg-cliff-camp.webp'); }
.bg-jungle-night .art { background-image: url('art/bg-jungle-night.webp'); }
.bg-grove .art        { background-image: url('art/bg-grove.webp'); }
.bg-river .art        { background-image: url('art/bg-river.webp'); }
.bg-mangrove .art     { background-image: url('art/bg-mangrove.webp'); }
.bg-station .art      { background-image: url('art/bg-station.webp'); }
.bg-gullet .art       { background-image: url('art/bg-gullet.webp'); }
.bg-temple .art       { background-image: url('art/bg-temple.webp'); }
.bg-caldera .art      { background-image: url('art/bg-caldera.webp'); }

/* sky-only scenes */
.bg-sky   .sky { background: linear-gradient(#5f8fc7, #a8c6e2 60%, #dfe9f2); }
.bg-sky   .sun { background: #fff7d9; box-shadow: 0 0 60px 24px #fff7d980; }
.bg-sky   .sea, .bg-sky .sand, .bg-sky .palms { opacity: 0; }

.bg-ocean-night .sky { background: linear-gradient(#040b16, #0a1a2e 55%, #10263d); }
.bg-ocean-night .sun { background: #e8ecf2; box-shadow: 0 0 40px 10px #e8ecf240; width: 54px; height: 54px; left: 20%; top: 10%; }
.bg-ocean-night .sea { background: linear-gradient(#0c2033, #071626); top: 45%; }
.bg-ocean-night .sand, .bg-ocean-night .palms { opacity: 0; }

.bg-beach-day .sky  { background: linear-gradient(#7db8dd, #b9dcea 55%, #eef6f4); }
.bg-beach-day .sun  { background: #fff3c4; box-shadow: 0 0 70px 30px #fff3c470; }
.bg-beach-day .sea  { background: linear-gradient(#2f8fa8, #1d6f8d 70%, #15586f); }
.bg-beach-day .sand { background: linear-gradient(#e8d7ae, #cdb586); }
.bg-beach-day .palms { opacity: 1; }

.bg-beach-dusk .sky  { background: linear-gradient(#3f3f74, #b45f6e 55%, #ecb26b); }
.bg-beach-dusk .sun  { background: #ffd9a0; box-shadow: 0 0 80px 34px #ff9d5e66; top: 40%; left: 55%; }
.bg-beach-dusk .sea  { background: linear-gradient(#54465f, #2c3550 70%, #1d2740); }
.bg-beach-dusk .sand { background: linear-gradient(#b9a37f, #8d7a5c); }
.bg-beach-dusk .palms { opacity: 1; }

.bg-beach-night .sky  { background: linear-gradient(#050d1a, #0c1c31 60%, #14304a); }
.bg-beach-night .sun  { background: #eef1f5; box-shadow: 0 0 44px 12px #eef1f540; width: 50px; height: 50px; left: 74%; top: 9%; }
.bg-beach-night .sea  { background: linear-gradient(#0e2438, #081724 70%, #04101a);
  box-shadow: inset 0 -40px 80px -30px #2fe0c94d; } /* the glowing lagoon */
.bg-beach-night .sand { background: linear-gradient(#3d3931, #26231d); }
.bg-beach-night .palms { opacity: 1; filter: brightness(.15); }

.bg-jungle .sky  { background: linear-gradient(#274b31, #3f7042 55%, #6fa05c); }
.bg-jungle .sun  { background: #f5ffce; box-shadow: 0 0 60px 20px #f5ffce4d; width: 60px; height: 60px; left: 30%; top: 8%; }
.bg-jungle .sea  { background: linear-gradient(#1e3d27, #16301e); top: 55%; }
.bg-jungle .sand { background: linear-gradient(#233c24, #17281a); top: 82%; }
.bg-jungle .palms { opacity: 1; filter: brightness(.5) saturate(1.1); font-size: 84px; left: 60%; }

.bg-tidepools .sky  { background: linear-gradient(#8fc3d8, #cfe6e6 60%, #f2f4ea); }
.bg-tidepools .sun  { background: #fff7d0; box-shadow: 0 0 60px 22px #fff7d066; }
.bg-tidepools .sea  { background: linear-gradient(#57b3ad, #2e8b8a 60%, #20706f); top: 58%; }
.bg-tidepools .sand { background: linear-gradient(#c9c3a4, #a3987a); top: 74%;
  box-shadow: inset 0 18px 26px -12px #2e8b8a88; }
.bg-tidepools .palms { opacity: .5; }

.bg-camp-fringe .sky  { background: linear-gradient(#3b6a44, #5c8f54 55%, #8fb46a); }
.bg-camp-fringe .sun  { background: #f8ffd6; box-shadow: 0 0 55px 18px #f8ffd64d; width: 56px; height: 56px; left: 24%; top: 10%; }
.bg-camp-fringe .sea  { background: linear-gradient(#2c4f31, #1e3a24); top: 58%; }
.bg-camp-fringe .sand { background: linear-gradient(#4a5c39, #33422a); top: 80%; }
.bg-camp-fringe .palms { opacity: .9; filter: brightness(.55) saturate(1.1); font-size: 78px; left: 62%; }

.bg-cliff-camp .sky  { background: linear-gradient(#89b7d6, #c5dde6 55%, #f0e9d8); }
.bg-cliff-camp .sun  { background: #fff1c0; box-shadow: 0 0 65px 24px #fff1c060; top: 14%; left: 20%; }
.bg-cliff-camp .sea  { background: linear-gradient(#2e8aa5, #1d6b88 70%, #155570); top: 62%; }
.bg-cliff-camp .sand { background: linear-gradient(#8b7f6b, #6d6252); top: 84%; }
.bg-cliff-camp .palms { opacity: 0; }

.bg-jungle-night .sky  { background: linear-gradient(#04120c, #0a2416 55%, #113322); }
.bg-jungle-night .sun  { background: #dfe8ec; box-shadow: 0 0 36px 10px #dfe8ec33; width: 44px; height: 44px; left: 70%; top: 8%; }
.bg-jungle-night .sea  { background: linear-gradient(#081c12, #05130c); top: 55%; }
.bg-jungle-night .sand { background: linear-gradient(#0b1c11, #06110a); top: 82%; }
.bg-jungle-night .palms { opacity: .8; filter: brightness(.18); font-size: 84px; left: 58%; }

.bg-grove .sky  { background: linear-gradient(#79a86b, #a8c884 55%, #e6ecc0); }
.bg-grove .sun  { background: #fffbe0; box-shadow: 0 0 60px 22px #fffbe066; top: 10%; left: 72%; }
.bg-grove .sea  { background: linear-gradient(#5d8a4e, #46703c); top: 60%; }
.bg-grove .sand { background: linear-gradient(#7a8a54, #5d6b42); top: 80%; }
.bg-grove .palms { opacity: .8; filter: brightness(.6) saturate(1.2); font-size: 70px; left: 8%; }

.bg-river .sky  { background: linear-gradient(#8fbfae, #c9e2cf 55%, #f0f5e2); }
.bg-river .sun  { background: #fdfce0; box-shadow: 0 0 55px 20px #fdfce059; width: 58px; height: 58px; left: 30%; top: 9%; }
.bg-river .sea  { background: linear-gradient(#7fb5c9, #5493ad 60%, #3f7e99); top: 56%;
  box-shadow: inset 0 10px 30px -10px #ffffff66; }
.bg-river .sand { background: linear-gradient(#8b9a7a, #6e7d5f); top: 82%; }
.bg-river .palms { opacity: .7; filter: brightness(.5) saturate(1.1); font-size: 72px; left: 66%; }

.bg-mangrove .sky  { background: linear-gradient(#5e7768, #83987d 55%, #b5bd97); }
.bg-mangrove .sun  { background: #f2f5d9; box-shadow: 0 0 40px 12px #f2f5d940; width: 52px; height: 52px; left: 62%; top: 12%; }
.bg-mangrove .sea  { background: linear-gradient(#4a5c43, #37473a 60%, #26332c); top: 50%;
  box-shadow: inset 0 -30px 60px -20px #141f1a99; }
.bg-mangrove .sand { background: linear-gradient(#3d4a36, #2b3527); top: 84%; }
.bg-mangrove .palms { opacity: .9; filter: brightness(.3) saturate(.8); font-size: 88px; left: 12%; letter-spacing: -24px; }

.bg-station .sky  { background: linear-gradient(#9fb3ba, #c9d4cf 55%, #e8e9dc); }
.bg-station .sun  { background: #fbf7dd; box-shadow: 0 0 46px 16px #fbf7dd4d; width: 56px; height: 56px; left: 18%; top: 10%; }
.bg-station .sea  { background: linear-gradient(#5d7a54, #47603f); top: 58%; }
.bg-station .sand { background: linear-gradient(#a9a99a, #8b8b7d); top: 78%;
  box-shadow: inset 0 6px 18px -6px #55555577; }
.bg-station .palms { opacity: .55; filter: brightness(.45) saturate(.8); font-size: 66px; left: 74%; }

.bg-gullet .sky  { background: linear-gradient(#02070c, #071420 55%, #0b1f2e); }
.bg-gullet .sun  { background: #2fe0c9; box-shadow: 0 0 70px 26px #2fe0c94d; width: 40px; height: 40px; left: 48%; top: 34%; opacity: .8; }
.bg-gullet .sea  { background: linear-gradient(#0a2331, #051520 60%, #030d15);
  box-shadow: inset 0 -30px 90px -20px #2fe0c933; top: 62%; }
.bg-gullet .sand { background: linear-gradient(#0a141c, #050b11); top: 86%; }
.bg-gullet .palms { opacity: 0; }

.bg-temple .sky  { background: linear-gradient(#3d4f63, #5f7183 55%, #93a08f); }
.bg-temple .sun  { background: #e8ecda; box-shadow: 0 0 50px 18px #e8ecda40; width: 50px; height: 50px; left: 64%; top: 8%; }
.bg-temple .sea  { background: linear-gradient(#1b2f3d, #0e2130 60%, #071825);
  box-shadow: inset 0 -24px 70px -18px #2fe0c940; top: 58%; }
.bg-temple .sand { background: linear-gradient(#5a5f55, #434840); top: 84%; }
.bg-temple .palms { opacity: 0; }

.bg-caldera .sky  { background: linear-gradient(#7f9bb5, #b8cbc9 55%, #e6ecd2); }
.bg-caldera .sun  { background: #fef8d8; box-shadow: 0 0 60px 22px #fef8d859; top: 10%; left: 30%; }
.bg-caldera .sea  { background: linear-gradient(#4d7a49, #3a6039 60%, #2c4c2e); top: 52%; }
.bg-caldera .sand { background: linear-gradient(#6f6a58, #565243); top: 86%; }
.bg-caldera .palms { opacity: .5; filter: brightness(.55) saturate(1.2); font-size: 54px; left: 40%; }

.bg-title .sky  { background: linear-gradient(#0e2a44, #1d5a72 50%, #d98e5f 88%, #f7c777); }
.bg-title .sun  { background: #ffe3a3; box-shadow: 0 0 90px 40px #ff9d5e59; top: 62%; left: 46%; }
.bg-title .sea  { background: linear-gradient(#175066, #0d3346 70%, #082331); top: 72%; }
.bg-title .sand, .bg-title .palms { opacity: 0; }

/* ===== HUD ========================================================== */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px;
  background: linear-gradient(#04101acc, #04101a00);
  font-family: system-ui, sans-serif;
}
#hud.hidden { display: none; }
.clock { font-size: 14px; white-space: nowrap; opacity: .95; }
.clock .dot { opacity: .5; margin: 0 6px; }
.meters { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.meter { display: flex; align-items: center; gap: 4px; }
.mi { font-size: 13px; }
.bar { width: 64px; height: 8px; border-radius: 5px; background: #ffffff26; overflow: hidden; }
.fill { height: 100%; width: 100%; border-radius: 5px; transition: width .5s; }
.f-health { background: var(--c-health); } .f-hunger { background: var(--c-hunger); }
.f-thirst { background: var(--c-thirst); } .f-energy { background: var(--c-energy); }
.f-hope   { background: var(--c-hope); }
#kitBtn, #mapBtn, #almBtn, #sndBtn, #menuBtn {
  background: #ffffff1f; border: 1px solid #ffffff38; color: inherit;
  font-size: 16px; border-radius: 8px; padding: 3px 10px; cursor: pointer;
}
#kitBtn:hover, #mapBtn:hover, #almBtn:hover, #sndBtn:hover, #menuBtn:hover { background: #ffffff33; }
#mapBtn.mapBtnNo { animation: mapno .35s ease; }
@keyframes mapno { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }

/* ===== VN panel ===================================================== */
#stage {
  position: fixed; left: 0; right: 0; top: 0; z-index: 2;
  height: 100vh;
  height: 100dvh; /* tracks mobile browsers' collapsing toolbars */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
#portrait {
  align-self: flex-start; margin: 0 0 8px 10px;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 14px;
  padding: 6px 14px 6px 8px;
  color: var(--panel-text);
}
#portrait.hidden { display: none; }
#portraitEmoji { font-size: 40px; line-height: 1; }
#portraitEmoji.hidden { display: none; }
#portraitImg { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; border: 1px solid var(--panel-border); }
#portraitImg.hidden { display: none; }
#portraitName { font-family: system-ui, sans-serif; font-size: 14px; opacity: .9; }
#panel {
  background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 16px;
  padding: 18px 20px 14px; display: flex; flex-direction: column;
  max-height: 62vh; max-height: 62dvh;
  box-shadow: 0 12px 40px #00000080;
  color: var(--panel-text);
}
#textLog { overflow-y: auto; scroll-behavior: smooth; flex: 0 1 auto; min-height: 3.5em; -webkit-overflow-scrolling: touch; }
#textLog p { font-size: calc(17px * var(--tscale, 1)); line-height: 1.62; margin-bottom: 12px; }
#textLog p.faded { opacity: .52; }
#textLog p:last-child { margin-bottom: 4px; }
#textLog em { color: var(--panel-em); }
#moreHint {
  align-self: center; font-size: 12px; opacity: .6; cursor: pointer;
  animation: bob 1.4s ease-in-out infinite; padding: 2px 20px;
}
#moreHint.hidden { display: none; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
#panel.clickable { cursor: pointer; }

#choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#choices button { flex-shrink: 0; }
/* when choices are on screen, cap the dialogue's share of the panel so
   the buttons always get real space (dialogue scrolls instead) */
#panel:has(#choices button) #textLog { max-height: 40vh; max-height: 40dvh; }
#choices:not(:empty) { border-top: 1px solid var(--divider); padding-top: 10px; }
#choices button {
  text-align: left; font: inherit; font-size: 16px; color: inherit;
  background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 10px;
  padding: 10px 14px; cursor: pointer; transition: background .15s, transform .05s;
}
#choices button:hover { background: var(--btn-bg-hover); }
#choices button:active { transform: scale(.99); }
#choices .sub { display: block; font-family: system-ui, sans-serif; font-size: 12.5px; opacity: .62; margin-top: 3px; }

/* title screen buttons get a splashier look */
#choices button.title-btn { text-align: center; font-size: 18px; padding: 13px; background: var(--btn-bg-strong); }
.game-title { display: block; font-size: 44px; letter-spacing: 8px; text-align: center; text-shadow: 0 4px 24px #000a; }
.game-sub { display: block; text-align: center; font-style: italic; opacity: .82; }

/* ===== Kit overlay ================================================== */
#kitOverlay {
  position: fixed; inset: 0; z-index: 10; background: #020a12cc;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#kitOverlay.hidden { display: none; }
#kitCard {
  background: #071726; border: 1px solid #ffffff33; border-radius: 16px;
  padding: 22px 26px; max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto;
}
#kitCard h2 { font-size: 17px; margin: 10px 0 8px; color: #ffe9b8; }
#kitCard h2:first-child { margin-top: 0; }
#kitItems div, #kitFacts div { font-size: 15px; line-height: 1.6; padding-left: 4px; }
#kitCard .none { opacity: .55; font-style: italic; }
#kitClose {
  margin-top: 16px; font: inherit; color: inherit; cursor: pointer;
  background: #ffffff1f; border: 1px solid #ffffff38; border-radius: 8px; padding: 8px 18px;
}

/* ===== In-game menu (TAB) =========================================== */
#menuOverlay {
  position: fixed; inset: 0; z-index: 12; background: #020a12cc;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#menuOverlay.hidden { display: none; }
#menuCard {
  background: #071726; border: 1px solid #ffffff33; border-radius: 16px;
  padding: 22px 26px; max-width: 520px; width: 100%; max-height: 84vh; overflow-y: auto;
}
#menuCard h2 { font-size: 17px; margin: 14px 0 10px; color: #ffe9b8; }
#menuCard h2:first-child { margin-top: 0; }
.menuHint { font-family: system-ui, sans-serif; font-size: 12px; opacity: .55; font-weight: normal; }
.mRow { display: flex; align-items: center; gap: 14px; margin: 10px 0; font-size: 15px; }
.mRow label { min-width: 110px; }
.mRow input[type="range"] { flex: 1; accent-color: #2fe0c9; }
.mChecks { gap: 14px 24px; flex-wrap: wrap; font-family: system-ui, sans-serif; font-size: 14px; }
.mChecks label { min-width: 0; display: flex; align-items: center; gap: 7px; }
.mChecks input { accent-color: #2fe0c9; }
.mThemeRow { flex-wrap: wrap; align-items: flex-start; }
.mThemeRow > label { padding-top: 4px; }
.mSwatches { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
#menuCard button.mSwatch {
  display: flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px;
}
.mSwatch .chip {
  width: 24px; height: 14px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid #ffffff45;
}
#menuCard button.mSwatch.sel { outline: 2px solid #2fe0c9; background: #ffffff2e; }
.mSlot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; margin: 6px 0; background: #ffffff0d; border: 1px solid #ffffff1f;
  border-radius: 10px; font-family: system-ui, sans-serif; font-size: 13.5px;
}
.mSlot span:first-child { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mSlotBtns { display: flex; gap: 6px; flex-shrink: 0; }
#menuCard button {
  font: inherit; font-family: system-ui, sans-serif; font-size: 13px; color: inherit; cursor: pointer;
  background: #ffffff1f; border: 1px solid #ffffff38; border-radius: 8px; padding: 5px 12px;
}
#menuCard button:hover:not(:disabled) { background: #ffffff33; }
#menuCard button:disabled { opacity: .35; cursor: default; }
.mBtns { display: flex; justify-content: space-between; margin-top: 16px; }
.mBtns button { padding: 8px 18px; font-size: 14px; }

/* ===== story backlog =============================================== */
#logOverlay {
  position: fixed; inset: 0; z-index: 13; background: #020a12cc;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#logOverlay.hidden { display: none; }
#logCard {
  background: #071726; border: 1px solid #ffffff33; border-radius: 16px;
  padding: 22px 26px; max-width: 640px; width: 100%; max-height: 84vh;
  display: flex; flex-direction: column;
}
#logCard h2 { font-size: 17px; margin-bottom: 10px; color: #ffe9b8; }
#logBody { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; }
#logBody h3 {
  font-family: system-ui, sans-serif; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; opacity: .55; margin: 14px 0 6px; text-align: center;
}
#logBody p { font-size: 14.5px; line-height: 1.55; margin-bottom: 9px; opacity: .88; }
#logBody p em { color: #ffe9b8; }
#logBody .none { opacity: .55; font-style: italic; font-size: 14px; }
#logClose {
  margin-top: 14px; align-self: flex-end; font: inherit; color: inherit; cursor: pointer;
  background: #ffffff1f; border: 1px solid #ffffff38; border-radius: 8px; padding: 7px 16px;
  font-size: 13px; font-family: system-ui, sans-serif;
}

/* ===== the wayfinder (chart, rendered inside the panel) ============= */
#mapWrap { display: block; max-width: 460px; margin: 2px auto 0; }
/* the chart needs headroom: while it's on screen the text block keeps its
   natural height (no flex squeeze from the long region list) and the panel
   grows; the choices scroll in whatever remains */
#panel:has(#mapWrap) { max-height: 88vh; max-height: 88dvh; }
#panel:has(#choices button):has(#mapWrap) #textLog,
#panel:has(#mapWrap) #textLog { max-height: none; flex: 0 0 auto; }
#mapSvg {
  width: 100%; height: auto; aspect-ratio: 440 / 320; display: block; border-radius: 6px;
  border: 1px solid #4a2f1655;
  box-shadow: inset 0 0 40px #4a2f1633, 0 4px 18px rgba(0, 0, 0, .35); /* aged vignette */
}
.mapReg { cursor: pointer; }
/* survey marks: dashed ink rings, inked solid under the finger */
.mapReg ellipse { fill: #f7efdd26; stroke: #4a2f16aa; stroke-width: 1.6; stroke-dasharray: 6 4; transition: fill .15s, stroke .15s; }
.mapReg:hover ellipse { fill: #5c3a1d2b; stroke: #4a2f16; stroke-dasharray: none; }
.mapEmoji { font-size: 15px; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.mapLabel {
  font: 10.5px 'Segoe Print', 'Bradley Hand', 'Marker Felt', 'Comic Sans MS', cursive; fill: #2e1c0c; text-anchor: middle;
  paint-order: stroke; stroke: #f0e6ccd0; stroke-width: 3px; pointer-events: none;
}
.mapLocked ellipse { fill: #4a2f160f; stroke: #4a2f163d; }
.mapLocked .mapLabel { fill: #6b5a42; font-style: italic; }
.mapTitle { font: italic 600 13px Georgia, 'Times New Roman', serif; fill: #3a2410; letter-spacing: 2px; paint-order: stroke; stroke: #f0e6cc99; stroke-width: 3px; }
#mapHint { display: block; font: 11.5px system-ui, sans-serif; opacity: .65; text-align: center; padding: 5px 4px 0; }
@media (max-width: 560px) {
  .mapLabel { font-size: 11px; }
}

/* ===== field almanac =============================================== */
#almOverlay {
  position: fixed; inset: 0; z-index: 13; background: #020a12cc;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#almOverlay.hidden { display: none; }
#almCard {
  background: #071726; border: 1px solid #ffffff33; border-radius: 16px;
  padding: 22px 26px; max-width: 680px; width: 100%; max-height: 86vh;
  display: flex; flex-direction: column;
}
#almCard h2 { font-size: 17px; margin-bottom: 6px; color: #ffe9b8; }
#almCounts { font-family: system-ui, sans-serif; font-size: 12px; opacity: .6; margin-bottom: 10px; }
#almTabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#almTabs button {
  font: inherit; font-family: system-ui, sans-serif; font-size: 13px; color: inherit; cursor: pointer;
  background: #ffffff14; border: 1px solid #ffffff30; border-radius: 8px; padding: 5px 12px;
}
#almTabs button.sel { background: #2fe0c92e; border-color: #2fe0c966; }
#almBody { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; }
.almRow { display: flex; gap: 12px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid #ffffff12; }
.almRow.almDim { opacity: .55; }
.almThumb { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; border: 1px solid #ffffff2e; flex-shrink: 0; }
.almEmoji { width: 52px; height: 52px; border-radius: 10px; background: #ffffff0d; border: 1px solid #ffffff1f;
  display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.almName { font-size: 15px; color: #ffe9b8; margin-bottom: 2px; }
.almDim .almName { color: inherit; font-style: italic; }
.almText { font-size: 13.5px; line-height: 1.5; opacity: .88; }
.almDone { margin: 14px 4px 4px; padding: 12px 14px; border: 1px solid #2fe0c94d; border-radius: 12px;
  background: #2fe0c914; font-size: 14px; line-height: 1.55; }
.almDone em { color: #9ff5d9; }
#almClose {
  margin-top: 14px; align-self: flex-end; font: inherit; color: inherit; cursor: pointer;
  background: #ffffff1f; border: 1px solid #ffffff38; border-radius: 8px; padding: 7px 16px;
  font-size: 13px; font-family: system-ui, sans-serif;
}
@media (max-width: 560px) {
  .mBtns { flex-wrap: wrap; gap: 8px; }
}

/* ===== small screens =============================================== */
@media (max-width: 560px) {
  /* HUD becomes two rows: [clock ..... buttons] / [all five meters] */
  #hud { flex-wrap: wrap; row-gap: 5px; column-gap: 7px; padding: 6px 8px 5px;
    background: linear-gradient(#04101ae6, #04101a00); }
  .clock { order: 1; font-size: 12.5px; }
  #kitBtn { order: 2; margin-left: auto; }
  #mapBtn { order: 3; }
  #almBtn { order: 4; }
  #sndBtn { order: 5; }
  #menuBtn { order: 6; }
  #kitBtn, #mapBtn, #almBtn, #sndBtn, #menuBtn { font-size: 13px; padding: 2px 6px; }
  .meters { order: 7; flex-basis: 100%; flex-wrap: nowrap; gap: 6px; }
  .meter { flex: 1 1 0; min-width: 0; }
  .bar { width: auto; flex: 1 1 0; min-width: 0; }
  .mi { font-size: 11px; }

  #textLog p { font-size: calc(15.5px * var(--tscale, 1)); line-height: 1.55; }
  .game-title { font-size: 30px; letter-spacing: 5px; }
  #panel { max-height: 66vh; max-height: 66dvh; padding: 14px 14px 10px; }
  #stage { padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  #choices button { padding: 11px 12px; font-size: 15px; background: var(--btn-bg-strong); }
  /* phones: dialogue gets at most ~a third of the screen once buttons
     exist — the choices own the rest of the panel */
  #panel:has(#choices button) #textLog { max-height: 26vh; max-height: 26dvh; }
  #choices:not(:empty) { min-height: 96px; }
  #portrait { margin: 0 0 6px 4px; padding: 4px 10px 4px 6px; }
  #portraitImg { width: 56px; height: 56px; }
  #portraitEmoji { font-size: 30px; }
}

/* phones: the chart still outranks the tight dialogue cap */
@media (max-width: 560px) {
  #panel:has(#mapWrap) { max-height: 92vh; max-height: 92dvh; }
  #panel:has(#choices button):has(#mapWrap) #textLog,
  #panel:has(#mapWrap) #textLog { max-height: none; flex: 0 0 auto; }
}

/* ===== VISIBLE WEATHER (fx.js) — a pointer-transparent layer in #backdrop ===== */
#fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* storm light: the whole scene dims under rain */
#fx::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 2.5s;
  background: linear-gradient(rgba(52, 66, 88, .42), rgba(36, 46, 66, .32));
}
#fx.fxRainOn::before { opacity: 1; }
#fxRain, #fxRain2 { position: absolute; inset: -30% -10% 0; opacity: 0; transition: opacity 2.5s; }
#fxRain {
  background-image: repeating-linear-gradient(78deg, transparent 0 7px, rgba(195, 220, 240, .28) 7px 8px, transparent 8px 15px);
  background-size: 220px 340px; animation: fxFall .55s linear infinite;
}
#fxRain2 {
  background-image: repeating-linear-gradient(76deg, transparent 0 12px, rgba(205, 230, 250, .16) 12px 13px, transparent 13px 26px);
  background-size: 300px 520px; animation: fxFall2 .85s linear infinite;
}
#fx.fxRainOn #fxRain { opacity: .75; }
#fx.fxRainOn #fxRain2 { opacity: .6; }
@keyframes fxFall  { from { background-position: 0 0; } to { background-position: -70px 340px; } }
@keyframes fxFall2 { from { background-position: 0 0; } to { background-position: -100px 520px; } }

#fxBolt {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at 62% -10%, rgba(255, 255, 255, .95), rgba(190, 205, 255, .35) 40%, rgba(120, 140, 200, .12) 62%, transparent 78%);
}
#fxBolt.flash { animation: fxFlash .8s ease-out; }
@keyframes fxFlash {
  0% { opacity: 0; } 5% { opacity: .9; } 11% { opacity: .12; }
  17% { opacity: .6; } 30% { opacity: .08; } 42% { opacity: 0; } 100% { opacity: 0; }
}

#fxFlies { position: absolute; inset: 0; opacity: 0; transition: opacity 2s; }
#fx.fxFliesOn #fxFlies { opacity: 1; }
.fxFly {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: #e4ffb0; box-shadow: 0 0 7px 2px rgba(198, 244, 140, .75);
  opacity: 0; animation-name: fxFly; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes fxFly {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: .95; }
  35%  { opacity: .25; }
  55%  { transform: translate(var(--dx), var(--dy)); opacity: .85; }
  78%  { opacity: .15; }
  100% { transform: translate(calc(var(--dx) * 1.6), calc(var(--dy) * .4)); opacity: 0; }
}

/* the lagoon's seven-beat glow: 7 pulses on the hum's 0.62s step, then the rest */
#fxGlow {
  position: absolute; left: 50%; bottom: 4%; width: 130%; height: 46%;
  transform: translateX(-50%); border-radius: 50%; opacity: 0; transition: opacity 2.5s;
  background: radial-gradient(ellipse at center, rgba(64, 224, 208, .34), rgba(64, 200, 208, .12) 45%, transparent 70%);
  mix-blend-mode: screen;
}
#fx.fxGlowOn #fxGlow { opacity: 1; animation: fxHum 6.74s linear infinite; }
#fx.fxGlowDeep #fxGlow {
  bottom: 16%; height: 62%;
  background: radial-gradient(ellipse at center, rgba(94, 180, 255, .30), rgba(80, 150, 230, .10) 45%, transparent 70%);
}
@keyframes fxHum {
  0% { opacity: .2; } 2% { opacity: .55; } 6.5% { opacity: .2; }
  9.2% { opacity: .2; } 11.2% { opacity: .55; } 15.7% { opacity: .2; }
  18.4% { opacity: .2; } 20.4% { opacity: .55; } 24.9% { opacity: .2; }
  27.6% { opacity: .2; } 29.6% { opacity: .55; } 34.1% { opacity: .2; }
  36.8% { opacity: .2; } 38.8% { opacity: .55; } 43.3% { opacity: .2; }
  46% { opacity: .2; } 48% { opacity: .55; } 52.5% { opacity: .2; }
  55.2% { opacity: .2; } 57.2% { opacity: .55; } 61.7% { opacity: .2; }
  66% { opacity: .14; } 100% { opacity: .14; }
}

/* ===== TROPHY TOAST (trophies.js) ===== */
#trophyToast {
  position: fixed; top: 52px; left: 50%; transform: translate(-50%, -18px);
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: var(--panel-bg, rgba(12, 24, 34, .92)); border: 1px solid rgba(255, 214, 92, .55);
  border-radius: 999px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  font-family: system-ui, sans-serif; z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity .45s, transform .45s;
}
#trophyToast.show { opacity: 1; transform: translate(-50%, 0); }
#trophyToast .ttTag { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #ffd65c; }
#trophyToast .ttName { font-size: 14.5px; color: var(--ink, #eef6f9); }

/* ===== BEACH-FINDS (trinkets.js): the backpack shelf + find note ===== */
.tkNote { opacity: .55; font-size: .82em; font-style: italic; }
.tkRow { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--divider); }
.tkRow:last-child { border-bottom: 0; }
.tkIcon { font-size: 20px; line-height: 1.3; flex: 0 0 auto; }
.tkBody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tkName { font-weight: bold; }
.tkPaid { opacity: .6; font-size: .85em; }
.tkLine { opacity: .78; font-size: .88em; line-height: 1.45; }
.tkImg { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--divider); }

/* ===== THE ISLAND TOUR (tutorial.js) ===== */
#tutOverlay { position: fixed; inset: 0; z-index: 70; }
#tutSpot {
  position: absolute; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(3, 10, 18, .78);
  border: 2px solid rgba(255, 214, 92, .9);
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease;
}
#tutCard {
  position: absolute; max-width: 340px; padding: 13px 16px 11px;
  background: var(--panel-bg); border: 1px solid rgba(255, 214, 92, .5);
  border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  color: var(--panel-text); font-family: Georgia, 'Times New Roman', serif;
}
#tutCard h3 { font-size: 15px; color: #ffd65c; letter-spacing: .5px; margin-bottom: 5px; font-family: system-ui, sans-serif; }
#tutCard p { font-size: 14.5px; line-height: 1.5; }
#tutCard p em { color: var(--panel-em); }
#tutBtns { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 10px; }
#tutDots { font: 12px system-ui, sans-serif; opacity: .6; }
#tutBtns button {
  font: 13px system-ui, sans-serif; padding: 5px 12px; margin-left: 8px; cursor: pointer;
  background: var(--btn-bg-strong); color: var(--panel-text);
  border: 1px solid var(--btn-border); border-radius: 8px;
}
#tutBtns #tutNext { border-color: rgba(255, 214, 92, .6); color: #ffd65c; }
@media (max-width: 560px) { #tutCard { max-width: min(340px, calc(100vw - 24px)); } }

/* ===== THE PHOTOGRAPH (almanac photo tab): scraps + the whole ===== */
.almScrap { object-fit: cover; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.almPhotoWrap { padding: 12px 0 4px; text-align: center; }
.almPhotoFull {
  display: inline-block; width: 100%; max-width: 520px; border-radius: 4px;
  border: 7px solid #efe7d2; box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  transform: rotate(-.6deg);
}

/* ===== KEEPSAKE BOX (keepsakes.js): the run-card museum ===== */
.almKeepsake { cursor: pointer; }
.almKeepsake:hover .almName { text-decoration: underline; }
.almCardWrap { text-align: center; padding: 10px 0; }
.almCardImg { width: 100%; max-width: 300px; border-radius: 10px; box-shadow: 0 8px 26px rgba(0, 0, 0, .5); }

/* ===== CAMP HUB GROUPING (engine hubOrganize): section headers + new-badges ===== */
.chHdr {
  font: 600 11px/1 system-ui, sans-serif; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--panel-em); opacity: .75; text-align: left;
  padding: 9px 4px 3px; margin-top: 2px;
  border-bottom: 1px solid var(--btn-border); user-select: none;
}
#choices .chHdr:first-child { margin-top: 0; padding-top: 2px; }
.newBadge {
  display: inline-block; vertical-align: 2px; margin-left: 6px;
  font: 700 9px/1 system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase;
  color: #1d1607; background: linear-gradient(180deg, #ffd65c, #e8ab2e);
  padding: 2.5px 6px 2px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* ===== TITLE SCREEN GLOW-UP ===== */
/* the painted art breathes — a slow drift-zoom, stilled for reduced motion */
.bg-title .art { animation: titleDrift 46s ease-in-out infinite alternate; }
@keyframes titleDrift { from { transform: scale(1); } to { transform: scale(1.07) translateY(-1.4%); } }
@media (prefers-reduced-motion: reduce) { .bg-title .art { animation: none; } }

/* the panel steps out of the art's way: glassy, centered, frameless */
#backdrop.bg-title ~ #stage #panel {
  background: linear-gradient(#04101a2e, #04101a8c 65%);
  border-color: #ffffff14; box-shadow: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  max-height: 80vh; max-height: 80dvh;
  align-items: center; text-align: center;
}
#backdrop.bg-title ~ #stage #textLog { width: 100%; }
#backdrop.bg-title ~ #stage #choices { width: min(440px, 100%); }
#backdrop.bg-title ~ #stage #choices:not(:empty) { border-top: none; padding-top: 4px; }

/* the wordmark: gilded, breathing */
.game-title { font-size: 54px; letter-spacing: 10px; margin-top: 6px; }
.game-title .gtWord {
  background: linear-gradient(180deg, #fdf6df 8%, #ffd65c 52%, #e8973a 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; /* the parent's shadow would bleed through transparent glyphs */
  animation: titleGlow 6.5s ease-in-out infinite;
}
.game-title .gtWave { display: inline-block; animation: titleBob 5s ease-in-out infinite; }
@keyframes titleGlow {
  0%, 100% { filter: drop-shadow(0 3px 14px #000000a0) drop-shadow(0 0 10px #ffd65c1c); }
  50% { filter: drop-shadow(0 3px 14px #000000a0) drop-shadow(0 0 24px #ffd65c4d); }
}
@keyframes titleBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .game-title .gtWord, .game-title .gtWave { animation: none; } }

/* the island's ledger, worn as quiet medals */
.titleChips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px auto 0; max-width: 520px; }
.titleChips-wrap { max-width: 640px; }
.tChip {
  font: 12.5px/1.35 system-ui, sans-serif; letter-spacing: .3px; white-space: nowrap;
  background: #04101a99; border: 1px solid #ffd65c38; color: #f2ead2;
  padding: 4px 11px; border-radius: 999px;
}
/* rumors of the unfound: fogged, italic, deliberately unresolved */
.tChip.tChipDim {
  opacity: .62; font-style: italic; border-style: dashed; border-color: #9db6c455;
  color: #cfdbe2; background: #04101a66; white-space: normal; text-align: center;
}

/* secondary title buttons: present, not shouting */
#choices button.title-btn-quiet { font-size: 14.5px; padding: 8px 12px; opacity: .88; background: var(--btn-bg); }

@media (max-width: 560px) {
  .game-title { font-size: 34px; letter-spacing: 6px; }
  #backdrop.bg-title ~ #stage #panel { max-height: 84vh; max-height: 84dvh; }
}

/* ===== POLISH PASS: visible feedback + micro-animation ===== */
/* stat floaters: each action's net cost/reward rises off its meter */
.meter { position: relative; }
.statFloat {
  position: absolute; left: 50%; top: -4px; transform: translateX(-50%);
  font: 700 11px/1 system-ui, sans-serif; pointer-events: none; opacity: 0;
  padding: 1px 5px; border-radius: 8px; white-space: nowrap; z-index: 6;
  text-shadow: 0 1px 3px #000c;
  animation: statFloat 1.9s ease-out forwards;
}
.sfUp { color: #b8f5c0; background: #0d3a1cd0; }
.sfDown { color: #ffc2b3; background: #4a1408d0; }
@keyframes statFloat {
  0% { opacity: 0; transform: translate(-50%, 2px) scale(.85); }
  12% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -22px); }
}

/* danger telegraph: a critical meter pulses until it's answered */
.meter.crit .fill { animation: critPulse 1.1s ease-in-out infinite; }
.meter.crit .mi { animation: critShake 1.1s ease-in-out infinite; }
@keyframes critPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.9) saturate(1.4); } }
@keyframes critShake { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-1px); } 75% { transform: translateY(1px); } }

/* scene crossfade: the old art lingers a beat over the new */
#backdrop .artFade {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; pointer-events: none;
}
#backdrop .artFade.fading { animation: artFadeOut .75s ease forwards; }
@keyframes artFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* the day banner: a quiet chapter-mark when a new day arrives */
#dayBanner {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 7; pointer-events: none; opacity: 0;
  font: 600 15px/1 Georgia, serif; letter-spacing: 3px; color: #ffe8b0;
  background: #04101ac0; border: 1px solid #ffd65c40; border-radius: 999px;
  padding: 8px 22px; text-shadow: 0 1px 6px #000;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
#dayBanner.show { animation: dayBanner 2.6s ease forwards; }
@keyframes dayBanner {
  0% { opacity: 0; transform: translate(-50%, -8px); }
  14% { opacity: 1; transform: translate(-50%, 0); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 6px); }
}

/* choices arrive like dealt cards; buttons lift a hair under the finger */
#choices button { animation: chIn .3s ease backwards; }
#choices button:nth-child(2) { animation-delay: .04s; } #choices button:nth-child(3) { animation-delay: .08s; }
#choices button:nth-child(4) { animation-delay: .12s; } #choices button:nth-child(5) { animation-delay: .16s; }
#choices button:nth-child(6) { animation-delay: .2s; }  #choices button:nth-child(n+7) { animation-delay: .24s; }
@keyframes chIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
#choices button:hover { transform: translateY(-1px); border-color: #ffd65c55; }
#choices button:active { transform: scale(.99); }

/* the portrait steps into frame */
#portrait:not(.hidden) { animation: portIn .32s cubic-bezier(.2, 1.4, .4, 1) backwards; }
@keyframes portIn { from { opacity: 0; transform: translateX(-10px) scale(.94); } to { opacity: 1; transform: translateX(0) scale(1); } }

/* stillness for those who ask for it */
@media (prefers-reduced-motion: reduce) {
  .statFloat, .meter.crit .fill, .meter.crit .mi, #backdrop .artFade.fading,
  #dayBanner.show, #choices button, #portrait:not(.hidden) { animation: none; }
  .statFloat { opacity: 1; } /* still informative, just not animated */
  #dayBanner.show { opacity: 1; }
}

/* ===== WEIGHT & VOICE: endings arrive like title cards ===== */
body.on-ending #textLog p:first-child, body.on-death #textLog p:first-child { text-align: center; margin: 6px 0 16px; }
body.on-ending #textLog p:first-child em, body.on-death #textLog p:first-child em {
  display: block; font-style: normal; font-size: 24px; letter-spacing: 3.5px; line-height: 1.35;
  color: #ffd65c; text-shadow: 0 2px 18px #000000a0, 0 0 26px #ffd65c33;
  animation: endTitle 1.6s cubic-bezier(.2, .9, .3, 1) backwards;
}
body.on-death #textLog p:first-child em { color: #c7d3dc; text-shadow: 0 2px 18px #000, 0 0 22px #9fb7c930; }
@keyframes endTitle { from { opacity: 0; letter-spacing: 9px; filter: blur(3px); } to { opacity: 1; } }

/* the scene leans in: a slow zoom and a gathering vignette */
body.on-ending #backdrop .art, body.on-death #backdrop .art { animation: endZoom 40s ease-out forwards; }
@keyframes endZoom { from { transform: scale(1); } to { transform: scale(1.08); } }
body.on-ending #backdrop::after, body.on-death #backdrop::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 52%, #04101ab8 100%);
  animation: vignetteIn 2.4s ease forwards;
}
body.on-death #backdrop::after { background: radial-gradient(ellipse at 50% 38%, transparent 45%, #120507cc 100%); }
@keyframes vignetteIn { from { opacity: 0; } to { opacity: 1; } }
body.on-ending #panel, body.on-death #panel { animation: panelRise .9s ease backwards .25s; }
@keyframes panelRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* long menus admit they scroll: content fades at the bottom edge until read */
#choices.canScroll {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 34px), transparent);
}

@media (prefers-reduced-motion: reduce) {
  body.on-ending #textLog p:first-child em, body.on-death #textLog p:first-child em,
  body.on-ending #backdrop .art, body.on-death #backdrop .art,
  body.on-ending #backdrop::after, body.on-death #backdrop::after,
  body.on-ending #panel, body.on-death #panel { animation: none; }
  body.on-ending #backdrop::after, body.on-death #backdrop::after { opacity: 1; }
}

/* ===== FOREKNOWLEDGE: gallery chips are doors ===== */
.tChipBtn { cursor: pointer; transition: border-color .15s, background .15s; }
.tChipBtn:hover { border-color: #ffd65c90; background: #0a1c2b; }

/* ===== SPECIES ALMANAC UPGRADES ===== */
/* unmet species show as fogged plates: the ghost of a shape, no detail */
.almThumb.almSil { filter: grayscale(1) brightness(.6) contrast(.35) blur(2.5px) sepia(.4); opacity: .75; }
/* met species expand to a portrait plate on tap */
.almRowBtn { cursor: pointer; }
.almRowBtn:hover .almName { text-decoration: underline; }
.almSpWrap { text-align: center; padding: 8px 0 12px; }
.almSpImg {
  width: min(340px, 82%); border-radius: 12px;
  border: 1px solid #ffffff2e; box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  animation: spIn .3s ease backwards;
}
@keyframes spIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .almSpImg { animation: none; } }

/* ===== BOND BEATS: a quiet toast when trust crosses a tier ===== */
#bondToast {
  position: fixed; top: 52px; left: 50%; transform: translate(-50%, -18px);
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  background: var(--panel-bg, rgba(12, 24, 34, .92)); border: 1px solid rgba(240, 130, 160, .55);
  border-radius: 999px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  font-family: system-ui, sans-serif; z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity .45s, transform .45s;
}
#bondToast.show { opacity: 1; transform: translate(-50%, 0); }
#bondToast .btTag { font-size: 13px; }
#bondToast .btName { font-size: 14.5px; color: var(--ink, #eef6f9); font-style: italic; }

/* ===== OLD GROUND: the backpack shelves by origin ===== */
.tkHdr {
  font: 600 10.5px/1 system-ui, sans-serif; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--panel-em); opacity: .7; padding: 10px 2px 4px;
  border-bottom: 1px solid var(--divider); margin-bottom: 2px;
}
#kitTrinkets .tkHdr:first-child { padding-top: 2px; }

/* ===== FIELD NOTES: the almanac and backpack are paper artifacts ===== */
/* Scoped custom properties re-dress everything inside without touching the
   markup — the notebook keeps its paper look under every color theme. */
#almCard, #kitCard {
  --panel-bg: #efe5c8; --panel-border: #7a5c3555;
  --panel-text: #2e2013; --panel-em: #7a4a1a;
  --btn-bg: #5c3d1a14; --btn-bg-hover: #5c3d1a2e;
  --btn-border: #5c3d1a47; --btn-bg-strong: #5c3d1a1f;
  --divider: #5c3d1a33; --ink: #2e2013;
  background: linear-gradient(160deg, #f2e9cf, #e8dbb8 60%, #ddcda6) !important;
  color: #2e2013;
  border: 1px solid #7a5c3566 !important;
  box-shadow: inset 0 0 60px #7a5c351f, 0 14px 44px rgba(0, 0, 0, .5) !important;
}
#almCard h2, #kitCard h2 { color: #4a2f16; }
#almCard h2 .menuHint, #kitCard .menuHint { color: #6b5a42; opacity: .9; }
#almCard .almName, #kitCard .tkName { color: #3a2410; }
#almCard .almDone { color: #7a4a1a; }
/* the notebook's own hand for the shelf headers */
#kitCard .tkHdr, #almCard #almTabs button {
  font-family: 'Segoe Print', 'Bradley Hand', 'Marker Felt', 'Comic Sans MS', cursive;
  text-transform: none; letter-spacing: .4px;
}

/* the surveyor's habit: the most-walked region wears a stain ring */
.mapWornRing {
  fill: none; stroke: #4a2f16; stroke-width: 5; opacity: .14;
  stroke-linecap: round; pointer-events: none;
}