/* Lightkeepers v0.17 "Moonlight Couture": milky porcelain menus over the same
   moonlit world. Menus only: the home screen (#screen-home) and the home sheets
   (dialog.sheet while no match is on screen). The match (#screen-game), its
   result, the search overlay and the lobby keep the dark Nocturne tokens, so the
   arena stays ink-blue and readable. Loaded last; no new fonts or images.
   Direction selected by the user on 29 Sep 2026 (see docs/VISUAL_V017.md). */

#screen-home,
#app:not([data-screen="game"]) dialog.sheet,
.ld-art,
#boot-status.ld-on {
  --mk-milk: #f3f0f5;
  --mk-milk-2: #e9e5ee;
  --mk-card: rgba(255, 253, 250, .9);
  --mk-card-2: rgba(248, 245, 250, .94);
  --mk-well: rgba(226, 222, 234, .72);
  --mk-navy: #1b2250;
  --mk-navy-2: #2b3470;
  --mk-shadow: 0 8px 22px rgba(38, 42, 84, .12), 0 1px 0 rgba(255, 255, 255, .9) inset;
  /* Nocturne tokens remapped for a light ground (text is ink, accents deep gold). */
  --ivory: #1b2250;
  --ivory-2: #2f3663;
  --cream: #2f3663;
  --text: #2a3158;
  --muted: #585f82;
  --gold: #9b7633;
  --gold-hot: #8a6424;
  --line: rgba(155, 118, 51, .34);
  --line-soft: rgba(155, 118, 51, .2);
  --line-strong: rgba(155, 118, 51, .62);
  --glass: rgba(255, 253, 250, .86);
  --glass-hi: rgba(255, 253, 250, .94);
  color: var(--text);
}

/* ---------- ground: porcelain milk; key art stays a moonlit window on Battle ---------- */
#screen-home .keyart { background: linear-gradient(180deg, #f6f3f7, var(--mk-milk) 60%, var(--mk-milk-2)); }
#screen-home .keyart-veil {
  background:
    linear-gradient(180deg, rgba(243, 240, 245, .96) 0%, rgba(243, 240, 245, .7) 13%, rgba(243, 240, 245, 0) 26%),
    linear-gradient(180deg, rgba(243, 240, 245, 0) 44%, rgba(243, 240, 245, .72) 58%, rgba(243, 240, 245, .96) 70%, var(--mk-milk) 100%);
}
#app[data-tab="cards"] #screen-home .keyart-veil,
#app[data-tab="journey"] #screen-home .keyart-veil,
#app[data-tab="shop"] #screen-home .keyart-veil,
#app[data-tab="trials"] #screen-home .keyart-veil { background: var(--mk-milk); }
#app[data-tab="cards"] #screen-home .keyart-img,
#app[data-tab="journey"] #screen-home .keyart-img,
#app[data-tab="shop"] #screen-home .keyart-img,
#app[data-tab="trials"] #screen-home .keyart-img { opacity: 0; }

#screen-home h1 { color: var(--mk-navy); text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 0 22px rgba(255, 255, 255, .9); }
#screen-home .brand-crest { color: var(--gold); opacity: 1; }

/* ---------- surfaces: milky cards with a fine gold edge ---------- */
#screen-home .hdr-me,
#screen-home .wallet,
#screen-home .icon-btn,
#app:not([data-screen="game"]) dialog.sheet .icon-btn {
  background: var(--mk-card); border-color: var(--line); color: var(--mk-navy);
  box-shadow: 0 2px 8px rgba(38, 42, 84, .1);
}
#screen-home .hdr-me:hover { background-color: #fff; }
#screen-home .coin.moon svg { color: #4a5aa8; }

#screen-home .daily,
#screen-home .journey,
#screen-home .journey-block,
#screen-home .season1,
#screen-home .panel,
#screen-home .rule-list,
#screen-home .town-card,
#screen-home .shop-today,
#screen-home details.more > summary,
#screen-home .shop-info > summary,
#screen-home .shop-empty,
#screen-home .today-offline {
  background: var(--mk-card); border-color: var(--line-soft); box-shadow: var(--mk-shadow);
}
#screen-home .shop-info-body { background: var(--mk-card-2); }

#screen-home .chest,
#screen-home .deck-summary,
#screen-home .preset,
#screen-home .mode-switch,
#screen-home .cy-next,
#screen-home .lb-row,
#screen-home .deck-slots .slot.empty,
#screen-home .chip,
#screen-home .gift-card.claimed,
#screen-home .cy-bench-card[data-state="bench"],
#screen-home .town-fallback > li,
#screen-home .recap-chart.compact,
#screen-home .road-bar,
#screen-home .cg-dots li { background: var(--mk-well); border-color: var(--line-soft); }
#screen-home .deck-summary .ds-label { color: var(--gold-hot); }

