/* Midnight — night-sky navy, brass-gold accents, moonlit tile faces.
   Palette ported from the canon project's "midnight" theme; the tiles are
   deep space (planets, rockets, stars — glyphs in themes.js). */

body[data-theme="midnight"] {
  --font-display: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-tile-num: "Segoe UI", "Helvetica Neue", sans-serif;

  --bg: #0b1120;
  --panel: #141d33;
  --ink: #e6ebf5;
  --ink-soft: #8291ad;
  --ink-faint: #55648a;
  --danger: #e06565;

  --accent: #e8b34b;             /* brass gold */
  --accent-deep: #e09742;        /* deeper amber */
  --accent-ink: #221805;
  --mahj-bg: #b04545;
  --mahj-ink: #ffecec;

  /* The table: a clear night sky, ringed in a thin band of gold. */
  --felt: radial-gradient(ellipse at 50% 30%, #1d2b4d, #131f3a 65%, #0b1424);
  --felt-ink: #9fb2d4;
  --felt-shadow: inset 0 0 0 2px #263452, inset 0 0 0 3px #e8b34b44,
                 inset 0 10px 44px rgba(0, 0, 0, .6);

  --chip-bg: #1c2946;
  --chip-ink: #e8b34b;
  --east-bg: #e8b34b;
  --east-ink: #221805;

  /* Moonlit tile faces on the dark table; backs in navy with a gold rim. */
  --tile-bg: linear-gradient(178deg, #f2f5fb, #dde4f1);
  --tile-border: 1px solid #9aa8c4;
  --tile-shadow: 0 3px 6px rgba(0, 0, 0, .55);
  --tile-back: linear-gradient(178deg, #1d2b4d, #101a30);
  --tile-back-border: 1px solid #e8b34b;
  --tile-num: #1b2438;
  --tile-sub: #66708a;
  --tile-joker-bg: linear-gradient(178deg, #f7f0da, #eee0b8);
  --tile-flower-bg: linear-gradient(178deg, #e8f0fa, #d5e2f4);
  --exposure-bg: rgba(232, 179, 75, .14);

  --radius-panel: 14px;
  --radius-btn: 7px;
  --radius-tile: 6px;
  --btn-bg: #1c2946;
  --btn-ink: #e6ebf5;
  --btn-border: 1.5px solid #263452;
  --input-border: 1.5px solid #263452;
  --shadow: 0 4px 14px rgba(0, 0, 0, .5);
  --shadow-hover: 0 6px 16px rgba(0, 0, 0, .6);

  --anim-tile-in: .2s;
  --anim-tile-in-dy: 8px;

  /* card suit-relationship colors, brightened to read on navy */
  --cs-a: #5aa8e0;
  --cs-b: #e06565;
  --cs-c: #7cc9a2;
  --cs-f: #e8b34b;
}

/* Tiles read deep navy on the moonlit faces. */
body[data-theme="midnight"] .tile { color: #1b2438; }

/* Rocket fleets and star clusters pip up in rows, like a real tile face. */
body[data-theme="midnight"] .tile[data-suit="bam"] .t-glyph,
body[data-theme="midnight"] .tile[data-suit="crak"] .t-glyph {
  white-space: pre-line;
  font-size: .6em;
  line-height: 1.3;
  letter-spacing: 1px;
  text-align: center;
}
body[data-theme="midnight"] .tile.small[data-suit="bam"] .t-glyph,
body[data-theme="midnight"] .tile.small[data-suit="crak"] .t-glyph {
  font-size: .4em; line-height: 1.3; letter-spacing: .5px;
}

body[data-theme="midnight"] #brand { color: var(--accent); }
body[data-theme="midnight"] .seat-label.active-turn { background: var(--accent); color: var(--accent-ink); }