/* The income compass in its row over the map with the cash box at its left end, and the metals of income and
   VP (income-compass.js): the strip's VP plates and income figures (turn-order-panel.js) and the phone's
   players' bar. At the end: the coins and income icons of the effects and the numbers counting as they land
   (fx.js).
   Metals are materials, not interface colours: the same in both themes (only the readable tones change). */
:root {
  /* each metal: dark edge, body, highlight, light body, far edge (the medals of progress.css) */
  --mtl-red-0: #5a140f; --mtl-red-1: #a5352a; --mtl-red-2: #ec8a7b; --mtl-red-3: #bd4a3c; --mtl-red-4: #6c1a13;
  --mtl-bronze-0: #5a2d11; --mtl-bronze-1: #a8602b; --mtl-bronze-2: #f4c38f; --mtl-bronze-3: #c47c40; --mtl-bronze-4: #6c3613;
  --mtl-silver-0: #646d75; --mtl-silver-1: #bcc5cc; --mtl-silver-2: #ffffff; --mtl-silver-3: #d4dbe0; --mtl-silver-4: #79838b;
  --mtl-gold-0: #6c4a0a; --mtl-gold-1: #cc9a2a; --mtl-gold-2: #fff0b0; --mtl-gold-3: #e3b643; --mtl-gold-4: #80590e;
  --mtl-diamond-0: #6aa7c8; --mtl-diamond-1: #d9f2ff; --mtl-diamond-2: #ffffff; --mtl-diamond-3: #ade0f7; --mtl-diamond-4: #b9a9ec;
  /* the same metals as solid plates (the compass's face, the VP plates): body, light upper edge, dark lower
     edge, what is engraved on them */
  --pl-red: #c62a1f; --pl-red-hi: #ee6d5f; --pl-red-lo: #7c130c; --pl-red-ink: #fff4ee;
  --pl-bronze: #c27b3e; --pl-bronze-hi: #ebb27c; --pl-bronze-lo: #6d3912; --pl-bronze-ink: #261003;
  --pl-silver: #c3cbd2; --pl-silver-hi: #f5f8fa; --pl-silver-lo: #737e88; --pl-silver-ink: #172026;
  --pl-gold: #e2b23a; --pl-gold-hi: #fce28f; --pl-gold-lo: #87630b; --pl-gold-ink: #261901;
  --pl-diamond: #aedff4; --pl-diamond-hi: #f0fbff; --pl-diamond-lo: #5d9dc0; --pl-diamond-ink: #08314a;
  /* the bands as text on the paper */
  --band-red: #b03a2e; --band-bronze: #93541f; --band-silver: #56626c; --band-gold: #876610; --band-diamond: #1d779f;
  --mtl-ink: #1e170d; /* engraved on a plate */
}
:root[data-theme="dark"] {
  --band-red: #f07e6d; --band-bronze: #de9d66; --band-silver: #cdd6dd; --band-gold: #ebc65d; --band-diamond: #94e1ff;
}
/* the compass's bands as quiet tints of the interface (a tint and the ink of its numbers): washed out on the
   light paper, deeper and duller in the dark; the grooves between the blocks and the slots of the spaces are
   the tint mixed with --cb-deep */
:root {
  --cb-red: #ecc3bb; --cb-red-ink: #7c2a1f;
  --cb-bronze: #ebd0b3; --cb-bronze-ink: #613513;
  --cb-silver: #e0e4e6; --cb-silver-ink: #39454e;
  --cb-gold: #efdfb0; --cb-gold-ink: #5e470f;
  --cb-diamond: #d3e9f1; --cb-diamond-ink: #1b5470;
  --cb-deep: #4d3f2c;
}
:root[data-theme="dark"] {
  --cb-red: #67342d; --cb-red-ink: #f2d0c8;
  --cb-bronze: #6a4f36; --cb-bronze-ink: #f1dbc2;
  --cb-silver: #535c62; --cb-silver-ink: #e8edf0;
  --cb-gold: #6e5c2f; --cb-gold-ink: #f6e7bd;
  --cb-diamond: #375b6a; --cb-diamond-ink: #d9f1fa;
  --cb-deep: #0c0e0d;
}
/* a band's tint for whatever is drawn in it (.bd-<band>: the compass's face, blocks, slots and numbers) */
.bd-red { --cb: var(--cb-red); --cb-ink: var(--cb-red-ink); }
.bd-bronze { --cb: var(--cb-bronze); --cb-ink: var(--cb-bronze-ink); }
.bd-silver { --cb: var(--cb-silver); --cb-ink: var(--cb-silver-ink); }
.bd-gold { --cb: var(--cb-gold); --cb-ink: var(--cb-gold-ink); }
.bd-diamond { --cb: var(--cb-diamond); --cb-ink: var(--cb-diamond-ink); }

