/* Michigan Rails' look: a vintage railway map of Michigan laid on a deep
   lake-blue chart table (docs/michigan-rails.md, "Its look"). This file is
   the tokens (the house's, the room kit's and Michigan Rails' own: the
   map's inks, the train cards' colors, the seats' trains) and the faces of
   its pieces: train cards, tickets, swatches. It's loaded before the room's
   structure (games/room/room.css); the table (table.css) after it. The
   Django pages (games/templates/michigan-rails/page.html) wear just this.

   Faces, all OFL and bundled in fonts/: Big Shoulders Display (the
   display: a railroad timetable's condensed capitals, for titles, banners,
   numbers on the pieces and the map's cartouche), Libre Caslon Text italic
   (the lakes' names, set in spaced capitals, and the map's fine print) and
   Figtree (everything else, the cities' names on the map too). */

@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/big-shoulders-display-100-900-latin.b5152247f4c0.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/libre-caslon-text-400-italic-latin.da67fedc7811.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-400-800-latin.392aed3eb142.woff2") format("woff2"); }

:root {
  /* the house's (docs/design-system.md) */
  --t-display: clamp(32px, 7vw, 44px); --t-heading: 20px; --t-body: 16px; --t-label: 16px; --t-note: 14px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px;
  --pick-tint: color-mix(in srgb, currentColor 16%, transparent);
  --pick-ring: inset 0 0 0 2px currentColor;
  --pick-weight: 700;

  /* the chart table: deep lake blue under a brass lamp */
  --lake: #132331; --lake-hi: #21384b; --lake-lo: #0e1a25;
  --brass: #d8b05a; --brass-lo: #9a7a34;

  /* the map's inks: cream paper, blue lakes (deeper offshore, ripple lines
     along the shores), the neighbors in a muted wash */
  --map-paper: #f2e6c8;
  --map-land: #f3e7c9;
  --map-land-band: #e8d3a0;
  --map-coast: #5c4830;
  --map-beyond: #ddd2b6;
  --map-beyond-line: #c4b391;
  --map-beyond-coast: #8f7f60;
  --map-water: #a9cbd4;
  --map-water-deep: #8ab3c3;
  --map-shallow: #cfe3e2;
  --map-water-line: #4d7d90;
  --map-grid: #5f8696;
  --map-ink: #2e2920;
  --map-name: #2a251d;

  /* the train cards and the routes: eight colors, each with its mark
     (cards.js), and grey for a route any one color can pay */
  --c-red: #c8413a; --c-orange: #e6892b; --c-yellow: #edc53b; --c-yellow-deep: #a8790a;
  --c-green: #3c8a4b; --c-blue: #2f69ae; --c-purple: #7b4b9d; --c-black: #2a2a2e;
  --c-white: #f9f5ea; --c-grey: #b4ad9e; --c-slate: #364250;
  --card-face: #fbf6e8; --card-line: #3a3226;
  --card-back: #1f3a52; --card-back-ink: #e7d6a7;
  --ticket: #fbf3dd; --ticket-ink: #1f1a13; --ticket-soft: #5e5242; --ticket-long: #d3a243;
  --piece-edge: #1a1d22;
  /* the wooden rack your hand stands in */
  --rack: #7a4e2b; --rack-hi: #9a6a3e; --rack-lo: #4a2d17; --rack-engrave: #2e1a0b;

  /* the seats' trains and stations: the room's seat colors, painted a
     little deeper so they hold their own on cream paper and over every
     route color (each with its seat's shape on every car besides) */
  --seat-0: #2f8fd6; --seat-1: #ee6a35; --seat-2: #62ad38; --seat-3: #df5fb3; --seat-4: #9474ea;

  /* the room kit's (docs/design-system.md, "The room kit"), on the chart table */
  --room: #132331;
  --table: radial-gradient(ellipse at 50% 12%, #23394c, #1a2d3e 55%, #132331);
  --rail: 0 solid transparent;
  --rail-radius: 0;
  --panel: rgba(4, 12, 20, .32);
  --panel-edge: 1.5px solid rgba(242, 230, 200, .14);
  --panel-radius: 12px;
  --sheet: #1c3042;
  --chip: rgba(0, 0, 0, .25);
  --chip-edge: 1.5px solid rgba(242, 230, 200, .3);
  --chip-radius: 999px;
  --ink: #f4ead2;
  --soft: #b8c2c8;
  --turn: #f5c451;
  --good: #96d68c;
  --bad: #ff9a85;
  --focus: #f4ead2;
  --btn: #f4ead2;
  --btn-ink: #132331;
  --btn-edge: 2px solid #f4ead2;
  --btn2: transparent;
  --btn2-ink: #f4ead2;
  --btn2-edge: 2px solid #f4ead2;
  --btn-radius: 10px;
  --btn-weight: 700;
  --confirm: #ff9a85;
  --confirm-ink: #2a0d06;
  --turn-ink: #1d1505;
  --seat-ink: #111;
  --field-edge: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  --ui-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 800;
  --map-italic: "Libre Caslon Text", Georgia, "Times New Roman", serif;

  color-scheme: dark;
}

body { background: var(--room); }

/* ── train cards (cards.js draws their faces) ───────────────────────── */
.tcard { --tw: 56px; display: block; width: var(--tw); aspect-ratio: 60 / 86; flex: none; position: relative; border-radius: calc(var(--tw) * .09); }
.tcard > .tcardart { display: block; width: 100%; height: 100%; overflow: visible; }
.tcard { filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .45)); }

