/* Vinyl — warm cream parlor, aged paper and rust, classic serif faces. */

body[data-theme="vinyl"] {
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: Georgia, "Palatino Linotype", "Times New Roman", serif;
  --font-tile-num: Georgia, "Times New Roman", serif;

  --bg: #f1e8d5;
  --panel: #faf4e6;
  --ink: #2e241b;
  --ink-soft: #8a7a63;
  --ink-faint: #b6a68a;

  --accent: #c9553e;             /* rust */
  --accent-deep: #c96b28;        /* burnt amber */
  --accent-ink: #faf4e6;
  --mahj-bg: #a83224;            /* the deep red seal */
  --mahj-ink: #faf4e6;

  /* Muted vintage baize under a rust-and-tan border. */
  --felt: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px),
          repeating-linear-gradient(-45deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 4px),
          radial-gradient(ellipse at 50% 38%, #6f8a5e, #46583c 85%);
  --felt-ink: #e6ddc4;
  --felt-shadow: inset 0 0 0 2px #c9553e55, inset 0 0 0 10px transparent,
                 inset 0 0 0 11px #c96b2833, inset 0 6px 40px rgba(0, 0, 0, .35);

  --chip-bg: #ede0c4;
  --chip-ink: #c9553e;
  --east-bg: #c9553e;
  --east-ink: #faf4e6;

  --tile-bg: linear-gradient(178deg, #fffdf5, #f3ecd8);
  --tile-border: 1px solid #d9c9a8;
  --tile-shadow: 0 2px 4px rgba(46, 36, 27, .22);
  --tile-back: linear-gradient(178deg, #7a4a34, #5e3826);
  --tile-back-border: 1px solid #c9553e;
  --tile-num: #2e241b;
  --tile-sub: #8a7a63;
  --tile-joker-bg: linear-gradient(178deg, #fbeecf, #f2ddb0);
  --tile-flower-bg: linear-gradient(178deg, #eef2e0, #dde5cc);
  --exposure-bg: rgba(201, 85, 62, .13);

  --radius-panel: 8px;
  --radius-btn: 5px;
  --radius-tile: 5px;
  --btn-bg: #ede0c4;
  --btn-ink: #2e241b;
  --btn-border: 1px solid #d9c9a8;
  --input-border: 1px solid #d9c9a8;
  --shadow: 0 2px 12px rgba(46, 36, 27, .16);
  --shadow-hover: 0 4px 14px rgba(46, 36, 27, .24);

  --anim-tile-in: .18s;
  --anim-tile-in-dy: 6px;

  /* card suit-relationship colors, deepened to read on cream */
  --cs-a: #3a6ea5;
  --cs-b: #a83224;
  --cs-c: #35837b;
  --cs-f: #c96b28;
}

/* Tiles read dark-brown on aged ivory. */
body[data-theme="vinyl"] .tile { color: #2e241b; }
body[data-theme="vinyl"] .t-glyph { filter: grayscale(.1); }
body[data-theme="vinyl"] .tile[data-suit="crak"] .t-glyph { color: #a83224; }
body[data-theme="vinyl"] .tile[data-cat="joker"] .t-glyph { color: #c9553e; }

/* Dots and bams are pip grids (rows of up to three), like a real tile face. */
body[data-theme="vinyl"] .tile[data-suit="dot"] .t-glyph,
body[data-theme="vinyl"] .tile[data-suit="bam"] .t-glyph {
  white-space: pre-line;
  font-size: .8em;
  line-height: 1.35;
  letter-spacing: 3px;
  text-indent: 3px; /* balance the letter-spacing tail */
  text-align: center;
}
body[data-theme="vinyl"] .tile[data-suit="dot"] .t-glyph { color: #3a6ea5; }
body[data-theme="vinyl"] .tile[data-suit="bam"] .t-glyph { color: #3e6b45; font-size: .95em; }
body[data-theme="vinyl"] .tile.small[data-suit="dot"] .t-glyph,
body[data-theme="vinyl"] .tile.small[data-suit="bam"] .t-glyph {
  font-size: .45em; line-height: 1.3; letter-spacing: 1.5px; text-indent: 1.5px;
}

/* Winds in brushed characters; dragons large and centered. */
body[data-theme="vinyl"] .tile[data-wind] .t-glyph { font-size: 1.9em; color: #2e241b; }
body[data-theme="vinyl"] .tile[data-dragon] .t-glyph { font-size: 2.3em; line-height: 1; }
body[data-theme="vinyl"] .tile[data-dragon="R"] .t-glyph { color: #a83224; }
body[data-theme="vinyl"] .tile[data-dragon="G"] .t-glyph { color: #3e6b45; }
body[data-theme="vinyl"] .tile.small[data-wind] .t-glyph { font-size: 1.1em; }
body[data-theme="vinyl"] .tile.small[data-dragon] .t-glyph { font-size: 1.25em; }

body[data-theme="vinyl"] #phase-banner { letter-spacing: .04em; }
body[data-theme="vinyl"] .seat-label.active-turn { box-shadow: 0 0 0 1px var(--accent); }