/* ---- the bar: the first row of the map's window (it covers no town, and the map zooms and moves under
   nothing); its height sets the drawing's scale (income-compass.js: --k) ---- */
.incbar {
  --ib-h: 56px;
  display: flex; gap: 6px; height: var(--ib-h); line-height: 0; user-select: none; -webkit-user-select: none;
  /* Cart Era, light: a brass case, paper in the cash box's window and on the plaque */
  --ib-case: #b38a45; --ib-c0: #6f5120; --ib-c1: #e6c98d;
  --ib-f0: #fffaf0; --ib-p0: #fffdf8;
  --ib-ink: #2b251b; --ib-edge: #3a2a12;
  --cbx-cur: #8a6012; --cbx-cap: #7a6646; --cbx-up: #1d7444; --cbx-down: #b03a2e;
}
:root[data-theme="dark"] .incbar {
  --ib-case: #8a6b35; --ib-c0: #3d2d12; --ib-c1: #c4a165;
  --ib-f0: #262c28; --ib-p0: #2f3631;
  --ib-ink: #ece3cf; --ib-edge: #0b0c0a;
  --cbx-cur: #e7c46c; --cbx-cap: #a9a08b; --cbx-up: #8fe3a9; --cbx-down: #f39182;
}
/* Steam Rail Era: a steel case round white enamel in the light theme, round dark enamel in the dark one — like
   the market's dials */
:root[data-ui-era="rail"] .incbar {
  --ib-case: #919c9f; --ib-c0: #4d585d; --ib-c1: #e2e8e9;
  --ib-f0: #f5f7f4; --ib-p0: #fbfcfa;
  --ib-ink: #222b30; --ib-edge: #2c373d;
  --cbx-cur: #7d6119; --cbx-cap: #69767c; --cbx-up: #1d7444; --cbx-down: #b03a2e;
}
:root[data-theme="dark"][data-ui-era="rail"] .incbar {
  --ib-case: #6f7a7f; --ib-c0: #2c3539; --ib-c1: #b3bcbe;
  --ib-f0: #1d2a31; --ib-p0: #24333b;
  --ib-ink: #f5ead2; --ib-edge: #0a1114;
  --cbx-cur: #ebc65d; --cbx-cap: #9aa7ab; --cbx-up: #8fe3a9; --cbx-down: #f39182;
}
@media (max-width: 1499px) { .incbar { --ib-h: 50px; } }
@media (max-width: 1100px) { .incbar { --ib-h: 46px; } }
@media (max-width: 760px) { .incbar { --ib-h: 32px; gap: 4px; } }
.incbar > div { position: relative; height: 100%; min-width: 0; cursor: help; }
.cashbox { flex: none; width: calc(var(--ib-h) * 2.6); }
.compass { flex: 1 1 auto; }
.incbar svg { display: block; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(30, 20, 8, .32)); }
.incbar.idle > div { visibility: hidden; } /* (a spectator at the end of the game: nobody's income) */
.ib-bevel { fill: none; stroke: var(--ib-c1); stroke-opacity: .85; stroke-width: 1; stroke-linecap: round; }

/* ---- the compass: a metal case round the income track — a block for each level, a slot for each space ---- */
.cps-case { fill: var(--ib-case); stroke: var(--ib-c0); stroke-width: 1; }
.cps-face-edge { fill: none; stroke: var(--ib-edge); stroke-opacity: .6; stroke-width: 1; }
.cps-face { fill: color-mix(in srgb, var(--cb) 74%, var(--cb-deep)); }
.cps-blk { fill: var(--cb); }
.cps-blk-hi { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1; }
:root[data-theme="dark"] .cps-blk-hi { stroke-opacity: .1; }
.cps-slot { fill: color-mix(in srgb, var(--cb) 80%, var(--cb-deep)); }
:root[data-theme="dark"] .cps-slot { fill: color-mix(in srgb, var(--cb) 62%, var(--cb-deep)); }
.cps-n { font: 600 calc(16px * var(--k, 1)) var(--f-sign); fill: var(--cb-ink); text-anchor: middle; font-variant-numeric: tabular-nums; transition: opacity .15s; }
.cps-n.one { font-size: calc(13.5px * var(--k, 1)); letter-spacing: -.03em; } /* (a one-space level: a narrow block) */
.cps-mn { font-size: .8em; }
.cps-n.off { opacity: 0; }
/* the marker in the middle: a raised plaque framed in its band's tone, the level large in the band's colour, an
   arrow from it down to my space's slot, lit */
.compass { --pq: var(--cb-silver); --pq-ink: var(--cb-silver-ink); }
.compass[data-band="red"] { --pq: var(--cb-red); --pq-ink: var(--cb-red-ink); }
.compass[data-band="bronze"] { --pq: var(--cb-bronze); --pq-ink: var(--cb-bronze-ink); }
.compass[data-band="gold"] { --pq: var(--cb-gold); --pq-ink: var(--cb-gold-ink); }
.compass[data-band="diamond"] { --pq: var(--cb-diamond); --pq-ink: var(--cb-diamond-ink); }
.cps-plq { fill: var(--ib-p0); stroke: color-mix(in srgb, var(--pq) 55%, var(--pq-ink)); stroke-width: calc(3px * var(--k, 1)); filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .35)); }
.cps-plq-in { fill: none; stroke: #fff; stroke-opacity: .6; stroke-width: 1; stroke-linecap: round; }
:root[data-theme="dark"] .cps-plq-in { stroke-opacity: .14; }
.cps-ptr { fill: var(--pq-ink); stroke: none; }
.cps-here { fill: var(--pq-ink); stroke: var(--ib-p0); stroke-width: 1; }
.cps-num { font: 700 calc(29px * var(--k, 1)) var(--f-sign); fill: var(--band-silver); text-anchor: middle; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cps-num .cps-sign { font-size: calc(21px * var(--k, 1)); }
.compass[data-band="red"] .cps-num { fill: var(--band-red); }
.compass[data-band="bronze"] .cps-num { fill: var(--band-bronze); }
.compass[data-band="gold"] .cps-num { fill: var(--band-gold); }
.compass[data-band="diamond"] .cps-num { fill: var(--band-diamond); }
/* the other players: a pin in their colour with their level; beyond an end, a tag pointing out (a click shows
   their mat) */
.cps-mk { cursor: pointer; }
.cps-mk-b { fill: var(--pc); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, .5)); }
.cps-mk-t { font: 700 calc(13.5px * var(--k, 1)) var(--f-sign); fill: #fff; text-anchor: middle; font-variant-numeric: tabular-nums; pointer-events: none; }
.cps-mk:hover .cps-mk-b { stroke-width: 2.6; }
/* diamond glints: along the diamond, and on the plaque while the level is in it */
.mtl-spark { fill: #fff; stroke: #bfe9ff; stroke-width: .4; filter: drop-shadow(0 0 1.4px #e8fbff); transform-box: fill-box; transform-origin: center;
  animation: mtl-twinkle 3.4s ease-in-out infinite; }
.compass .mtl-spark { stroke: #3f95c4; stroke-width: .8; filter: drop-shadow(0 0 1.6px #6cc8f2); } /* (on the pale tint too) */
.cps-sparks { opacity: .75; }
.cps-hub-spark { display: none; }
.compass[data-band="diamond"] .cps-hub-spark { display: inline; }
@keyframes mtl-twinkle { 0%, 62%, 100% { opacity: .2; transform: scale(.45); } 76% { opacity: 1; transform: scale(1.12) rotate(18deg); } 88% { opacity: .55; transform: scale(.75); } }
/* an income icon has just landed (fx.js): the plaque flashes */
.compass.cps-hit .cps-plq { animation: cpsHit calc(.7s * var(--fx-pace, 1)) ease-out; }
@keyframes cpsHit { 0% { stroke: var(--good); stroke-width: calc(6px * var(--k, 1)); } 100% { stroke-width: calc(3.4px * var(--k, 1)); } }

/* ---- the cash box: the compass's metal round a window, the word engraved small, the ₴ figure large ---- */
.cbx-case { fill: var(--ib-case); stroke: var(--ib-c0); stroke-width: 1; }
.cbx-win { fill: var(--ib-f0); stroke: var(--ib-edge); stroke-opacity: .75; stroke-width: 1; }
.cbx-cap { font: 600 calc(9.8px * var(--k, 1)) var(--f-sign); letter-spacing: .24em; fill: var(--cbx-cap); text-anchor: middle; }
.cbx-slot { fill: var(--ib-edge); fill-opacity: .85; }
.cbx-num { font: 700 calc(33px * var(--k, 1)) var(--f-sign); fill: var(--ib-ink); text-anchor: middle; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cbx-cur { font-size: calc(23px * var(--k, 1)); fill: var(--cbx-cur); }
.cashbox.neg .cbx-num { fill: var(--band-red); }
.cashbox.long .cbx-num { font-size: calc(29px * var(--k, 1)); } /* three digits */
.cashbox.long .cbx-cur { font-size: calc(20px * var(--k, 1)); }
.cbx-pc { fill: var(--pc, transparent); opacity: .9; }
/* (a phone: no word, so the figure fills the window) */
@media (max-width: 760px) {
  .cbx-num { font-size: calc(36px * var(--k, 1)); }
  .cbx-cur { font-size: calc(25px * var(--k, 1)); }
  .cashbox.long .cbx-num { font-size: calc(31px * var(--k, 1)); }
}
/* a coin has just landed: the window glows and the box gives a little */
.cashbox.cbx-hit { animation: cbxHit calc(.32s * var(--fx-pace, 1)) ease-out; }
.cashbox.cbx-hit .cbx-win { animation: cbxWin calc(.45s * var(--fx-pace, 1)) ease-out; }
@keyframes cbxHit { 0% { transform: translateY(0); } 35% { transform: translateY(1.5px) scale(1.02); } 100% { transform: none; } }
@keyframes cbxWin { 0% { stroke: #ffd27a; stroke-width: 3; stroke-opacity: 1; } 100% { stroke-width: 1; } }

/* the tutorial points at my income (and my money): a thick pulsing ring round both, as round my portrait */
.incbar.tut-mark > div { border-radius: 7px; outline: 3px solid var(--accent); outline-offset: 2px; animation: ibTut 1.3s ease-in-out infinite; }
@keyframes ibTut { 0%, 100% { outline-color: var(--accent); } 50% { outline-color: color-mix(in srgb, var(--accent) 30%, transparent); } }
.incbar.tut-mark > .cashbox.cbx-hit { animation: cbxHit calc(.32s * var(--fx-pace, 1)) ease-out, ibTut 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .mtl-spark, .incbar.tut-mark > div, .cashbox.cbx-hit, .cashbox.cbx-hit .cbx-win, .compass.cps-hit .cps-plq { animation: none; }
  .mtl-spark { opacity: .85; }
}

/* ---- the players' strip: VP on a square plate in its metal's quiet tint (the compass's), income in its band's
   tone ---- */
.pvp.band-bronze, .iv-vp.mtl.band-bronze { --cb: var(--cb-bronze); --cb-ink: var(--cb-bronze-ink); }
.pvp.band-silver, .iv-vp.mtl.band-silver { --cb: var(--cb-silver); --cb-ink: var(--cb-silver-ink); }
.pvp.band-gold, .iv-vp.mtl.band-gold { --cb: var(--cb-gold); --cb-ink: var(--cb-gold-ink); }
.pvp.band-diamond, .iv-vp.mtl.band-diamond { --cb: var(--cb-diamond); --cb-ink: var(--cb-diamond-ink); }
.turn-strip .pvp-plate { fill: var(--cb, var(--cb-bronze)); stroke: color-mix(in srgb, var(--cb, var(--cb-bronze)) 55%, var(--cb-ink, var(--cb-bronze-ink))); stroke-width: 1.2; }
.turn-strip .pvp-shine { fill: none; stroke: #fff; stroke-opacity: .6; stroke-width: 1; stroke-linecap: round; }
:root[data-theme="dark"] .turn-strip .pvp-shine { stroke-opacity: .12; }
.turn-strip .pvp-spark { display: none; }
.turn-strip .b-pl .pvp text { fill: var(--cb-ink, var(--cb-bronze-ink)); font-weight: 800; }
.turn-strip .b-pl .pvp .ico-vp { color: var(--cb-ink, var(--cb-bronze-ink)); --ico-line: transparent; }
.turn-strip .pvp:hover .phit { fill: transparent; }
.turn-strip .pvp:hover .pvp-plate { filter: brightness(1.05); }
.turn-strip .pvp.band-diamond .pvp-spark { display: inline; }
.turn-strip .b-pl .pinc text { font-weight: 800; }
.turn-strip .pinc.band-red text, .turn-strip .pinc.band-red .bi { fill: var(--band-red); color: var(--band-red); }
.turn-strip .pinc.band-bronze text, .turn-strip .pinc.band-bronze .bi { fill: var(--band-bronze); color: var(--band-bronze); }
.turn-strip .pinc.band-silver text, .turn-strip .pinc.band-silver .bi { fill: var(--band-silver); color: var(--band-silver); }
.turn-strip .pinc.band-gold text, .turn-strip .pinc.band-gold .bi { fill: var(--band-gold); color: var(--band-gold); }
.turn-strip .pinc.band-diamond text, .turn-strip .pinc.band-diamond .bi { fill: var(--band-diamond); color: var(--band-diamond); }

/* ---- a phone's players' bar (app.js renderPlayerBar): the same bands, small ---- */
.iv.band-red { color: var(--band-red); } .iv.band-bronze { color: var(--band-bronze); } .iv.band-silver { color: var(--band-silver); }
.iv.band-gold { color: var(--band-gold); } .iv.band-diamond { color: var(--band-diamond); }
.iv.band-red b, .iv:is(.band-bronze, .band-silver, .band-gold, .band-diamond):not(.mtl) b { font-weight: 800; }
.iv-vp.mtl { padding: 0 4px 0 2px; border-radius: 4px; color: var(--cb-ink); background: var(--cb); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cb) 55%, var(--cb-ink)); }
/* the bar's stats line a little tighter (#pbar: over play.css, which comes later), so a big score still fits a
   narrow phone */
@media (max-width: 760px) {
  #pbar .pb-st { gap: 5px; }
  #pbar .pb-st .iv-income { gap: 1px; }
}
@media (max-width: 400px) { #pbar .pb-st { gap: 4px; } }
@media (max-width: 370px) { #pbar .pb-st { gap: 3px; } }
.iv-vp.mtl .ico { color: var(--cb-ink); }
.iv-vp.mtl b { font-weight: 800; }

/* ---- money and income on the move (fx.js): coins, the income icon, numbers counting as they land ---- */
/* a coin: gold whatever the theme (a material); ₴1 shows the sign, a bigger one its value */
.fx-coin { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .32)); }
.fx-coin .fx-cn { fill: url(#fxCoin); stroke: #6f4a0c; stroke-width: 1.1; }
.fx-coin .fx-cn-in { fill: none; stroke: #8a5d12; stroke-opacity: .55; stroke-width: .8; }
.fx-coin .fx-cn-t { font-family: var(--f-sign); font-weight: 700; fill: #5a3b08; text-anchor: middle; }
.fx-coin.small { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.fx-coin.small .fx-cn { stroke-width: .8; }
.fx-coin.small .fx-cn-in { display: none; }
/* the income icon on its token: green going up, the loss colour going to the bank */
.fx-inc .fx-chip-bg { stroke: var(--good); stroke-width: 2; }
.fx-layer .fx-inc .ico-income { color: var(--good); }
.fx-inc.down .fx-chip-bg { stroke: var(--bad); }
.fx-layer .fx-inc.down .ico-income { color: var(--bad); }
/* a number counting up or down as what it counts lands (the strip, the mat, the cash box, a phone's bar) */
.fx-up { animation: fxUp calc(.7s * var(--fx-pace, 1)) ease-out; }
.fx-down { animation: fxDown calc(.7s * var(--fx-pace, 1)) ease-out; }
@keyframes fxUp { 0%, 35% { fill: var(--good); color: var(--good); } }
@keyframes fxDown { 0%, 35% { fill: var(--bad); color: var(--bad); } }
/* (the cash box's figure: in colours that read on its face, paper or enamel) */
.cbx-n.fx-up { animation: cbxUp calc(.5s * var(--fx-pace, 1)) ease-out; }
.cbx-n.fx-down { animation: cbxDown calc(.5s * var(--fx-pace, 1)) ease-out; }
@keyframes cbxUp { 0%, 40% { fill: var(--cbx-up); } }
@keyframes cbxDown { 0%, 40% { fill: var(--cbx-down); } }
/* a market gauge whose count has just changed */
.gauge.fx-tick svg { animation: fxTick calc(.45s * var(--fx-pace, 1)) ease-out; }
@keyframes fxTick { 0% { filter: brightness(1.35) drop-shadow(0 0 4px #ffd27a); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .fx-up, .fx-down, .cbx-n.fx-up, .cbx-n.fx-down, .gauge.fx-tick svg { animation: none; } }