/* Selected segments and presets: ink-navy pills, ivory text. */
#screen-home .mode-opt[aria-pressed="true"],
#screen-home .preset[aria-pressed="true"],
#screen-home .difficulty button[aria-checked="true"],
#app:not([data-screen="game"]) dialog.sheet .difficulty button[aria-checked="true"] {
  background: linear-gradient(180deg, var(--mk-navy-2), var(--mk-navy)); color: var(--tk-ivory); border-color: rgba(var(--tk-line-rgb), .6);
}

/* Ink islands inside the milky menus keep the light-on-ink tokens. */
#screen-home .mode-opt[aria-pressed="true"],
#screen-home .preset[aria-pressed="true"],
#screen-home .today-theme,
#screen-home .btn.primary,
#app:not([data-screen="game"]) dialog.sheet .btn.primary,
#app:not([data-screen="game"]) dialog.sheet .difficulty button[aria-checked="true"] {
  --ivory: var(--tk-ivory); --ivory-2: var(--tk-ivory-2); --text: var(--tk-ivory-2); --muted: #c6cbe2; --gold-hot: var(--tk-gold-hot); --gold: var(--tk-gold);
}

/* Card tiles: porcelain frame; the art keeps a soft moonlit well so the
   porcelain characters don't wash out on milk. */
#screen-home .card-tile,
#screen-home .deck-slots .slot,
#screen-home .cy-bench-card {
  background: linear-gradient(180deg, #fffdf9, #f1edf4); border-color: var(--line); box-shadow: 0 4px 12px rgba(38, 42, 84, .1);
}
#screen-home .ct-art { background: radial-gradient(circle at 50% 32%, #eef0fb, #c9cde4 78%); }

/* Shop tiles and gift. */
#screen-home .offer-tile,
#screen-home .shop-tile,
#app:not([data-screen="game"]) #collection-sheet .shop-tile { background: linear-gradient(180deg, #fffdf9, #efebf3); border-color: var(--line); box-shadow: var(--mk-shadow); }
#screen-home .offer-tile.done { background: var(--mk-well); }
#screen-home .gift-card { background: linear-gradient(100deg, rgba(var(--tk-gilt-mid-rgb), .42), rgba(255, 253, 250, .9) 62%); border-color: var(--line); }
#screen-home .today-theme { background: linear-gradient(90deg, var(--mk-navy), var(--mk-navy-2)); color: var(--tk-ivory); }
#screen-home .today-theme .chip { background: rgba(3, 6, 20, .55); border-color: rgba(var(--tk-line-rgb), .3); color: var(--tk-ivory); }
#screen-home .offer-tile.w-weekend .ot-ribbon { color: #3d4b94; background: rgba(74, 90, 168, .12); }
#screen-home .si-cur.moon { color: #4a5aa8; }

/* Accents that were light mint/teal on ink become deep teal on milk. */
#screen-home .rp-ranked[data-dir="up"],
#screen-home .keep-status[data-kind="ok"],
#screen-home .training-status[data-state="done"],
#app:not([data-screen="game"]) dialog.sheet .training-entry[data-state="done"] .mr-note,
#app:not([data-screen="game"]) dialog.sheet .keep-status[data-kind="ok"],
#app:not([data-screen="game"]) dialog.sheet .recent-list li .rc-cat { color: var(--tk-seat0-dark); }

