/* Not Ticket to Ride, shared by the TV and the phones: the Cascadia Lines map,
   train cards, destination tickets and the table. Dark first, light after. */

/* ---- the table: a station-master's desk ---- */
.tbl-cascadia {
  --tbl-edge: #0a1110; --tbl-rim: #8a6d3b; --tbl-glow: rgba(255,220,160,.07);
  background:
    radial-gradient(ellipse 70% 60% at 40% 40%, rgba(255,226,170,.07), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 19px),
    linear-gradient(180deg, #1d2c27 0%, #16221e 60%, #101916 100%);
}
[data-theme="light"] .tbl-cascadia {
  --tbl-edge: #fbf6ea; --tbl-rim: #a8885a; --tbl-glow: rgba(255,255,255,.3);
  background:
    radial-gradient(ellipse 70% 60% at 40% 40%, rgba(255,255,255,.5), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120,90,40,.025) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg, rgba(120,90,40,.035) 0 1px, transparent 1px 19px),
    linear-gradient(180deg, #ece2cc 0%, #e4d6ba 100%);
}

/* ---- the map ---- */
.ntm {
  display: block; width: 100%; height: 100%;
  --ntm-sea: #133039; --ntm-sealine: rgba(170,215,215,.16); --ntm-wl: #3d6d78;
  --ntm-land: #2d2a21; --ntm-bc: #3e2e2b; --ntm-ab: #3b3524; --ntm-wa: #2a3427; --ntm-or: #383120; --ntm-id: #322d3b; --ntm-mt: #29353a;
  --ntm-hatch: rgba(255,236,200,.35); --ntm-coast: #d8c69e; --ntm-lake: #1c4049; --ntm-river: #5d9bb0;
  --ntm-border: #b68a66; --ntm-intl: #e0bf8a; --ntm-mtn: #a38f68; --ntm-mtn-s: rgba(0,0,0,.4); --ntm-snow: #ece4cf;
  --ntm-region: rgba(236,222,190,.32); --ntm-watertext: rgba(168,212,218,.5);
  --ntm-panel: #1c1a14; --ntm-panelline: #c9ad73; --ntm-ink: #f1e4c4; --ntm-frame: #c9ad73;
  --ntm-city: #f4e8c9; --ntm-cityline: #15130e; --ntm-label: #f4e8c9; --ntm-halo: #121510;
  --ntm-track: #0b0a08; --ntm-grey: #8d887c;
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  -webkit-user-select: none; user-select: none;
}
[data-theme="light"] .ntm {
  --ntm-sea: #b6d3d0; --ntm-sealine: rgba(40,95,105,.2); --ntm-wl: #6f9e9f;
  --ntm-land: #f3e7c9; --ntm-bc: #f2d3c6; --ntm-ab: #f1e2ae; --ntm-wa: #d6e4bf; --ntm-or: #eedcb0; --ntm-id: #e0d5ea; --ntm-mt: #d3e3e5;
  --ntm-hatch: rgba(120,90,40,.4); --ntm-coast: #4a3a26; --ntm-lake: #a6cdd1; --ntm-river: #4b86a0;
  --ntm-border: #8e5b45; --ntm-intl: #6e3b2b; --ntm-mtn: #7a6644; --ntm-mtn-s: rgba(110,80,40,.3); --ntm-snow: #ffffff;
  --ntm-region: rgba(98,66,34,.36); --ntm-watertext: rgba(34,88,108,.6);
  --ntm-panel: #f7edd4; --ntm-panelline: #5b4630; --ntm-ink: #3a2c1c; --ntm-frame: #4a3a28;
  --ntm-city: #fffaf0; --ntm-cityline: #2a2218; --ntm-label: #2a2218; --ntm-halo: #f7eed6;
  --ntm-track: #2a2218; --ntm-grey: #bbb4a5;
}
.ntm .ntm-sea { fill: var(--ntm-sea); }
.ntm .ntm-sealine { stroke: var(--ntm-sealine); stroke-width: 1; }
.ntm .ntm-wl1 path, .ntm .ntm-wl2 path, .ntm .ntm-wl3 path { fill: none; stroke: var(--ntm-wl); stroke-linejoin: round; }
.ntm .ntm-wl1 path { stroke-width: 9; opacity: .45; }
.ntm .ntm-wl2 path { stroke-width: 18; opacity: .22; }
.ntm .ntm-wl3 path { stroke-width: 30; opacity: .12; }
.ntm .ntm-land path { fill: var(--ntm-land); }
.ntm .ntm-r { opacity: .9; }
.ntm .ntm-r-bc { fill: var(--ntm-bc); } .ntm .ntm-r-ab { fill: var(--ntm-ab); } .ntm .ntm-r-wa { fill: var(--ntm-wa); }
.ntm .ntm-r-or { fill: var(--ntm-or); } .ntm .ntm-r-id { fill: var(--ntm-id); } .ntm .ntm-r-mt { fill: var(--ntm-mt); }
.ntm .ntm-hatchline { stroke: var(--ntm-hatch); stroke-width: .8; }
.ntm .ntm-coast path { fill: none; stroke: var(--ntm-coast); stroke-width: 1.6; stroke-linejoin: round; }
.ntm .ntm-lakes path { fill: var(--ntm-lake); stroke: var(--ntm-coast); stroke-width: 1; }
.ntm .ntm-rivers path { fill: none; stroke: var(--ntm-river); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ntm .ntm-border { fill: none; stroke: var(--ntm-border); stroke-width: 1.5; stroke-dasharray: 7 4; opacity: .8; }
.ntm .ntm-intl { fill: none; stroke: var(--ntm-intl); stroke-width: 2.4; stroke-dasharray: 12 4 2 4; opacity: .85; }
.ntm .ntm-mtn { fill: none; stroke: var(--ntm-mtn); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.ntm .ntm-mtn-s { fill: var(--ntm-mtn-s); }
.ntm .ntm-volc .ntm-mtn { fill: var(--ntm-mtn-s); stroke-width: 1.6; }
.ntm .ntm-snow { fill: var(--ntm-snow); stroke: var(--ntm-mtn); stroke-width: .8; }
.ntm .ntm-peak { font-size: 9.5px; font-style: italic; fill: var(--ntm-region); text-anchor: middle; }
.ntm .ntm-wave { fill: none; stroke: var(--ntm-wl); stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.ntm .ntm-regions text { font-family: "IM Fell English SC", "Spectral", Georgia, serif; font-size: 21px; letter-spacing: .42em; fill: var(--ntm-region); text-anchor: middle; }
.ntm .ntm-water text { font-size: 13px; font-style: italic; letter-spacing: .2em; fill: var(--ntm-watertext); text-anchor: middle; }
.ntm .ntm-water text.big { font-size: 20px; letter-spacing: .5em; }
.ntm .ntm-panel { fill: var(--ntm-panel); stroke: var(--ntm-panelline); stroke-width: 1.6; }
.ntm .ntm-panelin { fill: none; stroke: var(--ntm-panelline); stroke-width: .8; }
.ntm .ntm-fh { font-family: "IM Fell English SC", Georgia, serif; font-size: 13px; fill: var(--ntm-ink); text-anchor: middle; letter-spacing: .12em; }
.ntm .ntm-fcar { fill: var(--ntm-grey); stroke: var(--ntm-track); stroke-width: .7; }
.ntm .ntm-fv { font-size: 10px; font-weight: 700; fill: var(--ntm-ink); text-anchor: end; }
.ntm .ntm-t1 { font-family: "IM Fell English SC", Georgia, serif; font-size: 22px; fill: var(--ntm-ink); text-anchor: middle; letter-spacing: .06em; }
.ntm .ntm-t2 { font-size: 10.5px; font-style: italic; fill: var(--ntm-ink); text-anchor: middle; opacity: .85; }
.ntm .ntm-t3 { font-family: "IM Fell English SC", Georgia, serif; font-size: 11px; fill: var(--ntm-ink); text-anchor: middle; letter-spacing: .14em; opacity: .7; }
.ntm .ntm-orn { stroke: var(--ntm-panelline); stroke-width: .7; }
.ntm .ntm-orn-dot { fill: var(--ntm-panel); stroke: var(--ntm-panelline); stroke-width: 1; }
.ntm .ntm-cr1 { fill: var(--ntm-ink); }
.ntm .ntm-cr2 { fill: var(--ntm-panel); stroke: var(--ntm-ink); stroke-width: .8; }
.ntm .ntm-crring { fill: none; stroke: var(--ntm-ink); stroke-width: .9; stroke-dasharray: 2 2; opacity: .7; }
.ntm .ntm-crn { font-family: "IM Fell English SC", Georgia, serif; font-size: 14px; fill: var(--ntm-ink); text-anchor: middle; }
.ntm .ntm-frame { fill: none; stroke: var(--ntm-frame); stroke-width: 4; }
.ntm .ntm-frame2 { fill: none; stroke: var(--ntm-frame); stroke-width: 1.2; }

/* track spaces in the eight colours and grey */
.ntm .ntm-sp { stroke: var(--ntm-track); stroke-width: 1.3; }
.ntm .ntm-sp.c-red { fill: #d23a2e; } .ntm .ntm-sp.c-orange { fill: #ec7a26; } .ntm .ntm-sp.c-yellow { fill: #f1c22e; }
.ntm .ntm-sp.c-green { fill: #3b9a4c; } .ntm .ntm-sp.c-blue { fill: #2c6cc4; } .ntm .ntm-sp.c-purple { fill: #8b4cb0; }
.ntm .ntm-sp.c-black { fill: #26262b; } .ntm .ntm-sp.c-white { fill: #f6f3ea; } .ntm .ntm-sp.c-grey { fill: var(--ntm-grey); }
.ntm .ntm-sp.c-black { stroke: #8f8a7e; }
[data-theme="light"] .ntm .ntm-sp.c-black { stroke: var(--ntm-track); }
.ntm .ntm-route.dim { opacity: .38; }
.ntm .ntm-tp { transform-box: fill-box; transform-origin: center; }
.ntm .ntm-tp.fresh { animation: ntm-drop .5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes ntm-drop { 0% { transform: translateY(-26px) scale(1.5); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ntm .ntm-glow path { fill: none; stroke: #ffd23f; stroke-width: 24; stroke-linecap: round; opacity: .55; }
.ntm .ntm-glow.reveal path { stroke: #7ee0a1; }
.ntm .ntm-glow.longest path { stroke: #ffd23f; opacity: .7; animation: ntm-breathe 1.8s ease-in-out infinite; }
@keyframes ntm-breathe { 50% { opacity: .35; } }
.ntm .ntm-legal path { fill: none; stroke: #fff; stroke-width: 20; stroke-linecap: round; opacity: .55; animation: ntm-pulse 1.1s ease-in-out infinite; }
.ntm .ntm-legal path.sel { stroke: #ffd23f; opacity: .95; animation: none; stroke-width: 24; }
[data-theme="light"] .ntm .ntm-legal path { stroke: #f59e0b; opacity: .6; }
[data-theme="light"] .ntm .ntm-legal path.sel { stroke: #d97706; opacity: .9; }
@keyframes ntm-pulse { 50% { opacity: .2; } }
.ntm .ntm-hits path { fill: none; stroke: transparent; stroke-width: 30; stroke-linecap: round; cursor: pointer; pointer-events: stroke; }
.ntm .ntm-ring { fill: none; stroke: #ffd23f; stroke-width: 4; }
.ntm .ntm-ring.done { stroke: #4ade80; }
.ntm .ntm-ring.miss { stroke: #ff6b6b; }
.ntm .ntm-ring.pick { stroke: #fff; stroke-width: 5; animation: ntm-pulse 1s ease-in-out infinite; }

/* cities and their names */
.ntm .ntm-city circle { fill: var(--ntm-city); stroke: var(--ntm-cityline); stroke-width: 2.4; }
.ntm .ntm-city .dot { fill: var(--ntm-cityline); stroke: none; }
.ntm .ntm-city.hub circle { stroke-width: 2.6; }
.ntm .ntm-city.hub .in { fill: none; stroke-width: 1.4; }
.ntm .ntm-labels text { font-size: 14.5px; font-weight: 700; fill: var(--ntm-label); stroke: var(--ntm-halo); stroke-width: 4; paint-order: stroke; stroke-linejoin: round; letter-spacing: .01em; }
.ntm .ntm-labels text.hub { font-family: "IM Fell English SC", "Spectral", Georgia, serif; font-size: 21px; font-weight: 400; letter-spacing: .04em; stroke-width: 5; }
.ntm .ntm-labels text.key { fill: #b45309; }
[data-theme="dark"] .ntm .ntm-labels text.key { fill: #ffd23f; }

/* ---- train cards (portrait). Size with --cw. ---- */
.ntc, .ntc * { box-sizing: border-box; }
.ntc {
  width: var(--cw, 90px); aspect-ratio: 44 / 68; container-type: inline-size; position: relative; flex: none;
  border-radius: calc(var(--cw, 90px) * .08); padding: calc(var(--cw, 90px) * .045); background: var(--cc, #888);
  box-shadow: 0 calc(var(--cw, 90px) * .03) calc(var(--cw, 90px) * .08) rgba(0,0,0,.35), inset 0 0 0 calc(var(--cw, 90px) * .012) rgba(0,0,0,.25);
  font-family: "Spectral", Georgia, serif; user-select: none; -webkit-user-select: none;
}
.ntc .ntc-in { position: relative; width: 100%; height: 100%; border-radius: 5.5cqw; background: #f7efdc; overflow: hidden; display: flex; flex-direction: column; box-shadow: inset 0 0 0 .8cqw rgba(0,0,0,.18); }
.ntc .ntc-in::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 60% at 30% 10%, rgba(255,255,255,.35), transparent 60%); }
.ntc .ntc-top { display: flex; align-items: center; gap: 3cqw; padding: 4cqw 5cqw 3cqw; background: var(--cc); color: #fff; }
.ntc .ntc-pip { width: 8cqw; height: 8cqw; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2cqw var(--cd); flex: none; }
.ntc .ntc-name { font-size: 10.5cqw; font-weight: 800; line-height: 1; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .6cqw 0 rgba(0,0,0,.25); }
.ntc .ntc-oval { flex: 1; min-height: 0; margin: 4cqw 4cqw 3cqw; border-radius: 50% / 42%; background: radial-gradient(ellipse at 50% 40%, #fffaf0 30%, #eadcb9); box-shadow: inset 0 0 0 1.4cqw var(--cc), inset 0 0 0 2.4cqw rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; }
.ntc .ntc-art { width: 90%; height: auto; display: block; overflow: visible; }
.ntc .ntc-foot { background: var(--cc); color: #fff; text-align: center; font-family: "IM Fell English SC", Georgia, serif; font-size: 15cqw; letter-spacing: .1em; padding: 2cqw 0 3.4cqw; line-height: 1; }
.ntc.c-yellow .ntc-top, .ntc.c-yellow .ntc-foot { color: #3a2a05; text-shadow: none; }
.ntc.c-yellow .ntc-name { text-shadow: none; }
.ntc.c-white { background: #cfc9ba; }
.ntc.c-white .ntc-top, .ntc.c-white .ntc-foot { background: #e9e4d6; color: #2a2620; }
.ntc.c-white .ntc-name { text-shadow: none; }
.ntc.c-white .ntc-oval { box-shadow: inset 0 0 0 1.4cqw #cfc9ba, inset 0 0 0 2.4cqw rgba(0,0,0,.12); }
.ntc.c-black .ntc-oval { background: radial-gradient(ellipse at 50% 40%, #fffaf0 30%, #e3d7bb); }
.ntc.c-loco { background: linear-gradient(135deg, #e3c46d, #9f7a2c); }
.ntc.c-loco .ntc-top, .ntc.c-loco .ntc-foot { background: #2b2b30; color: #f2dc9a; }
.ntc.c-loco .ntc-oval { box-shadow: inset 0 0 0 1.4cqw #c8a24a, inset 0 0 0 2.4cqw rgba(0,0,0,.15); }
.ntc .ntc-rainbow { position: absolute; left: 0; right: 0; top: 0; height: 2.4cqw; display: flex; z-index: 2; }
.ntc .ntc-rainbow i { flex: 1; }
.ntc .ntc-count { position: absolute; right: -6%; top: -5%; min-width: 34%; padding: 0 6%; height: 22%; max-height: 30px; border-radius: 999px; background: #141414; color: #fff; font: 900 calc(var(--cw, 90px) * .2)/1 "Inter", Arial, sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,.4); border: 2px solid #fff; z-index: 3; }
.ntc.dim { filter: saturate(.35) brightness(.78); }
/* backs */
.ntc.ntc-back { background: linear-gradient(160deg, #c9ad73, #8a6d3b); }
.ntc.ntc-back .ntc-in { background: radial-gradient(ellipse at 50% 40%, #24425a, #142636); align-items: center; justify-content: center; gap: 2cqw; color: #e7cf94; box-shadow: inset 0 0 0 2cqw #142636, inset 0 0 0 2.8cqw #c9ad73; }
.ntc.ntc-back.k-ticket .ntc-in { background: radial-gradient(ellipse at 50% 40%, #f6ead0, #e3cfa2); color: #7a3b22; box-shadow: inset 0 0 0 2cqw #e3cfa2, inset 0 0 0 2.8cqw #7a3b22; }
.ntc.ntc-back .ntc-emb { width: 56%; height: auto; }
.ntc.ntc-back .ntc-bname { font-family: "IM Fell English SC", Georgia, serif; font-size: 14cqw; line-height: 1; letter-spacing: .06em; }
.ntc.ntc-back .ntc-bsub { font-size: 9cqw; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.ntc-explain { background: var(--fill, rgba(120,120,128,.14)); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; color: var(--text); font-family: var(--font, Inter, sans-serif); }
.ntc-explain .ntc-xkind { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--label-2); }
.ntc-explain p { margin: 5px 0 0; }

/* ---- destination tickets ---- */
.ntt { --tw: 300px; width: var(--tw); container-type: inline-size; position: relative; flex: none; font-family: "Spectral", Georgia, serif; color: #2a2218; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.ntt .ntt-in { position: relative; display: grid; grid-template-columns: 52% 1fr; grid-template-rows: auto 1fr; gap: 0 3cqw; padding: 3cqw 4cqw 3.5cqw 6cqw; border-radius: 3cqw; background: linear-gradient(180deg, #fbf3df, #f1e2bd); box-shadow: inset 0 0 0 .7cqw rgba(122,59,34,.55), inset 0 0 0 1.6cqw #fbf3df, inset 0 0 0 2cqw rgba(122,59,34,.35);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 2.4cqw, #000 2.5cqw) left / 100% 7cqw repeat-y; mask: radial-gradient(circle at 0 50%, transparent 2.4cqw, #000 2.5cqw) left / 100% 7cqw repeat-y; }
.ntt .ntt-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-family: "IM Fell English SC", Georgia, serif; font-size: 5cqw; letter-spacing: .14em; color: #7a3b22; border-bottom: .5cqw dashed rgba(122,59,34,.45); padding-bottom: 1.4cqw; margin-bottom: 2cqw; min-height: 11cqw; }
.ntt .ntt-map { width: 100%; height: auto; display: block; border-radius: 1.6cqw; box-shadow: inset 0 0 0 .5cqw rgba(0,0,0,.2); }
.ntt .ntt-sea { fill: #bcd7d3; }
.ntt .ntt-land { fill: #efe1bf; stroke: #6b5638; stroke-width: 3; }
.ntt .ntt-intl { fill: none; stroke: #8e5b45; stroke-width: 4; stroke-dasharray: 14 8; opacity: .7; }
.ntt .ntt-rt { fill: none; stroke: rgba(70,55,35,.35); stroke-width: 6; }
.ntt .ntt-dot { fill: #fffaf0; stroke: #5a4630; stroke-width: 4; }
.ntt .ntt-arc { fill: none; stroke: #c2410c; stroke-width: 9; stroke-dasharray: 22 14; stroke-linecap: round; }
.ntt .ntt-end { fill: #c2410c; stroke: #fff; stroke-width: 7; }
.ntt .ntt-cities { display: flex; flex-direction: column; justify-content: center; gap: .5cqw; min-width: 0; }
.ntt .ntt-cities b { font-size: 6.8cqw; font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; }
.ntt .ntt-cities i { font-size: 4.6cqw; color: #7a3b22; letter-spacing: .1em; }
.ntt .ntt-val { flex: none; min-width: 12cqw; height: 12cqw; border-radius: 999px; padding: 0 2.4cqw; background: #7a3b22; color: #fbf3df; font: 800 7.4cqw/12cqw "Spectral", Georgia, serif; letter-spacing: 0; text-align: center; box-shadow: 0 0 0 .7cqw #fbf3df, 0 0 0 1.2cqw #7a3b22; margin: -1cqw -1cqw 0 0; }
.ntt .ntt-stamp { position: absolute; left: 13cqw; top: 42%; transform: rotate(-14deg); font-family: "IM Fell English SC", Georgia, serif; font-size: 9cqw; letter-spacing: .1em; padding: .6cqw 3cqw; border: 1cqw solid currentColor; border-radius: 2cqw; opacity: .88; background: rgba(251,243,223,.55); }
.ntt .ntt-stamp.ok { color: #1f7a3a; }
.ntt .ntt-stamp.no { color: #b42318; }
.ntt.s-fail .ntt-in { filter: saturate(.6); }
.ntt.picked .ntt-in { box-shadow: inset 0 0 0 .7cqw rgba(122,59,34,.55), inset 0 0 0 1.6cqw #fbf3df, inset 0 0 0 2.4cqw #2f9e44; }
.ntt.unpicked { opacity: .5; }