/* Graphics-only finishing layer. Load AFTER table/pass-play/result/intro CSS.
 * Ownership: this file, js/tiles.js, tests/tile-art.test.js only. No layout,
 * target sizing, reveal/privacy state, result/intro components or asset wiring.
 * Material/engraving overrides deliberately opt OUT of Ink, high-contrast
 * themes, OS increased contrast and forced colors. No external/raster assets.
 */
@media (forced-colors: none) and (prefers-contrast: no-preference) {
  /* Deepened engraving on light materials, particularly pastel Sakura.
   * Variables live on tile faces, never on text panels or theme previews. */
  :is(html:not([data-theme]), html[data-theme="jade"]) :is(#table, .pp-screen) .face-tile {
    --tf-green: #17632d;
    --tf-gold: #876109;
  }
  html[data-theme="sakura"] :is(#table, .pp-screen) .face-tile {
    --tf-green: #286643;
    --tf-red: #ad2949;
    --tf-blue: #6350ab;
    --tf-gold: #86512c;
    --tf-num: #96354e;
  }

  /* Zero-specificity guard keeps component rules easy to maintain. */
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) #center {
    background:
      radial-gradient(ellipse at 48% 28%, #20795d 0%, #125840 65%, #0b4434 100%);
    border-color: #654a32;
    box-shadow: inset 0 1px 0 #d8c49b33, inset 0 0 48px #031d2359,
      0 0 0 1px #b4936159, 0 6px 18px #0004;
  }
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) #center::before {
    /* Fine woven vector grain, no noise filter or animated texture. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M0 1h8M1 0v8' fill='none' stroke='%23e1efde' stroke-width='.5'/%3E%3C/svg%3E");
    opacity: .09;
    mix-blend-mode: soft-light;
    pointer-events: none;
  }
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) :is(.your-hand, .pp-private .pp-hand) {
    border-bottom-color: #aa8860;
    background: linear-gradient(0deg, #3c2b21a6, #73523a26 12%, transparent 44%);
    box-shadow: 0 1px 0 #201a15b3;
  }
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) .pp-private {
    border-color: #654a32;
    background: radial-gradient(ellipse at 50% 20%, #20795d, #104c38 85%);
    box-shadow: inset 0 1px 0 #e7d2a833, inset 0 0 48px #001e1859, 0 6px 18px #0004;
  }
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) .pp-seat {
    background: linear-gradient(145deg, #183e32, #102e25);
    border-color: #52705e;
    box-shadow: inset 0 1px 0 #dbe7d10d, 0 2px 5px #0002;
  }
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) .pp-seat.pp-current {
    background: linear-gradient(145deg, #244c3a, #183b2c);
    border-color: #cfb77a;
    box-shadow: inset 3px 0 0 #cfb77a, inset 0 1px 0 #f2e0b31a;
  }
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) .seat.active-seat .seat-name {
    color: #f1dc9e;
    background: #173d2f;
    box-shadow: 0 0 0 1px #bda66d;
  }
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) .pp-wind {
    background: #0c2a20;
    color: #f0dfae;
    border-color: #9e946d;
    box-shadow: inset 0 0 0 3px #d4c89a0a;
  }
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) :is(.your-hand .tile.selected-tile, .pp-hand button.selected) {
    /* Stable selection, not a glow. Focus remains a distinct warm ring. */
    outline-color: #a5ddf5;
    box-shadow: inset 0 0 0 2px #163f55, 0 3px 0 var(--tile-side),
      0 4px 0 var(--tile-side-dark), 0 6px 8px #0005;
  }
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) :is(.your-hand .tile, .pp-screen button, .pp-view-controls > summary):focus-visible {
    outline: 3px solid #ffe3a0;
    outline-offset: 3px;
  }

  /* Replace only the existing decorative diamond's paint, not its DOM text
   * or occupied space. Backgrounds have no accessibility-tree or hit targets.
   * The crossed bamboo/ring crest contains no text, face or player data. */
  :where(html:not([data-theme="ink"]):not([data-theme="highcontrast"]):not([data-theme="high-contrast"])) .pp-lock {
    color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 64'%3E%3Cg fill='none' stroke='%23e3ce91' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 32 48 6 74 32 48 58Z' stroke-width='1.2' opacity='.55'/%3E%3Ccircle cx='48' cy='32' r='19' stroke-width='1.5'/%3E%3Cpath d='M37 45 59 19M37 19 59 45M40 35l5 4M49 25l5 4M40 29l5-4M49 39l5-4' stroke-width='2.6'/%3E%3Cpath d='M8 32h9m62 0h9' stroke-width='1.4' opacity='.65'/%3E%3C/g%3E%3C/svg%3E") center / auto 100% no-repeat;
    pointer-events: none;
    user-select: none;
  }
  html[data-table-view="focused"] .pp-lock {
    background-image: none;
    color: #dcc579;
  }
}

/* These safety rules also apply to Ink and system contrast modes. Do not
 * remove selection/focus outlines when suppressing movement. */
@media (prefers-reduced-motion: reduce) {
  :is(.your-hand .tile, .pp-hand .tile) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
html[data-table-view="focused"] :is(.your-hand .tile, .pp-hand .tile) {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}