/* ---------- Battle action: navy lantern button (menus only) ---------- */
#screen-home .btn.primary,
#app:not([data-screen="game"]) dialog.sheet .btn.primary {
  background: linear-gradient(180deg, #2f3a7c 0%, var(--mk-navy) 70%, #141a40 100%);
  color: #f7ecd0; border: 1px solid rgba(var(--tk-line-rgb), .75);
  box-shadow: 0 10px 24px rgba(27, 34, 80, .28), inset 0 1px 0 rgba(255, 240, 210, .22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
#screen-home .btn:not(.primary),
#app:not([data-screen="game"]) dialog.sheet .btn:not(.primary) {
  background: var(--mk-card); color: var(--mk-navy); border-color: var(--line);
}

/* ---------- tab bar ---------- */
#screen-home .tabbar { background: rgba(250, 248, 251, .94); border-color: var(--line-soft); box-shadow: 0 -6px 18px rgba(38, 42, 84, .08); }
#screen-home .tab { color: #5d6485; }
#screen-home .tab:hover { color: var(--mk-navy); }
#screen-home .tab[aria-selected="true"] { color: var(--mk-navy); }
#screen-home .tab[aria-selected="true"] svg { filter: none; color: var(--gold-hot); }
#screen-home .tab::before { background: var(--gold); }

/* ---------- home sheets (menu, card sheet, profile, help...) ---------- */
#app:not([data-screen="game"]) dialog.sheet::backdrop { background: rgba(40, 44, 80, .38); }
#app:not([data-screen="game"]) dialog.sheet .sheet-card {
  background: linear-gradient(180deg, #fbf9fb, var(--mk-milk)); border-color: var(--line);
  box-shadow: 0 24px 60px rgba(27, 34, 80, .35);
}
#app:not([data-screen="game"]) dialog.sheet .menu-row,
#app:not([data-screen="game"]) dialog.sheet .research-choice,
#app:not([data-screen="game"]) dialog.sheet .practice-row,
#app:not([data-screen="game"]) dialog.sheet .restore-compare div,
#app:not([data-screen="game"]) dialog.sheet .seat,
#app:not([data-screen="game"]) dialog.sheet details.more > summary { background: var(--mk-card); border-color: var(--line-soft); }
#app:not([data-screen="game"]) dialog.sheet .menu-row:hover { background: #fff; }
#app:not([data-screen="game"]) dialog.sheet .brand-note { background: var(--mk-well); color: var(--muted); }
#app:not([data-screen="game"]) dialog.sheet .difficulty,
#app:not([data-screen="game"]) dialog.sheet .cs-stats div,
#app:not([data-screen="game"]) dialog.sheet .cs-scene,
#app:not([data-screen="game"]) dialog.sheet .recent-summary div,
#app:not([data-screen="game"]) dialog.sheet .rv-stats,
#app:not([data-screen="game"]) dialog.sheet .lb-row,
#app:not([data-screen="game"]) dialog.sheet .is-slot,
#app:not([data-screen="game"]) dialog.sheet .is-offer,
#app:not([data-screen="game"]) dialog.sheet .cl-steps li,
#app:not([data-screen="game"]) dialog.sheet .code-field,
#app:not([data-screen="game"]) dialog.sheet .join-row input { background: var(--mk-well); border-color: var(--line-soft); color: var(--mk-navy); }
#app:not([data-screen="game"]) dialog.sheet .cs-art,
#app:not([data-screen="game"]) dialog.sheet .offer-art svg { background: radial-gradient(circle at 50% 30%, #eef0fb, #c9cde4 80%); }
#app:not([data-screen="game"]) dialog.sheet .si-card,
#app:not([data-screen="game"]) dialog.sheet .cl-card { background: linear-gradient(180deg, #fffdf9, #efebf3); border-color: var(--line); }
#app:not([data-screen="game"]) dialog.sheet .help-training { background: linear-gradient(180deg, rgba(var(--tk-seat0-rgb), .14), var(--mk-card)); }
/* The recorded card demo is a slice of the arena: it keeps the dark ground. */
#app:not([data-screen="game"]) dialog.sheet .cs-demo {
  --ivory: var(--tk-ivory); --text: var(--tk-text); --muted: var(--tk-muted); --gold-hot: var(--tk-gold-hot);
}
/* Keeper Trials header sits on milk here, not on the dark map. */
#screen-home .town-head { text-shadow: none; }

/* ---------- v0.17 accessibility pass (Fable review) ---------- */
/* Benched tiles: the well composited over milk, made opaque so the small bench
   tag has a known ground; plain and deep gold both fall short of 4.5:1 on it,
   so the tag takes the muted ink. Dashed edge and dimmed icon stay. */
#screen-home .cy-bench-card[data-state="bench"] { background: #e7e3ed; }
#screen-home .cy-bench-card[data-state="bench"] .cy-bench-tag { color: var(--muted); font-weight: 700; }
/* Mode note sits over the key art: give it an opaque milky pill. */
#screen-home .mode-note:not([hidden]) {
  width: fit-content; max-width: 100%; margin: -4px auto 0; padding: 3px 10px; border-radius: 999px;
  background: #fbf9fb; border: 1px solid var(--line-soft); box-shadow: 0 2px 8px rgba(38, 42, 84, .1);
}
/* "Equipped · slot 2": tighter tracking so it fits a 360px two-column tile;
   if it must wrap, balance it so the slot number is never left alone. */
#screen-home .shop-tile .st-status,
#app:not([data-screen="game"]) #collection-sheet .st-status { letter-spacing: .06em; text-wrap: balance; }

/* v0.24 Moon Gift on the milky ground: the cream petals and white plinth were
   drawn for the ink sheet, so on porcelain they get a thin navy rim (two tight
   drop-shadows), and opened slots dim less so the gift still reads at 38 px. */
#app:not([data-screen="game"]) dialog.sheet .chest-stage .chest-art,
#screen-home .chest.ready .chest-art {
  filter: drop-shadow(0 0 .6px var(--mk-navy-2)) drop-shadow(0 1px 1.5px rgba(var(--tk-ink-1-rgb), .28));
}
#screen-home .chest.opened .chest-art {
  opacity: .78;
  filter: saturate(.6) drop-shadow(0 0 .5px var(--mk-navy-2));
}
#screen-home .chest.opened { color: var(--gold-hot); }