/* The marks on the player mat (panels.js: first era only, last era only, can't be developed; the piles the era
   keeps from being built), their legend (popups.js) and develop as a blueprint («Кресленик», devmenu.js): a blue
   drafting sheet over the map with the tiles to take off pinned to it, the sockets for their steel and the socket
   for the card to discard; the stamp «ЗАТВЕРДЖЕНО» and the sheet rolled into a tube. */

/* ---- a mark: a round badge in the top right corner of a tile ---- */
.mp-marks { position: absolute; top: calc(var(--mp) * -.12); right: calc(var(--mp) * -.14); display: flex; gap: 1px; z-index: 1; pointer-events: none; }
.mp-mark { --mk: var(--muted); --mks: clamp(14px, calc(var(--mp) * .36), 21px); display: inline-grid; place-items: center; flex: none; box-sizing: border-box;
  width: var(--mks); height: var(--mks); border-radius: 50%; background: var(--panel); color: var(--mk); font-style: normal;
  box-shadow: inset 0 0 0 1.5px var(--mk), 0 1px 2px rgba(0, 0, 0, .3); }
.mp-mark .ico { width: 68%; height: 68%; margin: 0; vertical-align: 0; }
.mp-mark.mk-cart { --mk: #86561d; } /* the Cart Era: wood */
.mp-mark.mk-rail { --mk: #2e5d7a; } /* the Steam Rail Era: iron blue */
.mp-mark.mk-bulb { --mk: #a26f12; } /* the light bulb: amber */
:root[data-theme="dark"] .mp-mark.mk-cart { --mk: #dcab6c; }
:root[data-theme="dark"] .mp-mark.mk-rail { --mk: #8fbbd6; }
:root[data-theme="dark"] .mp-mark.mk-bulb { --mk: #e9c050; }
/* in a line of text (a tile's details, the legend, the line of marks) */
.mp-mark.inl { --mks: 18px; vertical-align: -4px; margin-right: 6px; }
.mp-mark.big { --mks: 26px; }
.ti-rows .mp-mark .ico, .mm-key .mp-mark .ico { width: 68%; height: 68%; }

/* ---- a pile the era on the table keeps from being built: faded and hatched, the marks stay clear ---- */
.mp.era-off .mp-top { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--muted) 16%, transparent) 4px 5.5px),
  color-mix(in srgb, var(--ic) 9%, var(--panel2)); border-style: dashed; border-color: color-mix(in srgb, var(--ic) 38%, var(--muted)); box-shadow: none; }
.mp.era-off .mp-top > .ico, .mp.era-off .mp-lv { opacity: .42; filter: grayscale(.65); }
.mp.era-off .mp-under { opacity: .4; }
/* the next to build, yet not now: a red ring instead of the gold one */
.mp.era-off.next .mp-top { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 72%, transparent); }
button.mp.era-off.next:hover .mp-top { box-shadow: 0 0 0 2px var(--bad), 0 5px 10px rgba(0, 0, 0, .3); }
.ti-off { color: var(--bad); font-weight: 600; }
.ti-rows dd:has(> .ti-mtxt) { flex-wrap: nowrap; } /* the mark beside its words */
.ti-mtxt { flex: 1 1 0; min-width: 0; }
.ti-rows .mp-mark.inl { margin-right: 2px; }

/* ---- the mat's "?" (a button: the tooltip in words, a click opens the legend) ---- */
button.helptip { min-height: 0; padding: 0; background: none; font: 700 11px/1 var(--f-ui); }
button.helptip:hover:not(:disabled) { background: none; }
/* the legend: a picture and its meaning per line */
.mat-legend { max-width: 370px; }
.mm-legend { list-style: none; margin: 2px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.3; }
.mm-legend li { display: flex; align-items: center; gap: 10px; }
.mm-pic { flex: none; width: 38px; display: grid; place-items: center; }
.mp-sample { --mp: 28px; --mpo: 3px; position: relative; display: inline-block; width: calc(var(--mp) + 2 * var(--mpo)); height: calc(var(--mp) + 2 * var(--mpo)); }
.mp-sample .mp-lv { left: 3px; top: 1px; }
/* the marks in one line: under a tile's details and under the mat in the develop menu */
.mm-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--muted); }
.mm-key > span { display: inline-flex; align-items: center; }
.mm-key .mp-mark.inl { --mks: 16px; margin-right: 5px; }

/* ---- develop as a blueprint (devmenu.js): a backdrop over the screen (not over the hand on a wide screen: a card
   is dragged from there into its socket), the sheet over the map's column on a wide screen ---- */
.dm-bg { position: fixed; inset: 0; z-index: 38; display: flex; align-items: center; justify-content: center;
  padding: 12px var(--dm-pr, 12px) 12px var(--dm-pl, 12px); background: rgba(14, 26, 44, .34); animation: dm-fade .16s ease-out; }
.dm-bg.wide { bottom: var(--dock-h, 0px); }
:root[data-theme="dark"] .dm-bg { background: rgba(0, 0, 0, .5); }
@keyframes dm-fade { from { opacity: 0; } }
body.dm-open .qconfirm { display: none !important; } /* (the merchant's free develop: the sale's window waits under it) */