/* a color's mark on a chip (tooltips, choosers, the legend) */
.swatch {
  --sw: 16px; display: inline-grid; place-items: center; width: calc(var(--sw) * 1.5); height: var(--sw); vertical-align: -.2em; flex: none;
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); color: var(--card-face); margin-right: .3em;
}
.swatch .mark { width: calc(var(--sw) * .78); height: calc(var(--sw) * .78); display: block; }
.swatch[data-kind="red"] { background: var(--c-red); }
.swatch[data-kind="orange"] { background: var(--c-orange); color: var(--c-black); }
.swatch[data-kind="yellow"] { background: var(--c-yellow); color: var(--c-black); }
.swatch[data-kind="green"] { background: var(--c-green); }
.swatch[data-kind="blue"] { background: var(--c-blue); }
.swatch[data-kind="purple"] { background: var(--c-purple); }
.swatch[data-kind="black"] { background: var(--c-black); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.swatch[data-kind="white"] { background: var(--c-white); color: var(--c-black); }
.swatch[data-kind="grey"] { background: var(--c-grey); }
.swatch[data-kind="loco"] { background: linear-gradient(135deg, var(--c-red) 0 12.5%, var(--c-orange) 0 25%, var(--c-yellow) 0 37.5%, var(--c-green) 0 50%, var(--c-blue) 0 62.5%, var(--c-purple) 0 75%, var(--c-black) 0 87.5%, var(--c-white) 0); color: var(--c-black); }
.swatch[data-kind="loco"] .mark { filter: drop-shadow(0 0 1px var(--card-face)) drop-shadow(0 0 1px var(--card-face)); }

/* ── tickets: a vintage railway ticket, perforated at its ends ──────── */
.ticket {
  all: unset; box-sizing: border-box; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
  gap: 2px 12px; min-width: 0; padding: 8px 14px 9px 20px; color: var(--ticket-ink); font-family: var(--ui-font); border-radius: 3px;
  transition: transform var(--m-quick, 120ms), filter var(--m-quick, 120ms);
}
/* the paper (perforated at both ends: a half-circle bite every 7px, and a
   rule inside the left perforation), under the words */
.ticket::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 0 10px, color-mix(in srgb, var(--ticket-ink) 22%, transparent) 10px 11px, transparent 11px) left / 100% 100% no-repeat,
    linear-gradient(180deg, color-mix(in srgb, #fff 30%, var(--ticket)), var(--ticket));
  -webkit-mask: radial-gradient(circle 2.6px at 0 50%, transparent 98%, #000) left / 100% 7px repeat-y, radial-gradient(circle 2.6px at 100% 50%, transparent 98%, #000) right / 100% 7px repeat-y;
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 2.6px at 0 50%, transparent 98%, #000) left / 100% 7px repeat-y, radial-gradient(circle 2.6px at 100% 50%, transparent 98%, #000) right / 100% 7px repeat-y;
  mask-composite: intersect;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}
.ticket .tband { grid-column: 1; font: 700 11px/1.2 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ticket-soft); display: flex; align-items: center; gap: 6px; }
.ticket .tnum { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ticket-ink); color: var(--ticket); font-size: 10px; letter-spacing: 0; }
.ticket .tcities { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; font: var(--display-weight) 23px/1.05 var(--display); letter-spacing: .015em; text-transform: uppercase; }
.ticket .tcity { min-width: 0; }
.ticket .tarrow { font: 600 13px/1 var(--ui-font); color: var(--ticket-soft); }
.ticket .tpts {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; align-content: center; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--ticket-ink); box-shadow: inset 0 0 0 2px var(--ticket), inset 0 0 0 3px var(--ticket-ink); text-align: center;
}
.ticket .tpts b { font: 800 22px/.9 var(--display); }
.ticket .tpts small { font: 700 8px/1 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--ticket-soft); }
.ticket.long::before { background:
  linear-gradient(90deg, transparent 0 10px, color-mix(in srgb, var(--ticket-ink) 22%, transparent) 10px 11px, transparent 11px) left / 100% 100% no-repeat,
  linear-gradient(180deg, var(--ticket-long) 0 16px, transparent 16px),
  linear-gradient(180deg, color-mix(in srgb, #fff 30%, var(--ticket)), var(--ticket)); }
.ticket.long .tband { color: var(--ticket-ink); }
.ticket .tstamp {
  position: absolute; right: 58px; top: 50%; translate: 0 -50%; rotate: -8deg; pointer-events: none;
  font: 800 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border: 2px solid currentColor; border-radius: 4px; opacity: .88;
}
.ticket .tstamp.ok { color: #2f7a35; }
.ticket .tstamp.no { color: #b23a2c; }
.ticket.is-done .tcities { color: color-mix(in srgb, var(--ticket-ink) 62%, var(--ticket)); }
button.ticket { cursor: pointer; }
@media (hover: hover) { button.ticket:hover { transform: translateY(-1px); filter: brightness(1.04); } }
button.ticket:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }