/* Trade-atlas look (the "Wild Field" concept): warm paper, cream panels, graphite ink, gold for the main action and the turn, river blue for focus, oxide brick for active tabs and dark green for available moves. The dark theme is the "locomotive dispatch room": graphite with warm gold. */ :root { --bg: #f2e8d4; /* paper */ --panel: #fbf5e8; /* cream: panels, cards, towns */ --panel2: #efe4ce; /* step boxes, second surface */ --sand: #e8dac0; --ink: #202825; /* graphite */ --muted: #615b4f; --line: #c7b89e; --line-soft: #e2d7c3; --accent: #d8ae5c; /* gold */ --accent-ink: #202825; --accent-deep: #ac843a; --accent-text: #87621f; /* gold as text on paper */ --river: #345b72; --rust: #a54c3d; --good: #276048; --good-bg: #e8efe3; --bad: #b03a2e; --warn: #b7791f; --focus: #345b72; --topbar: #202825; --topbar-ink: #f2e8d4; --topbar-muted: #cfc2a8; --topbar-line: #817662; --town: #fbf5e8; --town-line: #93836b; --merchant: #ead4a4; --merchant-line: #8f7444; --m-any: #fbf5e8; --m-blank: #d9cfbb; --slot-empty: #f6eedd; /* the map: paper with a fine grid, the Dnipro, region names */ --map: #ede1c9; --grid: #b7a586; --grid-op: .29; --water: #b3c4c3; --water-line: #73939a; --water-text: #30546b; --area-text: #7a6f5d; /* links: cart roads and railways */ --road: #f6ecd5; --road-edge: #a8916b; --rail: #6d6352; --rail-tie: #a3957d; --link-off: #b6a78b; /* card regions as soft territories, victory-point badges */ --terr-op: .13; --terr-line: #8f8068; --vp-line: #6b4c12; --vp-bg: var(--panel); --vp-ink: var(--ink); --target: #2f7a55; --hl-now: #2f8a55; --hl-turn: #d39b12; --hl-no: #c4483a; --rv-best: #2b6fd6; --rv-mine: #202825; /* "your move" (dashed): ink, since orange is the machinery colour */ --shadow: 0 1px 2px rgba(60, 45, 20, .1); --shadow-up: 0 10px 30px rgba(32, 40, 37, .22); --radius: 8px; /* fonts (loaded from Google Fonts in index.html; system fonts are the offline fallback) */ --f-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif; --f-title: "Literata", Georgia, "Times New Roman", serif; --f-name: "Arsenal", "Segoe UI", system-ui, sans-serif; --f-sign: "Oswald", "Bahnschrift SemiCondensed", "Arial Narrow", "Segoe UI", sans-serif; --case: transparent; /* outline under built links (dark theme only) */ --rim: rgba(32, 28, 22, .78); --c-vp: #b8892c; /* icons: the (always dark) rim around coloured icons, the VP star */ --g-track: #e2d6bf; --g-coal: #3a3d3b; --g-steel: #345b72; /* market gauges */ --dock-h: 0px; /* height of the hand at the bottom (set by app.js) */ font-family: var(--f-ui); color: var(--ink); color-scheme: light; } /* dark theme: chosen with the switch in the top bar (the default follows the system setting) */ :root[data-theme="dark"] { --bg: #151a18; --panel: #1f2522; --panel2: #262d29; --sand: #2c332f; --ink: #ece3cf; --muted: #a39a86; --line: #3e4641; --line-soft: #313833; --accent: #d8ae5c; --accent-ink: #1a1f1c; --accent-deep: #b48a3c; --accent-text: #e2bd6f; --river: #8cb4cf; --rust: #d98b78; --good: #5fae86; --good-bg: rgba(95, 174, 134, .14); --bad: #e0705f; --warn: #e0a64a; --focus: #8cb4cf; --topbar: #0e1210; --topbar-ink: #efe6d3; --topbar-muted: #b5aa93; --topbar-line: #5e5a4c; --town: #232a26; --town-line: #6f6b5c; --merchant: #3a3426; --merchant-line: #8a7445; --m-any: #2b322e; --m-blank: #3a3f3a; --slot-empty: #1d2320; --map: #1a201d; --grid: #d8ae5c; --grid-op: .07; --water: #2b4147; --water-line: #557a85; --water-text: #8fb0bd; --area-text: #8d846f; --road: #4b4232; --road-edge: #7c6a4c; --rail: #cfc5b2; --rail-tie: #6e6656; --link-off: #4b4b40; --terr-op: .17; --terr-line: #8d846f; --vp-line: #e2b545; --target: #5fae86; --hl-now: #5fae86; --rv-mine: #efe6d3; --shadow: 0 1px 3px rgba(0, 0, 0, .4); --shadow-up: 0 10px 30px rgba(0, 0, 0, .55); --case: rgba(236, 230, 218, .55); --rim: rgba(0, 0, 0, .55); --c-vp: #d8ae5c; --g-track: #2c332f; --g-coal: #7d817c; --g-steel: #7fa8c4; color-scheme: dark; } /* dark player colours stay visible on the dark board */ :root[data-theme="dark"] .dot { box-shadow: 0 0 0 1.5px rgba(236, 230, 218, .45); } :root[data-theme="dark"] .b-slot.tile rect.bg { stroke: rgba(236, 230, 218, .6); stroke-width: 1.4; } :root[data-theme="dark"] .tooltip { border: 1px solid rgba(255, 255, 255, .14); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); } html { scrollbar-gutter: stable; } /* the page's scroll bar coming and going never changes the layout width */ body { font-size: 14px; line-height: 1.35; } button, input, select { font: inherit; color: inherit; } button { font-weight: 600; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 6px 12px; cursor: pointer; box-shadow: none; min-height: 32px; } button:hover:not(:disabled) { border-color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); } button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } /* the main action: gold with graphite text */ button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-deep); font-weight: 800; } button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, #fff); border-color: var(--accent-deep); } button.danger { color: var(--bad); } button.small { padding: 3px 8px; font-size: 12px; min-height: 26px; } button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } input[type=text], select { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; } select { padding: 3px 6px; max-width: 100%; } .muted { color: var(--muted); } .good { color: var(--good); } .bad { color: var(--bad); } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .spacer { flex: 1; } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; } kbd { font: 12px ui-monospace, monospace; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; } /* ---------------------------------------------------------------- top bar */ #topbar { height: 55px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--topbar); color: var(--topbar-ink); border-bottom: 3px solid var(--accent); } .brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; flex-shrink: 0; } .stamp { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--accent); color: var(--accent); font: 800 15px var(--f-title); flex-shrink: 0; } .brand-txt { display: flex; flex-direction: column; line-height: 1.12; } .brand-name { font-family: var(--f-title); font-size: 19px; font-weight: 600; letter-spacing: .1px; } .brand-name b { color: var(--accent); font-weight: 700; } /* small sign-style label over a title (the atlas "kicker") */ .kicker { font-family: var(--f-sign); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1.2; } #topbar .kicker { color: #e5c486; } #topinfo { flex: 1; display: flex; gap: 12px; align-items: center; overflow: hidden; white-space: nowrap; font-size: 13px; min-width: 0; } #topinfo .pill { background: transparent; border: 1px solid var(--topbar-line); border-radius: 999px; padding: 2px 10px; color: var(--topbar-ink); } #topinfo .muted, .conn { color: var(--topbar-muted); } #topbar button { background: transparent; border-color: var(--topbar-line); color: var(--topbar-ink); min-height: 26px; } #topbar button:hover:not(:disabled) { border-color: var(--accent); background: rgba(216, 174, 92, .12); } .conn { font-size: 12px; white-space: nowrap; } .conn.off { color: #ff9b8a; font-weight: 700; } #screen { height: calc(100% - 55px); } @media (max-width: 760px) { #topbar { flex-wrap: wrap; padding: 6px 10px; height: auto; min-height: 55px; gap: 8px 10px; } #topinfo { order: 3; flex-basis: 100%; overflow-x: auto; } .brand-name { font-size: 16px; } .stamp { width: 28px; height: 28px; font-size: 13px; } #topbar .kicker { display: none; } #screen { height: auto; } } /* ---------------------------------------------------------------- home / lobby */ .center { max-width: 760px; margin: 0 auto; padding: 28px 16px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; } .card h2 { margin: 0 0 12px; font-family: var(--f-title); font-weight: 600; font-size: 22px; } .card .kicker + h2 { margin-top: 2px; } .card h3 { margin: 0 0 8px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid2 > * { min-width: 0; } /* long character names in a select must not widen the page on a phone */ .grid2 select { max-width: 100%; } @media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .field label { font-size: 12px; color: var(--muted); } .code { font: 600 28px ui-monospace, monospace; letter-spacing: 4px; } .lobby-players { list-style: none; padding: 0; margin: 0 0 12px; } .lobby-players li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); } .badge { font-size: 11px; background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--muted); } .share { display: flex; gap: 6px; } .share input { flex: 1; font: 12px ui-monospace, monospace; } /* ---------------------------------------------------------------- game layout */ /* two columns of windows; any window can be dragged by its header into the other column */ #screen.in-game { display: flex; flex-direction: column; } .game { display: flex; flex: 1; min-height: 0; } .leftcol { flex: 0 0 var(--left, 64%); max-width: var(--left, 64%); height: 100%; overflow-y: auto; overflow-anchor: none; display: flex; flex-direction: column; gap: 12px; padding: 12px 10px 12px 14px; } /* drag to change the width of the map column (double-click resets) */ .splitter { flex: 0 0 7px; cursor: col-resize; touch-action: none; background: linear-gradient(to right, transparent 3px, var(--line) 3px, var(--line) 4px, transparent 4px); } .splitter:hover, .splitter.drag, .splitter:focus-visible { outline: none; background: linear-gradient(to right, transparent 2px, var(--accent) 2px, var(--accent) 5px, transparent 5px); } .leftcol > *, .side > * { flex-shrink: 0; } .board-wrap { position: relative; background: var(--map); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; } /* the map scrolls inside its frame without scroll bars (mapview.js: the wheel, a drag, a pinch, ⤢) */ .board-scroll { position: absolute; inset: 0; overflow: hidden; } .board-wrap.zoomed { touch-action: none; } /* one finger drags a zoomed-in map, two pinch it */ .board-wrap.zoomed .board-scroll { cursor: grab; } .board-wrap.zoomed .b-line.hit:not(.target) { cursor: inherit; } .board-wrap svg { display: block; } /* the players' strip over the map's left edge (it doesn't zoom or move): only its panels take the pointer */ .board-strip { position: absolute; left: 0; top: 0; pointer-events: none; } .board-strip .b-strip, .board-strip .strip-back { pointer-events: auto; } .board-strip .strip-back { fill: var(--map); } body.panning-map, body.panning-map * { cursor: grabbing !important; } body.panning-map .tooltip { display: none !important; } /* window headers: grip, kicker + serif title, tools, collapse button */ .phead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; } .panel > .phead { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); } .panel.collapsed > .phead { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .ptitle { display: flex; flex-direction: column; min-width: 0; cursor: pointer; user-select: none; } .ptitle h4, .phead h4 { margin: 0; font-family: var(--f-title); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; line-height: 1.2; } .grip { align-self: stretch; width: 9px; min-height: 22px; flex-shrink: 0; cursor: grab; opacity: .75; background-image: radial-gradient(circle, var(--muted) 1.1px, transparent 1.4px); background-size: 4.5px 4.5px; background-position: center; background-repeat: repeat-y; margin-right: -2px; } .phead:hover .grip { opacity: 1; } .pcollapse { border: 0; box-shadow: none; background: transparent; padding: 4px 5px; color: var(--muted); border-radius: 5px; line-height: 0; flex-shrink: 0; min-height: 0; } .pcollapse:hover:not(:disabled) { background: var(--panel2); color: var(--ink); border-color: transparent; } .pcollapse svg { transition: transform .15s; } .panel.collapsed .pcollapse svg { transform: rotate(-90deg); } .panel.collapsed > :not(.phead) { display: none !important; } .helptip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; cursor: help; flex-shrink: 0; } .helptip:hover, .helptip:focus-visible { color: var(--ink); border-color: var(--accent-deep); outline: none; } .mappanel { padding: 10px 12px 12px; } /* the map's window has no title row: its first row is the income compass (income-compass.css), with the grip that moves the window and the arrow that folds it (down to this row) at its right end */ .panel > .maptop { flex-wrap: nowrap; align-items: stretch; gap: 4px; min-height: 0; margin: 0 0 8px; padding: 0; border: 0; } .panel.collapsed > .maptop { margin: 0; } .maptop > .incbar { flex: 1 1 auto; min-width: 0; } .maphandle { flex: none; display: flex; flex-direction: column; align-items: center; width: 20px; } .maphandle .grip { flex: 1 1 auto; align-self: center; min-height: 0; margin: 2px 0 1px; } .maphandle .pcollapse { padding: 3px 4px; } /* ⤢ in the map's top right corner, while it is zoomed in: the whole map again (the wheel and a pinch zoom) */ .map-fit { position: absolute; top: 9px; right: 9px; z-index: 3; display: none; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; padding: 0; font-size: 18px; line-height: 1; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 2px 6px rgba(30, 20, 8, .25); cursor: pointer; } .map-fit:hover { background: var(--panel2); border-color: var(--accent-deep); } .board-wrap.zoomed .map-fit { display: inline-flex; } .soft-links .b-line.glow { opacity: .3; stroke-width: 9; } .side { flex: 1; height: 100%; overflow-y: auto; overflow-anchor: none; padding: 12px 14px 12px 10px; display: flex; flex-direction: column; gap: 12px; min-width: 0; container: side / inline-size; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 12px; overflow-x: auto; } .panel h4 { margin: 0 0 6px; } @media (max-width: 1100px) { #screen.in-game { display: block; } .game { flex-direction: column; height: auto; } .leftcol { flex: none; max-width: none; height: auto; overflow: visible; padding: 8px; } .splitter { display: none; } .side { height: auto; overflow: visible; padding: 0 8px 8px; } #screen { height: auto; } } /* the map alone at the bottom of its column reaches down to the hand's plate (app.js frameHeight): the column needs no room for scrolling things up over the hand */ @media (min-width: 1101px) { #screen.in-game :is(.leftcol, .side).map-alone { padding-bottom: 8px; } /* (a window scrolled into sight — the era review's — stops above the hand) */ #screen.in-game :is(.leftcol, .side) { scroll-padding-bottom: calc(var(--dock-h, 0px) + 14px); } } /* moving windows: the dragged window's label follows the pointer, a gold bar shows where it lands */ .panel-ghost { position: fixed; z-index: 70; pointer-events: none; background: var(--panel); border: 1px solid var(--accent-deep); border-radius: 8px; padding: 8px 14px; box-shadow: var(--shadow-up); font: 600 15px var(--f-title); transform: rotate(-1.5deg); } .panel-drop { height: 10px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); flex-shrink: 0; } .panel.moving { opacity: .35; } body.moving-panel, body.moving-panel * { cursor: grabbing !important; user-select: none; } /* ---------------------------------------------------------------- whose turn (the top bar, app.js turnChip) */ /* a chip in the colour of the player whose turn it is (the bar is dark in both themes); yours is lit gold */ #topinfo .turn-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 2px 12px 2px 8px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--pc, var(--accent)) 70%, #fff); background: color-mix(in srgb, var(--pc, var(--accent)) 34%, transparent); color: var(--topbar-ink); } #topinfo .turn-chip .pmark { height: 15px; width: 6px; box-shadow: 0 0 0 1px rgb(255 255 255 / .55); } #topinfo .turn-chip b { font-weight: 700; } #topinfo .turn-chip small { font-size: 12px; color: var(--topbar-muted); } #topinfo .turn-chip.mine { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent); } #topinfo .turn-chip.mine b { color: #fff3d6; } #topinfo .turn-chip.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 26%, transparent); font-weight: 700; } #topinfo .tb-done { flex: none; font-size: 12px; color: var(--topbar-muted); } #topinfo .pill.era { display: inline-flex; align-items: center; flex: none; } /* (a narrower bar keeps whose turn and the era whole: the deck is in the market window, the code in the link) */ @media (max-width: 1450px) { #topinfo :is(.tb-done, .tb-code, .tb-deck, .turn-chip small) { display: none; } } /* ---------------------------------------------------------------- the action's step (over the hand's keys) */ /* app.js renderWizardBox: a card-like box standing on the hand's plate over the keys, the eyes stay at the bottom */ .dock-wizard { position: absolute; z-index: 6; right: 14px; bottom: calc(var(--plate-h, 124px) + 10px); width: min(440px, calc(100vw - 28px)); pointer-events: auto; } .dock-wizard[hidden] { display: none; } .dock-wizard > .wizard { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 9px; box-shadow: var(--shadow-up); max-height: min(52vh, 460px); overflow-y: auto; } .dock-wizard.enter > .wizard { animation: wizIn .18s ease-out; } @keyframes wizIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .dock-wizard.enter > .wizard { animation: none; } } /* a card being dragged shows where it lands: the card's own box steps aside meanwhile */ body.dragging-card .dock-wizard[data-type="card"] { visibility: hidden; } @media (max-width: 1100px) { /* the hand at the bottom of the page: the box over its top edge, across the width */ .dock-wizard { left: 8px; right: 8px; width: auto; bottom: calc(100% + 6px); } .dock-wizard > .wizard { max-height: 40vh; padding: 8px 10px; gap: 6px; } } /* ---------------------------------------------------------------- wizard (the current step) */ .wizard { display: flex; flex-direction: column; gap: 8px; background: var(--panel2); border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 12px; } .wizard .title { font-family: var(--f-sign); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); } .wizard .hint { color: var(--ink); } .wizard .hint + .hint { color: var(--muted); } .wizard .err { color: var(--bad); font-weight: 600; } .wizard table { border-collapse: collapse; } .wizard td { padding: 3px 10px 3px 0; vertical-align: middle; } .wizard .row button.primary { min-height: 40px; padding: 6px 16px; } .choice-list { display: flex; flex-wrap: wrap; gap: 6px; } .choice-list button { text-align: left; } .choice-list button small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; } .sale-list { margin: 0; padding-left: 18px; } .sale-list li { margin: 2px 0; } .summary { background: var(--panel); border: 1px solid var(--line-soft); border-top: 2px solid var(--ink); border-radius: 4px; padding: 8px; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- the hand (bottom of the screen) */ .handdock { flex: none; position: relative; z-index: 20; background: linear-gradient(to bottom, var(--sand), var(--bg)); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(40, 32, 18, .1); padding: 0 16px 0 18px; } .handdock[hidden] { display: none; } #hand { display: flex; align-items: stretch; gap: 14px; min-width: 0; } /* the title block on the left: kicker, number of cards, a hint and the fold button */ .dock-head { flex: 0 0 150px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 0; padding: 10px 0; flex-wrap: nowrap; position: relative; } .dock-head .ptitle h4 { font-size: 17px; } .dock-head .spacer { display: none; } .dock-head .pcollapse { position: absolute; right: 0; top: 8px; } .dock-hint { font-size: 11.5px; line-height: 1.3; color: var(--muted); } .handdock.collapsed .dock-body, .handdock.collapsed .dock-hint { display: none; } .handdock.collapsed .dock-head { flex-direction: row; align-items: center; flex-basis: auto; padding: 6px 0; } .handdock.collapsed .dock-head .pcollapse { position: static; } .handdock.collapsed .ptitle { flex-direction: row; align-items: baseline; gap: 10px; } .handdock.collapsed .pcollapse svg { transform: rotate(180deg); } .handdock:not(.collapsed) .pcollapse svg { transform: rotate(0); } .dock-body { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 18px; overflow-x: auto; overflow-y: hidden; padding: 18px 6px 6px; scrollbar-width: thin; } .dock-group { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } .dock-lbl { font-family: var(--f-sign); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-left: 4px; } .dock-sep { align-self: stretch; width: 1px; background: var(--line); margin: 10px 0 4px; flex-shrink: 0; } .dock-empty { padding: 8px 4px 14px; } .fan { display: flex; align-items: flex-end; padding: 0 8px 0 0; } .fan .hcard + .hcard { margin-left: -10px; } /* a card: coloured band (region / industry), a picture, the name, small industry badges */ .hcard { position: relative; flex-shrink: 0; width: 92px; height: 120px; padding: 0; border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; text-align: center; background: var(--panel); border: 1px solid color-mix(in srgb, var(--ink) 22%, var(--line)); color: var(--ink); cursor: default; min-height: 0; box-shadow: 0 2px 4px rgba(40, 30, 12, .16), inset 0 0 0 3px var(--panel), inset 0 0 0 4px color-mix(in srgb, var(--rc) 45%, transparent); transform: translateY(var(--drop, 0px)) rotate(var(--rot, 0deg)); transform-origin: 50% 120%; transition: transform .16s ease, box-shadow .16s ease; touch-action: pan-x; } .hcard:hover:not(:disabled), .hcard:focus-visible { z-index: 5; transform: translateY(-14px) rotate(0deg) scale(1.04); box-shadow: 0 12px 22px rgba(40, 30, 12, .26), inset 0 0 0 3px var(--panel), inset 0 0 0 4px color-mix(in srgb, var(--rc) 60%, transparent); background: var(--panel); border-color: var(--accent-deep); } .hcard.selectable { cursor: pointer; } .hcard.draggable { cursor: grab; } .hcard.selected { z-index: 4; transform: translateY(-16px) rotate(0deg); border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent), 0 12px 22px rgba(40, 30, 12, .26); } .hcard.pinned { outline: 2px dashed var(--accent-deep); outline-offset: 3px; } .hcard.disabled { opacity: .45; filter: grayscale(.5); } .hc-band { position: relative; flex: none; height: 19px; background: var(--rc); display: flex; align-items: center; justify-content: center; } .hc-kind { font-family: var(--f-sign); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); } .hcard.ind .hc-kind { color: #22201b; text-shadow: none; } .hc-kind.is-new, .hcard.ind .hc-kind.is-new { color: #22201b; background: #f2c94c; border-radius: 3px; padding: 0 5px; line-height: 14px; text-shadow: none; letter-spacing: .1em; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); } .hc-new { position: absolute; right: 3px; top: 3px; font-family: var(--f-sign); font-size: 8.5px; letter-spacing: .08em; background: var(--ink); color: var(--panel); border-radius: 3px; padding: 0 3px; line-height: 13px; } .hc-name { font-family: var(--f-name); font-weight: 700; font-size: 14px; line-height: 1.08; padding: 0 4px; overflow-wrap: normal; hyphens: manual; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hc-name.long { font-size: 12.5px; letter-spacing: -.1px; } .hc-name.xlong { font-size: 11.5px; letter-spacing: -.2px; } .hcard.town .hc-name { margin-top: 7px; min-height: 28px; display: flex; align-items: center; justify-content: center; } .hc-name > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hcard.ind .hc-name { font-size: 12px; margin-top: 1px; -webkit-line-clamp: 2; min-height: 26px; display: flex; align-items: center; justify-content: center; } .hcard.ind .hc-name.xlong { font-size: 11px; } .hc-name i { font-style: normal; color: var(--muted); } .hc-art { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; } .hc-art .scene { display: block; } /* a town card: the town's spaces as on the map, each in its industry colour (two industries one above the other) */ /* town cards: each industry the town can take, once; grey when the card cannot build it now */ .hc-inds { flex: 1; display: grid; grid-template-columns: repeat(2, 27px); gap: 4px; align-content: center; justify-content: center; padding: 0 0 8px; } .hc-inds.n1 { grid-template-columns: 34px; } .hc-inds.n3 { grid-template-columns: repeat(3, 25px); gap: 3px; } .hc-inds .hi { height: 27px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ic) 24%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 55%, transparent); } .hc-inds.n1 .hi { height: 34px; } .hc-inds .ico { width: 19px; height: 19px; } .hc-inds.n1 .ico { width: 25px; height: 25px; } .hc-inds .hi.no, .hcard .hb.no { background: transparent; box-shadow: none; outline: 1px dashed color-mix(in srgb, var(--muted) 55%, transparent); outline-offset: -1px; } .hc-inds .hi.no .ico, .hcard .hb.no .ico { color: var(--muted); opacity: .4; --ico-line: none; } /* black coal on the dark theme: its chip is a light charcoal, so "can build" never looks like "can't" */ :root[data-theme="dark"] .hc-inds .hi[data-ind="coal"]:not(.no), :root[data-theme="dark"] .hcard .hb[data-ind="coal"]:not(.no) { background: color-mix(in srgb, #9a9a9a 24%, var(--panel)); box-shadow: inset 0 0 0 1px rgba(170, 170, 170, .5); } /* an industry card: the industry's icon, big */ .hc-big { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; } .hb { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 9px; background: color-mix(in srgb, var(--ic) 24%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 55%, transparent); } .hb .ico { width: 34px; height: 34px; } .hcard.ind.two .hb { width: 37px; height: 37px; border-radius: 7px; } .hcard.ind.two .hb .ico { width: 26px; height: 26px; } .hc-six { flex: 1; display: grid; grid-template-columns: repeat(3, 22px); gap: 3px; align-content: center; justify-content: center; } .hc-six .hb { width: 22px; height: 22px; border-radius: 4px; } .hc-six .hb .ico { width: 16px; height: 16px; } .hcard.wild { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 22%, var(--panel)), var(--panel) 70%); } .hcard.wild .hc-band { background: repeating-linear-gradient(135deg, var(--accent), var(--accent) 6px, var(--accent-deep) 6px, var(--accent-deep) 12px); } .hcard.wild .hc-kind { color: #22201b; text-shadow: none; } .hcard.wild .hc-art { color: var(--accent-deep); padding-top: 2px; } .hcard.wild .hc-art .scene { width: 46px; height: 46px; } .hcard.wild .hc-name { font-size: 12.5px; margin-top: 2px; } /* can it build now? a strip along the bottom: green now, amber after another action, red not this turn */ .hc-state { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; } .hcard.st-now .hc-state { background: var(--hl-now); } .hcard.st-turn .hc-state { background: var(--hl-turn); } .hcard.st-no .hc-state { background: var(--hl-no); opacity: .75; } .hcard.new { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 2px 4px rgba(40, 30, 12, .16), inset 0 0 0 3px var(--panel), inset 0 0 0 4px color-mix(in srgb, var(--rc) 45%, transparent); } :root[data-theme="dark"] .hcard { border-color: #4d554f; box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 3px var(--panel), inset 0 0 0 4px color-mix(in srgb, var(--rc) 45%, transparent); } :root[data-theme="dark"] .handdock { background: linear-gradient(to bottom, #222925, var(--bg)); box-shadow: 0 -6px 18px rgba(0, 0, 0, .4); } /* dragging a card onto the map */ .card-ghost { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; transform-origin: 0 0; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .3)); } .card-ghost .hcard { transform: none; margin: 0; transition: opacity .15s; } /* over the map the card stays the same size but lets the town under it show through */ .card-ghost.onmap .hcard { opacity: .55; } .card-ghost .cg-label { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap; background: var(--good); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; opacity: 0; transition: opacity .12s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); } .card-ghost.over .cg-label { opacity: 1; } .card-ghost.bad .cg-label { opacity: 1; background: var(--bad); } .card-ghost.ontown .hcard { opacity: .32; } /* the opened-up town shows through the card */ body.dragging-card, body.dragging-card * { cursor: grabbing !important; user-select: none; } body.dragging-card .tooltip { display: none !important; } body.dragging-card .handdock .hcard[aria-pressed="true"] { opacity: .35; } .b-slot.drop-hot rect.ring { stroke: var(--accent-deep) !important; stroke-width: 4 !important; stroke-dasharray: none !important; } .b-slot.drop-hot rect.bg { filter: brightness(1.06); } .b-line.hit.drop-hot { stroke: color-mix(in srgb, var(--accent) 70%, transparent); } /* fixed bars stay above the hand */ .has-dock #toast { bottom: calc(var(--dock-h) + 16px); } .has-dock #stepbar { bottom: calc(var(--dock-h) + 14px); } @media (max-width: 1100px) { .handdock { position: sticky; bottom: 0; } } @media (max-width: 760px) { .handdock { padding: 0 8px; } #hand { flex-direction: column; gap: 0; } .dock-head { flex-basis: auto; flex-direction: row; align-items: center; padding: 4px 0 0; } .dock-head .pcollapse { position: static; margin-left: auto; } .dock-head .ptitle { flex-direction: row; align-items: baseline; gap: 8px; } .dock-body { padding-top: 12px; gap: 12px; } .hcard { width: 74px; height: 94px; } .hcard .hc-name { font-size: 11px; padding: 0 2px; } .hcard .hc-name.long { font-size: 10px; } .hcard .hc-name.xlong, .hcard.ind .hc-name.xlong { font-size: 9.5px; letter-spacing: -.25px; } .hcard.town .hc-name { min-height: 24px; margin-top: 4px; } .hc-inds { grid-template-columns: repeat(2, 22px); gap: 3px; } .hc-inds.n3 { grid-template-columns: repeat(3, 20px); } .hc-inds .hi { height: 22px; } .hc-inds .ico { width: 15px; height: 15px; } .hb { width: 38px; height: 38px; } .hb .ico { width: 27px; height: 27px; } .hcard.ind.two .hb { width: 29px; height: 29px; } .hcard.ind.two .hb .ico { width: 20px; height: 20px; } .hc-six { grid-template-columns: repeat(3, 18px); } .hc-six .hb { width: 18px; height: 18px; } .hc-six .hb .ico { width: 13px; height: 13px; } .hcard.wild .hc-art .scene { width: 36px; height: 36px; } .hc-band { height: 16px; } .hc-kind { font-size: 8.5px; } .dock-hint { display: none; } .grip { display: none; } .phead { gap: 6px; } } @media (prefers-reduced-motion: reduce) { .hcard { transition: none; } } .hl-ok { color: var(--hl-now); } .hl-turn { color: var(--hl-turn); } .hl-no { color: var(--hl-no); } .wizard .note { font-size: 12.5px; } /* ---------------------------------------------------------------- move review */ .review-panel[hidden] { display: none; } .rv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .rv-head h4 { margin: 0; } .switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; user-select: none; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch .knob { width: 32px; height: 18px; border-radius: 9px; background: var(--line); position: relative; transition: background .15s; } .switch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; } .switch input:checked + .knob { background: var(--good); } .switch input:checked + .knob::after { left: 16px; } .switch input:focus-visible + .knob { outline: 2px solid var(--focus); outline-offset: 2px; } .rv-pending { display: flex; align-items: center; gap: 8px; color: var(--muted); margin-bottom: 6px; } .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .rv { border-left: 4px solid var(--rvc, var(--line)); padding-left: 8px; } .rv-best { --rvc: #2e8a4f; } .rv-excellent { --rvc: #4a9e5c; } .rv-good { --rvc: #7aa35a; } .rv-inaccuracy { --rvc: #d6a316; } .rv-mistake { --rvc: #e07b00; } .rv-blunder { --rvc: #c0392b; } .rv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .rv-badge { font-weight: 700; color: var(--rvc); font-size: 15px; } .rv-line { padding: 2px 4px; border-radius: 4px; cursor: default; } .rv-line:hover, .rv-alts li:hover { background: var(--panel2); } .rv-why { margin: 6px 0; padding-left: 18px; font-size: 13px; } .rv-why li { margin: 2px 0; } .rv-sub { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 6px; } .rv-alts { margin: 2px 0 0; padding-left: 20px; font-size: 13px; } .rv-alts li { padding: 1px 2px; border-radius: 4px; } .rv-alts li.mine { font-style: italic; } .rv-alts li.best { font-weight: 600; } .rv-hist { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .rv-dot { min-width: 26px; padding: 1px 5px; font-size: 11px; font-weight: 700; color: #fff; background: var(--rvc); border-color: transparent; box-shadow: none; } .rv-dot.on { outline: 2px solid var(--ink); outline-offset: 1px; } .small { font-size: 11.5px; } .rv-none, .rv-wait { --rvc: var(--line); } /* "show me good moves" (full explore mode) */ .sug { margin-bottom: 8px; } .sug .rv-alts li { cursor: default; } button.suggest { border-style: dashed; color: var(--river); background: color-mix(in srgb, var(--river) 6%, var(--panel)); } /* ---------------------------------------------------------------- era review (going back through the era) */ .game.replaying .mappanel { box-shadow: 0 0 0 2px color-mix(in srgb, var(--river) 45%, transparent); } .replay-banner { display: flex; align-items: center; gap: 8px; margin: -2px 0 8px; padding: 6px 10px; border-radius: 6px; background: color-mix(in srgb, var(--river) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--river) 35%, var(--line)); font-weight: 600; } .replay-banner[hidden] { display: none; } .rp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--river); animation: rpPulse 1.6s ease-in-out infinite; flex-shrink: 0; } @keyframes rpPulse { 50% { opacity: .35; } } .replay { display: flex; flex-direction: column; gap: 10px; } .rp-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rp-count { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 64px; text-align: center; } .rp-who { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 15px; } .rp-who b { font-family: var(--f-title); font-size: 16px; } .rp-timeline { display: flex; flex-direction: column; gap: 3px; max-height: 210px; overflow-y: auto; padding: 6px; background: var(--panel2); border-radius: 6px; border: 1px solid var(--line-soft); } .tl-round { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; } .tl-r { font-family: var(--f-sign); font-size: 11px; color: var(--muted); width: 18px; text-align: right; margin-right: 4px; font-variant-numeric: tabular-nums; } .tl-chip { min-height: 0; width: 24px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--line); border-bottom: 3px solid var(--rvc, var(--line)); border-radius: 4px; } .tl-chip .pmark { width: 4px; height: 12px; margin: 0; } .tl-chip.on { outline: 2px solid var(--ink); outline-offset: 1px; background: color-mix(in srgb, var(--accent) 25%, var(--panel)); } .tl-chip.rv-wait { border-bottom-style: dotted; } .rp-sum { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; } .rp-sum th { font-weight: 600; color: var(--muted); font-size: 11px; text-align: right; padding: 2px 4px; } .rp-sum td { text-align: right; padding: 3px 4px; border-top: 1px solid var(--line-soft); } .rp-sum th:first-child, .rp-sum td:first-child { text-align: left; } .rp-open { margin: 10px 0 4px; } /* lobby: analysis mode */ .lobby-mode { margin: 4px 0 14px; } .lobby-mode small { display: block; margin-top: 3px; } .field label .helptip { margin-left: 4px; vertical-align: 1px; } /* ---------------------------------------------------------------- "are you sure?" */ .modal.mistake { max-width: 460px; border-top: 4px solid var(--accent); } .modal.mistake h2 { margin: 2px 0 8px; font-size: 22px; } .modal.mistake p { margin: 0 0 12px; line-height: 1.45; } .mk-noask { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; cursor: pointer; } /* ---------------------------------------------------------------- a tile flying from the mat to the map */ .fly-tile { position: fixed; z-index: 75; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); } .fly-tile svg { width: 100%; height: 100%; display: block; } /* ---------------------------------------------------------------- language switch */ .lang-switch, .theme-switch { display: inline-flex; border: 1px solid var(--topbar-line); border-radius: 5px; overflow: hidden; flex-shrink: 0; } #topbar .lang-switch button, #topbar .theme-switch button { border: 0; border-radius: 0; box-shadow: none; padding: 3px 10px; font-size: 12px; background: transparent; color: var(--topbar-ink); min-height: 26px; } #topbar .lang-switch button.on, #topbar .theme-switch button.on { background: var(--accent); color: var(--accent-ink); font-weight: 800; } .lang-switch button:focus-visible, .theme-switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; } #topbar .theme-switch button { display: inline-flex; align-items: center; padding: 4px 9px; color: var(--topbar-muted); } #topbar .theme-switch button.on { color: var(--accent-ink); } .theme-switch svg { display: block; } /* ---------------------------------------------------------------- markets */ .market { display: flex; gap: 3px; margin: 3px 0 9px; flex-wrap: wrap; } .market .mcol { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 2px 1px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel2); min-width: 26px; } .market .spot { width: 15px; height: 15px; border-radius: 3px; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; } .market .spot.full { border: 1px solid transparent; } .market .spot .ico { width: 15px; height: 15px; } .mrow { display: flex; align-items: center; gap: 8px; } .mk-res { display: inline-flex; } .mk-res .ico { width: 21px; height: 21px; } /* dark theme: a sheen so black coal cubes read as cubes, not empty boxes */ /* icons: one set (icons.js), coloured one way everywhere — industries and resources in their game colours with a thin rim, VP in gold with a rim, every other mechanic in the colour of the text. Chips behind industry icons are a soft tint of the industry colour. */ .ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; overflow: visible; } .ico, .bi { fill: currentColor; stroke: var(--ico-line, none); stroke-width: var(--ico-lw, 0); paint-order: stroke; stroke-linejoin: round; } /* the six industries (icons.js RAW, the approved set): parts with their own paint — the body in the industry's colour with a softer outline, a shaded side, and cut lines in the colour of the ground under the icon */ .ico, .bi { --res-outline: color-mix(in srgb, currentColor 44%, var(--res-ground, var(--panel))); --res-detail: var(--res-ground, var(--panel)); --res-shade: color-mix(in srgb, currentColor 80%, var(--res-ground, var(--panel))); } .res-body { fill: currentColor; stroke: var(--res-outline, currentColor); stroke-width: var(--res-lw, .7); stroke-linejoin: round; paint-order: var(--res-paint, normal); } .res-shadow { fill: var(--res-shade, currentColor); stroke: none; } .res-cut { fill: none; stroke: var(--res-detail, #f4eddb); stroke-width: 1.02; stroke-linecap: round; stroke-linejoin: round; paint-order: normal; } .res-tube-edge { fill: none; stroke: var(--res-outline, currentColor); stroke-width: 6.3; stroke-linecap: round; } .res-tube { fill: none; stroke: currentColor; stroke-width: 5.1; stroke-linecap: round; } /* the ground under the icons, for their cut lines */ .hcard { --res-ground: var(--card-face, var(--panel)); } .hc-inds .hi, .hcard .hb { --res-ground: color-mix(in srgb, var(--ic) 24%, var(--card-face, var(--panel))); } .mp-top { --res-ground: color-mix(in srgb, var(--ic) 22%, var(--panel)); } .ico-mill { color: var(--ind-mill); } .ico-machinery { color: var(--ind-machinery); } .ico-glass { color: var(--ind-glass); } .ico-coal, .ico-coal-lump, .ico-res-coal { color: var(--ind-coal); } /* black coal on the dark theme's dark panels: a lighter charcoal, so it reads as a filled icon */ :root[data-theme="dark"] .ico-coal, :root[data-theme="dark"] .ico-coal-lump, :root[data-theme="dark"] .ico-res-coal { color: color-mix(in srgb, var(--ind-coal) 58%, #a3a3a3); } .ico-steel, .ico-res-steel { color: var(--ind-steel); } .ico-meat, .ico-res-sausage { color: var(--ind-meat); } .ico-vp { color: var(--c-vp); } /* the coal mine's black cart on a sold tile, in its owner's colour (a dark blue swallows it): a light outline round the cart alone (its cut lines and the tile stay as they are) */ .tile-ico.sold.ico-coal { --res-outline: #f3eee2; --res-lw: 2.2; --res-paint: stroke; } :root[data-theme="dark"] .tile-ico.sold.ico-coal { --res-outline: #cfcabd; } .ico-mill, .ico-machinery, .ico-glass, .ico-coal, .ico-coal-lump, .ico-steel, .ico-meat, .ico-vp, .ico-res-coal, .ico-res-steel, .ico-res-sausage { --ico-line: var(--rim); --ico-lw: 1.5; } .ico.plain, .bi.plain { --ico-line: none; } .iv { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; } .iv b { font-weight: 700; } .iv .ico { width: 1.05em; height: 1.05em; } .ibadge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--ic) var(--tint, 24%), var(--panel)); flex-shrink: 0; } .ibadge .ico { width: 18px; height: 18px; } .ibadge.big { width: 36px; height: 36px; border-radius: 8px; } .ibadge.big .ico { width: 25px; height: 25px; } .ibadge.mini { width: 18px; height: 18px; border-radius: 4px; } .ibadge.mini .ico { width: 13px; height: 13px; } .market .spot.next { box-shadow: 0 0 0 2px var(--focus); } .market .spot.inf { border: 0; font-size: 12px; line-height: 14px; text-align: center; color: var(--muted); height: 30px; } .market .p { font-size: 10px; color: var(--muted); } .kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; } /* ---------------------------------------------------------------- mat */ .mat { width: 100%; border-collapse: collapse; font-size: 12px; } .mat th { font-weight: 500; color: var(--muted); font-size: 11px; text-align: center; padding: 2px; } .mat td { text-align: center; padding: 3px 2px; border-top: 1px solid var(--line); white-space: nowrap; } .mat td:first-child, .mat th:first-child { text-align: left; } .mat .lv { display: inline-block; min-width: 16px; padding: 0 3px; border-radius: 3px; margin: 0 1px; font-size: 11px; background: var(--panel2); border: 1px solid var(--line); } .mat .lv.next { background: var(--accent); color: #fff; border-color: var(--accent); } .mat .lv.gone { opacity: .3; text-decoration: line-through; } .indsw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; } /* ---------------------------------------------------------------- log / chat */ .tabs { display: flex; gap: 16px; } .tabs button { border: 0; border-radius: 0; background: none; padding: 2px 0 5px; min-height: 0; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; } .tabs button:hover:not(:disabled) { background: none; color: var(--ink); } .tabs button.on { color: var(--ink); font-weight: 800; border-bottom-color: var(--rust); } .log { max-height: 340px; overflow-y: auto; font-size: 12.5px; } .log .e { padding: 3px 4px 3px 8px; border-left: 3px solid transparent; } .log .e:hover { background: var(--panel2); } .log .e.round { color: var(--muted); font-style: italic; border-top: 1px dashed var(--line); margin-top: 3px; } .log .e.era, .log .e.score { font-weight: 600; } .log .e.end { color: var(--muted); } .chat { display: flex; flex-direction: column; gap: 6px; } .chat .msgs { max-height: 300px; overflow-y: auto; font-size: 13px; } .chat .msgs div { padding: 2px 0; } /* ---------------------------------------------------------------- board svg */ .b-atlas { pointer-events: none; } .b-paper { fill: var(--map); } .b-gridline { fill: none; stroke: var(--grid); stroke-opacity: var(--grid-op); stroke-width: 1; } .b-river .water { fill: none; stroke: var(--water); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; opacity: .72; } .b-river .bank { fill: none; stroke: var(--water-line); stroke-width: 31.5; stroke-linecap: round; opacity: .16; } .b-river .flow { fill: none; stroke: var(--water-line); stroke-width: 1.4; stroke-dasharray: 4 6; opacity: .8; } .b-riverlabel { font: italic 500 15px var(--f-title); fill: var(--water-text); letter-spacing: .4px; } .b-area { font-family: var(--f-sign); font-size: 13px; font-weight: 500; letter-spacing: .34em; fill: var(--area-text); opacity: .8; } .b-town .box { fill: var(--town); stroke: var(--town-line); stroke-width: 1.3; } .b-town.farm .box { stroke-dasharray: 4 3; } .b-town .name { font-size: 13.5px; font-weight: 600; fill: var(--ink); } .b-town .farmname { font-size: 11px; fill: var(--muted); } .b-merchant .box { fill: var(--merchant); stroke: var(--merchant-line); stroke-width: 1.3; } .b-mtile .mbg { fill: var(--m-any); stroke: var(--merchant-line); stroke-width: 1; } .b-mtile .mbg.blank { fill: var(--m-blank); } .b-slot .tint, .b-mtile .tint { opacity: var(--slot-tint, .2); } .b-merchant .name { font-size: 13.5px; font-weight: 700; fill: var(--ink); } .b-merchant .bonus { font-size: 11px; fill: var(--muted); } .b-slot rect.bg { fill: var(--slot-empty); stroke: var(--town-line); stroke-dasharray: 3 2; } .b-slot text { pointer-events: none; } .b-slot .ilabel { font-size: 11px; font-weight: 600; fill: #222; } .b-slot .elabel { font-size: 11px; font-weight: 600; fill: var(--ink); } .b-slot .tl { font-size: 10px; font-weight: 700; fill: #fff; } .b-slot .lvl { font-size: 14px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.25); stroke-width: 2px; } .b-slot .cubes { font-size: 11px; font-weight: 700; } .b-slot .tcount { font-size: 8.5px; font-weight: 800; fill: #222; } .b-slot .tpill { fill: rgba(255, 250, 240, .94); stroke: rgba(0, 0, 0, .28); stroke-width: .6; } .b-mtile .mlabel { font-size: 16px; font-weight: 700; fill: #555; } .b-slot.tile rect.bg { stroke: rgba(0,0,0,.35); stroke-dasharray: none; stroke-width: 1; } .b-slot.flipped rect.bg { stroke: rgba(0, 0, 0, .35); stroke-width: 1.2; stroke-dasharray: none; } .b-slot .tile-ico.sold { --ico-line: rgba(22, 18, 14, .62); --ico-lw: 1.5; } .b-line { stroke-linecap: round; fill: none; } .b-line { stroke-linejoin: round; } /* free links of this era: a cart road (edges, surface, centre line) or a railway (sleepers, two rails) */ .b-line.off { stroke: var(--link-off); stroke-width: 1.6; stroke-dasharray: 1.5 5; } .b-line.road-edge { stroke: var(--road-edge); stroke-width: 8; } .b-line.road { stroke: var(--road); stroke-width: 5.2; } .b-line.road-mid { stroke: var(--road-edge); stroke-width: .9; stroke-dasharray: 4 5; opacity: .6; } .b-line.rail-ties { stroke: var(--rail-tie); stroke-width: 9; stroke-dasharray: 1.6 4.2; stroke-linecap: butt; } .b-line.rail-bed { stroke: var(--rail); stroke-width: 4.4; } .b-line.rail-gap { stroke: var(--panel2); stroke-width: 1.7; } /* built links in the owner's colour, same styles but bolder */ .b-line.built-case { stroke: var(--case); stroke-width: 15; } .b-line.broad-edge { stroke: rgba(20, 14, 6, .6); stroke-width: 11; } .b-line.broad { stroke-width: 7.6; } .b-line.broad-mid { stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; stroke-dasharray: 5 6; } .b-line.brail-ties { stroke-width: 13; stroke-dasharray: 2.2 4.4; stroke-linecap: butt; } .b-line.brail { stroke-width: 6.6; } .b-line.brail-gap { stroke: rgba(255, 255, 255, .92); stroke-width: 2; } .b-line.hit { stroke: transparent; stroke-width: 18; cursor: default; } .target .b-line.hit, .b-line.hit.target { cursor: pointer; } .b-line.glow { stroke: var(--target); stroke-width: 12; opacity: .55; } .b-line.sel { stroke: var(--accent); stroke-width: 12; opacity: .8; } .b-line.recent { stroke: #f2c94c; stroke-width: 14; opacity: .55; } .b-slot.target { cursor: pointer; } .b-slot.target rect.ring { fill: none; stroke: var(--target); stroke-width: 3; } .b-slot.sel rect.ring { fill: none; stroke: var(--accent); stroke-width: 3.5; } .b-slot.recent rect.ring { fill: none; stroke: #f2c94c; stroke-width: 2.5; stroke-dasharray: 4 2; } .b-mtile.target { cursor: pointer; } .b-mtile.target rect.ring { fill: none; stroke: var(--target); stroke-width: 3; } .b-mtile.sel rect.ring { fill: none; stroke: var(--accent); stroke-width: 3.5; } .b-legend text { font-size: 12px; fill: var(--muted); } .b-legend .legend-bg { fill: var(--panel); fill-opacity: .93; stroke: var(--town-line); stroke-width: 1.2; filter: drop-shadow(0 2px 5px rgba(40, 30, 15, .16)); } .b-legend .t { font-weight: 700; fill: var(--ink); font-size: 12.5px; } /* a click on the legend folds it to a tab in the map's corner, a click on the tab opens it (app.js) */ .b-legend { cursor: pointer; } .b-legend:hover .legend-bg { stroke: var(--accent-deep); fill-opacity: 1; } .b-legend .legend-chev { fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .b-legend:hover .legend-chev { stroke: var(--ink); } .b-legend.folded .t { font-size: 15px; letter-spacing: 1.6px; } .board-faded .b-slot:not(.target):not(.sel):not(.hl-now):not(.hl-turn):not(.hl-no):not(.rv-best):not(.rv-mine), .board-faded .b-mtile:not(.target):not(.sel):not(.rv-best):not(.rv-mine) { opacity: .5; } /* card hover hints: green = now, yellow = after your other action, red = not possible */ .b-slot.hl-now rect.ring { stroke: var(--hl-now); stroke-width: 3; } .b-slot.hl-turn rect.ring { stroke: var(--hl-turn); stroke-width: 3; } .b-slot.hl-no rect.ring { stroke: var(--hl-no); stroke-width: 2.5; stroke-dasharray: 4 3; } .b-slot.hl-no { opacity: .8; } .b-town.hl-town .box { stroke: var(--accent-deep); stroke-width: 3; } /* move review highlights */ .b-slot.rv-best rect.ring, .b-mtile.rv-best rect.ring { stroke: var(--rv-best); stroke-width: 3.5; } .b-slot.rv-mine rect.ring, .b-mtile.rv-mine rect.ring { stroke: var(--rv-mine); stroke-width: 3.5; stroke-dasharray: 6 3; } .b-line.rv-best { stroke: var(--rv-best); stroke-width: 12; opacity: .75; } .b-line.rv-mine { stroke: var(--rv-mine); stroke-width: 12; opacity: .75; stroke-dasharray: 10 5; } /* ---------------------------------------------------------------- toast / tooltip / modal */ #toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; background: #2a251f; color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s; max-width: min(90vw, 560px); } #toast.show { opacity: 1; } #toast.err { background: var(--bad); } .tooltip { position: fixed; z-index: 60; pointer-events: none; background: #2a251f; color: #fff; font-size: 12px; padding: 6px 8px; border-radius: 6px; max-width: 280px; box-shadow: 0 4px 12px rgba(0,0,0,.25); white-space: pre-line; } .modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal { background: var(--panel); border-radius: 10px; padding: 20px; max-width: 560px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.3); } .modal h2 { margin-top: 0; font-family: var(--f-title); font-weight: 600; } .modal table { width: 100%; border-collapse: collapse; } .modal td, .modal th { padding: 6px; border-bottom: 1px solid var(--line); text-align: right; } .modal td:first-child, .modal th:first-child { text-align: left; } .help { font-size: 13px; } .help h4 { margin: 10px 0 4px; } .help ul { margin: 0; padding-left: 18px; } /* ---------------------------------------------------------------- player mat (tiles) */ .matpanel { padding: 8px 10px 10px; container: mat / inline-size; } .mat-back { margin-left: 2px; } .mat-stats { display: inline-flex; gap: 6px; flex-wrap: wrap; } .mat-stats span { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 600; } /* ---- the player mat: a panel per industry (goods band over resources band), each level a pile ---- --mp: a tile; --mpo: how far each tile under the top one peeks out (a pile has at most 3 tiles, so every pile keeps room for 2 edges); --mpg: the gap between piles. The tile size follows the mat's width so that the widest panel (5 levels) fills one column of three (two, one on narrow mats). */ .mat-bands { --mpo: 4px; --mpg: 6px; --mp: clamp(36px, calc(((100cqi - 20px) / 3 - 44px) / 5 - 8px), 52px); display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .mat-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .mat-grp { min-width: 0; background: var(--panel2); border: 1px solid var(--line-soft); border-radius: 9px; padding: 6px 9px 9px; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ic) 75%, var(--line)); } .mat-gh { display: flex; align-items: center; gap: 6px; margin: 0 0 7px 2px; font-family: var(--f-sign); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; } .mat-gh span { overflow: hidden; text-overflow: ellipsis; } .mat-gh .ico { width: 16px; height: 16px; flex: none; } .mat-piles { display: flex; flex-wrap: wrap; gap: var(--mpg); } .mat-grp.wide .mat-piles { max-width: calc(4 * (var(--mp) + 2 * var(--mpo)) + 3 * var(--mpg)); } /* 8 levels: two rows of four */ /* one pile: the top tile with the others peeking out under it, down and to the right */ button.mp { position: relative; flex: none; width: calc(var(--mp) + 2 * var(--mpo)); height: calc(var(--mp) + 2 * var(--mpo)); padding: 0; margin: 0; min-height: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; cursor: pointer; } button.mp:hover:not(:disabled) { background: none; } .mp-top, .mp-under { position: absolute; left: 0; top: 0; width: var(--mp); height: var(--mp); border-radius: 7px; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--ic) 70%, var(--ink) 10%); } .mp-under { transform: translate(calc(var(--k) * var(--mpo)), calc(var(--k) * var(--mpo))); background: color-mix(in srgb, var(--ic) 45%, var(--panel2)); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .mp-top { display: grid; place-items: center; background: color-mix(in srgb, var(--ic) 22%, var(--panel)); box-shadow: 0 1px 3px rgba(0, 0, 0, .22); transition: transform .12s, box-shadow .12s; } .mp-top .ico { width: 54%; height: 54%; margin-top: 12%; } .mp-lv { position: absolute; left: 5px; top: 2px; font-family: var(--f-sign); font-size: calc(var(--mp) * .27); font-weight: 600; line-height: 1.15; letter-spacing: .02em; } button.mp:hover .mp-top, button.mp:focus-visible .mp-top { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, .28); } button.mp:focus-visible { outline: none; } button.mp:focus-visible .mp-top { outline: 2px solid var(--focus); outline-offset: 2px; } /* the next tile to build */ .mp.next .mp-top { box-shadow: 0 0 0 2.5px var(--accent), 0 2px 6px rgba(0, 0, 0, .25); } button.mp.next:hover .mp-top { box-shadow: 0 0 0 2.5px var(--accent), 0 5px 10px rgba(0, 0, 0, .3); } /* all built: the empty space on the mat */ .mp.gone .mp-top { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--ic) 45%, var(--muted)); box-shadow: none; } .mp.gone .mp-top .ico, .mp.gone .mp-lv { opacity: .3; } /* about to be built: it lifts off the mat */ .mp.building { z-index: 2; } .mp.building .mp-top { box-shadow: 0 0 0 3px var(--good); background: color-mix(in srgb, var(--good) 14%, color-mix(in srgb, var(--ic) 22%, var(--panel))); animation: matLift 1.1s ease-in-out infinite alternate; } .mat-gtag { flex: none; margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: .1em; line-height: 15px; padding: 0 6px; border-radius: 3px; background: var(--good); color: #fff; } @keyframes matLift { from { transform: translateY(0); } to { transform: translateY(-4px); } } @media (prefers-reduced-motion: reduce) { .mp.building .mp-top { animation: none; } .mp-top { transition: none; } } /* narrower mats (the right column, a phone): an industry per column, like a real player mat — its icon on top (the name is in its piles' tips), its levels stacked down from I; glass's five and machinery's eight in two columns of four. Tiles a little smaller, no kicker over the title. */ @container mat (max-width: 760px) { .mat-bands { --mpo: 3px; --mpg: 4px; --mp: clamp(30px, calc((100cqi - 112px) / 8 - 6px), 38px); gap: 6px; margin-top: 6px; } .mat-band { display: flex; gap: 5px; } .mat-grp { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; padding: 5px 4px 6px 7px; border-radius: 8px; } .mat-grp:has(.mp:nth-child(5)) { flex-grow: 2; } .mat-gh { justify-content: center; margin: 0 0 5px; } .mat-gh > span, .mat-gh .mat-gtag { display: none; } /* (the tile being built lifts and glows green on the mat) */ .mat-gh .ico { width: 18px; height: 18px; } .mat-piles { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; } .mat-grp.wide .mat-piles { max-width: none; } .mp-lv { font-size: calc(var(--mp) * .3); left: 4px; } .matpanel .phead .kicker { display: none; } /* the header in one line if it can (a smaller title, tighter numbers); if not, the numbers go under the title while the fold arrow stays in the top right corner */ .matpanel > .phead { position: relative; gap: 6px; padding-right: 26px; } .matpanel > .phead > .pcollapse { position: absolute; right: 0; top: 3px; } .matpanel > .phead h4 { font-size: 15.5px; } .matpanel .mat-stats { gap: 4px; } .matpanel .mat-stats span { padding: 0 6px; } } /* 400 px and wider (the right column): all six in one row, about 250 px high */ @container mat (min-width: 400px) and (max-width: 760px) { .mat-bands { flex-direction: row; justify-content: center; gap: 5px; } .mat-band { display: contents; } } /* a phone: the goods over the resources, three to a row */ @container mat (max-width: 399px) { .mat-bands { --mp: clamp(30px, calc((100cqi - 84px) / 5 - 6px), 40px); } } /* ---- a tile's details (a click on a pile of the mat or on a building on the map) ---- */ .tile-pop { min-width: 270px; max-width: 340px; } .ti-head { display: flex; align-items: center; gap: 11px; padding-right: 22px; margin-bottom: 9px; } .ti-head .ti-face { position: relative; flex: none; width: 58px; height: 58px; --mp: 58px; } .ti-head span.ti-face { display: grid; } .ti-title { min-width: 0; } .ti-title .kicker { display: block; } .ti-title h4 { margin: 1px 0 0; font-family: var(--f-title); font-size: 16px; font-weight: 600; line-height: 1.2; } .ti-rows { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; padding-top: 8px; border-top: 1px solid var(--line-soft); font-size: 12.5px; align-items: center; } .ti-rows dt { color: var(--muted); white-space: nowrap; } .ti-rows dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; } .ti-rows .ico { width: 14px; height: 14px; } .ti-rows .ti-sub { grid-column: 1 / -1; margin-top: 3px; font-family: var(--f-sign); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ti-rows .ti-sub:empty { margin: 1px 0 0; border-top: 1px solid var(--line-soft); } .map-pop:focus { outline: none; } /* the window takes the focus itself (its buttons keep their rings) */ .cube { display: inline-block; width: 8px; height: 8px; border-radius: 1.5px; vertical-align: -0.5px; margin: 0 1px; border: 1px solid rgba(255,255,255,.6); box-sizing: content-box; } .cube.coal { background: #1e1e1e; } .cube.steel { background: #7d8a96; } /* ---------------------------------------------------------------- typography Literata — titles: game name, era and turn headings, big panel titles Arsenal — names: towns on the map, industries and cards Manrope — interface text: hints, rules, prices, log (the default font above) Oswald — short sign-style headings: panel headers, ВУГІЛЬНА ШАХТА, card kinds, tile levels */ .status .who { font-family: var(--f-title); font-size: 18px; font-weight: 700; } #topinfo .pill.era { font-family: var(--f-title); font-weight: 600; } .rv-badge { font-family: var(--f-title); font-size: 16.5px; } .log .e.era { font-family: var(--f-title); font-size: 13.5px; } .card h3 { font-family: var(--f-title); font-weight: 600; } .ptitle h4, .phead h4 { font-family: var(--f-title); font-weight: 600; font-size: 17px; letter-spacing: 0; text-transform: none; } .rv-sub { font-family: var(--f-sign); font-weight: 500; font-size: 12.5px; letter-spacing: 1px; } .cardchip .k { font-family: var(--f-sign); font-size: 11px; font-weight: 500; letter-spacing: 1.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cardchip.new .k { margin-right: 36px; } .cardchip .n { font-family: var(--f-name); font-size: 14px; font-weight: 700; line-height: 1.15; } .cardchip .n.long { font-size: 13px; } .cardchip .newtag { font-family: var(--f-sign); font-size: 10px; font-weight: 600; letter-spacing: 1px; } .mk-name { font-family: var(--f-sign); font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; } .mat-stats, .ti-rows, .market, .kv, .modal td { font-variant-numeric: tabular-nums; } /* map labels */ .b-town .name, .b-merchant .name { font-family: var(--f-name); font-size: 15px; font-weight: 700; } .b-town .farmname { font-family: var(--f-name); font-size: 12.5px; } .b-slot .ilabel, .b-slot .elabel, .b-mtile .mlabel { font-family: var(--f-name); font-weight: 700; } .b-slot .elabel { font-size: 12px; } .b-mtile .mlabel { font-size: 12.5px; fill: #222; } .b-slot .lvl { font-family: var(--f-sign); font-size: 15px; font-weight: 600; } .b-legend .t { font-family: var(--f-sign); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; } /* ---------------------------------------------------------------- played cards (played.js) the key in the market window's header (press and hold: a peek; a click: pinned open) and the view over the screen: the era's cards by town, each group a cascade of real cards (every card lower than the one before, its band showing) */ .mk-played { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 28px; padding: 3px 6px 3px 8px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .mk-played[aria-expanded="true"] { border-color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 22%, var(--panel)); } .mk-played-ico { position: relative; width: 13px; height: 16px; flex: none; } .mk-played-ico::before, .mk-played-ico::after { content: ''; position: absolute; width: 9px; height: 12px; border: 1.4px solid currentColor; border-radius: 2px; } .mk-played-ico::before { left: 0; top: 0; opacity: .5; } .mk-played-ico::after { left: 3px; top: 3px; background: var(--panel); } .mk-played-n { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 11px/16px var(--f-ui); text-align: center; } @container side (max-width: 330px) { .mk-played-l { display: none; } } /* (a narrow column: the cards and the count) */ .pv-bg { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; background: color-mix(in srgb, #120d06 46%, transparent); } .pv-bg[data-mode="peek"] { pointer-events: none; } /* (held: the button keeps the pointer) */ .pv { position: relative; display: flex; flex-direction: column; width: min(1560px, 100%); max-height: calc(100vh - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 60px rgba(0, 0, 0, .45); padding: 12px 18px 14px; outline: none; } .pv-bg[data-mode="pin"] .pv { animation: pvIn .14s ease-out; } @keyframes pvIn { from { transform: translateY(6px); opacity: .6; } to { transform: none; opacity: 1; } } .pv-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .pv-title { display: flex; flex-direction: column; } .pv-title h3 { margin: 0; font: 600 20px/1.15 var(--f-title); } .pv-sum { font-family: var(--f-sign); font-size: 13px; letter-spacing: .06em; color: var(--muted); } .pv-x { width: 34px; height: 34px; min-height: 0; padding: 0; flex: none; display: inline-grid; place-items: center; font-size: 16px; line-height: 1; border-radius: 8px; } .pv-legend { margin: 6px 0 8px; font-size: 12.5px; color: var(--muted); } .pv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 6px; } .pv-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; } .pv-sep { align-self: stretch; width: 0; min-height: 120px; margin: 0 4px; border-left: 2px dotted var(--line); } /* (the towns end, the industries begin) */ .pv-g { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pv-gh { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 5px; max-width: 120px; line-height: 1.15; cursor: default; } .pv-gh b { font-family: var(--f-name); font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-gh small { grid-column: 1 / -1; font-size: 11px; color: var(--muted); } .pv-mk { display: inline-flex; align-items: center; gap: 2px; } .pv-jokers .pv-gh { grid-template-columns: minmax(0, 1fr); max-width: none; } .pv-dot { width: 9px; height: 9px; border-radius: 50%; } .pv-g.none .pv-gh b { color: var(--muted); } /* the cascade: every card but the last takes a step as high as its band and a little more; the next one covers the rest */ .pv-stack { display: flex; flex-direction: column; } .pv-c { position: relative; flex: none; height: 21px; } .pv-c:last-child { height: auto; } .pv-c > .hcard { margin: 0; transform: none; box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 14%, transparent), 0 3px 8px rgba(30, 20, 8, .22), inset 0 0 0 3px var(--panel), inset 0 0 0 4px color-mix(in srgb, var(--rc) 45%, transparent); } .pv-c > .hcard:hover { transform: translateY(-3px); } /* (pointed at: a card comes up over the ones under it) */ .pv-c:hover { z-index: 3; } .pv-c.unseen > .hcard { opacity: .36; filter: grayscale(.65); } .pv-stack .hc-kind { visibility: hidden; } /* (the band says who played it, or where it is; the group's name is over the cascade) */ .pv-tag { position: absolute; z-index: 6; top: 2px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 8px); display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 3px; font: 600 9.5px/14px var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; background: color-mix(in srgb, var(--panel) 90%, transparent); color: var(--ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); } .pv-tag b { overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .pv-tag .pmark { height: 10px; width: 4px; flex: none; } .pv-c.unseen .pv-tag { left: 3px; right: 3px; transform: none; max-width: none; justify-content: center; padding: 1px 2px; font-size: 9px; line-height: 10px; letter-spacing: -.1px; white-space: normal; text-align: center; max-height: 22px; background: color-mix(in srgb, var(--panel2) 92%, transparent); color: var(--muted); font-weight: 500; } :root[data-card-look="ticket"] .pv-c.unseen .pv-tag { font-size: 8.5px; line-height: 9.5px; } /* (a narrow card: two short lines) */ .pv-c.mine .pv-tag { background: var(--accent); color: var(--accent-ink); box-shadow: none; } .pv-c.mine > .hcard { box-shadow: 0 0 0 2px var(--accent), 0 3px 8px rgba(30, 20, 8, .22); } /* the jokers: side by side, each with its count under it */ .pv-jrow { display: flex; gap: 8px; } .pv-jc { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } .pv-jc .pv-c { height: auto; } .pv-jc figcaption { font-size: 11px; color: var(--muted); text-align: center; } .pv-jc figcaption b { color: var(--accent-text, var(--accent-deep)); font-weight: 700; } :root[data-theme="dark"] .pv-bg { background: rgba(0, 0, 0, .58); } @media (prefers-reduced-motion: reduce) { .pv-bg[data-mode="pin"] .pv { animation: none; } .pv-c > .hcard:hover { transform: none; } } @media (max-width: 760px) { .pv-bg { padding: 8px; } .pv { max-height: none; padding: 10px 10px 12px; } .pv-body { overflow: visible; } .pv-groups { gap: 10px 10px; } .pv-legend { font-size: 12px; } .pv-c { height: 25px; } /* (a narrow card's tag takes two lines) */ .pv-sep { display: none; } } /* ---------------------------------------------------------------- the version and what changed (changelog.js) */ .ver-chip { align-self: center; min-height: 0; padding: 1px 7px; margin-left: 2px; border-radius: 999px; font: 600 10.5px/15px var(--f-sign); letter-spacing: .06em; color: var(--topbar-muted); background: transparent; border: 1px solid var(--topbar-line); cursor: pointer; white-space: nowrap; } #topbar .ver-chip { min-height: 0; color: var(--topbar-muted); } #topbar .ver-chip:hover { color: var(--topbar-ink); } .cl-modal { max-width: 640px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; outline: none; } .cl-head { display: flex; align-items: flex-start; gap: 12px; } .cl-head > div { flex: 1; } .cl-head h2 { margin: 2px 0 0; font-family: var(--f-title); font-weight: 600; font-size: 22px; } .cl-note { margin: 8px 0 10px; font-size: 13px; } .cl-list { overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; } .cl-v + .cl-v { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); } .cl-v h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; font-size: 15px; } .cl-v h3 b { font-family: var(--f-sign); font-weight: 600; letter-spacing: .04em; } .cl-v h3 small { color: var(--muted); font-size: 12px; font-weight: 500; } .cl-v h3 em { font-style: normal; font: 600 10px/16px var(--f-sign); letter-spacing: .1em; text-transform: uppercase; padding: 0 6px; border-radius: 3px; background: var(--accent); color: var(--accent-ink); } .cl-v ul { margin: 0; padding-left: 18px; font-size: 13.5px; } .cl-v li + li { margin-top: 3px; } .home-foot { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; font-size: 13px; color: var(--muted); } .hf-name { font-family: var(--f-title); font-weight: 600; } .hf-name b { color: var(--accent-deep); } .hf-ver { min-height: 0; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; color: var(--muted); background: transparent; } .hf-ver:hover:not(:disabled) { color: var(--ink); } /* ---------------------------------------------------------------- market gauges */ #markets { container: market / inline-size; } .gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; } @container market (max-width: 300px) { .gauges { grid-template-columns: 1fr; } } .gauge { text-align: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px 8px; } .gauge svg { display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto; overflow: visible; } .g-track, .g-fill { fill: none; stroke-width: 13; } .g-track { stroke: var(--g-track); } .g-coal .g-fill { stroke: var(--g-coal); } .g-steel .g-fill { stroke: var(--g-steel); } .g-notch { stroke: var(--panel2); stroke-width: 2.6; } .g-tick { stroke: var(--muted); stroke-width: 1.4; } .g-price { font-size: 10px; fill: var(--muted); text-anchor: middle; font-variant-numeric: tabular-nums; } .g-price.cur { font-size: 11.5px; font-weight: 800; fill: var(--ink); } .g-count { font-size: 22px; font-weight: 800; fill: var(--ink); } .g-max { font-size: 13px; font-weight: 600; fill: var(--muted); } .g-buy { font-size: 17px; font-weight: 800; margin-top: 2px; } .g-sell { font-size: 12px; color: var(--muted); } /* ---------------------------------------------------------------- board animations */ /* (at the pace of the move's effects: --fx-pace, fx.js) */ .b-slot .tb { transform-box: fill-box; transform-origin: center; } .b-slot.anim-build .tb { animation: tilePop calc(.75s * var(--fx-pace, 1)) cubic-bezier(.2, 1.5, .4, 1) both; } .b-slot.anim-flip .tb { animation: tileFlip calc(.9s * var(--fx-pace, 1)) ease-in-out both; } .b-slot .burst { fill: none; stroke-width: 3.5; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; } .b-slot.anim-build .burst, .b-slot.anim-flip .burst { animation: burst calc(.95s * var(--fx-pace, 1)) ease-out forwards; } /* (held back: unseen until it starts) */ .b-slot.anim-flip .burst { stroke: #f2c94c !important; } @keyframes tilePop { 0% { transform: scale(.15) rotate(-14deg); opacity: 0; } 55% { transform: scale(1.14) rotate(3deg); opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes tileFlip { 0% { transform: none; } 45%, 55% { transform: scaleX(.04); filter: brightness(1.7); } 100% { transform: none; } } @keyframes burst { 0% { transform: scale(.5); opacity: .95; } 100% { transform: scale(2); opacity: 0; } } .b-line.draw { stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 1; animation: drawRoad calc(1.2s * var(--fx-pace, 1)) ease-out both; pointer-events: none; } @keyframes drawRoad { 0% { stroke-dashoffset: 1; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } /* a road grows from its builder's own end (board.js drawFromOwnEnd): backwards along its path, or from both ends to the middle */ .b-line.draw.back { animation-name: drawRoadBack; } .b-line.draw.half-a { stroke-dasharray: .5 1.5; animation-name: drawRoadA; } .b-line.draw.half-b { stroke-dasharray: .5 1.5; animation-name: drawRoadB; } @keyframes drawRoadBack { 0% { stroke-dashoffset: -1; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes drawRoadA { 0% { stroke-dashoffset: .5; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes drawRoadB { 0% { stroke-dashoffset: -1; opacity: 1; } 70% { stroke-dashoffset: -.5; opacity: 1; } 100% { stroke-dashoffset: -.5; opacity: 0; } } .built-link.anim-link { animation: roadIn calc(1.2s * var(--fx-pace, 1)) ease-out both; } @keyframes roadIn { 0%, 55% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .b-slot .tb, .b-slot .burst, .built-link { animation: none !important; } .b-line.draw { display: none; } } /* ---------------------------------------------------------------- player markers */ .pmark { width: 5px; height: 13px; border-radius: 2.5px; display: inline-block; vertical-align: -2px; flex-shrink: 0; background: var(--pc); } .phead .pmark, .status .pmark, .lobby-players .pmark, .modal .pmark { margin-right: 2px; } /* ---------------------------------------------------------------- step through AI moves */ #stepbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 45; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 720px); background: var(--panel); border: 1px solid var(--accent); border-radius: 12px; padding: 8px 8px 8px 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); animation: stepIn .25s ease-out; } #stepbar .sb-what { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; } #stepbar .sb-what span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #stepbar button { white-space: nowrap; font-size: 14px; padding: 8px 14px; } @keyframes stepIn { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } /* ---- both maps: card regions as territories, victory-point badges, places for actions ---- */ .b-terr .terr path { fill: var(--rc); fill-opacity: var(--terr-op); } .b-terr .terr-border { fill: none; stroke: var(--terr-line); stroke-width: 1.5; stroke-dasharray: 1.5 5; stroke-linecap: round; opacity: .85; } /* the Dnipro atlas engraving over the card regions: the regions softer, so the drawing reads */ .b-atlas .b-terr .terr path { fill-opacity: .073; } .b-atlas .b-terr .terr-border { opacity: .35; } .b-vp { cursor: help; } .b-vp rect { fill: var(--vp-bg); stroke: var(--vp-line); stroke-width: 1.2; } .b-vp text { font-family: var(--f-sign); font-size: 12.5px; font-weight: 600; fill: var(--vp-ink); } .b-vp.zero rect { stroke-opacity: .45; } .b-vp.zero use, .b-vp.zero text { opacity: .55; } .b-vp.link rect { stroke-width: 2.2; } .board-faded .b-vp { opacity: .45; } /* a merchant's coal market (board.js coalMarketBadge): the coal lump on a pill framed like the merchant's box */ .b-coalmkt { cursor: help; } .b-coalmkt rect { fill: var(--vp-bg); stroke: var(--merchant-line, var(--vp-line)); stroke-width: 1.4; } .b-coalmkt .bi { --res-ground: var(--vp-bg); } .board-faded .b-coalmkt { opacity: .45; } .b-zone { cursor: pointer; } .b-zone .zbox { fill: var(--panel); stroke: var(--town-line); stroke-width: 1.4; } .b-zone .zname { font-family: var(--f-sign); font-size: 14.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink); } .b-zone .ring { stroke: transparent; stroke-width: 3; } .b-zone:hover .zbox { fill: var(--panel2); } .b-zone.idle { opacity: .6; cursor: default; } .b-zone.idle:hover .zbox { fill: var(--panel); } .b-zone.target .ring { stroke: var(--target); } .b-zone.sel .ring { stroke: var(--accent); stroke-width: 3.5; } .b-zone.no { opacity: .45; cursor: not-allowed; } .b-zone.drop-hot .ring { stroke: var(--accent-deep); stroke-width: 4; } /* the strip on the left of the map: the players in turn order (top moves first) and the bank, academy and fair */ .b-strip .stripbg { fill: var(--panel); stroke: var(--town-line); stroke-width: 1.2; filter: drop-shadow(0 2px 5px rgba(40, 30, 15, .16)); } .b-strip .strip-kicker { font-family: var(--f-sign); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); } .b-pl { cursor: pointer; } .b-pl .plbox { fill: color-mix(in srgb, var(--pc) 7%, var(--panel)); stroke: color-mix(in srgb, var(--pc) 50%, var(--town-line)); stroke-width: 1.3; transition: fill .15s; } .b-pl:hover .plbox { fill: color-mix(in srgb, var(--pc) 13%, var(--panel)); } .b-pl .plframe { fill: color-mix(in srgb, var(--pc) 15%, var(--panel)); } .b-pl .plrim { fill: none; stroke: var(--pc); stroke-width: 2.2; } /* over the portrait: the player's colour */ .b-pl .plface { --ico-line: var(--rim); --ico-lw: 1.4; } .b-pl .plnum { fill: var(--ink); } .b-pl .plnum-t { font-family: var(--f-sign); font-size: 13.5px; font-weight: 600; fill: var(--panel); } .b-pl .plname { font-family: var(--f-name); font-size: 15.5px; font-weight: 700; fill: var(--ink); } .b-pl .plturn { font-size: 11.5px; font-weight: 700; fill: var(--accent-text); } .b-pl .plcap { font-family: var(--f-sign); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); } .b-pl .pstat text { font-family: var(--f-sign); font-size: 15px; font-weight: 500; fill: var(--ink); font-variant-numeric: tabular-nums; } .b-pl .pstat .phit { fill: transparent; } .b-pl .pstat:hover .phit { fill: color-mix(in srgb, var(--ink) 7%, transparent); } .b-pl.now .plbox { stroke: var(--accent); stroke-width: 3.2; fill: color-mix(in srgb, var(--accent) 12%, var(--panel)); } .b-pl.now .plnum { fill: var(--accent); } .b-pl.now .plnum-t { fill: var(--accent-ink); } /* a person who isn't connected */ .b-pl.off .plimg, .b-pl.off .plface { opacity: .45; } .b-pl.off .plbox { stroke-dasharray: 5 4; } .b-pl.off .plcap { fill: var(--bad); } /* the next round, under the portraits (board.js nextRoundSvg), in the manner of the strip (turn-order-panel.css) */ .b-next .nxbg { fill: none; stroke: none; } .b-next .nx { cursor: pointer; } .b-next .nxbox { fill: var(--turn-row, var(--panel)); stroke: var(--turn-line, var(--line)); stroke-width: 1; transition: fill .15s; } .b-next .nx:hover .nxbox { fill: color-mix(in srgb, var(--turn-row, var(--panel)) 90%, var(--pc)); } .b-next .plseat-mark { fill: var(--pc); pointer-events: none; } .b-next .nxrank { fill: var(--panel); stroke: var(--ink); stroke-width: 1.1; } .b-next .nxnum-t { font-family: var(--f-sign); font-size: 11.5px; font-weight: 800; fill: var(--ink); } .b-next .nx.moved .nxrank { fill: var(--turn-active, var(--accent)); stroke: var(--turn-active, var(--accent-deep)); } .b-next .nx.moved .nxnum-t { fill: var(--panel); } .b-next .nxname { font-family: var(--f-name); font-size: 13.5px; font-weight: 800; fill: var(--ink); } .b-next .nxspent-bed { fill: var(--turn-meter, var(--panel2)); stroke: var(--turn-line, var(--line)); stroke-width: .7; pointer-events: none; } .b-next .nxspent { font-family: var(--f-sign); font-size: 13.5px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; } :root[data-ui-era="cart"] .b-next .nxrank { rx: 9px; } :root[data-ui-era="cart"] .b-next .nxname { font-family: var(--f-title, Georgia, serif); } :root[data-ui-era="rail"] .b-next .nxrank { rx: 2px; } .b-zone .zsub { font-size: 11.5px; fill: var(--muted); } .b-town.drop-hot > .box { stroke: var(--accent-deep); stroke-width: 4; } .b-town.pop-town > .box { stroke: var(--accent); stroke-width: 3.5; } .b-slot.pop-hl rect.ring { fill: none; stroke: var(--accent-deep) !important; stroke-width: 4 !important; stroke-dasharray: none !important; } .b-line.hit.pop-hl { stroke: color-mix(in srgb, var(--accent) 75%, transparent); stroke-width: 16; } /* ---- a card dragged over a town: the town opens up over the map (opentown.js) — every space, and every industry of an empty space as a tile of its own; the tiles of one space share a frame ---- */ .opentown { position: fixed; z-index: 70; left: 0; top: 0; min-width: 200px; --t: 52px; --og: 9px; color: var(--ink); background: var(--town); border: 1.5px solid var(--town-line); border-radius: 13px; padding: 8px 14px 7px 18px; transform-origin: 50% 50%; box-shadow: 0 14px 34px rgba(0, 0, 0, .34), 0 3px 8px rgba(0, 0, 0, .2); user-select: none; } .opentown.closing { pointer-events: none; } .opentown .ot-region { position: absolute; left: 6px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--rc); } .opentown .ot-name { font-family: var(--f-name); font-size: 17px; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; margin: 0 2px 8px; } .opentown .ot-rows { display: flex; flex-direction: column; align-items: center; gap: 12px; } .opentown .ot-row { display: flex; justify-content: center; align-items: flex-start; gap: 12px; } /* one space: a frame round its tiles (rings stay inside its padding, and apart from each other) */ .opentown .ot-space { display: flex; gap: var(--og); padding: 7px; border-radius: 11px; background: var(--slot-empty); border: 1.5px dashed color-mix(in srgb, var(--town-line) 85%, transparent); } .opentown .ot-space.built { border-style: solid; } .opentown .ot-opt { position: relative; width: var(--t); height: var(--t); border-radius: 6px; transition: transform .12s, opacity .12s, box-shadow .12s, filter .12s; animation: ot-pop .32s cubic-bezier(.2, .9, .3, 1.25) backwards; animation-delay: calc(70ms + var(--i, 0) * 55ms); } .opentown .ot-opt > svg { display: block; width: 100%; height: 100%; } .opentown .ot-bg { fill: var(--slot-empty); stroke: color-mix(in srgb, var(--town-line) 70%, transparent); stroke-width: 1; } .opentown .ot-opt .tint { opacity: var(--slot-tint, .2); } .opentown .ot-opt.target { box-shadow: 0 0 0 2.5px var(--target); } /* can't be built now: the picture is greyed (not the ring); yellow dashes: after another action this turn */ .opentown .ot-opt.no > svg, .opentown .ot-opt.turn > svg { opacity: .38; filter: grayscale(.9); transition: opacity .12s; } .opentown .ot-space.built .ot-opt.no > svg { opacity: .62; filter: none; } .opentown .ot-opt.turn { outline: 2px dashed color-mix(in srgb, var(--hl-turn) 80%, transparent); outline-offset: 1px; } /* under the card */ .opentown .ot-opt.drop-hot { z-index: 1; transform: scale(1.07); box-shadow: 0 0 0 3.5px var(--accent-deep), 0 6px 14px rgba(0, 0, 0, .3); } .opentown .ot-opt.no.drop-hot, .opentown .ot-opt.turn.drop-hot { transform: none; outline: none; box-shadow: 0 0 0 2.5px var(--bad); } .opentown .ot-opt.no.drop-hot > svg, .opentown .ot-opt.turn.drop-hot > svg { opacity: .7; } .opentown .ot-lv { position: absolute; left: 5px; top: 2px; font-family: var(--f-sign); font-size: calc(var(--t) * .23); font-weight: 600; line-height: 1.1; color: var(--ink); opacity: .85; pointer-events: none; } /* the tile that would be built, shown while the card is over it */ .opentown .ot-pv { position: absolute; inset: 0; opacity: 0; transition: opacity .12s; pointer-events: none; } .opentown .ot-pv svg { display: block; width: 100%; height: 100%; } .opentown .ot-opt.drop-hot .ot-pv { opacity: 1; } .opentown .ot-opt.drop-hot .ot-lv { opacity: 0; } /* (width 0 + min-width 100 %: as wide as the tiles, never wider — long reasons wrap) */ .opentown .ot-info { width: 0; min-width: 100%; min-height: 2.6em; margin: -3px 0 8px; font-size: 12px; line-height: 1.3; color: var(--muted); text-align: center; } .opentown .ot-info b { color: var(--ink); } .opentown .ot-info .iv { margin-left: 4px; } /* under every tile a line: its price (green), or why not in short — red for the card's own tiles, quiet for the tiles it isn't for (another industry, another town's card); the spaces leave room for these lines (--why-h) */ .opentown { min-width: 280px; --og: 12px; } .opentown .ot-space { padding-bottom: calc(12px + var(--why-h, 0px)); } .opentown .ot-why { position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); width: calc(var(--t) + var(--og) - 1px); text-align: center; font-size: 10.5px; line-height: 1.18; font-weight: 700; color: var(--bad); overflow-wrap: break-word; pointer-events: none; } .opentown .ot-why .ico { width: 13px; height: 13px; margin-right: 2px; vertical-align: -2.5px; } .opentown .ot-why .iv { justify-content: center; color: var(--good); font-size: 12px; } .opentown .ot-opt.turn .ot-why { color: color-mix(in srgb, var(--hl-turn) 62%, var(--ink)); } .opentown .ot-opt.other .ot-why { color: var(--muted); font-weight: 500; } .opentown .ot-opt.other .ot-why .ico { opacity: .7; } .opentown .ot-info .ot-no { color: var(--bad); font-weight: 600; } .opentown .ot-info .ot-turn { color: color-mix(in srgb, var(--hl-turn) 62%, var(--ink)); font-weight: 600; } /* the card can build nowhere in this town: the frame says so too */ .opentown.none { border-color: color-mix(in srgb, var(--bad) 60%, var(--town-line)); } @keyframes ot-pop { 0% { transform: scale(.45); opacity: 0; } 65% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .opentown .ot-opt { animation: none; transition: none; } } /* ---- the confirm button next to the pointer ---- */ .qconfirm { position: fixed; z-index: 62; display: flex; flex-direction: column; gap: 6px; max-width: 300px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 9px; box-shadow: var(--shadow-up); padding: 7px 8px 8px; animation: pop-in .14s ease-out; } .qconfirm[hidden] { display: none; } .qconfirm .qc-sum { font-size: 12px; color: var(--muted); line-height: 1.35; } .qconfirm .qc-head { font-size: 12.5px; font-weight: 600; line-height: 1.3; } .qconfirm .choice-list { display: flex; flex-direction: column; gap: 4px; } .qconfirm .choice-list button { text-align: left; } /* developing: each chosen tile with its own ✕ */ .dev-pick { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0; padding: 1px 2px 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-weight: 700; font-size: 12.5px; } .dev-pick button.small { min-height: 0; padding: 0 6px; line-height: 18px; border-radius: 999px; } .qconfirm .row { display: flex; gap: 6px; } .qconfirm .row .primary { flex: 1; } /* ---- pop-ups next to the map: a town's build options, one or two rail links ---- */ .map-pop { position: fixed; z-index: 60; min-width: 240px; max-width: 330px; max-height: min(70vh, 540px); overflow: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 8px; box-shadow: var(--shadow-up); padding: 10px 10px 9px; animation: pop-in .14s ease-out; } @keyframes pop-in { from { opacity: 0; transform: translateY(4px) scale(.98); } } .pop-head { padding-right: 24px; margin-bottom: 7px; } .pop-head .kicker { display: block; } .pop-head h4 { margin: 1px 0 0; font-family: var(--f-title); font-size: 16px; font-weight: 600; line-height: 1.2; } .pop-hint { font-size: 12px; color: var(--muted); margin-top: 2px; } .pop-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; min-height: 0; padding: 0; border: none; background: none; font-size: 19px; line-height: 1; color: var(--muted); border-radius: 5px; } .pop-x:hover { background: var(--panel2); color: var(--ink); } .pop-list { display: flex; flex-direction: column; gap: 5px; } .pop-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 6px 9px; min-height: 0; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; } .pop-opt:hover, .pop-opt:focus-visible { border-color: var(--accent-deep); background: var(--panel2); outline: none; } .pop-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .pop-txt b { font-weight: 700; font-size: 13.5px; } .pop-txt small { color: var(--muted); font-size: 11.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; } .pop-txt small .iv { color: var(--ink); } .pop-ind { width: 27px; height: 27px; border-radius: 5px; background: color-mix(in srgb, var(--ic) 24%, var(--panel)); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 55%, transparent); } .pop-ind .ico { width: 20px; height: 20px; } .pm { position: relative; flex: none; } .pm i { position: absolute; width: 13px; height: 13px; border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent); opacity: .45; } .pm i b { flex: 1; } .pm i.on { opacity: 1; box-shadow: 0 0 0 2px var(--accent-deep); } /* ---- developer mode: the colour editor ---- */ .devpanel { position: fixed; z-index: 55; top: 62px; right: 12px; bottom: calc(var(--dock-h) + 12px); width: min(350px, calc(100vw - 24px)); display: flex; flex-direction: column; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 8px; box-shadow: var(--shadow-up); } .dev-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--line-soft); position: relative; } .dev-head h4 { margin: 1px 0 0; font-family: var(--f-title); font-size: 17px; font-weight: 600; } .dev-body { overflow: auto; padding: 8px 12px 12px; } .dev-body section { margin-bottom: 12px; } .dev-body h5 { margin: 6px 0 6px; font-family: var(--f-sign); font-weight: 500; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .dev-now { font-size: 13px; margin: 2px 0 8px; } .dev-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .dev-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 7px 8px; min-height: 0; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; } .dev-preset:hover { border-color: var(--accent-deep); background: var(--panel2); } .dev-preset.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .dev-preset b { font-size: 13px; } .dev-preset small { font-size: 11px; color: var(--muted); line-height: 1.25; } .dev-sw { display: flex; gap: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); margin-bottom: 3px; } .dev-sw i { width: 17px; height: 13px; } .dev-sw.small i { width: 10px; height: 12px; } .dev-sw.std i:nth-child(1) { background: #f2e8d4; } .dev-sw.std i:nth-child(2) { background: #fbf5e8; } .dev-sw.std i:nth-child(3) { background: #202825; } .dev-sw.std i:nth-child(4) { background: #d8ae5c; } .dev-sw.std i:nth-child(5) { background: #151a18; } .dev-sw.std i:nth-child(6) { background: #ece3cf; } .dev-saved { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; } .dev-saved .dev-sw { margin: 0; } .dev-empty { font-size: 12.5px; margin-bottom: 4px; } .dev-save { margin: 8px 0 6px; gap: 6px; } .dev-save input { flex: 1; min-width: 0; } .devpanel textarea { width: 100%; font: 11.5px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; margin-bottom: 6px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 5px 6px; } .dev-group { border: 1px solid var(--line-soft); border-radius: 6px; margin-bottom: 6px; } .dev-group summary { cursor: pointer; padding: 6px 8px; font-weight: 700; font-size: 13px; } .dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 2px 8px 8px; } .dev-row { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; min-width: 0; } .dev-row input[type=color] { width: 30px; height: 24px; padding: 1px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); flex: none; cursor: pointer; } .dev-lbl { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dev-lbl .ico { width: 15px; height: 15px; flex: none; color: var(--ink); } .dev-hint { font-size: 12px; line-height: 1.4; margin: 4px 0 0; } #topbar .dev-btn { display: inline-grid; place-items: center; width: 30px; height: 28px; min-height: 0; padding: 0; margin-left: 6px; border-radius: 6px; border: 1px solid var(--topbar-line); background: transparent; color: var(--topbar-ink); cursor: pointer; } #topbar .dev-btn:hover, #topbar .dev-btn.on { background: color-mix(in srgb, var(--topbar-ink) 14%, transparent); } #topbar .dev-btn svg { width: 17px; height: 17px; } /* ---- the count at the end of an era ---- */ .b-slot.tally rect.ring { fill: none; stroke: #f2c94c; stroke-width: 4; animation: tally-ring .55s ease-out; } .b-slot.tallied rect.ring { fill: none; stroke: #d8ae5c; stroke-width: 2.5; stroke-dasharray: none; } .b-line.tally { stroke: #f2c94c; stroke-width: 18; opacity: .85; } .b-line.tallied { stroke: #d8ae5c; stroke-width: 12; opacity: .32; } @keyframes tally-ring { from { stroke-width: 12; stroke-opacity: .2; } } .tally { position: fixed; z-index: 58; width: min(360px, calc(100vw - 24px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 10px; box-shadow: var(--shadow-up); padding: 12px 14px 10px; animation: pop-in .25s ease-out; } .tally.center { inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 24px); overflow: auto; width: min(440px, calc(100vw - 24px)); padding: 16px 18px 12px; } .tally.center .tl-head h3 { font-size: 24px; } .tally.center .tl-row { padding: 9px 12px; } .tl-head h3 { margin: 2px 0 2px; font-family: var(--f-title); font-size: 20px; font-weight: 600; } .tl-phase { font-family: var(--f-sign); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); min-height: 21px; } .tl-phase.in { animation: tl-phase .5s ease-out; } @keyframes tl-phase { from { opacity: 0; transform: translateY(6px); letter-spacing: .4em; } } .tl-list { list-style: none; margin: 10px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tl-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line-soft); position: relative; } .tl-row.lead { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .tl-row.bump { animation: tl-bump .6s ease-out; } @keyframes tl-bump { 0% { background: color-mix(in srgb, var(--pc) 35%, var(--panel2)); } 100% { background: var(--panel2); } } .tl-dot { width: 6px; height: 18px; border-radius: 3px; background: var(--pc); flex: none; } .tl-name { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-got { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .tl-vp { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-sign); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 66px; justify-content: flex-end; } .tl-vp .ico, .tl-chip-fly .ico { width: 20px; height: 20px; } .tl-foot { display: flex; gap: 6px; justify-content: flex-end; } .tl-foot button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-deep); } .tally.done .tl-foot { justify-content: stretch; } .tally.done .tl-foot button { flex: 1; } .tl-chip-fly { position: fixed; z-index: 59; pointer-events: none; display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px 3px 5px; border-radius: 99px; background: var(--panel); border: 2.5px solid var(--pc); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); font-family: var(--f-sign); font-size: 19px; font-weight: 600; color: var(--ink); white-space: nowrap; } /* ---- the finale ---- */ .modal.gameover { max-width: 680px; position: relative; overflow: hidden; } .go-hero { text-align: center; padding: 6px 0 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); } .go-trophy svg { width: 72px; height: 72px; } .modal.gameover.win .go-trophy svg { animation: go-trophy 1.2s cubic-bezier(.2,.8,.2,1); } @keyframes go-trophy { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.18) rotate(6deg); opacity: 1; } } .go-title { margin: 2px 0 6px; font-family: var(--f-title); font-weight: 700; font-size: clamp(38px, 7vw, 76px); line-height: 1.05; color: var(--accent-text); letter-spacing: -.01em; animation: go-title .9s ease-out; } @keyframes go-title { from { opacity: 0; transform: translateY(14px) scale(.96); } } .go-sub { font-family: var(--f-sign); font-size: 20px; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px; } .modal.gameover h2 { font-size: 18px; margin: 4px 0 8px; } .modal.gameover tr.go-first td { font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); } .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .confetti i { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; } /* ---- the game menu ---- */ #topbar .gm-btn { font-weight: 700; } .gmenu { position: fixed; z-index: 62; min-width: 260px; max-height: calc(100vh - 70px); overflow-y: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-up); padding: 6px; display: flex; flex-direction: column; gap: 4px; animation: pop-in .14s ease-out; } .gmenu button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1px; min-height: 0; padding: 8px 10px; border: 1px solid transparent; background: none; } .gmenu > *, .gm-group > * { flex-shrink: 0; } /* (a long menu scrolls; its items keep their height) */ .gmenu button:hover:not(:disabled), .gmenu button:focus-visible { background: var(--panel2); border-color: var(--line-soft); } .gmenu button small { font-weight: 400; font-size: 12px; color: var(--muted); } .gm-group { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line-soft); } .gm-label { font: 500 11px var(--f-sign); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); padding: 2px 10px 2px; } .gmenu .gm-radio { padding-left: 30px; position: relative; } .gmenu .gm-radio::before { content: ''; position: absolute; left: 10px; top: 11px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--muted); box-sizing: border-box; } .gmenu .gm-radio[aria-checked="true"]::before { border-color: var(--accent-deep); background: radial-gradient(circle, var(--accent-deep) 0 3px, transparent 3.5px); } /* a switch in the menu (straight roads): the same look as the turn panel's switch */ .gmenu .gm-check { padding-left: 52px; position: relative; } .gmenu .gm-check::before { content: ''; position: absolute; left: 10px; top: 9px; width: 32px; height: 18px; border-radius: 9px; background: var(--line); transition: background .15s; } .gmenu .gm-check::after { content: ''; position: absolute; left: 12px; top: 11px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; } .gmenu .gm-check[aria-checked="true"]::before { background: var(--good); } .gmenu .gm-check[aria-checked="true"]::after { left: 26px; } /* ---- AI characters: description under the choice, stars in the lobby ---- */ .ai-desc { display: block; line-height: 1.35; margin-top: 2px; } .lobby-players .ai-desc { display: inline; margin: 0 0 0 6px; font-size: 12px; } .badge.ai-stars { letter-spacing: .05em; color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); } .field.ai-pick select { max-width: 100%; } /* the AI characters' portraits: next to the description of the chosen one, and in the lobby list */ .ai-preview { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; } .ai-preview .ai-desc { margin-top: 0; } .ai-portrait { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 2px solid var(--line); background: var(--panel2); } /* narrow screens: a lobby row wraps, the character's description goes under its name */ @media (max-width: 600px) { .lobby-players li { flex-wrap: wrap; row-gap: 2px; } .lobby-players .ai-desc { order: 10; flex-basis: 100%; margin: 0 0 0 52px; } .lobby-players li .spacer { display: none; } .lobby-players [data-kick] { order: 11; margin: 4px 0 0 52px; } } /* choosing your portrait: a button by the name field, your face in the lobby, the picker */ .name-face { display: flex; gap: 8px; align-items: stretch; } .name-face input { flex: 1; min-width: 0; } .face-btn { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; flex: none; } .face-btn-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; flex: none; } .face-none { display: inline-flex; align-items: center; justify-content: center; background: var(--panel2); color: var(--muted); } .face-none .ico { width: 70%; height: 70%; } .lp-face-btn { padding: 0; min-height: 0; border: 0; background: none; border-radius: 50%; position: relative; } .lp-face-btn::after { content: '✎'; position: absolute; right: -4px; bottom: -3px; font-size: 11px; line-height: 15px; width: 15px; text-align: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); } .face-modal { max-width: min(600px, calc(100vw - 24px)); } /* the standard icon on a row of its own, then the five women and the five men */ .face-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-height: 64vh; overflow: auto; padding: 6px; } .face-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 7px; min-height: 0; min-width: 0; border: 2px solid transparent; border-radius: 12px; background: none; color: var(--ink); } .face-opt.none { grid-column: 1 / -1; flex-direction: row; justify-self: start; padding: 4px 14px 4px 6px; gap: 10px; } .face-grid .face-opt:hover:not(:disabled) { border-color: var(--line); background: var(--panel2); } .face-opt-img { width: min(76px, 100%); height: auto; aspect-ratio: 1; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 30%; display: flex; border: 2px solid var(--line); background: var(--panel2); } .face-opt.none .face-opt-img { width: 44px; } .face-opt-name { font-size: 11.5px; line-height: 1.2; text-align: center; color: var(--muted); overflow-wrap: anywhere; } .face-opt.none .face-opt-name { font-size: 13px; } .face-grid .face-opt[aria-checked="true"], .face-grid .face-opt[aria-checked="true"]:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); } .face-opt[aria-checked="true"] .face-opt-img { border-color: var(--accent-deep); } .face-opt[aria-checked="true"] .face-opt-name { color: var(--ink); font-weight: 700; } .face-opt[aria-checked="true"]::after { content: '✓'; position: absolute; top: 3px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 12px/20px var(--f-ui); text-align: center; } .face-opt.none[aria-checked="true"]::after { position: static; flex: none; } .face-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (max-width: 480px) { .face-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lp-portrait { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 1.5px solid var(--line); background: var(--panel2); } /* ---- my industries that can be sold now "ring": a short wiggle every few seconds and a gold ring ---- */ .b-slot.ring-sell .tb, .b-mtile.ring-sell .tb { transform-box: fill-box; transform-origin: 50% 50%; animation: ring-sell 2.6s ease-in-out infinite; } .b-slot.ring-sell rect.ring, .b-mtile.ring-sell rect.ring { fill: none; stroke: var(--accent); stroke-width: 3; animation: ring-glow 2.6s ease-in-out infinite; } .b-slot.ring-sell, .b-mtile.ring-sell { cursor: pointer; } @keyframes ring-sell { 0%, 60%, 100% { transform: none; } 64% { transform: rotate(-8deg) scale(1.06); } 68% { transform: rotate(7deg) scale(1.06); } 72% { transform: rotate(-6deg) scale(1.05); } 76% { transform: rotate(5deg) scale(1.04); } 80% { transform: rotate(-3deg) scale(1.02); } 84% { transform: rotate(1.5deg); } 88% { transform: none; } } @keyframes ring-glow { 0%, 58%, 100% { stroke-opacity: .3; } 70% { stroke-opacity: 1; } } @media (prefers-reduced-motion: reduce) { .b-slot.ring-sell .tb, .b-slot.ring-sell rect.ring, .b-mtile.ring-sell .tb, .b-mtile.ring-sell rect.ring { animation: none; } } /* ---- built tiles: the industry icon, the level, resources or VP ---- */ /* not sold yet: the owner's colour frames the square (instead of the plain outline) */ .b-slot.tile:not(.flipped) rect.bg, :root[data-theme="dark"] .b-slot.tile:not(.flipped) rect.bg { stroke: none; } .b-slot rect.own { fill: none; stroke: var(--own); stroke-width: 2.5; } :root[data-theme="dark"] .b-slot rect.own { stroke: color-mix(in srgb, var(--own) 80%, #fff); } /* dark colours stay visible on the dark board */ .b-slot .lvn { font-family: var(--f-sign); font-size: 9.5px; font-weight: 600; fill: var(--ink); opacity: .8; } .b-slot.flipped .lvn { fill: #fff; opacity: 1; paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 2px; }