/* the sheet: blueprint blue with a fine white grid, a double frame; the era gives the paper — the Cart Era a cyanotype
   on rag paper (mottled, warmer, brass pins), the Steam Rail Era an engineering print (crisp, cooler, steel pins with
   red heads); the dark theme a deeper blue */
.dm.bp {
  --bp: #1f4f8c; --bp-deep: #13375f;
  --bp-ink: #f3f8ff; --bp-line: rgba(238, 245, 255, .86); --bp-soft: rgba(222, 234, 252, .74); --bp-faint: rgba(222, 234, 252, .28);
  --bp-grid: rgba(222, 236, 255, .07); --bp-grid2: rgba(222, 236, 255, .15); --bp-wash: rgba(255, 255, 255, .06);
  --bp-red: #ffb4a3; --bp-go: #aef0c8; --bp-gold: #ffd98a; --bp-stamp: #ff6f5c;
  --bp-paper: radial-gradient(70% 55% at 18% 12%, rgba(120, 170, 235, .28), transparent 70%), radial-gradient(60% 50% at 85% 90%, rgba(8, 26, 60, .35), transparent 70%),
    radial-gradient(35% 30% at 70% 25%, rgba(255, 255, 255, .05), transparent 70%), linear-gradient(160deg, #2a5d9c, #1f4f8c 48%, #1a447c);
  --bp-pin: radial-gradient(circle at 34% 30%, #fff7da 0 10%, #e9be55 28%, #b07d22 68%, #6f4a10);
  position: relative; display: flex; flex-direction: column; width: min(1000px, 100%); max-height: 100%; padding: 8px;
  color: var(--bp-ink); border-radius: 3px; --res-ground: var(--bp); font-family: var(--f-ui);
  background:
    linear-gradient(var(--bp-grid2) 1px, transparent 1px) -1px -1px / 50px 50px,
    linear-gradient(90deg, var(--bp-grid2) 1px, transparent 1px) -1px -1px / 50px 50px,
    linear-gradient(var(--bp-grid) 1px, transparent 1px) -1px -1px / 10px 10px,
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px) -1px -1px / 10px 10px,
    var(--bp-paper);
  box-shadow: 0 0 0 1px rgba(8, 24, 50, .55), 0 0 0 4px rgba(236, 228, 208, .55), 0 22px 54px rgba(6, 16, 34, .5), 0 4px 12px rgba(0, 0, 0, .25);
  animation: bp-in .3s cubic-bezier(.2, .9, .3, 1); }
:root[data-ui-era="rail"] .dm.bp {
  --bp: #1a4a86; --bp-grid2: rgba(222, 236, 255, .19);
  --bp-paper: radial-gradient(80% 60% at 50% 0%, rgba(110, 160, 230, .2), transparent 70%), linear-gradient(175deg, #1f5394, #1a4a86 55%, #163f75);
  --bp-pin: radial-gradient(circle at 34% 30%, #ffd9d2 0 10%, #e0543f 30%, #9c2a1d 70%, #5c170f);
  box-shadow: 0 0 0 1px rgba(8, 24, 50, .6), 0 0 0 4px rgba(170, 180, 186, .5), 0 22px 54px rgba(6, 16, 34, .5), 0 4px 12px rgba(0, 0, 0, .25); }
:root[data-theme="dark"] .dm.bp {
  --bp: #173c6a; --bp-deep: #0d2443; --bp-ink: #e6eefb; --bp-line: rgba(226, 236, 252, .78); --bp-soft: rgba(206, 220, 242, .68); --bp-faint: rgba(206, 220, 242, .22);
  --bp-grid: rgba(206, 224, 255, .055); --bp-grid2: rgba(206, 224, 255, .12);
  --bp-paper: radial-gradient(70% 55% at 18% 12%, rgba(90, 140, 210, .2), transparent 70%), radial-gradient(60% 50% at 85% 90%, rgba(4, 14, 34, .45), transparent 70%),
    linear-gradient(160deg, #1f497e, #173c6a 50%, #12335c);
  box-shadow: 0 0 0 1px rgba(150, 180, 220, .25), 0 0 0 4px rgba(20, 30, 44, .9), 0 22px 54px rgba(0, 0, 0, .65); }
:root[data-theme="dark"][data-ui-era="rail"] .dm.bp { --bp-paper: radial-gradient(80% 60% at 50% 0%, rgba(90, 140, 210, .16), transparent 70%), linear-gradient(175deg, #1b4478, #163a68 55%, #11325b); }
@keyframes bp-in { from { opacity: 0; transform: translateY(14px) rotate(-.6deg) scale(.98); } }
.dm.bp:focus { outline: none; }
.bp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the frame: a double line inside the sheet */
.bp-frame { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1.5px solid var(--bp-line);
  box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 3.8px var(--bp-faint); }
.bp-head { position: relative; flex: none; padding: 10px 50px 8px 16px; border-bottom: 1px solid var(--bp-faint); }
.bp-kicker { display: block; font: 500 11px/1.25 var(--f-sign); letter-spacing: .22em; text-transform: uppercase; color: var(--bp-soft); }
.bp h3 { margin: 2px 0 4px; font: 600 21px/1.15 var(--f-sign); letter-spacing: .05em; text-transform: uppercase; color: var(--bp-ink); }
.bp-lead { margin: 0; max-width: 780px; font-size: 12.5px; line-height: 1.4; color: var(--bp-soft); }
.bp-x { position: absolute; top: 7px; right: 8px; width: 34px; height: 34px; min-height: 0; padding: 0; border: 1.2px solid var(--bp-faint); border-radius: 50%;
  background: none; color: var(--bp-soft); font-size: 22px; line-height: 1; }
.bp-x:hover:not(:disabled) { background: var(--bp-wash); color: var(--bp-ink); border-color: var(--bp-line); }
.bp-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px; overscroll-behavior: contain; container: bp / inline-size; scrollbar-color: var(--bp-faint) transparent; }
/* words that change with the choice (devmenu.js swap): all laid in one place, the one meant shows — the place keeps
   the size of the longest, so the sheet doesn't move as tiles are taken off and put back */
.bp-swap { display: inline-grid; vertical-align: top; }
.bp-lead > .bp-swap, .bp-how > .bp-swap { display: grid; }
.bp-sw { grid-area: 1 / 1; visibility: hidden; }
.bp-sw.on { visibility: visible; }
.bp-cswap.off { visibility: hidden; }
.bp :focus-visible { outline: 2px solid var(--bp-gold); outline-offset: 2px; }

/* the zones of the drawing: the board over all; under it the tiles taken off over the steel, the card beside them
   (the title block stands in the corner, in the foot) */
.bp-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "board board" "spec card" "steel card"; align-items: stretch; }
.bp-board { grid-area: board; }
.bp-spec { grid-area: spec; }
.bp-steel { grid-area: steel; }
.bp-cardsec { grid-area: card; }
.bp-traysec { grid-area: tray; }
.bp-grid.tray { grid-template-areas: "board board" "spec card" "steel card" "tray tray"; }
/* (every control on the sheet: no paper-coloured hover of the page's buttons; a card stays as in the hand) */
.dm.bp button:where(:not(.hcard)) { color: var(--bp-ink); }
.dm.bp button:where(:not(.hcard)):hover:not(:disabled) { border-color: var(--bp-line); background: rgba(255, 255, 255, .12); }
.bp-zone { position: relative; min-width: 0; padding: 9px 12px 11px; border: 1px solid var(--bp-faint); }
.bp-zone::before { content: ''; position: absolute; left: -1px; top: -1px; width: 9px; height: 9px; border-left: 1.5px solid var(--bp-line); border-top: 1.5px solid var(--bp-line); }
.bp-zl { margin: 0 0 8px; font: 500 11px/1.3 var(--f-sign); letter-spacing: .2em; text-transform: uppercase; color: var(--bp-soft); }

/* ---- the board: the lowest tile of every industry, pinned ---- */
.bp-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.bp-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; padding-top: 4px; text-align: center; }
.bp-tile { --sq: 56px; position: relative; display: grid; place-items: center; width: calc(var(--sq) + 14px); height: calc(var(--sq) + 14px); min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 6px; background: none; color: var(--bp-ink); cursor: default; transition: transform .16s ease; }
.bp-tile:hover:not(:disabled) { background: none; }
.bp-tile:disabled { opacity: 1; }
/* a tile drawn in white lines: its square, the industry (muted, outlined), the level, the marks, how many on the pile */
.bp-sq { --mp: var(--sq); position: relative; display: grid; place-items: center; width: var(--sq); height: var(--sq); border: 1.6px solid var(--bp-line); border-radius: 7px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: 3px 3px 0 -1.5px var(--bp-faint); }
.bp-sq > .ico { width: 56%; height: 56%; margin-top: 8%; color: color-mix(in srgb, var(--ic) 50%, var(--bp)); --res-outline: var(--bp-ink); --res-detail: var(--bp); --res-shade: color-mix(in srgb, var(--ic) 30%, var(--bp)); --ico-line: none; }
.bp-rn { position: absolute; left: 5px; top: 1px; font: 600 calc(var(--sq) * .24)/1.1 var(--f-sign); letter-spacing: .02em; color: var(--bp-ink); }
.bp-pile { position: absolute; right: 3px; bottom: 1px; font: 500 10.5px/1.1 var(--f-sign); font-style: normal; color: var(--bp-soft); }
#devmenu .mp-mark { --mk: var(--bp-ink); background: var(--bp); box-shadow: inset 0 0 0 1.3px var(--mk); }
#devmenu .mp-mark.mk-bulb { --mk: var(--bp-gold); }
#devmenu .mp-mark.mk-cart, #devmenu .mp-mark.mk-rail { --mk: var(--bp-ink); }
.bp-pin { position: absolute; z-index: 2; left: 50%; top: 0; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--bp-pin);
  box-shadow: 1px 3px 3px rgba(0, 10, 30, .45); pointer-events: none; }
.bp-pin::after { content: ''; position: absolute; left: 7px; top: 9px; width: 6px; height: 2px; border-radius: 1px; background: rgba(0, 10, 30, .32); transform: rotate(35deg); } /* (the needle's shadow) */
.bp-cap { display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 100%; }
.bp-cap > b { max-width: 100%; font: 500 11px/1.2 var(--f-sign); letter-spacing: .07em; text-transform: uppercase; overflow-wrap: anywhere; }
.bp-lv { font: 500 12px/1.2 var(--f-sign); letter-spacing: .08em; color: var(--bp-soft); }
.bp-red { font: italic 600 12px/1.2 var(--f-name); color: var(--bp-red); }
.bp-cap > .bp-red { min-height: 1.2em; } /* (its line is kept when there is nothing in red: the board keeps its height) */
/* lit: can be taken off — a click lifts it off its pin */
.bp-cell.can .bp-tile { cursor: pointer; }
.bp-cell.can .bp-sq { border-color: var(--bp-ink); background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07));
  box-shadow: 3px 3px 0 -1.5px var(--bp-faint), 0 0 0 3px rgba(255, 255, 255, .12), 0 6px 14px rgba(4, 16, 40, .3); }
.bp-cell.can .bp-tile:hover, .bp-cell.can .bp-tile:focus-visible { transform: translateY(-3px) rotate(-2.5deg); }
.bp-cell.can .bp-tile:hover .bp-sq { border-color: #fff; box-shadow: 3px 3px 0 -1.5px var(--bp-faint), 0 0 0 3px var(--bp-go), 0 10px 18px rgba(4, 16, 40, .38); }
/* can't go: struck through in red pencil, with why under it */
.bp-cell.no .bp-tile { cursor: help; }
.bp-cell.no .bp-sq { opacity: .55; border-style: dashed; }
.bp-cell.no .bp-tile::after { content: ''; position: absolute; z-index: 1; left: 6px; right: 6px; top: 50%; height: 2.2px; border-radius: 2px; background: var(--bp-red); opacity: .92; transform: rotate(-38deg); }
.bp-cell.idle .bp-tile, .bp-cell.idle .bp-cap { opacity: .5; }
.bp-cell.none .bp-sq { border-style: dashed; opacity: .35; background: none; box-shadow: none; }
.bp-tile.empty .bp-sq { width: var(--sq); }
/* the merchant's free develop: the tile picked so far */
.bp-cell.cur .bp-sq { box-shadow: 0 0 0 3px var(--bp-gold), 0 6px 14px rgba(4, 16, 40, .3); }
.bp-tick { position: absolute; z-index: 3; right: -2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bp-gold); color: #2a1f0c; font: 800 12px/20px var(--f-ui); font-style: normal; }
.bp-board.full .bp-cells { opacity: .9; }
/* the legend: the marks, in a line */
.bp-boardh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin-bottom: 4px; }
.bp-boardh .bp-zl { margin: 0; }
.bp-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 11px; color: var(--bp-soft); }
.bp-legend > span { display: inline-flex; align-items: center; }
#devmenu .bp-legend .mp-mark.inl { --mks: 15px; margin-right: 4px; vertical-align: -3px; }

