/* Era styling follows the rendered game state. The colour scheme is independent. */
:root[data-ui-era="cart"] :is(.machine-case,.machine-key,.machine-rail) {
  --machine-surface: color-mix(in srgb, var(--panel) 58%, #a8b09d);
  --machine-bed: color-mix(in srgb, var(--panel2) 64%, #a6ad9c);
  --machine-edge: color-mix(in srgb, var(--muted) 42%, #8b9483);
  --machine-glint: #fff8e43d;
  --machine-on: var(--target);
}
:root[data-theme="dark"][data-ui-era="cart"] :is(.machine-case,.machine-key,.machine-rail) {
  --machine-surface: color-mix(in srgb, var(--panel) 62%, #435648);
  --machine-bed: color-mix(in srgb, var(--bg) 81%, #36473a);
  --machine-edge: color-mix(in srgb, var(--line) 58%, #788676);
  --machine-glint: #e3e9d716;
}
:root[data-ui-era="cart"] .machine-case {
  border-radius: 3px 6px 6px 3px;
  background-image: linear-gradient(105deg,var(--machine-glint),transparent 78%);
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 4px var(--machine-glint), 0 3px 0 color-mix(in srgb,var(--machine-edge) 42%,var(--bg));
}
:root[data-ui-era="cart"] .machine-mark {
  color: color-mix(in srgb, var(--ink) 76%, var(--accent-text));
}
:root[data-ui-era="cart"] .machine-case::before {
  inset: 5px 5px 5px 6px;
  background: none;
  border: 1px solid color-mix(in srgb,var(--machine-edge) 43%,transparent);
  border-left: 3px double color-mix(in srgb,var(--machine-edge) 69%,transparent);
  border-radius: 1px 3px 3px 1px;
}
:root[data-ui-era="cart"] .machine-mark { font-family: var(--f-title,Georgia,serif); letter-spacing: .08em; }
:root[data-ui-era="cart"] .machine-key {
  border-radius: 4px;
  box-shadow: inset 0 1px var(--machine-glint), 0 2px 0 var(--machine-shadow);
}
:root[data-theme="light"][data-ui-era="cart"] .machine-key {
  --machine-surface: color-mix(in srgb,var(--panel) 88%,#d4c7a6);
}
:root[data-ui-era="cart"] .machine-key:is(.active,[aria-pressed="true"]):not(:disabled) {
  box-shadow: inset 0 2px 3px var(--machine-shadow);
}
:root[data-ui-era="cart"] .machine-key.machine-gold {
  color: #703a31;
  background: #f1e5ca;
  border-color: #9b7563;
  box-shadow: inset 0 0 0 2px #82544224, 0 2px 0 #44352a68;
}
:root[data-ui-era="cart"] .machine-key.machine-gold:hover:not(:disabled) {
  background: #f8efd9;
  color: #703a31;
}
:root[data-ui-era="cart"] .machine-key.machine-gold::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed #8d4e3da6;
  pointer-events: none;
}
:root[data-ui-era="cart"] .machine-rail { border-bottom: 2px solid var(--machine-edge); }

/* Same hand markup and status classes in both eras, including the drag ghost. */
:root[data-ui-era] .hcard {
  --card-face: #f1e6ce;
  --card-ink: #342d23;
  --card-muted: #655846;
  --card-rule: #a38b68;
  --card-label: #e7d8b9;
  --card-stamp: #823f33;
  --card-rim: #a68b64;
  --card-shadow: #35231958;
  --card-surface: linear-gradient(108deg,#fff9e670,transparent 61%),var(--card-face);
  color: var(--card-ink);
  background: var(--card-surface);
  border-color: var(--card-rim);
  border-radius: 4px;
  box-shadow: 0 2px 4px var(--card-shadow),inset 0 0 0 3px var(--card-face),inset 0 0 0 4px var(--card-rule);
}
:root[data-ui-era="rail"] .hcard {
  --card-face: #30383a;
  --card-ink: #f0e7d2;
  --card-muted: #beb59d;
  --card-rule: #677173;
  --card-label: #21292a;
  --card-stamp: #d7bc7a;
  --card-rim: #626c6d;
  --card-shadow: #0f171a88;
  --card-surface: linear-gradient(125deg,#d9e1d819,transparent 48%),var(--card-face);
}
:root[data-ui-era] .hcard .hc-band {
  position: relative;
  background: var(--card-label);
  border-bottom: 1px solid var(--card-rule);
  box-shadow: inset 0 1px #fff4dc2b;
}
:root[data-ui-era] .hcard .hc-band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  background: var(--rc, var(--card-stamp));
  pointer-events: none;
}
:root[data-ui-era] .hcard .hc-kind {
  color: var(--card-ink);
  text-shadow: none;
  font-weight: 750;
  letter-spacing: .105em;
}
:root[data-ui-era] .hcard .hc-kind.is-new {
  color: var(--card-face);
  background: var(--card-stamp);
  box-shadow: none;
}
:root[data-ui-era] .hcard.wild .hc-kind { color: var(--card-stamp); }
:root[data-ui-era] .hcard.wild .hc-kind.is-new { color: var(--card-face); }
:root[data-ui-era] .hcard .hc-name i { color: var(--card-muted); }
:root[data-ui-era="cart"] .hcard .hc-name { font-family: var(--f-title,Georgia,serif); }
:root[data-ui-era="rail"] .hcard .hc-name { font-family: var(--f-sign,system-ui); letter-spacing: .02em; }
:root[data-ui-era] .hcard .hc-art { color: var(--card-stamp); }
:root[data-ui-era] .hcard :is(.hi,.hb):not(.no) {
  background: color-mix(in srgb, var(--ic) 24%,var(--card-face));
  box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--ic) 54%,var(--card-rule));
  border-radius: 3px;
}
:root[data-ui-era] .hcard :is(.hi,.hb).no { outline-color: var(--card-muted); }
:root[data-ui-era="rail"] .hcard .ico-coal { color: #9fa6a4; }
:root[data-ui-era="cart"] .hcard .ico-coal { color: #37332d; }
:root[data-ui-era="rail"] .hcard .hc-band::before {
  content:'';
  position:absolute;
  inset: 3px 2px auto;
  height:6px;
  background: radial-gradient(circle,#aab1a999 0 1px,transparent 1.3px) left center/6px 6px no-repeat,
    radial-gradient(circle,#aab1a999 0 1px,transparent 1.3px) right center/6px 6px no-repeat;
  pointer-events:none;
}
:root[data-ui-era] .hcard:is(:hover:not(:disabled),:focus-visible) {
  background: var(--card-surface);
  border-color: var(--card-stamp);
}
:root[data-ui-era] .hcard:focus-visible { outline: 2px solid var(--focus,var(--river)); outline-offset: 2px; }
:root[data-ui-era] .hcard:is(.selected,[aria-pressed="true"]) {
  box-shadow: 0 0 0 2px var(--card-stamp),0 7px 13px var(--card-shadow);
  border-color: var(--card-stamp);
}
:root[data-ui-era] .hcard.disabled { opacity: .55; }