/* ---- A card is the same wherever it is drawn — the hand, the card being dragged, a window (cards.js handCard): the
   window's own colours and type never reach it. The theme's colours as the page has them (taken at the root: the
   blueprint's blue, the contract's paper stay outside), the hand's type. A window may tilt or scale a card, never
   restyle it. ---- */
:root {
  --th-ink: var(--ink); --th-muted: var(--muted); --th-line: var(--line); --th-line-soft: var(--line-soft); --th-panel: var(--panel); --th-panel2: var(--panel2);
  --th-accent: var(--accent); --th-accent-deep: var(--accent-deep); --th-accent-text: var(--accent-text); --th-accent-ink: var(--accent-ink);
  --th-rim: var(--rim); --th-c-vp: var(--c-vp); --th-river: var(--river); --th-good: var(--good); --th-bad: var(--bad); --th-focus: var(--focus);
  --th-target: var(--target); --th-hl-now: var(--hl-now); --th-hl-turn: var(--hl-turn); --th-hl-no: var(--hl-no); --th-vp-bg: var(--vp-bg);
}
.hcard {
  --ink: var(--th-ink); --muted: var(--th-muted); --line: var(--th-line); --line-soft: var(--th-line-soft); --panel: var(--th-panel); --panel2: var(--th-panel2);
  --accent: var(--th-accent); --accent-deep: var(--th-accent-deep); --accent-text: var(--th-accent-text); --accent-ink: var(--th-accent-ink);
  --rim: var(--th-rim); --c-vp: var(--th-c-vp); --river: var(--th-river); --good: var(--th-good); --bad: var(--th-bad); --focus: var(--th-focus);
  --target: var(--th-target); --hl-now: var(--th-hl-now); --hl-turn: var(--th-hl-turn); --hl-no: var(--th-hl-no); --vp-bg: var(--th-vp-bg);
  font: 600 14px/1.35 var(--f-ui); letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0; text-shadow: none; white-space: normal;
}

.hcard > .hc-mini { display: none; }