/* ---- «Знімаєш»: the tiles taken off, each with its socket for steel ---- */
.bp-rows { display: flex; flex-direction: column; gap: 6px; }
.bp-row { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 4px 8px; border: 1px solid var(--bp-faint); border-radius: 4px; background: rgba(255, 255, 255, .035); }
.bp-row.empty { justify-content: flex-start; border-style: dashed; background: none; }
.bp-pos { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.2px solid var(--bp-line); border-radius: 50%; font: 600 12px/1 var(--f-sign); color: var(--bp-ink); }
.bp-row.empty .bp-pos { border-style: dashed; color: var(--bp-soft); border-color: var(--bp-faint); }
.bp-ph { font-size: 12px; color: var(--bp-soft); font-style: italic; }
.bp-tile.mini { --sq: 38px; flex: none; width: 44px; height: 44px; cursor: pointer; }
.bp-tile.mini .bp-rn { font-size: 10px; left: 3px; }
.bp-tile.mini .mp-marks { display: none; }
.bp-tile.mini:hover .bp-sq { border-color: var(--bp-red); }
.bp-rname { flex: 0 1 auto; min-width: 0; font: 600 13.5px/1.2 var(--f-sign); letter-spacing: .03em; }
/* a leader line to the socket */
.bp-leader { position: relative; flex: 1 1 40px; min-width: 14px; height: 1.4px; background: var(--bp-line); }
.bp-leader::after { content: ''; position: absolute; right: -1px; top: -3.5px; border: 4px solid transparent; border-left: 7px solid var(--bp-line); border-right: 0; }
/* the socket: dashed and empty, or the steel in it with where it came from */
.bp-sock { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 7px; width: 190px; min-width: 0; min-height: 44px; margin-left: auto; padding: 4px 8px 4px 5px; color: var(--bp-ink); text-align: left;
  border: 1.6px dashed var(--bp-line); border-radius: 6px; background: rgba(255, 255, 255, .04); transition: border-color .12s, box-shadow .12s, background .12s; }
