body.viewer { max-width: none; margin: 0; padding: 0; }
.status { margin: 2rem auto; max-width: 36rem; padding: .75rem 1rem; border-radius: 6px; border: 1px solid var(--border); }
.status.error { border-color: var(--err); color: var(--err); }
.status.loading::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .6em; vertical-align: -.1em;
  border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }

.bar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: .5rem 1rem;
  background: var(--bg); border-bottom: 1px solid var(--border); }
.bar .home { font-weight: 600; text-decoration: none; }
.controls { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.controls button { min-width: 2.4rem; padding: .35rem .5rem; }
.controls button:disabled { opacity: .35; cursor: default; }
.jump { margin-left: .75rem; white-space: nowrap; }
.jump input { width: 4.5rem; font: inherit; padding: .3rem; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: inherit; }
.current { padding: .5rem 1rem; border-bottom: 1px solid var(--border); min-height: 2.6rem; }
.current .who { font-weight: 600; margin-right: .5rem; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; padding: 1rem; align-items: start; }
@media (max-width: 899px) and (max-width: 1100px) { .layout { grid-template-columns: minmax(0, 1fr); } aside { order: -1; } }
aside { position: sticky; top: 7rem; }
aside h2 { margin: 0 0 .4rem; font-size: 1rem; }
.moves { list-style: none; margin: 0; padding: 0; max-height: calc(calc(var(--vh, 1vh) * 100) - 10rem); overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; font-size: .85rem; }
.moves li { padding: .3rem .5rem; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; gap: .5rem; }
.moves li:last-child { border-bottom: 0; }
.moves li:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.moves li.on { background: color-mix(in srgb, var(--accent) 25%, transparent); font-weight: 600; }
.moves .n { color: var(--muted); min-width: 2.2rem; text-align: right; }
.moves li { border-left: 4px solid transparent; }

h3 { margin: 0 0 .4rem; font-size: .95rem; }
.shared { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1rem; }
.shared > div { min-width: 0; }
.cards { display: flex; flex-wrap: wrap; gap: .4rem; }
.card { position: relative; width: 9rem; aspect-ratio: 240 / 335; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: #e9e4d3; color: #222;
  font-size: .72rem; line-height: 1.15; }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .txt { padding: .3rem; }
.card .txt b { display: block; }
.card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .1rem .25rem; background: rgba(0, 0, 0, .65); color: #fff; font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cards.small .card { width: 6.4rem; }
.empty { color: var(--muted); font-style: italic; font-size: .85rem; }

.track { display: flex; gap: 2px; }
.track span { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; font-size: .72rem; border: 1px solid var(--border); border-radius: 4px; }
.track span.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.zoos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 899px) and (max-width: 1500px) { .zoos { grid-template-columns: minmax(0, 1fr); } }
.zoo { border: 2px solid var(--border); border-radius: 8px; padding: .6rem; }
.zoo.active { border-color: var(--accent); }
.zoo h2 { margin: 0 0 .5rem; font-size: 1.05rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.zoo h2 .map { font-weight: 400; font-size: .8rem; color: var(--muted); }
.stats { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-bottom: .5rem; font-size: .9rem; }
.stats b { font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .6rem; }
.chip { padding: .05rem .4rem; border: 1px solid var(--border); border-radius: 999px; font-size: .75rem; white-space: nowrap; }
.chip.lvl2 { border-color: var(--accent); }
.board { width: 100%; display: block; margin-bottom: .6rem; border-radius: 6px; background: #cfd8c4; }
.board .bonus-label { font: 700 34px system-ui, sans-serif; fill: #222; text-anchor: middle; pointer-events: none; }
.board .bonus-number { font: 800 44px system-ui, sans-serif; fill: #fff; stroke: #222; stroke-width: 8px; paint-order: stroke; text-anchor: middle; pointer-events: none; }
.board .flag-wedge { fill: #e2574c; opacity: .95; pointer-events: none; }
.board .flag-badge { fill: #a63aa6; stroke: #fff; stroke-width: 4; }
.board .flag-label { font: 900 25px Georgia, 'Times New Roman', serif; fill: #fff; text-anchor: middle; pointer-events: none; }
.board .money-border, .bonuspanel .money-border { fill: none; stroke: #fff; stroke-width: 3.5; pointer-events: none; }
.board .nosprite { fill: rgba(60, 120, 176, .7); stroke: #fff; stroke-width: 3; }
.iconchip { display: inline-flex; align-items: center; gap: .15rem; }
.icon { vertical-align: middle; }
.zooRow { display: flex; gap: .4rem; align-items: flex-start; margin-bottom: .6rem; }
.zooRow .board { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.strip { flex: 0 0 13%; width: 13%; height: auto; display: block; border-radius: 6px; }
.bonuspanel { flex: 0 0 16%; width: 16%; height: auto; display: block; border-radius: 6px; }
.bonuspanel .slot-number { font: 800 34px system-ui, sans-serif; fill: #fff; stroke: #222; stroke-width: 6px; paint-order: stroke; text-anchor: middle; pointer-events: none; }
.bonuspanel .slot-label { font: 700 30px system-ui, sans-serif; fill: #222; text-anchor: middle; }

/* BGA look: a wooden table with beige paper panels (the viewer only; the landing pages keep the plain theme) */
body.viewer { --fg: #f3e9d2; --muted: #d0bf9d; --border: #8c7254; --accent: #8fd1a8; --bg: #3a2616;
  background: #3a2616 url(/assets/wood_background.jpg) center top / 1600px auto repeat; color: var(--fg); }
body.viewer a { color: #f1d9a0; }
.bar { background: rgba(40, 25, 14, .94); border-bottom: 2px solid #1b110a; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.bar .home { color: #f1d9a0; }
.controls button { background: #e8dcb8; color: #3a2616; border: 1px solid #1b110a; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; }
.controls button:hover:not(:disabled) { background: #fff3cf; }
.jump input { background: #f4ecd2; color: #2b1d12; border-color: #1b110a; }
.current { background: rgba(244, 236, 210, .96); color: #2b1d12; border-bottom: 2px solid #1b110a; font-weight: 500; }
.layout { padding-top: .8rem; }
aside h2 { color: #f3e9d2; text-shadow: 0 1px 2px #000; }
.moves { background: rgba(35, 22, 12, .86); border: 2px solid #1b110a; }
.moves li { border-bottom-color: rgba(255, 255, 255, .12); }
.moves li:hover { background: rgba(255, 255, 255, .1); }
.moves li.on { background: rgba(143, 209, 168, .32); }
.moves .n { color: #c9b690; }
.shared h3, .shared > div > h3 { color: #f3e9d2; text-shadow: 0 1px 3px #000; }
.shared .muted { color: #e6d8b8; }
.empty { color: #d9c9a3; }
.track span { background: rgba(244, 236, 210, .92); color: #2b1d12; border-color: #1b110a; }
.track span.on { background: #4f8f6a; color: #fff; border-color: #1b110a; }
.card { border-color: #1b110a; box-shadow: 0 2px 5px rgba(0, 0, 0, .5); }
.assoc, .strip, .bonuspanel, .board { box-shadow: 0 3px 10px rgba(0, 0, 0, .55); }

.zoo { background: #ece3b4 url(/assets/sheet_background.jpg) center / cover; color: #2b1d12; border: 3px solid #1b110a; border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .55); }
.zoo.active { border-color: #8fd1a8; box-shadow: 0 0 0 3px rgba(143, 209, 168, .55), 0 4px 14px rgba(0, 0, 0, .55); }
.zoo h2 .map { color: #6f5749; }
.zoo h3 { color: #3a2616; border-bottom: 1px solid rgba(111, 87, 73, .45); padding-bottom: .1rem; }
.zoo .empty { color: #7a6650; }
.zoo .chip { background: rgba(255, 255, 255, .5); border-color: #6f5749; color: #2b1d12; }
.zoo .chip.lvl2 { border-color: #2f6b4f; background: rgba(143, 209, 168, .35); }
.stats { gap: .3rem 1rem; align-items: center; margin-bottom: .6rem; }
.stat { display: inline-flex; align-items: center; gap: .3rem; font-size: 1.1rem; padding: .05rem .5rem .05rem .25rem; border-radius: 999px; background: rgba(255, 255, 255, .45); border: 1px solid #6f5749; }
.stat b { min-width: 1.2rem; text-align: left; }
.iconsummary { display: flex; justify-content: space-between; align-items: center; gap: .1rem; flex-wrap: nowrap; background: #ece3b4; box-shadow: 1px 1px 10px -1px #000; border: 1px solid #6f5749; border-radius: 8px;
  padding: .3rem .4rem; margin: 0 0 .7rem; font-family: system-ui, sans-serif; }
.iconsummary .ic { display: inline-flex; align-items: center; gap: .1rem; font-size: .95rem; }
.iconsummary .badge { width: 22px; height: 22px; }
.iconsummary .ic.zero { opacity: .28; }
.iconsummary .badge { border-radius: 50%; display: block; }

.sect { margin-bottom: .6rem; }
.sect.wide { flex: 1 1 100%; }
.assoc { width: min(62rem, calc(var(--vw, 1vw) * 90)); display: block; border-radius: 6px; }
.assoc text.tile { font: 700 30px system-ui, sans-serif; fill: #fff; stroke: rgba(0, 0, 0, .6); stroke-width: 6px; paint-order: stroke; text-anchor: middle; pointer-events: none; }
.withtokens { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dots { display: flex; gap: 2px; min-height: 1.1rem; }
.dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; color: #fff; font-size: .7rem; display: grid; place-items: center; border: 1px solid #fff; text-shadow: 0 0 2px #000; }

/* readable cards: the text is part of the 240 px wide card pictures, so show them near that size */
.shared .cards .card { width: 12.5rem; }
.shared .cards.small .card { width: 10rem; }
.zoo .cards .card { width: 11rem; }
.zoo .cards.small .card { width: 8.5rem; }
.preview { width: 30rem; max-width: calc(var(--vw, 1vw) * 45); right: 21rem; image-rendering: auto; }

/* side panel */
.side { margin-bottom: .8rem; }
.sidetop { background: #ece3b4; border: 2px solid #1b110a; border-radius: 8px 8px 0 0; padding: .4rem .6rem; color: #2b1d12; }
.breaktrack { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; font-size: 1.6rem; }
.breaktrack img { background: #5a4636; border-radius: 6px; padding: 2px; }
.deckcounts { display: flex; justify-content: space-around; margin-top: .3rem; border-top: 1px solid rgba(111, 87, 73, .5); padding-top: .3rem; }
.dc { display: inline-flex; align-items: center; gap: .3rem; font-size: 1.1rem; }
.pp { background: #ecdcb6; border: 2px solid #1b110a; border-top: 0; padding: .45rem .5rem .55rem; color: #2b1d12; }
.pp:last-child { border-radius: 0 0 8px 8px; }
.pp.active { box-shadow: inset 0 0 0 3px rgba(79, 143, 106, .75); }
.pphead { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.ppname { font-size: calc(1.05rem + 2px); }
.ppscore { display: inline-flex; align-items: center; gap: .15rem; font-weight: 700; }
.ppres { display: flex; justify-content: space-between; align-items: center; margin-bottom: .45rem; }
.rs { display: inline-flex; align-items: center; gap: .1rem; font-size: 1.05rem; font-weight: 700; }
.ppactions { display: flex; justify-content: space-between; margin-bottom: .45rem; }
.ac { display: inline-flex; border: 3px solid #009fe2; border-radius: 8px; background: #fff; }
.ac.lvl2 { border-color: #a91b71; }
.ppicons { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem .2rem; }
.ppicons .ic { display: inline-flex; align-items: center; justify-content: center; gap: .1rem; font-size: .95rem; font-weight: 600; }
.ppicons .ic.zero { opacity: .3; }
.ppicons .badge { border-radius: 50%; display: block; }
aside { max-height: calc(calc(var(--vh, 1vh) * 100) - 5.5rem); overflow-y: auto; }
.moves { max-height: 22rem; }
.deck-num { font: 800 22px system-ui, sans-serif; fill: #111; text-anchor: middle; paint-order: stroke; stroke: rgba(255,255,255,.6); stroke-width: 3px; }
.dc svg { display: block; }

.rs.inside { position: relative; display: inline-flex; }
.rs.inside b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #fff; font-size: 1.4rem; font-weight: 800;
  text-shadow: -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #222, 0 0 3px #222; pointer-events: none; }
.rs.money img { border: 2.5px solid #fff; border-radius: 10px; box-sizing: content-box; background: #4a4d52; }
.rs.xr { gap: .2rem; }
.rs.xr b { font-size: 1.4rem; }

/* shared area: display | projects in play, association board, base projects */
.shared { align-items: flex-start; flex-wrap: wrap; gap: 1rem 1.5rem; }
.displaycol { flex: 0 0 auto; }
.shared .displaycol .cards { max-width: 64rem; }
.shared .displaycol .cards .card { width: 10rem; }
.tablecol { flex: 1 1 34rem; min-width: 30rem; max-width: 52rem; display: flex; flex-direction: column; gap: .5rem; }
.tablecol .assoc { width: 100%; max-width: none; }
.projpanel { display: flex; align-items: center; gap: .5rem; background: #ece3b4; border: 2px solid #1b110a; border-radius: 8px; padding: .4rem .5rem; box-shadow: 0 3px 10px rgba(0, 0, 0, .55); }
.projicon { flex: 0 0 auto; }
.projslot { flex: 1 1 0; min-height: 11.5rem; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .45) url(/assets/sheet_background.jpg) center / cover;
  border: 2px solid #8c7254; border-radius: 6px; padding: .3rem; }
.projslot .card { width: 7.5rem; }
.shared .displaycol .cards { max-width: 58rem; }
.shared .displaycol .cards .card { width: 9rem; }
.shared { flex-wrap: nowrap; }
.tablecol { flex: 1 1 26rem; min-width: 24rem; max-width: 40rem; }
.projslot { min-height: 10rem; }
.projslot .card { width: 6.5rem; }
@media (max-width: 899px) and (max-width: 1400px) { .shared { flex-wrap: wrap; } .tablecol { flex-basis: 34rem; } }
.cardwrap { position: relative; }
.blockcube { position: absolute; top: 85%; width: 26%; transform: translate(-50%, -50%); pointer-events: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }

.folders { gap: .3rem; flex-wrap: nowrap; }
.folder { position: relative; width: 10.4rem; flex: 0 0 auto; aspect-ratio: 273 / 407; background: url(/assets/folder.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.shared .displaycol .cards .folder > .card, .folder > .card { position: absolute; left: 7%; top: 15%; width: 86%; }
.folnum { position: absolute; left: 81.3%; top: 7.8%; transform: translate(-50%, -50%); color: #fff; font: 800 1.05rem system-ui, sans-serif; text-shadow: 0 1px 2px #000; pointer-events: none; }
.shared .displaycol .cards { max-width: none; }

/* folder a bit larger to the right and bottom (the card keeps its size and position), snug project slots */
.folder { width: 11.4rem; }
.shared .displaycol .cards .folder > .card, .folder > .card { left: .73rem; top: 2.45rem; width: 8.94rem; }
.projpanel { justify-content: space-evenly; }
.projslot { flex: 0 0 auto; min-height: 0; padding: .3rem .3rem .25rem; }
.projslot .card { width: 7.2rem; }
.projslot .withtokens { gap: 3px; }
.folders { gap: .1rem; }
.folder { width: 11.4rem; margin-right: -.55rem; }
.folder > .card { left: .73rem; }
.tablecol { flex: 0 1 31rem; min-width: 26rem; max-width: 31rem; }
.projslot { padding: .2rem; }
.projslot .card { width: 6.6rem; }
.projpanel { gap: .35rem; padding: .35rem .4rem; }
.shared { gap: 1rem 1.2rem; }

/* round 3: tighter folder, bigger projects / association board, empty project slots keep the shape of a full one */
.folder { width: 10.7rem; margin-right: -.35rem; }
.shared .displaycol .cards .folder > .card, .folder > .card { left: .73rem; top: 2.4rem; width: 8.94rem; }
.folnum { left: 81.5%; top: 7.8%; }
.tablecol { flex: 0 1 35rem; min-width: 26rem; max-width: 35rem; }
.projslot { box-sizing: content-box; width: 7.6rem; min-height: calc(7.6rem * 335 / 240 + 1.45rem); padding: .2rem; flex: 0 0 auto; align-items: flex-start; }
.projslot .card { width: 7.6rem; }
.projpanel { justify-content: space-evenly; }

.rs.inside .income { position: absolute; left: 50%; top: -17px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 1px; white-space: nowrap;
  background: #ece3b4; border: 1px solid #6f5749; border-radius: 999px; padding: 0 .3rem 0 .1rem; line-height: 1; }
.rs.inside .income img { border: 1.5px solid #fff; border-radius: 5px; box-sizing: content-box; }
.rs.inside .income i { font: 800 .8rem system-ui, sans-serif; font-style: normal; color: #2b1d12; }
.ppres { margin-top: .9rem; }

.rs.inside .income { top: -27px; background: none; border: 0; border-radius: 0; padding: 0; display: inline-flex; }
.rs.inside .income img { border: 2px solid #fff; border-radius: 8px; box-sizing: content-box; background: #4a4d52; display: block; }
.rs.inside .income i { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 800 1rem system-ui, sans-serif; font-style: normal; color: #fff;
  text-shadow: -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #222; pointer-events: none; }
.ppres { margin-top: 1.7rem; }

/* reputation track: 6 stretches of 324 of its 2752 px = one folder pitch (folder 10.7rem, -.35rem margin, .1rem gap) each */
.displaybox { display: inline-block; }
.reptrack { display: block; margin-top: .45rem; width: calc(2752 / 2676 * 6 * 10.45rem); max-width: none; height: auto; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

.ppres2 { display: flex; justify-content: flex-start; align-items: center; gap: 1.6rem; margin-bottom: .45rem; }
.handcount { gap: .3rem; }
.handcount b { font-size: 1.4rem; }
.handcount b.over { color: #c4261d; }
.board .flag-label { font-size: 21px; }

/* player tracker: a thin line between its rows */
.pp .ppres, .pp .ppres2, .pp .ppactions { padding-bottom: .45rem; margin-bottom: .45rem; border-bottom: 1px solid rgba(111, 87, 73, .45); }
.pp .ppicons { margin-top: 0; }

.ac { position: relative; }
.ac .variant { position: absolute; left: -9px; top: -9px; width: 25px; height: 25px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; }

/* hover preview: the base positioning was lost in an earlier rewrite, so the preview never showed */
.preview { position: fixed; right: 21rem; bottom: 1rem; z-index: 30; width: auto; height: min(calc(var(--vh, 1vh) * 92), 44rem); max-width: calc(var(--vw, 1vw) * 40); border-radius: 12px; box-shadow: 0 6px 28px rgba(0, 0, 0, .6); pointer-events: none; }
.preview[hidden] { display: none; }
.preview.center { right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; }

/* the action card of the running action: red border, lifted a little */
.ac { transition: none; }
.ac.chosen { border-color: #d92d20; transform: translateY(-5px); box-shadow: 0 0 0 1px #d92d20, 0 5px 6px rgba(0, 0, 0, .45); }

/* map name: bold and a little bigger */
.zoo h2 .map { font-weight: 700; font-size: .98rem; }

/* base / played conservation projects: only the bottom of the card (the cubes and the slots) shows, 240x335 card cut at 70% of its height */
.projcrop { width: 7.6rem; aspect-ratio: 240 / 100.5; overflow: hidden; border-radius: 6px; }
.projcrop > .card { position: absolute; left: 0; bottom: 0; width: 100%; }
.projcrop .blockcube { top: 50%; }
.projslot { min-height: calc(7.6rem * 100.5 / 240 + 1.45rem); }

/* conservation bonuses of the map (4th worker, 4th partner zoo, 3rd university): the icon and number look like the conservation tracker */
.cons-number { font-family: system-ui, sans-serif; font-weight: 800; fill: #fff; stroke: #222; stroke-width: 0.12em; paint-order: stroke; stroke-linejoin: round; text-anchor: middle; pointer-events: none; }
.bonuspanel .lift { transition: transform .18s ease-out; }
.bonuspanel .lockbox:hover .lift { transform: translateY(-30px); }

/* player tracker: a changed number flashes green (up) or red (down) and fades; change the duration here */
body.viewer { --flash-duration: 0.8s; }
.pp .flash-up, .sidetop .flash-up { animation: flash-up var(--flash-duration) ease-out; }
.pp .flash-down, .sidetop .flash-down { animation: flash-down var(--flash-duration) ease-out; }
.pp .flash-up, .pp .flash-down, .sidetop .flash-up, .sidetop .flash-down { border-radius: 8px; }
@keyframes flash-up { from { background-color: rgba(46, 190, 84, .65); } to { background-color: rgba(46, 190, 84, 0); } }
@keyframes flash-down { from { background-color: rgba(222, 48, 38, .65); } to { background-color: rgba(222, 48, 38, 0); } }

/* round 4: bigger display and association zone, project slots hugging the cropped cards, dark green icon bar left of each project */
.folder { width: 11.6rem; margin-right: -.38rem; }
.shared .displaycol .cards .folder > .card, .folder > .card { left: .8rem; top: 2.6rem; width: 9.7rem; }
.reptrack { width: calc(2752 / 2676 * 6 * 11.32rem); }
.tablecol { flex: 0 1 38rem; min-width: 28rem; max-width: 38rem; }
.projline { display: flex; align-items: stretch; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.projbar { flex: 0 0 2rem; background: #2f5d34 no-repeat 0 0 / 7.27rem auto; }           /* 2rem of the 66 px wide icon strip of a 240 px card */
.projcrop { width: 8rem; }
.projslot { box-sizing: border-box; width: auto; min-height: 0; padding: .2rem; border-width: 1px; align-items: flex-start; }
.projslot .card { width: 100%; }
.projcrop .blockcube { top: 50%; }

/* round 5: a much bigger association zone; every project slot has the size of a full one (empty ones too), the project fills it with a small gap */
.tablecol { flex: 0 1 44rem; min-width: 30rem; max-width: 44rem; }
.projpanel { justify-content: space-evenly; gap: .4rem; padding: .45rem .5rem; }
.projslot { width: 12.2rem; height: calc(9.4rem * 100.5 / 240 + 1.5rem + .5rem); padding: .25rem; box-sizing: border-box; justify-content: center; align-items: flex-start; flex: 0 0 auto; }
.projbar { flex: 0 0 2.5rem; background-size: 9.09rem auto; }
.projcrop { width: 9.4rem; }
.projslot .withtokens { gap: 2px; }
.projicon { height: 3.2rem; width: auto; }

/* round 6: project slots as tall as the cropped project (no reserved room for supporter dots when there are none) */
.projslot { height: auto; min-height: calc(9.4rem * 100.5 / 240 + .5rem); }
.projpanel { align-items: flex-start; }
.dots { min-height: 0; }
.moves { position: relative; }

/* round 7: projects about 30% bigger (crop 9.4rem -> 12.3rem, bar 2.5rem -> 3.3rem), slots and the association column follow */
.tablecol { flex: 0 1 56rem; min-width: 30rem; max-width: 56rem; }
.projslot { width: 16.1rem; min-height: calc(12.3rem * 100.5 / 240 + .5rem); }
.projbar { flex: 0 0 3.3rem; background-size: 12rem auto; }
.projcrop { width: 12.3rem; }
.projicon { height: 4rem; }
@media (max-width: 899px) and (max-width: 2150px) { .shared { flex-wrap: wrap; } .tablecol { flex-basis: 56rem; } }
/* desktop mode: the same rules, always on (the page is laid out at the design width) */
@media (min-width: 900px) { .shared { flex-wrap: wrap; } .tablecol { flex-basis: 56rem; } }

/* round 8: projects another 10% bigger (crop 13.5rem, bar 3.6rem) */
.tablecol { flex: 0 1 61.6rem; min-width: 30rem; max-width: 61.6rem; }
.projslot { width: 17.7rem; min-height: calc(13.5rem * 100.5 / 240 + .5rem); }
.projbar { flex: 0 0 3.6rem; background-size: 13.09rem auto; }
.projcrop { width: 13.5rem; }
.projicon { height: 4.4rem; }
@media (max-width: 899px) and (max-width: 2250px) { .shared { flex-wrap: wrap; } .tablecol { flex-basis: 61.6rem; } }
/* desktop mode: the same rules, always on (the page is laid out at the design width) */
@media (min-width: 900px) { .shared { flex-wrap: wrap; } .tablecol { flex-basis: 61.6rem; } }

/* Mark cube on a display card */
.markcube { position: absolute; left: 5.65rem; top: 7rem; width: 2.6rem; transform: translate(-50%, -50%); z-index: 2; pointer-events: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }

/* the action bar above the boards */
.actionbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .7rem; margin-bottom: .8rem; padding: .55rem 1rem; min-height: 2.6rem;
  background: rgba(244, 236, 210, .96); color: #2b1d12; border: 2px solid #1b110a; border-radius: 6px; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); font-size: 1.05rem; }
.actionbar[hidden] { display: none; }
.actionbar .who { font-weight: 800; }
.abtn { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 6px; background: #1e6fd0; color: #fff; border: 2px solid #0b2f66; font-weight: 800; }
.abtn.lvl2 { background: #7a3fb0; border-color: #3d1c5e; }
.abtn.xbtn { background: #5a5856; border-color: #222; }
.abtn img { filter: drop-shadow(0 0 1px #000); }

.engine-badge { display: inline-block; min-width: 1.1em; text-align: center; margin-left: auto; padding: 0 .25em; border-radius: 3px; font-size: .8em; font-weight: 700; cursor: help; }
.engine-badge.engine { color: #1c6b2a; }
.engine-badge.mismatch { color: #fff; background: #b3261e; }
.engine-badge.illegal { color: #fff; background: #c2185b; }
.engine-badge.skipped { color: #777; }
.current .engine-badge { margin-left: .4rem; }
.engine-detail { font-size: .8rem; font-weight: 400; color: #8a3b12; margin-top: .15rem; word-break: break-word; }

/* side column fits the window: the trackers are scaled down if needed (fitAside in replay.js) and the move list takes the rest and scrolls inside */
@media (max-width: 899px) and (min-width: 1101px) and (min-height: 921px) {
  aside { display: flex; flex-direction: column; overflow: hidden; max-height: none; }
  aside .side { flex: 0 0 auto; margin-bottom: .5rem; }
  aside h2 { flex: 0 0 auto; margin-bottom: .3rem; }
  aside .moves { flex: 1 1 0; min-height: 5rem; max-height: none; }
}
/* desktop mode: the same rules, always on (the page is laid out at the design width) */
@media (min-width: 900px) {
  aside { display: flex; flex-direction: column; overflow: hidden; max-height: none; }
  aside .side { flex: 0 0 auto; margin-bottom: .5rem; }
  aside h2 { flex: 0 0 auto; margin-bottom: .3rem; }
  aside .moves { flex: 1 1 0; min-height: 5rem; max-height: none; }
}

/* shorter player trackers (side column, wide layout) */
@media (max-width: 899px) and (min-width: 1101px) and (min-height: 921px) {
  aside .sidetop { padding: .2rem .5rem; }
  aside .breaktrack { font-size: 1.3rem; }
  aside .deckcounts { margin-top: .15rem; padding-top: .15rem; }
  aside .pp { padding: .3rem .45rem .35rem; }
  aside .pphead { margin-bottom: .15rem; }
  aside .pp .ppres, aside .pp .ppres2, aside .pp .ppactions { padding-bottom: .25rem; margin-bottom: .25rem; }
  aside .ppres { margin-top: 1.5rem; }
  aside .ppicons { gap: .15rem .2rem; }
}
/* desktop mode: the same rules, always on (the page is laid out at the design width) */
@media (min-width: 900px) {
  aside .sidetop { padding: .2rem .5rem; }
  aside .breaktrack { font-size: 1.3rem; }
  aside .deckcounts { margin-top: .15rem; padding-top: .15rem; }
  aside .pp { padding: .3rem .45rem .35rem; }
  aside .pphead { margin-bottom: .15rem; }
  aside .pp .ppres, aside .pp .ppres2, aside .pp .ppactions { padding-bottom: .25rem; margin-bottom: .25rem; }
  aside .ppres { margin-top: 1.5rem; }
  aside .ppicons { gap: .15rem .2rem; }
}

/* display (folders + reputation track) 10% larger */
.displaybox { zoom: 1.1; }

/* round 9: projects another 20% bigger (crop 16.2rem, bar 4.3rem), icon and projects centred in the panel */
.tablecol { flex: 0 1 74rem; min-width: 30rem; max-width: 74rem; }
.projpanel { align-items: center; }
.projslot { width: 21.2rem; min-height: calc(16.2rem * 100.5 / 240 + .5rem); align-items: center; }
.projbar { flex: 0 0 4.3rem; background-size: 15.7rem auto; }
.projcrop { width: 16.2rem; }
.projicon { height: 5.3rem; }
@media (max-width: 899px) and (max-width: 2750px) { .shared { flex-wrap: wrap; } .tablecol { flex-basis: 74rem; } }
/* desktop mode: the same rules, always on (the page is laid out at the design width) */
@media (min-width: 900px) { .shared { flex-wrap: wrap; } .tablecol { flex-basis: 74rem; } }
@media (max-width: 899px) and (max-width: 1250px) { .tablecol { flex-basis: 100%; max-width: 100%; } .projslot { width: auto; flex: 1 1 0; } }

/* round 10: the association zone always sits right of the display; it takes the space left and its projects shrink with it */
.shared { flex-wrap: nowrap; }
.displaycol { flex: 0 0 auto; }
.tablecol { flex: 1 1 0; min-width: 0; max-width: 74rem; }
.projpanel { gap: .3rem; padding: .35rem; }
.projicon { flex: 0 1 auto; height: auto; max-height: 5.3rem; min-width: 0; max-width: 3.4rem; }
.projslot { width: auto; flex: 1 1 0; min-width: 0; }
.projslot .withtokens, .projline { width: 100%; }
.projcrop { width: auto; flex: 1 1 0; min-width: 0; }

/* autoplay button and speed control */
.controls button.on { background: #8fd1a8; }
.speed { display: inline-flex; gap: .2rem; margin-left: .9rem; }
.speed button { min-width: 2.2rem; font-weight: 700; }

/* timeline of the game: one segment per round, the | is the start of a round */
.timeline { position: relative; display: flex; flex: 1 1 12rem; min-width: 8rem; max-width: 38rem; height: 1.6rem; margin-left: auto; cursor: pointer;
  border-right: 2px solid #f1d9a0; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #c9b690; transform: translateY(-50%); }
.tlseg { position: relative; flex-basis: 0; min-width: 0; border-left: 2px solid #f1d9a0; }
.tlseg:hover { background: rgba(255, 255, 255, .12); }
.tlhead { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; border-radius: 2px; background: #8fd1a8; pointer-events: none; box-shadow: 0 0 4px rgba(143, 209, 168, .9); }
.timeline + .controls { margin-left: 0; }

/* action buttons: the blue / purple of the unupgraded / upgraded action cards (.ac) */
.abtn { background: #009fe2; border-color: #006a98; }
.abtn.lvl2 { background: #a91b71; border-color: #6e1148; }

.abtn { position: relative; }
.abtn .variant { position: absolute; left: -9px; top: -9px; width: 25px; height: 25px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; }

/* X token controls of the action bar */
.xstep { width: 1.9rem; height: 1.9rem; border-radius: 6px; border: 2px solid #222; background: #e8dcb8; color: #3a2616; font: 800 1.2rem/1 system-ui, sans-serif; padding: 0; cursor: default; }
.xstep:disabled { opacity: .35; }
.abtn.gainx { background: #5a5856; border-color: #222; margin-left: .6rem; gap: .25rem; }
.abtn.gainx.off { opacity: .4; }
.abtn.gainx b { font-size: 1.3rem; }

/* a card that just arrived in its zone: green border that fades in the same time as the changed numbers of the player tracker */
.card.card-new, .projline.card-new { animation: card-new var(--flash-duration, .8s) ease-out; }
@keyframes card-new {
  from { box-shadow: 0 0 0 4px rgba(46, 190, 84, 1), 0 0 10px 3px rgba(46, 190, 84, .8), 0 2px 5px rgba(0, 0, 0, .5); }
  to { box-shadow: 0 0 0 4px rgba(46, 190, 84, 0), 0 0 10px 3px rgba(46, 190, 84, 0), 0 2px 5px rgba(0, 0, 0, .5); }
}

/* a card that left its zone: it stays as a ghost, red border and card fade away together (same duration), then it is removed */
.card.card-gone { animation: card-gone var(--flash-duration, .8s) ease-out forwards; pointer-events: none; z-index: 3; }
@keyframes card-gone {
  from { opacity: 1; box-shadow: 0 0 0 4px rgba(222, 48, 38, 1), 0 0 10px 3px rgba(222, 48, 38, .8); }
  to { opacity: 0; box-shadow: 0 0 0 4px rgba(222, 48, 38, 0), 0 0 10px 3px rgba(222, 48, 38, 0); }
}

/* partner zoos and universities that arrive / leave: a green / red frame; the whole token fades away when it leaves (same duration as the cards) */
.strip .frame, .board .frame { fill: none; stroke-width: 7; pointer-events: none; }
.strip .tok-new .frame, .board .tok-new .frame { stroke: #2ebe54; animation: tok-fade var(--flash-duration, .8s) ease-out forwards; }
.strip .tok-gone, .board .tok-gone { pointer-events: none; animation: tok-fade var(--flash-duration, .8s) ease-out forwards; }
.strip .tok-gone .frame, .board .tok-gone .frame { stroke: #de3026; }
@keyframes tok-fade { from { opacity: 1; } to { opacity: 0; } }

/* the action bar keeps its place when it has nothing to show, so the page does not move between steps */
.actionbar[hidden] { display: flex; visibility: hidden; height: 63px; }

/* bar built from the engine's legal actions */
.abtn.off { opacity: .4; }
.abtn.gen { background: #5a5856; border-color: #222; padding: .15rem .7rem; }
.abtn.gen i { font-style: normal; font-weight: 600; opacity: .85; }
.actionbar .chip.pend { background: rgba(255, 255, 255, .5); border: 1px solid #6f5749; border-radius: 999px; padding: .05rem .5rem; font-size: .8rem; color: #2b1d12; }

/* reputation track and conservation track above / below the display, with a cube for each player */
.reptrackwrap, .ctrackwrap { position: relative; width: calc(2752 / 2676 * 6 * 11.32rem); }
.reptrackwrap { margin-top: .45rem; }
.ctrackwrap { margin-bottom: .45rem; }
.reptrackwrap .reptrack { width: 100%; margin-top: 0; }
.ctrack { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.trackcube { position: absolute; width: 2.6%; transform: translate(-50%, -50%); pointer-events: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.ctbonus { position: absolute; top: 76%; height: 44%; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }

/* the building pieces in the action bar */
.actionbar { min-height: 92px; padding-top: .3rem; padding-bottom: .3rem; box-sizing: border-box; }
.actionbar[hidden] { height: 92px; }
.pieces { display: inline-flex; align-items: center; gap: .6rem; }
.piece { position: relative; display: inline-flex; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.piece img { display: block; }
.piece .variant { position: absolute; left: -9px; top: -9px; width: 25px; height: 25px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.piece.extra { margin-right: .5rem; }
.pieces { margin-left: .8rem; }

.piece .variant { width: 50px; height: 50px; left: -16px; top: -16px; }
.pieces { gap: 1.2rem; }

/* taking cards: the button to draw from the deck, and the display cards that cannot be taken */
.abtn.deckbtn { background: #4a76b8; border-color: #1f3a66; }
.card.dim { opacity: .35; filter: grayscale(1); }

/* composed bonus tiles on the conservation track: same look as the placement bonuses of the zoo map */
.ctcomposed { display: block; aspect-ratio: 1; overflow: visible; }
.ctcomposed .bonus-number { font: 800 44px system-ui, sans-serif; fill: #fff; stroke: #222; stroke-width: 8px; paint-order: stroke; text-anchor: middle; pointer-events: none; }
.ctcomposed .money-border { fill: none; stroke: #fff; stroke-width: 3.5; pointer-events: none; }

/* end of turn: Confirm / Undo last step / Restart turn (disabled in the replay) */
.turnbtn { padding: .3rem .9rem; border-radius: 6px; font: 700 .95rem system-ui, sans-serif; color: #fff; border: 1px solid rgba(0, 0, 0, .55); }
.turnbtn.confirm { background: #4a76b8; }
.turnbtn.undo { background: #d9795a; }
.turnbtn.restart { background: #c9302c; }
.turnbtn:disabled { opacity: .4; filter: grayscale(.85); cursor: not-allowed; }

.board .frame { stroke-linecap: round; stroke-linejoin: round; }

/* the discard pile / endgame deck in the tracker open a popup with their cards */
.pilebtn { cursor: pointer; border-radius: 8px; }
.pilebtn:hover { background: rgba(255, 255, 255, .45); outline: 2px solid rgba(79, 143, 106, .8); }
.pile { position: fixed; inset: 0; z-index: 50; background: rgba(15, 8, 3, .6); display: grid; place-items: center; }
.pile[hidden] { display: none; }
.pilewin { width: calc(var(--vw, 1vw) * 96); height: calc(var(--vh, 1vh) * 94); background: #ece3b4 url(/assets/sheet_background.jpg) center / cover; color: #2b1d12; border: 3px solid #1b110a; border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .7); display: flex; flex-direction: column; overflow: hidden; }
.pilehead { display: flex; align-items: center; justify-content: space-between; padding: .6rem 1rem; border-bottom: 2px solid rgba(27, 17, 10, .5); }
.pilehead h2 { margin: 0; font-size: 1.2rem; }
.pileclose { width: 2.4rem; height: 2.4rem; padding: 0; display: grid; place-items: center; line-height: 1; border-radius: 8px; border: 2px solid #1b110a; background: #c9302c; color: #fff; font: 800 1.2rem/1 system-ui, sans-serif; cursor: pointer; }
.pileclose:hover { background: #e0443f; }
.pilegrid { flex: 1 1 auto; overflow-y: auto; padding: 1rem; align-content: flex-start; gap: .8rem; }
.pilegrid .card { width: 12.5rem; }
.preview { z-index: 60; }

/* the player board strip has a margin on both sides (viewBox -50..401) for the lines of the upgrade sets: 13% of the row for the 351 units of the picture */
.strip { flex: 0 0 16.7%; width: 16.7%; }

.labelicon { height: 1.8em; width: auto; vertical-align: -.3em; margin: 0 .1em; }

.labelmoney { border-radius: 22%; border: 1.5px solid #fff; box-sizing: border-box; height: 1.5em; width: 1.5em; }
.labelamount { position: relative; display: inline-block; vertical-align: -.35em; line-height: 0; }
.labelamount .labelicon { vertical-align: baseline; margin: 0; }
.labelamount b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 800 .95em system-ui, sans-serif; line-height: 1; color: #fff;
  -webkit-text-stroke: 2.5px #222; paint-order: stroke fill; }

.pilenote { flex: 0 0 100%; font-weight: 700; padding: .2rem .4rem; border-bottom: 2px solid rgba(27, 17, 10, .4); }
.pilenote.guess { color: #8a3b12; margin-top: .4rem; }

/* the money tile is an opaque picture with a white border: the background flash of the tracker is hidden behind it, so the flash is a glowing ring round the tile */
.pp .rs.money.flash-up, .pp .rs.money.flash-down { animation: none; background: none; }
.pp .rs.money.flash-up img { animation: ring-up var(--flash-duration, .8s) ease-out; }
.pp .rs.money.flash-down img { animation: ring-down var(--flash-duration, .8s) ease-out; }
@keyframes ring-up { from { box-shadow: 0 0 0 5px rgba(46, 190, 84, 1), 0 0 14px 6px rgba(46, 190, 84, .85); } to { box-shadow: 0 0 0 5px rgba(46, 190, 84, 0), 0 0 14px 6px rgba(46, 190, 84, 0); } }
@keyframes ring-down { from { box-shadow: 0 0 0 5px rgba(222, 48, 38, 1), 0 0 14px 6px rgba(222, 48, 38, .85); } to { box-shadow: 0 0 0 5px rgba(222, 48, 38, 0), 0 0 14px 6px rgba(222, 48, 38, 0); } }

.roundno { margin-left: auto; font-weight: 700; font-size: .9em; color: #2b1d12; padding: .05rem .5rem; border: 1px solid #6f5749; border-radius: 999px; background: rgba(255, 255, 255, .45); }

/* ==== small screens and phones ==================================================================================================== */
html, body.viewer { overflow-x: hidden; }
.layout, main, .zoo, .shared, .tablecol { min-width: 0; }

@media (max-width: 899px) and (max-width: 1100px) {
  aside .side { zoom: 1 !important; }
  .moves { max-height: calc(var(--vh, 1vh) * 55); }
  .shared { flex-wrap: wrap !important; }
  .tablecol { flex: 1 1 100%; max-width: 100%; min-width: 0; }
  .displaycol { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: .3rem; -webkit-overflow-scrolling: touch; }
  .displaybox { zoom: .8; }
  .layout { padding: .6rem; gap: .6rem; }
  .assoc { width: 100%; }
}

@media (max-width: 899px) and (max-width: 800px) {
  .bar { gap: .35rem .6rem; padding: .35rem .6rem; }
  .bar .home { font-size: .9rem; }
  #tableInfo { display: none; }
  .timeline { order: 5; flex: 1 1 100%; max-width: none; height: 1.9rem; margin-left: 0; }
  .controls { margin-left: 0; flex: 1 1 100%; justify-content: space-between; flex-wrap: nowrap; gap: .25rem; }
  .controls button { min-width: 2.6rem; min-height: 2.6rem; padding: .2rem .35rem; }
  .jump { margin-left: .2rem; font-size: .85rem; }
  .jump input { width: 3.4rem; padding: .2rem; }
  .speed { margin-left: .2rem; gap: .15rem; }
  .speed button { min-width: 2.2rem; }
  .current { padding: .4rem .6rem; font-size: .9rem; min-height: 2.2rem; }
  .displaybox { zoom: .55; }
  .zoos { gap: .6rem; }
  .zoo { padding: .4rem; }
  .zoo h2 { font-size: .95rem; }
  .zooRow { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .3rem; }
  .zooRow .board { flex: 0 0 440px; }
  .bonuspanel { flex: 0 0 96px; width: 96px; }
  .strip { flex: 0 0 110px; width: 110px; }
  .zoo .cards .card, .shared .cards .card { width: 7.5rem; }
  .zoo .cards.small .card { width: 6.2rem; }
  .actionbar { padding: .4rem .5rem; gap: .35rem .45rem; font-size: .95rem; }
  .actionbar .pieces { zoom: .6; }
  .actionbar[hidden] { height: 56px; }
  .projpanel { gap: .2rem; padding: .25rem; }
  .projicon { max-width: 2rem; }
  .pilewin { width: calc(var(--vw, 1vw) * 100); height: calc(var(--vh, 1vh) * 100); border-radius: 0; border-width: 0; }
  .pilegrid .card { width: 8.5rem; }
  .pilehead h2 { font-size: 1rem; }
  .pileclose { width: 2.8rem; height: 2.8rem; }
  .turnbtn { padding: .35rem .6rem; }
  .moves li { padding: .45rem .5rem; }
  /* the hover preview of a card: shown centred over the page; a tap on it closes it */
  .preview { right: 50%; bottom: 50%; transform: translate(50%, 50%); height: auto; width: min(calc(var(--vw, 1vw) * 88), 24rem); max-width: calc(var(--vw, 1vw) * 88); pointer-events: auto; z-index: 70; }
}

@media (max-width: 899px) and (max-width: 480px) {
  .displaybox { zoom: .45; }
  .zooRow .board { flex-basis: 380px; }
  .zoo .cards .card, .shared .cards .card { width: 6.6rem; }
  .actionbar .pieces { zoom: .45; }
  .roundno { font-size: .8em; }
}

/* touch screens: no hover, so the lifted workers of the locked-workers box stay down and the pile counts get bigger targets */
@media (hover: none) {
  .pilebtn { padding: .25rem .4rem; }
  .moves li { min-height: 2.4rem; }
}
@media (max-width: 899px) and (max-width: 800px) {
  .controls { flex-wrap: wrap; row-gap: .3rem; }
  .speed { margin-left: auto; }
  .displaycol, .zooRow, .moves { max-width: 100%; }
}

/* wide layout: the association zone never goes below 460px (the display is scaled to fit instead, see fitDisplay in replay.js) */
@media (max-width: 899px) and (min-width: 1101px) {
  .displaybox { zoom: 1; }
  .tablecol { flex: 1 1 460px; min-width: 460px; }
  .shared { flex-wrap: nowrap !important; }
}
/* desktop mode: the same rules, always on (the page is laid out at the design width) */
@media (min-width: 900px) {
  .displaybox { zoom: 1; }
  .tablecol { flex: 1 1 460px; min-width: 460px; }
  .shared { flex-wrap: nowrap !important; }
}


/* wide layout, little room: the association zone goes under the display (decided in fitDisplay) */
@media (max-width: 899px) and (min-width: 1101px) {
  .shared.stacked { flex-wrap: wrap !important; }
  .shared.stacked .tablecol { flex: 1 1 100%; max-width: 74rem; }
}
/* desktop mode: the same rules, always on (the page is laid out at the design width) */
@media (min-width: 900px) {
  .shared.stacked { flex-wrap: wrap !important; }
  .shared.stacked .tablecol { flex: 1 1 100%; max-width: 74rem; }
}

/* the action card draft in the action bar: the offered variants of each player as full cards, the chosen ones framed in green */
.actionbar.draftbar { align-items: flex-start; justify-content: space-around; gap: 1rem 2rem; padding: .6rem .8rem; }
.draftgroup { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 1 1 18rem; }
.draftgroup + .draftgroup { border-left: 2px dashed rgba(27, 17, 10, .45); padding-left: 1.5rem; }
.drafthead { font-weight: 600; text-align: center; }
.draftcards { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.draftcard { position: relative; width: 12.5rem; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.draftcard img { display: block; width: 100%; height: auto; border-radius: 8px; }
.draftcard.picked { outline: 4px solid #2ebe54; outline-offset: 1px; }
.draftcard.passed { opacity: .6; filter: grayscale(.4); }
.draftcheck { position: absolute; right: -.5rem; top: -.6rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: #2ebe54; color: #fff; font: 800 1.1rem/1 system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
@media (max-width: 899px) and (max-width: 800px) { .draftcard { width: 8.5rem; } .draftgroup + .draftgroup { border-left: 0; padding-left: 0; } }

.draftcards { align-items: stretch; }
.draftkept { display: flex; align-items: center; padding: .5rem .6rem; margin-right: .3rem; border-radius: 10px; background: rgba(46, 190, 84, .28); border: 2px solid rgba(46, 190, 84, .8); }
.draftkept .draftcard.picked { outline: none; }

/* second pick: a dashed line and a wider gap between the card picked in the first round (green zone) and the cards to choose from now */
.draftkept { margin-right: 1.6rem; position: relative; }
.draftkept::after { content: ""; position: absolute; top: -.2rem; bottom: -.2rem; right: -1.1rem; border-right: 2px dashed rgba(27, 17, 10, .5); }

/* bonus tokens row of the player tracker */
.bonusrow { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; padding-top: .4rem; margin-top: .4rem; border-top: 1px solid rgba(111, 87, 73, .45); }
.btoken { display: inline-flex; border-radius: 8px; line-height: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); cursor: help; }
.btoken img { display: block; }
.btoken.card-new { animation: card-new var(--flash-duration, .8s) ease-out; }
.btoken.card-gone { animation: card-gone var(--flash-duration, .8s) ease-out forwards; pointer-events: none; }

/* reputation track: the rewards under the spaces and the upgrade requirements icon on the border between 9 and 10 */
.reptrackwrap { margin-bottom: 3.4rem; }
.reptrackwrap .repreward { position: absolute; top: calc(100% + .25rem); height: 3rem; width: 3rem; transform: translateX(-50%); }
.reptrackwrap .repupgrade { position: absolute; top: 50%; height: 2.7rem; width: auto; transform: translate(-50%, -50%); z-index: 2; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }

/* round 2: smaller reward icons that overlap the bottom of the track; the upgrade requirements as a red disc with a dark red "II" box below */
.reptrackwrap { margin-bottom: 2.4rem; }
.reptrackwrap .repreward { top: calc(100% - .55rem); height: 2.3rem; width: 2.3rem; z-index: 1; }
.reptrackwrap .repupgrade { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: stretch; width: 2.4rem; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.repupgrade .repupdisc { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; box-sizing: border-box; border-radius: 50%; background: #c0392b; border: 3px solid #fff; }
.repupgrade .repupdisc img { width: 78%; height: 78%; object-fit: contain; }
.repupgrade .repupbox { display: grid; place-items: center; margin-top: .15rem; height: 1.2rem; border-radius: 4px; background: #7a1c14; border: 1px solid #fff; color: #fff; -webkit-text-stroke: 2.5px #000; paint-order: stroke fill;
  font: 800 .95rem/1 system-ui, sans-serif; }

/* round 3: the upgrade requirements are one circle (light colour of the upgraded action cards, white border) holding the icon and the dark "II" box, hanging from the track like the rewards */
.reptrackwrap .repupgrade { top: calc(100% - .55rem); transform: translateX(-50%); width: 3rem; height: 3rem; z-index: 3; display: block; }
.repupgrade .repupdisc { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 3rem; height: 3rem; box-sizing: border-box; padding-top: .28rem; overflow: hidden;
  border-radius: 50%; background: #e04fd0; border: 3px solid #fff; }
.repupgrade .repupdisc img { width: 1.5rem; height: 1.5rem; object-fit: contain; flex: 0 0 auto; }
.repupgrade .repupbox { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; height: 1.05rem; border: 0; border-radius: 0; background: #8e2a85; font-size: .8rem; -webkit-text-stroke: 2px #000; }
.reptrackwrap .repupgrade, .repupgrade .repupdisc { width: 2.5rem; height: 2.5rem; }
.repupgrade .repupdisc { padding-top: .2rem; }
.repupgrade .repupdisc img { width: 1.25rem; height: 1.25rem; }
.repupgrade .repupbox { height: .9rem; font-size: .7rem; }
.reptrackwrap .repupgrade { margin-left: -.3rem; }

/* the 16 reputation bonus (Marine Worlds) above the appeal space at the end of the track */
.reptrackwrap .rep16 { position: absolute; bottom: calc(100% - .5rem); top: auto; height: 2.3rem; width: 2.3rem; transform: translateX(-50%); z-index: 1; }

/* projects in play (2 slots) and base projects (3 slots): the same slot size, a 3 column grid after the icon */
.projpanel { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; justify-content: stretch; }
.projpanel .projslot { width: auto; flex: none; min-width: 0; }

/* floating dock: hands and endgame cards, bottom left corner of the screen */
body.viewer { padding-bottom: 5rem; }
.dock { position: fixed; left: .8rem; bottom: .8rem; z-index: 35; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; max-width: calc(calc(var(--vw, 1vw) * 100) - 1.6rem); pointer-events: none; }
.dock > * { pointer-events: auto; }
.dockbar { display: flex; gap: .45rem; padding: .35rem; border-radius: 999px; background: rgba(40, 25, 14, .9); box-shadow: 0 3px 12px rgba(0, 0, 0, .55); }
.dockbtn { position: relative; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; border: 3px solid var(--pc, #888); background: #ece3b4; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; opacity: .75; transition: transform .12s, opacity .12s; }
.dockbtn:hover { opacity: 1; transform: translateY(-2px); }
.dockbtn.on { opacity: 1; background: #fff3cf; box-shadow: 0 0 0 3px var(--pc, #888), 0 2px 8px rgba(0, 0, 0, .5); }
.dockbtn img { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.dockn { position: absolute; right: -.35rem; top: -.45rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem; box-sizing: border-box; border-radius: 999px; background: var(--pc, #888); color: #fff; font: 800 .75rem/1.25rem system-ui, sans-serif; text-align: center;
  -webkit-text-stroke: .5px rgba(0, 0, 0, .55); paint-order: stroke fill; }
.dockpanel { max-width: 100%; max-height: calc(var(--vh, 1vh) * 62); overflow: auto; padding: .5rem .7rem .7rem; border-radius: 10px; border: 3px solid var(--pc, #888); background: #ece3b4 url(/assets/sheet_background.jpg) center / cover; color: #2b1d12;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .6); }
.dockhead { font-size: .95rem; margin-bottom: .35rem; }
.dockpanel .cards { flex-wrap: nowrap; }
.dockpanel .cards .card { flex: 0 0 auto; width: 11.4rem; }
.dockpanel .cards.small .card { width: 11.4rem; }
@media (max-width: 899px) and (max-width: 800px) { .dockbtn { width: 2.6rem; height: 2.6rem; } .dockpanel .cards .card { width: 8.4rem; } .dockpanel .cards.small .card { width: 8.4rem; } }

/* dock round 2: the count badge has a black outline (readable on a white ring), the fold button at the end */
.dockn { color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; text-shadow: 0 0 2px #000; border: 1.5px solid #000; box-sizing: border-box; }
.dockfold { width: 2.2rem; height: 2.2rem; align-self: center; padding: 0; margin-left: .15rem; border-radius: 50%; border: 2px solid #8c7254; background: #e8dcb8; color: #3a2616; font: 700 .9rem/1 system-ui, sans-serif; cursor: pointer; }
.dockfold:hover { background: #fff3cf; }

/* the back of a hidden card */
.card.back { background: repeating-linear-gradient(45deg, #5b3a24 0 8px, #6b4630 8px 16px); border: 3px solid #e8dcb8; display: grid; place-items: center; box-sizing: border-box; }
.card.back .backmark { font: 800 2.6rem system-ui, sans-serif; color: rgba(232, 220, 184, .55); }

/* draft: a card the viewer highlights with a click */
.draftcard { cursor: pointer; }
.draftcard.marked { outline: 4px solid #f5c542; outline-offset: 1px; box-shadow: 0 0 14px 3px rgba(245, 197, 66, .85); }
.draftcard.picked.marked { outline-color: #2ebe54; box-shadow: 0 0 0 3px #f5c542, 0 0 14px 3px rgba(245, 197, 66, .85); }

/* hand and endgame cards of the dock: a click highlights a card (until the next step) */
.card.markable { cursor: pointer; }
.card.marked { outline: 4px solid #f5c542; outline-offset: 1px; box-shadow: 0 0 14px 3px rgba(245, 197, 66, .85); }

/* fork: the button in the replay, the fork page (seed line, legal moves) */
.forkbtn { white-space: nowrap; font-weight: 700; }
.forkpage #timeline, .forkpage .speed, .forkpage #play { display: none; }
.forkinfo { padding: .5rem 1rem; background: rgba(40, 25, 14, .88); color: #f3e9d2; border-bottom: 2px solid #1b110a; font-size: .95rem; line-height: 1.9; }
.forkinfo a { color: #f1d9a0; }
.forkinfo button { margin-left: .4rem; padding: .2rem .6rem; border-radius: 6px; border: 1px solid #1b110a; background: #e8dcb8; color: #3a2616; font: 600 .85rem system-ui, sans-serif; cursor: pointer; }
.forkinfo .seedinput { width: 11rem; padding: .2rem .4rem; border-radius: 6px; border: 1px solid #1b110a; background: #f4ecd2; color: #2b1d12; font: 600 .95rem ui-monospace, Consolas, monospace; }
.forknote { font-size: .8rem; line-height: 1.4; margin-top: .1rem; }
.forkinfo .muted { color: #d0bf9d; }
.forkpanel { margin-bottom: .8rem; padding: .6rem .8rem; border: 2px solid #1b110a; border-radius: 6px; background: rgba(244, 236, 210, .96); color: #2b1d12; box-shadow: 0 3px 10px rgba(0, 0, 0, .5); }
.forkpanel .muted { color: #6f5749; }
.forkhead { margin-bottom: .4rem; }
.forkerror { color: #b3261e; font-weight: 700; margin: .3rem 0; }
.forknone { font-weight: 600; padding: .2rem 0; }
.forkfilter { width: 100%; box-sizing: border-box; margin: .2rem 0 .5rem; padding: .35rem .5rem; border: 1px solid #6f5749; border-radius: 6px; background: #fff; color: #2b1d12; font: inherit; }
.forkgroup { margin: .25rem 0; }
.forkgroup > summary { cursor: pointer; font-weight: 700; padding: .15rem 0; }
.forkrow { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem 0 .4rem; }
.forkmove { padding: .3rem .65rem; border-radius: 6px; border: 2px solid var(--pc, #666); background: #fff8dc; color: #2b1d12; font: 600 .85rem system-ui, sans-serif; cursor: pointer; }
.forkmove:hover:not(:disabled) { background: #fff; box-shadow: 0 0 0 2px var(--pc, #666); }
.forkmove:disabled { opacity: .5; cursor: wait; }

/* fork: placing a building (the hexes to click, the ghost, its border, the anchor, the buttons) */
.board .pickhex { fill: rgba(255, 255, 255, 0); stroke: rgba(255, 255, 255, .28); stroke-width: 2; cursor: crosshair; }
.board .pickhex:hover { fill: rgba(255, 255, 255, .32); }
.board .ghost { opacity: .78; }
.board .placeborder { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.board .placeborder.ok { stroke: #1fbf4d; filter: drop-shadow(0 0 6px rgba(31, 191, 77, .9)); }
.board .placeborder.bad { stroke: #e0301f; filter: drop-shadow(0 0 6px rgba(224, 48, 31, .9)); }
.board .anchordot { fill: #fff; stroke: #1b110a; stroke-width: 4; }
.board .anchorcross { stroke: #1b110a; stroke-width: 4; stroke-linecap: round; }
.board .placebtn { cursor: pointer; }
.board .placebtn circle { fill: #f4ecd2; stroke: #1b110a; stroke-width: 5; }
.board .placebtn text { font: 800 44px system-ui, sans-serif; fill: #3a2616; pointer-events: none; }
.board .placebtn:hover circle { fill: #fff; }
.board .placebtn.okbtn circle { fill: #1fbf4d; }
.board .placebtn.okbtn text { fill: #fff; }
.board .placebtn.cancelbtn circle { fill: #e8c9c2; }
.placectl { margin: .2rem 0 .6rem; padding: .5rem .6rem; border-radius: 6px; background: rgba(255, 255, 255, .5); border: 1px solid #6f5749; }
.placehead { margin-bottom: .35rem; }
.placeok { color: #12873a; } .placebad { color: #c0261b; }
.forkmove.piece { display: inline-flex; align-items: center; gap: .5rem; }
.forkmove.piece img { display: block; }
.forkdiscard { margin-bottom: 1rem; }
.forkdiscard .cards { margin: .5rem 0; }
.forkconfirm { font-weight: 700; padding: .4rem 1.2rem; }
.forkconfirm:disabled { opacity: .5; }
.forkdiscard .draftcards { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0; }
.forkdiscard .draftcard { cursor: pointer; }
.draftcard.choosable { cursor: pointer; }
.draftgroup .forkconfirm { display: block; margin: .4rem auto 0; }
.abtn.choosable { cursor: pointer; }
.abtn.choosable:hover { filter: brightness(1.15); }
.abtn.gainx.on { outline: 3px solid #f5c542; }
.actionbar .forkmore, .actionbar .forkmenu { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.actionbar details.forkmore { display: block; }
.actionbar .forkerror { color: #a30000; font-weight: 700; }
.actionbar .placectl { flex-basis: 100%; }
.folder.markable { cursor: pointer; }
.folder .card.marked { outline: 4px solid #f5c542; outline-offset: 1px; }
.forkpanel:empty { display: none; }
.forkconfirm { background: #4a76b8; color: #fff; border: 1px solid rgba(0, 0, 0, .55); border-radius: 6px; }
.forkconfirm:disabled { opacity: .4; filter: grayscale(.85); }
.assoc .assocpick { fill: rgba(255, 255, 255, 0); stroke: transparent; stroke-width: 6; cursor: pointer; }
.assoc .assocpick:hover { fill: rgba(255, 255, 255, .28); stroke: #f5c542; }
.actionbar .tilebtn { padding: .2rem .4rem; }
.actionbar .tilebtn.supply { opacity: .7; }
.bonuspanel .bonuspick { fill: rgba(255, 255, 255, 0); stroke: transparent; stroke-width: 5; cursor: pointer; }
.bonuspanel .bonuspick:hover { fill: rgba(245, 197, 66, .2); }
.bonuspanel .bonuspick.on { fill: rgba(245, 197, 66, .3); stroke: #f5a800; }
.modalback { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; }
.modalbox { background: #f3ead2; border: 3px solid #3b2a1c; border-radius: 12px; padding: 1.2rem 1.6rem; max-width: 30rem; font-family: system-ui, sans-serif; box-shadow: 0 8px 30px rgba(0, 0, 0, .6); }
.modalbox h3 { margin: 0 0 .6rem; }
.modalrow { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.modalbox { color: #2b1d12; font-size: 1.05rem; }
.modalbox p { margin: 0; font-weight: 600; }
.forkchoice { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; font-weight: 700; }

/* sandbox */
.lobby { max-width: 34rem; margin: 3rem auto; padding: 1.5rem 2rem; background: #f3ead2; color: #2b1d12; border: 3px solid #3b2a1c; border-radius: 12px; font-family: system-ui, sans-serif; }
.lobby h1 { margin-top: 0; }
.lobbyrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .7rem 0; border: 0; padding: 0; }
.lobbyrow select { flex: 1; max-width: 22rem; }
.lobby button[type=submit] { margin-top: .6rem; padding: .5rem 1.4rem; font-weight: 700; }
.sbtools { background: #f3ead2; color: #2b1d12; border: 2px solid #3b2a1c; border-radius: 8px; margin: 0 0 .8rem; padding: .3rem .8rem; font-family: system-ui, sans-serif; }
.sbtools summary { cursor: pointer; font-weight: 800; padding: .2rem 0; }
.sbbody { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; padding: .4rem 0 .6rem; }
.sbsec { min-width: 14rem; }
.sbsec h4 { margin: 0 0 .35rem; font-size: .95rem; }
.sbfields { display: flex; flex-direction: column; gap: .3rem; }
.sbfield input { width: 5rem; }
.sbbtn { cursor: pointer; }
.sbbtn.on { outline: 3px solid #f5c542; }
.sbbtn:disabled { opacity: .45; cursor: not-allowed; }
.sbmini { padding: .1rem .4rem; font-size: 1rem; min-width: 0; }
.sblist-actions { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.sbaction { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; background: #fff8e3; border: 1px solid #6f5749; border-radius: 6px; }
.sbaction.unlocked { cursor: grab; outline: 2px dashed #c9302c; }
.sbaction.dragging { opacity: .4; }
.sbaction .sbn { font-weight: 800; width: 1rem; }
.sbaction .sbname { flex: 1; }
.sbdisplay, .sbworkers, .sbtiles { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 30rem; }
.sbtile { background: #fff8e3; border: 1px solid #6f5749; border-radius: 6px; cursor: pointer; padding: .2rem; }
.sbtile:hover:not(:disabled) { outline: 3px solid #f5c542; }
.sbtile:disabled { opacity: .35; cursor: not-allowed; }
.sbtile svg, .sbtile img.ctbonus { height: 3.4rem; width: 3.4rem; position: static; transform: none; display: block; }
.sbhost { position: relative; }
.sbcenter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6rem; z-index: 2; background: rgba(236, 227, 180, .55); border-radius: 8px; }
.sbslot { position: absolute; top: 76%; transform: translate(-50%, -50%); display: flex; gap: .25rem; z-index: 2; }
.sbslot.rep16 { top: auto; bottom: calc(100% - .5rem); }
.sbmodal { min-width: 22rem; max-width: 52rem; max-height: calc(var(--vh, 1vh) * 85); overflow: auto; }
.sbmodalhead { display: flex; justify-content: space-between; align-items: center; }
.sbmodalhead h3 { margin: 0; }
.sbclose { border: 0; background: transparent; font-size: 1.8rem; cursor: pointer; line-height: 1; color: #2b1d12; }
.sbfilter { width: 100%; padding: .4rem; margin: .6rem 0; box-sizing: border-box; }
.sblist { max-height: calc(var(--vh, 1vh) * 55); overflow: auto; display: flex; flex-direction: column; gap: .15rem; }
.sbgroup { font-weight: 800; margin-top: .5rem; }
.sbrow { text-align: left; padding: .25rem .5rem; background: #fff8e3; border: 1px solid #c9b88a; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; color: #2b1d12; }
.sbrow:hover { background: #fde7a3; }
.sbkey { opacity: .55; font-size: .8rem; }
.sbbonuses, .sbprojects { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.sbproject { cursor: pointer; width: 9rem; }
.sbproject.marked { outline: 4px solid #f5c542; }

.lobby .lobbytext, .lobby .muted { color: #4a3727; }
.lobby a { color: #7a3b00; font-weight: 600; }
.lobby button[type=submit] { background: #4a76b8; color: #fff; border: 1px solid #2c4a7a; border-radius: 6px; cursor: pointer; }
.lobby button[type=submit]:disabled { opacity: .6; }
.lobby input[type=checkbox] { width: 1.1rem; height: 1.1rem; }
.sbmaps { display: flex; flex-wrap: wrap; gap: .3rem; flex-basis: 100%; justify-content: center; }
.sbmapbtn.on { background: #4a76b8; color: #fff; outline: 3px solid #f5c542; }

/* selections that are confirmed afterwards (fork / sandbox) are blue; the plain highlight of the replay stays yellow */
.forkpage .draftcard.marked, .forkpage .card.marked, .forkpage .folder .card.marked, .sbproject.marked { outline: 4px solid #2f80e8; outline-offset: 1px; box-shadow: 0 0 14px 3px rgba(47, 128, 232, .85); }
.forkpage .draftcard.picked.marked { outline-color: #2ebe54; box-shadow: 0 0 0 3px #2f80e8, 0 0 14px 3px rgba(47, 128, 232, .85); }
.bonuspanel .bonuspick.on { fill: rgba(47, 128, 232, .3); stroke: #2f80e8; }
.assoc .assocpick:hover { stroke: #2f80e8; }
.sbmapbtn.on { outline: 3px solid #2f80e8; }
.abtn.gainx.on { outline: 3px solid #2f80e8; }
.sbbtn.on { outline: 3px solid #2f80e8; }
.forkpage .markable:hover { outline-color: #2f80e8; }

.sbproject.taken { opacity: .35; cursor: not-allowed; }
.projslot.sbhost { position: relative; }
.projslot .sbcenter { flex-direction: column; background: transparent; gap: .4rem; }

.reptrackwrap .sbslot.rep16 { width: auto; height: auto; flex-direction: column; top: auto; bottom: calc(100% - .2rem); transform: translateX(-50%); gap: .2rem; }
.sbbonuses .sbtile { width: 5.4rem; height: 5.4rem; padding: .3rem; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.sbbonuses .sbtile svg, .sbbonuses .sbtile img { width: 100%; height: 100%; object-fit: contain; position: static; transform: none; display: block; }

/* the page is always as tall as it needs to be: keep the scrollbar so its appearance never changes the width the scale is computed from */
html { overflow-y: scroll; }

/* a hand / endgame / display card the viewer selected with a click, as on BGA: a thin green frame and a big green check mark in a translucent light rounded square in the
   middle of the card (blue in the fork, where the choice is confirmed afterwards) */
.card.marked, .folder .card.marked { outline: 3px solid #4cae4f; outline-offset: -1px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.card.marked::after, .draftcard.marked::after { content: ''; position: absolute; left: 50%; top: 35%; z-index: 3; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 12%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 54 L40 76 L84 26' fill='none' stroke='%232fa843' stroke-width='17' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat, rgba(238, 238, 238, .82); }
.forkpage .card.marked, .forkpage .folder .card.marked { outline-color: #2f80e8; }
.forkpage .card.marked::after, .forkpage .draftcard.marked::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 54 L40 76 L84 26' fill='none' stroke='%232f80e8' stroke-width='17' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* the same for the cards of the action card draft that the viewer highlights with a click (the picked ones keep their green frame and the check mark on the corner) */
.draftcard.marked::after { top: 30%; }       /* (the draft card is taller than a hand card: keep the square on the artwork) */
.draftcard.marked { outline: 3px solid #4cae4f; outline-offset: -1px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.draftcard.picked.marked { outline: 4px solid #2ebe54; outline-offset: 1px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.forkpage .draftcard.marked { outline: 3px solid #2f80e8; outline-offset: -1px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.forkpage .draftcard.picked.marked { outline: 4px solid #2ebe54; outline-offset: 1px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

/* draft: the offered cards keep their own height (the row stretches them to the height of the green zone of the first pick, which left an empty strip below the shorter ones) */
.draftcards > .draftcard { align-self: flex-start; }

/* second round: the card picked in the first round is as large as the cards on offer (no padded green zone around it, which made it look bigger): the same green frame as
   any picked card, left of the dashed line */
.draftkept { padding: 0; background: none; border: 0; }
.draftkept .draftcard.picked { outline: 4px solid #2ebe54; outline-offset: 1px; }

/* dragging a hand / endgame card to a new place in its row */
.dockpanel .card[draggable="true"] { cursor: grab; }
.dockpanel .card.dragging { opacity: .35; cursor: grabbing; }

/* the action cards of the info boxes before they are drawn (action card draft) */
.ppactions.unseen { visibility: hidden; }

/* the player name in the info box: a link that looks like plain bold text; light colours (yellow, white) get a very thin black outline */
a.ppname { font-weight: 700; text-decoration: none; }
a.ppname.light { -webkit-text-stroke: 4px #000; paint-order: stroke fill; }          /* (the stroke is drawn first and the letters over it: only its outer half shows, a thin black outline) */

/* the eye next to a player's name in the info box: open = this player's cards are shown (point of view) */
.poveye { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.6rem; margin-left: .35rem; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #3a2616; cursor: pointer; vertical-align: middle; }
.poveye:hover { background: rgba(58, 38, 22, .14); }
.poveye.closed { color: rgba(58, 38, 22, .55); }
.poveye.only { cursor: default; }
.poveye.only:hover { background: transparent; }
.poveye svg { width: 1.45rem; height: 1.45rem; }
.pphead .who { display: inline-flex; align-items: center; }

/* ---- live play (play.html) ---- */
.encpick { fill: rgba(47, 128, 232, .22); stroke: #2f80e8; stroke-width: 4; pointer-events: all; cursor: pointer; }
.encpick:hover { fill: rgba(47, 128, 232, .4); }
.encpick.on { fill: rgba(46, 190, 84, .4); stroke: #2ebe54; }
.pphead .clock { margin-left: .6rem; margin-right: auto; font-size: 1rem; }
.clock { margin-left: auto; font: 700 1.15rem ui-monospace, Consolas, monospace; padding: .05rem .5rem; border-radius: 6px; background: rgba(0, 0, 0, .12); color: #2b1d12; }
.clock.running { background: #2f6b4f; color: #fff; }
.clock.negative { background: #b3261e; color: #fff; }
.clock.running.low, .clock.low { background: #b3261e; color: #fff; }
.mappreview { flex-basis: 100%; width: min(100%, 62rem); margin: .4rem auto 0; padding: .4rem; box-sizing: border-box; }
.mappreview .zooRow { margin-bottom: 0; }
.mappreview > img { display: block; max-width: 100%; max-height: calc(var(--vh, 1vh) * 62); margin: 0 auto; border-radius: 8px; }
/* phones: the project panels are columns (the card strip of a project fills the width, readable) and the card preview is a thumbnail in a corner */
@media (max-width: 800px) {
  .projpanel { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; padding: .35rem; }
  .projpanel .projicon { align-self: flex-start; max-width: none; height: 2.2rem; width: auto; }
  .projpanel .projslot { width: 100%; flex: 0 0 auto; min-height: 3.6rem; box-sizing: border-box; padding: .25rem; }
  .projslot .withtokens, .projslot .projline { width: 100%; }
  .projline { container-type: inline-size; }
  .projbar { flex: 0 0 21.6cqw; background-size: 78.4cqw auto; }
  .projcrop { flex: 1 1 0; width: auto; min-width: 0; }
  .preview { top: 3.2rem; bottom: auto; right: .5rem; left: auto; transform: none; width: min(46vw, 12rem); max-width: 46vw; height: auto; }
}

/* the loading / error box of the viewer: a solid card (the wood behind it made the text unreadable) */
body.viewer .status { background: #f3ead2; color: #2b1d12; border: 3px solid #3b2a1c; border-radius: 12px; padding: 1.1rem 1.5rem; margin: 3rem auto; max-width: 30rem; font-size: 1.05rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
body.viewer .status .progress { color: #2b1d12; }
body.viewer .status .progresscircle .ptrack { stroke: #cdbf99; }
body.viewer .status .progresscircle .parc { stroke: #2f6b4f; }
body.viewer .status .progresscircle .ppct { fill: #2b1d12; }
body.viewer .status .peta { color: #5b4636; }
body.viewer .status.error { border-color: #a12f2f; color: #8b1f1f; font-weight: 600; }
body.viewer .status.loading::before { display: none; }

body.viewer .lobby a { color: #7a3b00; font-weight: 600; }

/* the form that creates a live game */
.lobby form { display: flex; flex-direction: column; gap: 1.1rem; }
.lobbyfield { display: flex; flex-direction: column; gap: .4rem; }
.lobbyfield > span { font-weight: 700; font-size: 1.05rem; }
.lobbyfield > span.lobbyhead { display: flex; align-items: center; justify-content: space-between; }
.lobbyswitch { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; cursor: pointer; position: relative; }
.lobby .lobbyswitch input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; }
.switchtrack { width: 2.6rem; height: 1.45rem; border-radius: 999px; background: #bfae8a; border: 2px solid #3b2a1c; position: relative; transition: background .15s; }
.switchtrack::after { content: ''; position: absolute; top: 1px; left: 1px; width: 1rem; height: 1rem; border-radius: 50%; background: #fffaf0; border: 1px solid #3b2a1c; transition: transform .15s; }
.lobbyswitch input:checked + .switchtrack { background: #4a76b8; }
.lobbyswitch input:checked + .switchtrack::after { transform: translateX(1.15rem); }
.lobbyswitch input:focus-visible + .switchtrack { outline: 3px solid #4a76b8; outline-offset: 2px; }
.lobbyfield select { width: 100%; padding: .65rem 2.4rem .65rem .85rem; font: inherit; font-size: 1rem; color: #2b1d12; background-color: #fffaf0; border: 2px solid #3b2a1c; border-radius: 8px;
  cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%233b2a1c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; }
.lobbyfield select:hover { background-color: #fff3d6; }
.lobbyfield select:focus-visible, .lobbycheck input:focus-visible, .lobby button:focus-visible { outline: 3px solid #4a76b8; outline-offset: 2px; }
.lobbyhelp { padding: .55rem .8rem; background: rgba(59, 42, 28, .08); border-left: 4px solid #4a76b8; border-radius: 0 6px 6px 0; color: #4a3727; font-size: .95rem; min-height: 1.3em; }
.lobbycheck { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .85rem; background: #fffaf0; border: 2px solid #3b2a1c; border-radius: 8px; cursor: pointer; }
.lobbycheck:hover { background: #fff3d6; }
.lobbycheck input { width: 1.35rem; height: 1.35rem; margin-top: .1rem; accent-color: #4a76b8; cursor: pointer; flex: 0 0 auto; }
.lobbycheck small { color: #4a3727; }
.lobby form button[type=submit] { width: 100%; margin-top: .2rem; padding: .8rem 1rem; font-size: 1.1rem; }
.lobby form button[type=submit]:hover { background: #3d639d; }

/* live play: an open proposal to abandon, the turn alert switch */
.abandonbox { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .6rem; padding: .55rem .8rem; background: #fff3d6; border: 2px solid #b8862e; border-radius: 8px; color: #2b1d12; }
.alertbtn { margin-left: .6rem; padding: .15rem .55rem; font: inherit; font-size: .85rem; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; opacity: .85; }
.alertbtn:hover { opacity: 1; }

/* the game menu in the row of the round counter */
.breaktrack .gamemenu { margin-left: auto; position: relative; font-size: .95rem; }
.gamemenubtn { padding: .25rem .6rem; border: 1px solid #4a3727; border-radius: 6px; background: #f6efcf; color: #2b1d12; cursor: pointer; font: inherit; }
.gamemenulist { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 12rem; display: flex; flex-direction: column; background: #f6efcf; border: 2px solid #1b110a; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); overflow: hidden; }
.gamemenulist[hidden] { display: none; }
.gamemenuitem { padding: .5rem .8rem; border: 0; border-bottom: 1px solid #c9b98a; background: transparent; color: #2b1d12; text-align: left; cursor: pointer; font: inherit; }
.gamemenuitem:hover:not(:disabled) { background: #e3d49a; }
.gamemenuitem:disabled { opacity: .5; cursor: not-allowed; }

/* the dock: one group per player with its two buttons (hand | endgame cards) */
.dockbar { border-radius: 18px; align-items: flex-end; }
.dockgroup { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.dockwho { font-size: .7rem; color: #f3e9c9; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dockpair { display: flex; gap: .3rem; padding: 0 .15rem .15rem; border-bottom: 3px solid var(--pc, #888); }
.dockfold { align-self: center; }

/* a step of a live game can have several lines of log (BGA words, one line per event) */
.current, .moves li { white-space: pre-line; }

.abandonbox[hidden] { display: none; }