:root[data-card-look="atlas"] .hcard {
  width: 116px;
  height: 158px;
  border-radius: 5px;
}
:root[data-card-look="atlas"] .hcard .hc-band { flex: 0 0 19px; }
:root[data-card-look="atlas"] .hcard .hc-name { padding-inline: 6px; }
:root[data-card-look="atlas"] .hcard.town:not(.wild) .hc-name {
  order: 1;
  margin: 5px 0 1px;
  min-height: 24px;
  font-size: clamp(12px, 1.9vw, 15px);
}
:root[data-card-look="atlas"] .hcard .hc-mini {
  order: 2;
  display: block;
  width: calc(100% - 12px);
  height: 45px;
  flex: none;
  margin: 1px 6px 4px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--card-rule) 57%,transparent);
  background: color-mix(in srgb,var(--card-face) 87%,var(--card-label));
}
.hc-mini :is(.cm-rules,.cm-compass,.cm-link) { fill: none; stroke: var(--card-muted); }
.hc-mini .cm-rules { stroke-width: .5; opacity: .33; }
.hc-mini .cm-engraving { display: none; fill: none; stroke: var(--card-muted); stroke-width: .65; }
:root[data-ui-era="cart"] .hc-mini .cm-engraving { display: inline; opacity: .46; }
:root[data-ui-era="cart"] .hc-mini .cm-rules { opacity: .12; }
.hc-mini .cm-compass { stroke-width: .65; opacity: .74; }
.hc-mini .cm-link { stroke-width: 1; stroke-dasharray: 3 1.9; }
:root[data-ui-era="rail"] .hc-mini .cm-link { stroke-dasharray: none; stroke-width: 1.1; }
:root[data-ui-era="cart"] .hc-mini .rail-only,
:root[data-ui-era="rail"] .hc-mini .cart-only { display: none; }
.hc-mini .cm-stop { fill: var(--card-face); stroke: var(--card-muted); stroke-width: .85; }
.hc-mini .cm-centre { fill: var(--card-face); stroke: var(--card-stamp); stroke-width: 1.45; }
.hc-mini .cm-pin { fill: var(--card-stamp); }
:root[data-card-look="atlas"] .hcard .hc-inds {
  order: 3;
  grid-template-columns: repeat(3, 20px);
  gap: 2px 3px;
  padding: 0 0 7px;
}
:root[data-card-look="atlas"] .hcard .hc-inds .hi { width: 20px; height: 20px; }
:root[data-card-look="atlas"] .hcard .hc-inds .ico { width: 15px; height: 15px; }
:root[data-card-look="atlas"] .hcard .hc-big {
  gap: 5px;
  margin: 8px 7px 1px;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), color-mix(in srgb,var(--card-rule) 45%,transparent) 50%, transparent calc(50% + .5px)),
    repeating-linear-gradient(0deg,transparent 0 12px,color-mix(in srgb,var(--card-rule) 23%,transparent) 12px 13px);
  border: 1px solid color-mix(in srgb,var(--card-rule) 53%,transparent);
}
:root[data-ui-era="cart"][data-card-look="atlas"] .hcard .hc-big {
  background:
    linear-gradient(100deg,var(--card-face) 2%,transparent 24%,transparent 76%,var(--card-face) 98%),
    repeating-linear-gradient(155deg,transparent 0 4px,#69513522 4px 4.7px);
  outline: 1px solid color-mix(in srgb,var(--card-rule) 33%,transparent);
  outline-offset: 2px;
}
:root[data-ui-era="cart"][data-card-look="atlas"] .hcard .hc-band {
  border-bottom-style: double;
  border-bottom-width: 3px;
}
:root[data-ui-era="cart"][data-card-look="atlas"] .hcard .hc-kind:not(.is-new) { font-family: var(--f-title,Georgia,serif); }
:root[data-card-look="atlas"] .hcard.ind:not(.wild) .hc-name {
  margin: 4px 0 6px;
  min-height: 28px;
}
:root[data-card-look="atlas"] .hcard.ind:not(.wild) .hb:not(.no) { border-radius: 50%; }
:root[data-card-look="atlas"] .hcard.ind:not(.two):not(.wild) .hb { width: 54px; height: 54px; }
:root[data-card-look="atlas"] .hcard.ind:not(.two):not(.wild) .hb .ico { width: 37px; height: 37px; }
:root[data-card-look="atlas"] .hcard.wild .hc-art {
  background: radial-gradient(circle,transparent 31px,color-mix(in srgb,var(--card-stamp) 24%,transparent) 31.5px 32px,transparent 32.5px);
}
:root[data-card-look="atlas"] .hcard.wild.town .hc-name,
:root[data-card-look="atlas"] .hcard.wild.ind .hc-name { margin: 2px 0 8px; }

:root[data-card-look="ticket"] .hcard {
  width: 80px;
  height: 98px;
  border-radius: 3px;
  border-left-style: dashed;
  transform: none;
}
:root[data-card-look="ticket"] .fan .hcard + .hcard { margin-left: 3px; }
:root[data-card-look="ticket"] .hcard .hc-band { height: 15px; }
:root[data-card-look="ticket"] .hcard .hc-kind { font-size: 8px; }
:root[data-card-look="ticket"] .hcard .hc-name {
  order: 1;
  margin: 4px 0 1px;
  min-height: 23px;
  font-size: 11px;
  line-height: 1.04;
}
:root[data-card-look="ticket"] .hcard .hc-name.xlong { font-size: 9.5px; }
:root[data-card-look="ticket"] .hcard :is(.hc-art,.hc-inds,.hc-big,.hc-six) {
  order: 2;
  padding-bottom: 5px;
}
:root[data-card-look="ticket"] .hcard .hc-inds {
  grid-template-columns: repeat(3, 16px);
  gap: 1px 3px;
}
:root[data-card-look="ticket"] .hcard .hc-inds .hi { width: 16px; height: 16px; }
:root[data-card-look="ticket"] .hcard .hc-inds .ico { width: 12px; height: 12px; }
:root[data-card-look="ticket"] .hcard .hc-big .hb { width: 25px; height: 25px; }
:root[data-card-look="ticket"] .hcard .hc-big .hb .ico { width: 17px; height: 17px; }
:root[data-card-look="ticket"] .hcard .hc-six { grid-template-columns: repeat(3, 15px); gap: 2px; }
:root[data-card-look="ticket"] .hcard .hc-six .hb { width: 15px; height: 15px; }
:root[data-card-look="ticket"] .hcard .hc-six .hb .ico { width: 11px; height: 11px; }
:root[data-card-look="ticket"] .hcard.wild .hc-art .scene { width: 27px; height: 27px; }
:root[data-card-look="ticket"] .hcard:is(.selected,[aria-pressed="true"],:focus-visible,:hover:not(:disabled)) {
  transform: translateY(-4px);
}
@media (max-width: 480px) {
  :root[data-card-look="atlas"] .hcard { width: 103px; height: 146px; }
  :root[data-card-look="atlas"] .hcard .hc-mini { height: 41px; }
  :root[data-card-look="ticket"] .hcard { width: 73px; }
}

/* ---- The cards' tone follows the theme, the era only gives the accents: light cards in the light theme, dark ones
   in the dark theme, in both eras and all three looks. Cart: paper and brass, a double rule under the band; Rail:
   enamel and steel, rivets on the band. (era-ui.css draws the light Cart card and the dark Rail card; these are the
   other two.) The hand, the card being dragged and any card drawn by cards.js cardHtml follow. ---- */
:root[data-theme="light"][data-ui-era="rail"] .hcard {
  --card-face: #e8ebe7;
  --card-ink: #1f282b;
  --card-muted: #59625f;
  --card-rule: #8a9592;
  --card-label: #d3dad7;
  --card-stamp: #2c5c78;
  --card-rim: #8f9a98;
  --card-shadow: #1d2a3045;
  --card-surface: linear-gradient(125deg, #ffffffa6, transparent 48%), var(--card-face);
}
:root[data-theme="light"][data-ui-era="rail"] .hcard .hc-band::before {
  background: radial-gradient(circle, #6d7876 0 1px, transparent 1.3px) left center/6px 6px no-repeat,
    radial-gradient(circle, #6d7876 0 1px, transparent 1.3px) right center/6px 6px no-repeat;
}
:root[data-theme="dark"][data-ui-era="cart"] .hcard {
  --card-face: #2e2921;
  --card-ink: #efe3c7;
  --card-muted: #b9a888;
  --card-rule: #7b684a;
  --card-label: #241f18;
  --card-stamp: #d5a95f;
  --card-rim: #6c5b41;
  --card-shadow: #00000085;
  --card-surface: linear-gradient(108deg, #ffefc814, transparent 61%), var(--card-face);
}
:root[data-theme="dark"][data-ui-era="cart"][data-card-look="atlas"] .hcard .hc-big {
  background: linear-gradient(100deg, var(--card-face) 2%, transparent 24%, transparent 76%, var(--card-face) 98%),
    repeating-linear-gradient(155deg, transparent 0 4px, #e8d3a61a 4px 4.7px);
}
/* coal: black on a light card, charcoal on a dark one */
:root[data-theme="light"][data-ui-era] .hcard .ico-coal { color: #37332d; }
:root[data-theme="dark"][data-ui-era] .hcard .ico-coal { color: #a3aaa7; }

/* ---- Jokers: gold foil, its light always on the move (still with reduced motion) ---- */
:root[data-theme="light"][data-ui-era] .hcard.wild {
  --card-face: #f2dc9b;
  --card-ink: #3a2a0c;
  --card-muted: #6f5822;
  --card-rule: #a88234;
  --card-label: #dcb65c;
  --card-stamp: #5c3d0e;
  --card-rim: #a37a2a;
  --card-surface: linear-gradient(135deg, #f8e9b6 0%, #e3c06a 24%, #fbf0c8 42%, #d4aa50 62%, #f2dc98 80%, #c99b42 100%);
}
:root[data-theme="dark"][data-ui-era] .hcard.wild {
  --card-face: #3b3018;
  --card-ink: #f6e5b5;
  --card-muted: #cdb57a;
  --card-rule: #9a7a35;
  --card-label: #5a4518;
  --card-stamp: #f0cf7a;
  --card-rim: #b08a3a;
  --card-surface: linear-gradient(135deg, #574419 0%, #94732c 22%, #45361a 40%, #a17e33 60%, #503f1c 80%, #846628 100%);
}
.hcard { isolation: isolate; } /* (the foil goes under the card's print, the sheen over it) */
.hcard.wild::before {
  content: '';
  position: absolute;
  inset: -30% -80%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, #fff8dc00 40%, #fff6dba6 46%, #ffffffe6 48.5%, #ffeaa999 51%, transparent 57%),
    repeating-linear-gradient(60deg, #ffffff10 0 2px, transparent 2px 6px);
  animation: wfFoil 3.6s ease-in-out infinite;
}
:root[data-theme="dark"] .hcard.wild::before {
  background: linear-gradient(105deg, transparent 38%, #ffd77a00 40%, #ffd77a55 46%, #ffe9a88c 48.5%, #ffd77a45 51%, transparent 57%),
    repeating-linear-gradient(60deg, #ffe6a00d 0 2px, transparent 2px 6px);
}
@keyframes wfFoil { 0% { transform: translateX(-32%); } 60%, 100% { transform: translateX(32%); } }

/* ---- The glint: the card under the mouse tilts a few degrees toward it and a soft sheen follows the pointer
   (cards.js initCardGlint sets .glint and --gx/--gy, --tx/--ty; the dragged card swings with its movement:
   drag.js). In the hand and on the dragged card the tilt is built in; a card elsewhere takes it with .tilt. ---- */
.hcard::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  /* a glare at the pointer, a band of light through it, the far edge a shade darker */
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 20%), rgb(255 255 255 / var(--glare)), rgb(255 255 255 / 0) 42%),
    linear-gradient(115deg, transparent calc(var(--gx, 50%) - 30%), rgb(255 255 255 / calc(var(--glare) * .5)) calc(var(--gx, 50%) - 6%), rgb(255 255 255 / calc(var(--glare) * .8)) var(--gx, 50%), rgb(255 255 255 / calc(var(--glare) * .5)) calc(var(--gx, 50%) + 6%), transparent calc(var(--gx, 50%) + 30%)),
    radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 20%), transparent 55%, rgb(0 0 0 / .1));
}
.hcard { --glare: .45; }
:root[data-theme="dark"] .hcard { --glare: .26; }
.hcard.glint::after { opacity: 1; }
#handdock .hcard.glint:is(:hover, :focus-visible):not(:disabled) { transform: perspective(700px) translateY(-14px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) scale(1.04); }
:root[data-card-look="ticket"] #handdock .hcard.glint:is(:hover, :focus-visible):not(:disabled) { transform: perspective(700px) translateY(-4px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.card-ghost .hcard.glint { transform: perspective(700px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .14s ease-out, opacity .15s; }
.hcard.tilt.glint { transform: perspective(700px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
@media (prefers-reduced-motion: reduce) {
  .hcard.wild::before { animation: none; transform: none; }
  .hcard::after { display: none; }
}