.bp-sock:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.bp-hole { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1.2px dashed var(--bp-soft); border-radius: 5px; }
.bp-hole .ico { width: 21px; height: 21px; color: transparent; --res-outline: var(--bp-soft); --res-detail: var(--bp-soft); --res-shade: transparent; --ico-line: none; }
.bp-stxt { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.2; color: var(--bp-soft); }
.bp-stxt > b, .bp-stxt > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-stxt > b { font: 600 13px/1.2 var(--f-sign); letter-spacing: .03em; color: var(--bp-ink); }
.bp-stxt > small { font-size: 11px; color: var(--bp-soft); }
.bp-sock.full { border-style: solid; background: rgba(255, 255, 255, .1); }
.bp-sock.full:hover .bp-cube { box-shadow: 0 0 0 2px var(--bp-red), 0 2px 4px rgba(0, 0, 0, .35); }
.bp-sock.drop-hot { border-style: solid; border-color: var(--bp-go); background: rgba(174, 240, 200, .14); box-shadow: 0 0 0 3px rgba(174, 240, 200, .28), 0 0 18px rgba(174, 240, 200, .3); }
.bp-sock.drop-bad { border-color: var(--bp-red); background: rgba(255, 180, 163, .1); }
.bp-rx { flex: none; width: 26px; height: 26px; min-height: 0; padding: 0; border: 1.2px solid var(--bp-faint); border-radius: 50%; background: none; color: var(--bp-soft); font-size: 12px; line-height: 1; }
.bp-rx:hover:not(:disabled) { background: none; color: var(--bp-red); border-color: var(--bp-red); }
/* a cube of steel: the game's steel on a light chip */
.bp-cube { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 5px; --res-ground: #e4ebf2;
  background: linear-gradient(150deg, #f4f7fa, #d6dfe8); box-shadow: inset 0 0 0 1px rgba(20, 40, 70, .35), 0 2px 4px rgba(0, 10, 30, .35); }
.bp-cube .ico { width: 23px; height: 23px; }
.bp-cube.big { width: 36px; height: 36px; }
.bp-cube.big .ico { width: 26px; height: 26px; }

/* ---- «Сталь»: where it comes from ---- */
.bp-rule { margin: 0 0 9px; font-size: 12px; line-height: 1.38; color: var(--bp-soft); }
.bp-srcs { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-src { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 1px; align-items: center;
  min-width: 128px; max-width: 100%; min-height: 0; padding: 6px 10px 6px 6px; text-align: left; color: var(--bp-ink); background: rgba(255, 255, 255, .06);
  border: 1.4px solid var(--bp-line); border-radius: 6px; cursor: grab; touch-action: none; user-select: none; transition: transform .12s, background .12s, box-shadow .12s; }
.bp-src > .bp-cube { grid-row: 1 / span 3; }
.bp-sname { font: 600 13px/1.15 var(--f-sign); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-sown { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 11.5px; line-height: 1.2; color: var(--bp-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-sown .pmark { flex: none; box-shadow: 0 0 0 1.2px rgba(255, 255, 255, .7); }
.bp-sprice { font: 600 15px/1.1 var(--f-sign); color: var(--bp-gold); }
.bp-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.bp-dot { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: #dfe7ef; --res-ground: #dfe7ef; font-style: normal; }
.bp-dot .ico { width: 12px; height: 12px; }
.bp-dot.out { opacity: .22; }
.bp-src.live { box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .16); }
.bp-src.live:hover, .bp-src.live:focus-visible { background: rgba(255, 255, 255, .15); transform: translateY(-2px); box-shadow: 0 0 0 2.5px var(--bp-go), 0 6px 12px rgba(4, 16, 40, .3); }
.bp-src.off { opacity: .55; cursor: help; border-style: dashed; }
.bp-src.off .bp-cube { filter: grayscale(.6); opacity: .7; }
.bp-src:active { cursor: grabbing; }
.bp-how { margin: 9px 0 0; font-size: 12px; line-height: 1.35; color: var(--bp-soft); }
body.bp-dragging, body.bp-dragging * { cursor: grabbing !important; user-select: none; }
body.bp-dragging .tooltip { display: none !important; }
/* the cube on its way: a little bigger, a label saying where it goes or why not */
.bp-ghost { position: fixed; left: 0; top: 0; z-index: 90; display: flex; align-items: center; gap: 8px; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.bp-ghost .bp-cube { transform: rotate(-8deg); }
.bp-glabel { padding: 3px 9px; border-radius: 4px; background: #0e2a50; color: #fff; font: 600 12px/1.3 var(--f-ui); white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.bp-glabel:empty { display: none; }
.bp-ghost.bad .bp-glabel { background: #8a2a1e; }

/* ---- the card to discard: its socket, the card drawn as in the hand ---- */
.bp-cardrow { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bp-cardsec { display: flex; flex-direction: column; }
.bp-cardsec .bp-zl { white-space: nowrap; }
.bp-csock { position: relative; flex: none; display: grid; place-items: center; padding: 7px; border: 1.6px dashed var(--bp-line); border-radius: 10px; background: rgba(255, 255, 255, .04);
  transition: border-color .12s, box-shadow .12s, background .12s; }
.bp-csock.full { border-style: solid; background: rgba(255, 255, 255, .08); }
.bp-csock.drop-hot { border-style: solid; border-color: var(--bp-go); background: rgba(174, 240, 200, .14); box-shadow: 0 0 0 3px rgba(174, 240, 200, .28), 0 0 20px rgba(174, 240, 200, .32); }
.bp-cph { position: relative; display: grid; place-items: center; }
.bp-csock .hcard, .dm.bp .bp-csock .hcard:hover { margin: 0; transform: none; } /* (in its socket the card stays still) */
.bp-csize.hcard { visibility: hidden; transition: none; }
.bp-ctxt { position: absolute; inset: 4px; display: grid; place-items: center; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--bp-soft); }
.bp-cnote { margin: 0; min-width: 0; max-width: 150px; font-size: 11.5px; line-height: 1.35; text-align: center; color: var(--bp-soft); }
.bp-tray { display: flex; flex-wrap: wrap; gap: 10px 8px; padding-top: 2px; }
.bp-tray .hcard { margin: 0; }

/* ---- the title block: what is drawn, by whom, the era, the cost; the place for the stamp ---- */
.bp-tb { position: relative; flex: none; width: 360px; max-width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); margin: -1px -1px 0 0;
  border: 1.6px solid var(--bp-line); font-size: 12px; background: rgba(10, 30, 62, .16); }
.bp-tbt { grid-column: 1 / -1; padding: 4px 10px; border-bottom: 1.2px solid var(--bp-line); font: 600 13.5px/1.2 var(--f-sign); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.bp-tbr { display: contents; }
.bp-tbr > span { padding: 1px 9px; border-right: 1px solid var(--bp-faint); border-bottom: 1px solid var(--bp-faint); font: 500 10.5px/1.6 var(--f-sign); letter-spacing: .14em; text-transform: uppercase; color: var(--bp-soft); white-space: nowrap; }
.bp-tbr > b { min-width: 0; padding: 1px 9px; border-bottom: 1px solid var(--bp-faint); font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.bp-tbr.err > b { color: var(--bp-red); font-style: italic; }
.bp-tbr.cost > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* (one line: the whole in its tip) */
.bp-tbr.stamp > span, .bp-tbr.stamp > b { border-bottom: 0; }
.bp-stampat { position: relative; min-height: 34px; }
/* the stamp: red ink, a double rim, a little rough; it comes down on approval (devmenu.js approveBlueprint) */
.bp-stamp { position: absolute; z-index: 3; left: 50%; top: 50%; padding: 3px; border: 2.5px solid var(--bp-stamp); border-radius: 5px; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-10deg); filter: url(#bpInk); }
.bp-stamp > span { display: block; padding: 5px 14px 4px; border: 1.2px solid var(--bp-stamp); border-radius: 3px; color: var(--bp-stamp); white-space: nowrap;
  font: 700 21px/1 var(--f-sign); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 0 1px var(--bp-stamp); }

/* ---- under it all: what is still missing, the buttons; the title block in the corner of the frame ---- */
.bp-foot { flex: none; display: flex; align-items: flex-end; gap: 14px; padding: 0 0 0 14px; border-top: 1px solid var(--bp-faint); }
.bp-btns { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px 12px; flex-wrap: wrap; padding: 10px 0; }
.bp-bpair { display: flex; gap: 8px; margin-left: auto; }
.bp-keys { margin-right: auto; font-size: 11.5px; color: var(--bp-soft); }
.bp-need { font-size: 12.5px; font-weight: 700; color: var(--bp-gold); }
.bp-btn { min-height: 40px; padding: 6px 18px; color: var(--bp-ink); background: rgba(255, 255, 255, .06); border: 1.5px solid var(--bp-line); border-radius: 4px;
  font: 600 14px/1.1 var(--f-sign); letter-spacing: .07em; text-transform: uppercase; }
.bp-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .16); border-color: var(--bp-ink); }
.dm.bp .bp-ok { min-width: 180px; color: var(--bp-deep); background: var(--bp-ink); border-color: var(--bp-ink); box-shadow: 0 3px 8px rgba(4, 16, 40, .3); }
.dm.bp .bp-ok:hover:not(:disabled) { color: var(--bp-deep); background: #fff; border-color: #fff; }
.dm.bp .bp-ok:disabled { opacity: 1; color: var(--bp-soft); background: transparent; border-style: dashed; border-color: var(--bp-faint); box-shadow: none; cursor: not-allowed; }
.bp-okn { display: none; }
.bp-noask { margin: 0; color: var(--bp-soft); }
.dm.bp.bonus .bp-btn { min-width: 120px; }
.dm.bp.bonus .bp-foot { padding-right: 14px; }

/* ---- approved: the stamp is down, the sheet rolls up into a tube (devmenu.js) ---- */
.dm-bg.approving { cursor: progress; }
.dm-bg.approving .dm.bp { animation: none; }
.bp-tube { position: fixed; z-index: 60; pointer-events: none; border-radius: 15px;
  background: linear-gradient(to bottom, #0b2344 0%, #1c4c8a 17%, #4d86c8 38%, #a9c9ee 47%, #3f78bb 60%, #1a467f 84%, #0a2140 100%);
  box-shadow: 0 10px 18px rgba(4, 12, 26, .45), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.bp-tube::before, .bp-tube::after { content: ''; position: absolute; top: 1px; bottom: 1px; width: 15px; border-radius: 50%;
  background: radial-gradient(circle, #0a2140 0 16%, #e7f0ff 20% 27%, #2a5d9e 31% 46%, #e7f0ff 50% 56%, #1c4c8a 60%); }
.bp-tube::before { left: -4px; }
.bp-tube::after { right: -4px; }

/* ---- narrower sheets: the zones one under the other, the board three to a row ---- */
@container bp (max-width: 640px) {
  .bp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "spec" "steel" "card"; }
  .bp-grid.tray { grid-template-areas: "board" "spec" "steel" "card" "tray"; }
  .bp-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .bp-cardrow { flex-direction: row; align-items: center; }
  .bp-cnote { max-width: none; text-align: left; }
}
@container bp (max-width: 420px) {
  .bp-tile { --sq: 48px; }
  .bp-tile.mini { --sq: 34px; width: 38px; height: 38px; }
  /* (a row on one line, as high as an empty one: the tile says what it is, the name goes) */
  .bp-row { gap: 6px; }
  .bp-rname, .bp-leader { display: none; }
  .bp-sock { width: auto; max-width: none; flex: 1 1 auto; margin-left: 0; }
  .bp-src { min-width: 0; flex: 1 1 calc(50% - 4px); }
  .bp-cardrow { align-items: flex-start; }
}
@media (max-width: 760px) {
  .dm-bg { padding: 6px; align-items: stretch; }
  .dm.bp { padding: 5px; }
  .bp-head { padding: 8px 44px 6px 10px; }
  .bp h3 { font-size: 16.5px; }
  .bp-lead { font-size: 12px; line-height: 1.35; }
  .bp-body { padding: 10px 8px; }
  .bp-zone { padding: 8px 9px 10px; }
  .bp-foot { flex-direction: column-reverse; align-items: stretch; gap: 0; padding: 0; }
  .bp-tb { width: auto; margin: 0; border-width: 0 0 1px; }
  .bp-tbr.by, .bp-tbr.date { display: none; } /* (a phone: the cost and the place for the stamp) */
  .bp-btns { padding: 7px 8px 8px; }
  .bp-bpair { flex: 1; margin: 0; }
  .bp-keys, .bp-need { display: none; }
  .bp-btns > .bp-btn { flex: 1; min-width: 0; padding: 6px 8px; }
  /* (Confirm says what is still missing while it can't go: its label and those words in one place) */
  .dm.bp .bp-ok { display: grid; place-items: center; }
  .bp-ok > .bp-okl, .bp-ok > .bp-okn { grid-area: 1 / 1; }
  .bp-ok > .bp-okn { display: inline-grid; }
  .bp-ok:not(:disabled) > .bp-okn .bp-sw, .bp-ok:disabled > .bp-okl .bp-sw { visibility: hidden; }
  .bp-tray { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .bp-tray .hcard { flex: none; }
}
/* ---- a low room (devmenu.js place: the screen, less the hand under the sheet on a wide screen — 1024×768, 1280×720, a
   tablet, a phone on its side): the sheet drawn tighter — the head, the zones, the board's tiles, the title block down
   to its cost and its stamp — so the board, the tiles taken off, the steel and the card's socket stand in sight; the
   sheet's own row of the hand's cards is one row under them, its edge in sight, the body scrolls to it. Lower still:
   the lead and the marks' legend go (the title says what to do, a mark says what it is in its tip). ---- */
.dm-bg.low .bp-head { padding-top: 6px; padding-bottom: 6px; }
.dm-bg.low .bp-kicker { font-size: 10px; }
.dm-bg.low .bp h3 { margin: 1px 0 2px; font-size: 17px; }
.dm-bg.low .bp-lead { font-size: 12px; line-height: 1.3; }
.dm-bg.low .bp-x { top: 5px; width: 30px; height: 30px; font-size: 20px; }
.dm-bg.low .bp-body { padding-top: 8px; padding-bottom: 8px; }
.dm-bg.low .bp-grid { gap: 8px; }
.dm-bg.low .bp-zone { padding-top: 6px; padding-bottom: 7px; }
.dm-bg.low .bp-zl { margin-bottom: 5px; }
.dm-bg.low .bp-boardh { margin-bottom: 2px; }
.dm-bg.low .bp-tile { --sq: 46px; }
.dm-bg.low .bp-cell { gap: 3px; padding-top: 2px; }
.dm-bg.low .bp-cap > b { font-size: 10.5px; }
.dm-bg.low .bp-rows { gap: 5px; }
.dm-bg.low .bp-row { min-height: 46px; padding-top: 2px; padding-bottom: 2px; }
.dm-bg.low .bp-tile.mini { --sq: 34px; width: 40px; height: 40px; }
.dm-bg.low .bp-sock { min-height: 40px; padding-top: 2px; padding-bottom: 2px; } /* (a filled row as high as an empty one) */
.dm-bg.low .bp-rule { margin-bottom: 6px; font-size: 11.5px; line-height: 1.32; }
.dm-bg.low .bp-how { margin-top: 6px; }
.dm-bg.low .bp-cardrow { gap: 5px; }
.dm-bg.low .bp-tray { flex-wrap: nowrap; overflow-x: auto; padding: 16px 4px 6px; margin-top: -10px; scrollbar-width: thin; scrollbar-color: var(--bp-soft) transparent; } /* (room for a card lifted under the mouse, as in the hand) */
.dm-bg.low .bp-tray .hcard { flex: none; }
.dm-bg.low .bp-tbr.by, .dm-bg.low .bp-tbr.date { display: none; }
.dm-bg.low .bp-tbt { padding-top: 2px; padding-bottom: 2px; font-size: 12.5px; }
.dm-bg.low .bp-stampat { min-height: 28px; }
.dm-bg.low .bp-btns { padding-top: 7px; padding-bottom: 7px; }
.dm-bg.low .bp-btn { min-height: 36px; }
.dm-bg.lower .bp-lead, .dm-bg.lower .bp-legend, .dm-bg.lower .bp-cnote { display: none; }
.dm-bg.lower .bp-head { padding-top: 4px; padding-bottom: 5px; }
.dm-bg.lower .bp-body { padding-top: 6px; padding-bottom: 6px; }
.dm-bg.lower .bp-grid { gap: 6px; }
.dm-bg.lower .bp-zl { margin-bottom: 4px; }
.dm-bg.lower .bp-rule { margin-bottom: 5px; }
.dm-bg.lower .bp-how { margin-top: 5px; }
.dm-bg.lower .bp-tile { --sq: 42px; }
/* (the foot in one line: Confirm says what is still missing while it can't go — as on a phone) */
.dm-bg.lower .bp-keys, .dm-bg.lower .bp-need { display: none; }
.dm-bg.lower .dm.bp .bp-ok { display: grid; place-items: center; }
.dm-bg.lower .bp-ok > .bp-okl, .dm-bg.lower .bp-ok > .bp-okn { grid-area: 1 / 1; }
.dm-bg.lower .bp-ok > .bp-okn { display: inline-grid; }
.dm-bg.lower .bp-ok:not(:disabled) > .bp-okn .bp-sw, .dm-bg.lower .bp-ok:disabled > .bp-okl .bp-sw { visibility: hidden; }
/* (a wide sheet: the tiles taken off, the steel and the card side by side under the board — the row's names go, the
   tile and its tip say them) */
@container bp (min-width: 641px) {
  .dm-bg.lower .bp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; grid-template-areas: "board board board" "spec steel card"; }
  .dm-bg.lower .bp-grid.tray { grid-template-areas: "board board board" "spec steel card" "tray tray tray"; }
  .dm-bg.lower .bp-rname, .dm-bg.lower .bp-leader { display: none; }
  .dm-bg.lower .bp-sock { flex: 1 1 auto; width: auto; margin-left: 0; }
}
/* more of the sheet above or below the body's edges (devmenu.js syncMore): the head and the foot cast a shadow over
   it, and its scroll bar shows on the blue */
.bp-head, .bp-foot { position: relative; z-index: 4; transition: box-shadow .2s ease; }
.bp-frame.more-up > .bp-head { box-shadow: 0 9px 12px -8px rgba(3, 12, 30, .8); }
.bp-frame.more-down > .bp-foot { box-shadow: 0 -9px 12px -8px rgba(3, 12, 30, .8); }
.dm.bp .bp-body { scrollbar-width: thin; scrollbar-color: var(--bp-soft) rgba(255, 255, 255, .07); }
/* the empty socket, the hand's cards below it: a click brings them into sight */
.bp-grid.tray .bp-csock[data-dm="csock"] { cursor: pointer; }
.bp-grid.tray .bp-csock[data-dm="csock"]:hover { border-color: var(--bp-ink); background: rgba(255, 255, 255, .08); }
@media (prefers-reduced-motion: reduce) {
  .dm-bg, .dm.bp { animation: none; }
  .bp-tile, .bp-src, .bp-sock, .bp-csock, .bp-head, .bp-foot { transition: none; }
}

/* in the sale's bonus row: the tile picked (or "Pick a tile…") opens the blueprint (contract.js) */
.dm-bonus-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; text-align: left; }
.dm-bonus-btn .ico { width: 15px; height: 15px; flex: none; }
.dm-bface { --mp: 20px; position: relative; flex: none; width: var(--mp); height: var(--mp); }
.dm-bface .mp-top { border-width: 1px; border-radius: 4px; }
.dm-bface .mp-lv { left: 2px; top: 0; font-size: 8px; }
.dm-bface .mp-top .ico { width: 62%; height: 62%; margin-top: 18%; }