/* Πλούτος (Ploutos): its home (the art, the token, the time, the table's rules) and its table — a black board in the
   admin's look (.pub-*: onyx, carbon, marble, space), 40 squares round the edge with the host's city, tokens of brushed
   metal that hop square by square, two dice (the admin's colour and size), the windows for buying, auctions, offers and
   cards. Phones: held upright, the board as wide as the screen, the players above, the actions below.
   Shares the dock and the side panel of t21.css. */
@property --un { syntax: '<length>'; inherits: true; initial-value: 8px; }

/* ---------- the looks (the admin's choice) ---------- */
.pu-layout, .pu-modal, .pu-art { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.pu-layout, .pu-art, .pu-modal {
  --bd1: #16151c; --bd2: #050507; --sq: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); --sqb: rgba(226,182,80,.38);
  --ln: #e2b650; --ln2: #fff1c4; --tx: #f4eee0; --tx2: rgba(244,238,224,.62); --ctr: radial-gradient(circle at 50% 45%, #22202c, #0b0a10 70%);
  --frame: linear-gradient(135deg, #3a3222, #0d0b07 45%, #2a2418); --glow: rgba(226,182,80,.35); }
.pub-carbon { --bd1: #111418; --bd2: #050608; --sqb: rgba(56,214,230,.42); --ln: #38d6e6; --ln2: #c9fbff; --tx: #e9f7fb; --tx2: rgba(233,247,251,.6);
  --ctr: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 3px, transparent 3px 6px), repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 3px, transparent 3px 6px), #0c0f13;
  --frame: linear-gradient(135deg, #1b2027, #07090b 50%, #151a20); --glow: rgba(56,214,230,.35); }
.pub-marble { --bd1: #141312; --bd2: #070606; --sqb: rgba(214,178,96,.45); --ln: #d6b260; --ln2: #fff0c8;
  --ctr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .02' numOctaves='5' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .85  0 0 0 0 .7  0 0 0 0 .38  0 0 0 2.2 -1.35'/%3E%3C/filter%3E%3Crect width='400' height='400' fill='%23100f0e'/%3E%3Crect width='400' height='400' filter='url(%23m)'/%3E%3C/svg%3E") center / cover;
  --frame: linear-gradient(135deg, #2c2721, #0c0a08 50%, #231f19); }
.pub-space { --bd1: #0b0a22; --bd2: #03020a; --sqb: rgba(255,95,190,.42); --ln: #ff5fbe; --ln2: #ffd6f0; --tx: #f2eaff; --tx2: rgba(242,234,255,.6);
  --ctr: radial-gradient(circle at 30% 30%, rgba(122,70,255,.45), transparent 45%), radial-gradient(circle at 72% 68%, rgba(255,70,170,.35), transparent 42%),
    radial-gradient(circle at 60% 20%, rgba(56,214,230,.25), transparent 35%), radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%) 0 0 / 47px 53px,
    radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent 51%) 0 0 / 71px 67px, #06051a;
  --frame: linear-gradient(135deg, #251a4a, #07051a 50%, #1a1040); --glow: rgba(255,95,190,.35); }

/* ---------- home ---------- */
.logo-pu { display: inline-block; width: 36px; height: 36px; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.logo-pu svg { width: 100%; height: 100%; display: block; }
.pu-art { position: relative; height: 178px; margin: -6px 0 6px; }
.pu-art-board { position: absolute; left: 50%; top: 14px; width: 150px; height: 150px; border-radius: 10px; background: var(--ctr);
  transform: translateX(-60%) perspective(640px) rotateX(38deg) rotate(-12deg); box-shadow: 0 0 0 3px var(--ln), 0 0 0 5px rgba(0,0,0,.6), 0 26px 30px -10px rgba(0,0,0,.8);
  animation: puArtIn 1s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes puArtIn { from { transform: translateX(-60%) perspective(640px) rotateX(60deg) rotate(-120deg) translateY(-80px) scale(.5); opacity: 0; } }
.pu-art-in { position: absolute; inset: 8px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 5px; }
.pu-art-in i { border-radius: 4px; background: linear-gradient(180deg, var(--c) 0 26%, rgba(255,255,255,.07) 26%); box-shadow: inset 0 0 0 1px rgba(226,182,80,.35);
  animation: puArtSq .5s ease-out both; animation-delay: calc(var(--k) * 70ms + .5s); }
@keyframes puArtSq { from { opacity: 0; transform: scale(.6); } }
.pu-art-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-24deg); font: 900 17px/1 'Inter', system-ui, sans-serif; letter-spacing: 3px; color: var(--ln);
  text-shadow: 0 0 12px var(--glow); }
.pu-art-tok { position: absolute; width: 38px; height: 38px; filter: drop-shadow(0 6px 5px rgba(0,0,0,.6)); animation: puArtHop 3.6s ease-in-out infinite; }
.pu-art-tok svg { width: 100%; height: 100%; }
.pu-art-tok.t1 { left: calc(50% - 88px); top: 40px; } .pu-art-tok.t2 { left: calc(50% + 34px); top: 92px; animation-delay: 1.2s; }
@keyframes puArtHop { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-16px); } 80% { transform: translateY(2px) scaleY(.92); } 86% { transform: none; } }
.pu-art-die { position: absolute; width: 34px; height: 34px; } .pu-art-die .pu-die { width: 100%; height: 100%; }
.pu-art-die.d1 { left: calc(50% + 72px); top: 26px; } .pu-art-die.d2 { left: calc(50% + 100px); top: 56px; }
.pu-art-die .pu-cube { animation: puArtCube 4.8s cubic-bezier(.3,.7,.3,1) infinite; }
.pu-art-die.d2 .pu-cube { animation-delay: .15s; }
@keyframes puArtCube { 0%, 60% { transform: rotateX(-20deg) rotateY(-24deg); } 90%, 100% { transform: rotateX(-20deg) rotateY(-24deg) rotateX(360deg) rotateY(720deg); } }
.pu-tokens { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.pu-tokb { aspect-ratio: 1; padding: 5px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); cursor: pointer;
  transition: transform .15s, border-color .2s, background .2s, box-shadow .2s; }
.pu-tokb svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.55)); }
.pu-tokb:hover { transform: translateY(-2px); }
.pu-tokb.on { border-color: #e2b650; background: radial-gradient(circle at 50% 35%, rgba(226,182,80,.3), rgba(226,182,80,.06)); box-shadow: 0 0 0 1px #e2b650, 0 8px 18px -8px rgba(226,182,80,.7); }
.pu-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; transition: opacity .2s; }
.pu-times.off { opacity: .35; }
.pu-times .btn.on { background: linear-gradient(#ffe38a, #e5b13a); color: #2a1800; border-color: transparent; }
.pu-rules .inline { margin-top: 8px; } .pu-rules .inline:first-of-type { margin-top: 0; }
@media (max-width: 520px) { .pu-tokens { grid-template-columns: repeat(4, 1fr); } .pu-art-board { width: 128px; height: 128px; } .pu-art { height: 160px; } }

/* ---------- the table ---------- */
.pu-layout .t21-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pu-top { display: none; }
/* the players: their token, cash, what they own; whose turn it is glows */
.pu-players { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; min-width: 0; }
.pu-pl { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 10px 7px 7px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), rgba(10,10,20,.78); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 22px -16px rgba(0,0,0,.9); transition: border-color .25s, box-shadow .25s, background .25s, opacity .3s; }
.pu-pl::before { content: ''; position: absolute; left: 12px; right: 12px; top: -1px; height: 2px; border-radius: 2px; background: var(--pc); opacity: .75; }
.pu-pl.turn { border-color: color-mix(in srgb, var(--pc) 65%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 22%, transparent), rgba(255,255,255,.02)), rgba(10,10,20,.86);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 35%, transparent), 0 14px 30px -14px var(--pc); }
.pu-pl.out { opacity: .38; filter: grayscale(.7); }
.pu-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.pu-av svg { position: relative; width: 78%; height: 78%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.pu-ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pc) 35%, #1b1a24), #0b0a10 72%);
  box-shadow: inset 0 0 0 2px var(--pc); }
.pu-pl.turn .pu-ring, .pu-hp.turn .pu-ring { box-shadow: inset 0 0 0 2px var(--pc), 0 0 12px var(--pc); }
/* (the bigger glow: drawn once, only its opacity breathes — a glow changing size was drawn again every frame; measured,
   the table about four times lighter) */
.pu-pl.turn .pu-ring::after, .pu-hp.turn .pu-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 20px var(--pc); opacity: 0; animation: puRing 1.6s ease-in-out infinite; }
@keyframes puRing { 50% { opacity: 1; } }
.pu-pn { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pu-pn > b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e6e9ff; }
.pu-pn > b small svg.i { width: 12px; height: 12px; vertical-align: -2px; opacity: .7; }
.pu-cash { font-size: 15px; font-weight: 900; color: #ffe08a; font-variant-numeric: tabular-nums; }
.pu-cash.up { animation: puCashUp .7s ease-out; } .pu-cash.down { animation: puCashDown .7s ease-out; }
@keyframes puCashUp { 30% { color: #a6f56b; transform: scale(1.12); } }
@keyframes puCashDown { 30% { color: #ff8b95; transform: scale(.94); } }
.pu-worth { font-size: 10.5px; font-weight: 700; color: rgba(223,228,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-jb { color: #ff9aa4; }
/* the hourglass of the time limit */
.pu-clock { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; box-sizing: border-box;
  background: rgba(0,0,0,.38); border: 1px solid color-mix(in srgb, var(--ln) 35%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.pu-clock.hidden { display: none; }
.pu-clock b { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; color: #ffe08a; }
.pu-clock.low b { color: #ff8b95; animation: puLow 1s ease-in-out infinite; }
@keyframes puLow { 50% { opacity: .5; } }
.pu-hg { position: relative; width: 15px; height: 21px; }
.pu-hg::before, .pu-hg::after { content: ''; position: absolute; left: 0; right: 0; height: 50%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: rgba(255,255,255,.12); }
.pu-hg::after { top: 50%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pu-hg i { position: absolute; left: 0; right: 0; top: 0; height: 50%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(transparent calc((1 - var(--k, 1)) * 100%), #e2b650 0); }
.pu-hg u { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(transparent calc(var(--k, 1) * 100%), #e2b650 0); }
.pu-hg em { position: absolute; left: 50%; top: 48%; width: 1.5px; height: 50%; margin-left: -.75px; background: #e2b650; animation: puSand .6s linear infinite; }
@keyframes puSand { 50% { opacity: .4; } }
.pu-clock { --k: 1; }

/* the board: a square as big as the place allows, in its frame; the board flies in and turns into place */
.pu-boardbox { position: relative; width: min(100%, max(540px, calc(100dvh - var(--top, 64px) - 150px))); aspect-ratio: 1; margin: 0 auto;
  box-sizing: border-box; padding: 10px; border-radius: 18px; background: var(--frame);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4), 0 34px 70px -28px rgba(0,0,0,.95); }
.pu-board { position: relative; width: 100%; height: 100%; container-type: size; border-radius: 6px; background: linear-gradient(135deg, var(--bd1), var(--bd2));
  box-shadow: 0 0 0 1.5px var(--ln), 0 0 18px -4px var(--glow); transform-style: preserve-3d;
  rotate: var(--br, 0deg); transition: rotate .9s cubic-bezier(.45,.05,.2,1); }
.pu-scroll { position: relative; width: 100%; height: 100%; border-radius: 6px; perspective: 1400px; }
.pu-boardbox.zoom .pu-scroll { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--ln) transparent; }
.pu-boardbox.zoom .pu-board { width: 175%; height: 175%; }
.pu-board > * { --un: calc(100cqw / 13); }
.pu-board.intro { animation: puIntro 1.7s cubic-bezier(.16,1,.3,1) both; }
@keyframes puIntro { from { transform: translateY(-110%) rotateX(55deg) rotateZ(-150deg) scale(.5); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
.pu-felt { position: absolute; inset: 0; border-radius: inherit; background: var(--ctr); opacity: .95; }

/* a square: its colour band on the inside, the name, the price; the owner's colour on the outside edge */
.pu-sq { position: absolute; box-sizing: border-box; padding: 0; margin: 0; border: .5px solid var(--sqb); background: var(--sq); color: var(--tx); cursor: pointer; overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif; transition: box-shadow .25s, filter .25s; -webkit-tap-highlight-color: transparent; }
.pu-sq:hover { filter: brightness(1.25); z-index: 5; }
.pu-si-w { position: absolute; left: 50%; top: 50%; width: calc(var(--un) * 1); height: calc(var(--un) * 2); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; box-sizing: border-box; text-align: center; }
.s-t .pu-si-w { transform: translate(-50%, -50%) rotate(180deg); }
.s-l .pu-si-w { transform: translate(-50%, -50%) rotate(90deg); }
.s-r .pu-si-w { transform: translate(-50%, -50%) rotate(-90deg); }
.s-c .pu-si-w { width: calc(var(--un) * 2); justify-content: center; gap: calc(var(--un) * .06); padding: 6%; }
.pu-band { flex: none; position: relative; width: 100%; height: 20%; background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 100%, #fff 18%), var(--gc) 55%, color-mix(in srgb, var(--gc) 80%, #000));
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3); }
/* the buildings on a street: bigger when there are fewer of them (four fit across), a shadow under each; they drop in */
.pu-hs { position: absolute; inset: 2% 3%; display: flex; align-items: center; justify-content: center; gap: 1.5%; }
.pu-hs svg { display: block; flex: none; height: auto; filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.7)); animation: puHouse .5s cubic-bezier(.3,1.6,.5,1) both; }
.pu-hs .pu-bh { width: 24%; }
.pu-hs[data-h="1"] .pu-bh { width: 40%; } .pu-hs[data-h="2"] .pu-bh { width: 36%; } .pu-hs[data-h="3"] .pu-bh { width: 31%; }
.pu-hs .pu-bo { width: 66%; }
/* (in the owner's colour: the lit walls, the side in shade, the roof and the doors darker) */
:is(.pu-hs, .pu-bld) .w { fill: color-mix(in srgb, var(--oc, #47c977) 90%, #fff); }
:is(.pu-hs, .pu-bld) .s { fill: color-mix(in srgb, var(--oc, #47c977) 68%, #000); }
:is(.pu-hs, .pu-bld) .r { fill: color-mix(in srgb, var(--oc, #47c977) 55%, #000); }
:is(.pu-hs, .pu-bld) .e { stroke: color-mix(in srgb, var(--oc, #47c977) 38%, #000); }
:is(.pu-hs, .pu-bld) .e2 { fill: color-mix(in srgb, var(--oc, #47c977) 38%, #000); }
:is(.pu-hs, .pu-bld) .d { fill: color-mix(in srgb, var(--oc, #47c977) 30%, #000); }
.pu-hs svg:nth-child(2) { animation-delay: .05s; } .pu-hs svg:nth-child(3) { animation-delay: .1s; } .pu-hs svg:nth-child(4) { animation-delay: .15s; }
@keyframes puHouse { from { transform: translateY(-160%) scale(1.3); opacity: 0; } }
.pu-sn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 4%; font-size: calc(var(--un) * .19); line-height: 1.08; font-weight: 800;
  letter-spacing: -.01em; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.pu-si { flex: none; width: 34%; color: var(--ln); } .pu-si svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pu-q { display: block; font: 900 calc(var(--un) * .42)/1 'Inter', system-ui, sans-serif; color: var(--ln); text-shadow: 0 0 8px var(--glow); }
.pu-sp { flex: none; margin-bottom: 14%; font-size: calc(var(--un) * .18); font-weight: 900; color: var(--tx2); font-variant-numeric: tabular-nums; }
.pu-own { position: absolute; left: 8%; right: 8%; bottom: 4%; height: 7%; border-radius: 3px; background: var(--oc, transparent); box-shadow: 0 0 6px var(--oc, transparent); opacity: 0; transition: opacity .3s; }
.pu-sq.owned .pu-own { opacity: 1; }
.pu-sq.owned .pu-sp .pu-c { display: none; }           /* (bought: the owner's line is enough, the price's coin goes) */
.pu-sq.mort::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.55) 0 4px, rgba(255,255,255,.06) 4px 8px); pointer-events: none; }
.pu-sq.can { z-index: 6; box-shadow: inset 0 0 0 2px #ffe08a, 0 0 14px rgba(255,224,138,.7); animation: puCan 1.2s ease-in-out infinite; }
@keyframes puCan { 50% { box-shadow: inset 0 0 0 2px #fff6cc, 0 0 22px rgba(255,224,138,.9); } }
.pu-sq.bought { animation: puBought 1.4s ease-out; } .pu-sq.built { animation: puBuilt .9s ease-out; } .pu-sq.sold { animation: puSold .9s ease-out; }
@keyframes puBought { 0% { box-shadow: inset 0 0 0 0 var(--oc); } 25% { box-shadow: inset 0 0 0 calc(var(--un) * .08) var(--oc), 0 0 24px var(--oc); filter: brightness(1.6); } }
@keyframes puBuilt { 30% { box-shadow: 0 0 20px #6ff2a0; filter: brightness(1.5); } }
@keyframes puSold { 30% { filter: brightness(.6); } }
/* the corners: a big sign and the name */
.pu-cic { width: 46%; color: var(--ln); filter: drop-shadow(0 0 6px var(--glow)); } .pu-cic svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pu-cn { font-size: calc(var(--un) * .21); font-weight: 900; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; }
.pu-cs, .pu-pot { font-size: calc(var(--un) * .2); font-weight: 900; color: #a6f56b; }
.pu-pot { color: #ffe08a; }
.k-go .pu-cic { transform: rotate(-45deg) translate(-4%, 4%); }
.k-gotojail .pu-cic { color: #ff7b86; }

/* the middle of the board: the name, the two decks, the dice, the bank */
.pu-center { position: absolute; left: calc(2 / 13 * 100%); top: calc(2 / 13 * 100%); width: calc(9 / 13 * 100%); height: calc(9 / 13 * 100%); }
.pu-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-32deg); text-align: center; pointer-events: none; }
.pu-logo b { display: block; font: 900 calc(var(--un) * .78)/1 'Inter', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--ln2), var(--ln) 55%, color-mix(in srgb, var(--ln) 60%, #000)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.55)) drop-shadow(0 0 14px var(--glow)); }
.pu-logo small { display: block; margin-top: calc(var(--un) * .08); font-size: calc(var(--un) * .2); font-weight: 800; letter-spacing: .35em; text-transform: uppercase; color: var(--tx2); }
.pu-deck { position: absolute; width: 21%; aspect-ratio: 1.45; border-radius: 6%; display: grid; place-items: center; transform: rotate(-45deg);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ln) 26%, #1b1a24), #0b0a10); box-shadow: 0 0 0 1px var(--ln), 3px 3px 0 -1px rgba(0,0,0,.5), 5px 5px 0 -2px color-mix(in srgb, var(--ln) 40%, #000); }
.pu-deck span { font: 900 calc(var(--un) * .5)/1 'Inter', system-ui, sans-serif; color: var(--ln); } .pu-deck span svg.i { width: calc(var(--un) * .5); height: calc(var(--un) * .5); color: var(--ln); }
.pu-deck em { position: absolute; bottom: 6%; font-style: normal; font-size: calc(var(--un) * .13); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tx2); }
.d-chance { left: 14%; top: 13%; } .d-vault { right: 14%; bottom: 13%; }
.pu-bank { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); display: flex; gap: calc(var(--un) * .15); font-size: calc(var(--un) * .21); font-weight: 800; color: var(--tx2); white-space: nowrap; }
.pu-bank span { display: inline-flex; align-items: center; gap: 4px; }
.pu-bank i { display: inline-block; width: calc(var(--un) * .16); aspect-ratio: 1; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); background: #2fc26f; }
.pu-bank i.o { background: #e2404f; width: calc(var(--un) * .22); }
.pu-bank .pot { color: #ffe08a; } .pu-bank .pot svg.i { width: 1.1em; height: 1.1em; }
.pu-layer { position: absolute; inset: 0; pointer-events: none; }
.pu-banner { z-index: 75; top: 36%; }
.pu-boardbox .paused21 { border-radius: 18px; z-index: 88; }

/* the dice: two cubes in the middle (the admin's colour and size); they tumble when thrown */
.pu-dice { position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); display: flex; gap: 14%; width: 25%; justify-content: center; --dc: #e2b650; }
.pus-tiny .pu-dice { width: 15%; } .pus-small .pu-dice { width: 20%; } .pus-large .pu-dice { width: 31%; }
.pu-die { position: relative; flex: 1; aspect-ratio: 1; container-type: size; perspective: 420px; }
.pu-dsh { position: absolute; left: 4%; right: 4%; bottom: -16%; height: 34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }
.pu-cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-16deg); }
.pu-f { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 15%; box-sizing: border-box; border-radius: 17%;
  background: radial-gradient(120% 120% at 30% 24%, #fffffb 0%, #f6f0e2 45%, #e6dcc6 80%, #d3c6a8 100%);
  box-shadow: inset 0 0 0 1px rgba(140,115,75,.28), inset 2.2cqw 2.2cqw 3cqw rgba(255,255,255,.85), inset -2.6cqw -2.6cqw 4.5cqw rgba(115,90,50,.3);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pu-core { position: absolute; inset: 4%; background: #e8dec8; border-radius: 6%; }
.pu-core.cy { transform: rotateY(90deg); } .pu-core.cx { transform: rotateX(90deg); }
.pu-f i { place-self: center; width: 66%; aspect-ratio: 1; border-radius: 50%; }
.pu-f i.on { background: radial-gradient(circle at 42% 38%, #45434e, #121117 62%, #050507); box-shadow: inset 0 1cqw 1.2cqw rgba(0,0,0,.85), 0 .7cqw 0 rgba(255,255,255,.8); }
.pu-f.f1 i.on { width: 78%; }                      /* (the one: the same colour as every other dot, a little bigger) */
.pu-f.f1 { transform: translateZ(50cqw); } .pu-f.f6 { transform: rotateY(180deg) translateZ(50cqw); }
.pu-f.f3 { transform: rotateY(90deg) translateZ(50cqw); } .pu-f.f4 { transform: rotateY(-90deg) translateZ(50cqw); }
.pu-f.f2 { transform: rotateX(90deg) translateZ(50cqw); } .pu-f.f5 { transform: rotateX(-90deg) translateZ(50cqw); }
/* (at rest, only the number on top shows its pips) */
.pu-dice:not(.throw) .pu-f i.on { visibility: hidden; }
.pu-cube[data-f="1"] .f1 i.on, .pu-cube[data-f="2"] .f2 i.on, .pu-cube[data-f="3"] .f3 i.on, .pu-cube[data-f="4"] .f4 i.on, .pu-cube[data-f="5"] .f5 i.on, .pu-cube[data-f="6"] .f6 i.on { visibility: visible; }
.pu-die { translate: var(--fx, 0%) var(--fy, 0%); rotate: var(--fr, 0deg); }
.pu-dice.throw .pu-die { animation: puThrow .95s linear; }
.pu-dice.throw .pu-die:last-child { animation-delay: .05s; }
@keyframes puThrow {
  0% { translate: var(--sx) var(--sy); rotate: var(--sr); scale: .7; opacity: .2; animation-timing-function: ease-out; }
  28% { translate: var(--mx) var(--my); scale: 1.35; opacity: 1; animation-timing-function: ease-in; }
  50% { translate: calc(var(--fx) + var(--bx)) calc(var(--fy) + var(--by)); scale: 1; animation-timing-function: ease-out; }
  66% { translate: calc(var(--fx) + var(--bx) * .35) calc(var(--fy) + var(--by) * .35 - 12%); scale: 1.1; animation-timing-function: ease-in; }
  82% { translate: var(--fx) var(--fy); scale: 1; }
  90% { translate: var(--fx) calc(var(--fy) - 3%); scale: 1.03; }
  100% { translate: var(--fx) var(--fy); rotate: var(--fr); scale: 1; } }
.pu-dice.dbl::after { content: ''; position: absolute; inset: -60% -20%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255,216,102,.7), transparent);
  animation: puDbl .8s ease-out forwards; }
@keyframes puDbl { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
/* the admin's dice */
.pud-black .pu-f { background: radial-gradient(120% 120% at 30% 24%, #4a4a52 0%, #1d1d23 50%, #0a0a0e 100%); box-shadow: inset 0 0 0 1px rgba(226,182,80,.35), inset 2cqw 2cqw 3cqw rgba(255,255,255,.12); }
.pud-black .pu-core { background: #111116; }
.pud-black .pu-f i.on, .pud-black .pu-f.f1 i.on { background: radial-gradient(circle at 40% 35%, #fff2c4, #e2b650 55%, #8d6620); box-shadow: inset 0 .6cqw .8cqw rgba(0,0,0,.4); }
.pud-red .pu-f { background: radial-gradient(120% 120% at 30% 24%, rgba(255,120,130,.95) 0%, rgba(200,30,48,.92) 50%, rgba(120,8,22,.95) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset 2cqw 2cqw 3cqw rgba(255,255,255,.3); }
.pud-red .pu-core { background: #9a1426; }
.pud-red .pu-f i.on, .pud-red .pu-f.f1 i.on { background: radial-gradient(circle at 40% 35%, #fff, #e8e8ee 60%, #b9b9c4); box-shadow: inset 0 .6cqw .8cqw rgba(0,0,0,.35); }
.pud-crystal .pu-f { background: radial-gradient(120% 120% at 30% 24%, rgba(255,255,255,.78) 0%, rgba(190,220,255,.5) 55%, rgba(120,160,220,.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 2cqw 2cqw 3cqw rgba(255,255,255,.7); }
.pud-crystal .pu-core { background: rgba(170,205,255,.45); }
.pud-crystal .pu-f i.on { background: radial-gradient(circle at 40% 35%, #3a4a6a, #10182a 70%); }

/* the tokens: brushed metal on a ring of the player's colour, a shadow on the board; they hop from square to square */
/* (a token stands on its point; when the board turns, the tokens turn back so they always stand upright) */
.pu-tok { position: absolute; display: block; width: calc(var(--un) * .7); aspect-ratio: 1; margin: calc(var(--un) * -.434) 0 0 calc(var(--un) * -.35); font-style: normal;
  transform-origin: 50% 62%; rotate: var(--cr, 0deg);
  transition: left var(--hop, .17s) cubic-bezier(.35,.1,.35,1), top var(--hop, .17s) cubic-bezier(.35,.1,.35,1), opacity .4s, rotate .9s cubic-bezier(.45,.05,.2,1); }
.pu-tb { position: absolute; inset: 0; display: block; filter: drop-shadow(0 0 2px var(--pc)) drop-shadow(0 3px 2px rgba(0,0,0,.6)); }
.pu-tb::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, var(--pc), color-mix(in srgb, var(--pc) 40%, #000));
  box-shadow: 0 0 6px var(--pc); }
.pu-tsvg { position: relative; width: 100%; height: 100%; display: block; }
.pu-tsh { position: absolute; left: 14%; right: 14%; bottom: -8%; height: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent); }
.pu-tok.turn .pu-tb { animation: puBob 1.4s ease-in-out infinite; }
@keyframes puBob { 50% { transform: translateY(-9%); } }
.pu-tok.hop .pu-tb { animation: puHop var(--hop, .17s) ease-out; } .pu-tok.hop .pu-tsh { animation: puHopSh var(--hop, .17s) ease-out; }
.pu-tok.land .pu-tb { animation: puLand .32s ease-out; }
@keyframes puHop { 50% { transform: translateY(-55%) scale(1.06); } }
@keyframes puHopSh { 50% { transform: scale(.55); opacity: .5; } }
@keyframes puLand { 0% { transform: translateY(-40%); } 45% { transform: translateY(0) scale(1.12, .86); } 70% { transform: translateY(-6%) scale(.97, 1.04); } 100% { transform: none; } }
.pu-tok.gone { opacity: 0; }
.pu-flame { animation: puFlame .25s ease-in-out infinite alternate; transform-origin: 32px 50px; }
@keyframes puFlame { to { transform: scaleY(.7); } }
/* a puff of dust where a token lands */
.pu-dust { position: absolute; width: 0; height: 0; }
.pu-dust b { position: absolute; left: 0; top: 0; width: calc(var(--un) * .1); height: calc(var(--un) * .1); margin: calc(var(--un) * -.05); border-radius: 50%;
  background: radial-gradient(circle, rgba(235,225,200,.8), rgba(235,225,200,0) 70%); animation: puDust .7s ease-out forwards; }
.pu-dust b:nth-child(1) { --dx: -1; --dy: -.2; } .pu-dust b:nth-child(2) { --dx: 1; --dy: -.3; } .pu-dust b:nth-child(3) { --dx: -.6; --dy: .5; } .pu-dust b:nth-child(4) { --dx: .7; --dy: .45; }
.pu-dust b:nth-child(5) { --dx: 0; --dy: -.7; } .pu-dust b:nth-child(6) { --dx: -.2; --dy: .8; } .pu-dust b:nth-child(7) { --dx: .3; --dy: .1; }
@keyframes puDust { to { transform: translate(calc(var(--dx) * var(--un) * .4), calc(var(--dy) * var(--un) * .25)) scale(3); opacity: 0; } }
/* money moving: a number rising from a token */
.pu-money { position: absolute; z-index: 60; transform: translate(-50%, -140%); transform-origin: 0 0; rotate: var(--cr, 0deg); font-style: normal; font-size: calc(var(--un) * .3); font-weight: 900; white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.7), 0 0 10px rgba(0,0,0,.6); animation: puMoney 1.6s ease-out forwards; }
.pu-money.up { color: #a6f56b; } .pu-money.down { color: #ff8b95; } .pu-money.gold { color: #ffe08a; }
@keyframes puMoney { 0% { opacity: 0; transform: translate(-50%, -100%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -150%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -290%); } }

/* a card drawn: out of its deck, it turns and is read */
.pu-cardfx { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; pointer-events: none; perspective: 900px; }
.pu-cardfx.hidden { display: none; }
.pcf-card { position: relative; width: 56%; aspect-ratio: 1.5; transform-style: preserve-3d; transform: translate(-40%, -40%) rotate(-45deg) rotateY(0) scale(.4); opacity: 0;
  transition: transform .8s cubic-bezier(.2,.9,.3,1.1), opacity .3s; }
.pu-cardfx.vault .pcf-card { transform: translate(40%, 40%) rotate(-45deg) scale(.4); }
.pu-cardfx.on .pcf-card { transform: none; opacity: 1; }
.pu-cardfx.on .pcf-card .pcf-back { transform: rotateY(180deg); } .pu-cardfx.on .pcf-card .pcf-front { transform: rotateY(0); }
.pcf-back, .pcf-front { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s .25s cubic-bezier(.3,.8,.3,1); }
.pcf-back { display: grid; place-items: center; --dk1: #ff9a4d; --dk2: #d9531a;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.25), transparent 60%), linear-gradient(145deg, var(--dk1), var(--dk2));
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.35), 0 20px 40px -10px rgba(0,0,0,.9); }
.pu-cardfx.vault .pcf-back, .pu-cardfx.vault .pcf-front { --dk1: #5fb2ff; --dk2: #1d5fd6; }
.pcf-back b { font: 900 54px/1 'Inter', system-ui, sans-serif; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.25); } .pcf-back svg.i { width: 52px; height: 52px; color: #fff; }
.pcf-front { transform: rotateY(-180deg); display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; text-align: center; --dk1: #ff9a4d; --dk2: #d9531a;
  background: #fffdf8; color: #1d1a14; box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 26px 50px -12px rgba(0,0,0,.95); }
.pcf-front em { flex: none; padding: 9px 10px 8px; font-style: normal; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, var(--dk1), var(--dk2)); box-shadow: inset 0 -1px 0 rgba(0,0,0,.2); }
.pcf-front p { flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 6px 16px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.pcf-front small { flex: none; padding: 0 10px 10px; font-size: 12px; font-weight: 700; color: #7a705e; }

/* the actions under the board */
.pu-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 44px; }
/* the buttons, as in Zygos: a thin pill with a light border and a soft glow; the main one a gold pill */
.pu-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 22px; border-radius: 999px; cursor: pointer; box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #f4f1ea; font: 700 13px/1 'Inter', system-ui, sans-serif; letter-spacing: .6px;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .1s, opacity .2s; animation: puActIn .3s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes puActIn { from { transform: translateY(8px); opacity: 0; } }
.pu-act:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); box-shadow: 0 0 18px -6px rgba(255,255,255,.5); }
.pu-act:active:not(:disabled) { transform: translateY(1px); }
.pu-act:disabled { opacity: .4; cursor: default; }
.pu-act svg.i { width: 17px; height: 17px; }
.pu-act.main { border: 0; padding: 0 24px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: #2a1800;
  background: linear-gradient(180deg, #ffe38a, #e5a92e); box-shadow: 0 3px 0 #8a6412, 0 8px 18px -8px rgba(0,0,0,.8); }
.pu-act.main svg.i { stroke-width: 2.6; }
.pu-act.main:hover:not(:disabled) { background: linear-gradient(180deg, #ffeaa3, #ecb43c); box-shadow: 0 3px 0 #8a6412, 0 0 22px -4px rgba(255,216,102,.8); }
.pu-act.main:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #8a6412; }
.pu-act.main:not(:disabled) { animation: puActIn .3s cubic-bezier(.3,1.4,.5,1) both, puMain 2s ease-in-out .3s infinite; }
@keyframes puMain { 50% { box-shadow: 0 3px 0 #8a6412, 0 0 24px -4px rgba(255,216,102,.85); } }
.pu-act.sec { border-color: rgba(255,216,102,.45); color: #ffe7a3; }
.pu-act.sec:hover:not(:disabled) { background: rgba(255,216,102,.1); box-shadow: 0 0 18px -6px rgba(255,216,102,.7); }
.pu-act.sec.on { background: rgba(255,216,102,.16); border-color: #ffd866; box-shadow: 0 0 18px -6px rgba(255,216,102,.8); }
.pu-act.bad { border-color: rgba(255,160,160,.5); color: #ffd9d9; }
.pu-act.bad:hover:not(:disabled) { background: rgba(255,90,90,.12); box-shadow: 0 0 18px -6px rgba(255,120,120,.7); }
/* the buttons in the windows: the same pills, side by side, never stretched */
.pu-modal .pm-acts { gap: 10px; }
.pu-modal .pm-acts .btn { flex: 0 1 auto; }
.pu-modal .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-width: 128px; height: 40px; min-height: 0; padding: 0 20px;
  border-radius: 999px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #f4f1ea; box-shadow: none; cursor: pointer;
  font: 700 13px/1 'Inter', system-ui, sans-serif; letter-spacing: .6px; text-transform: none; transition: background .2s, border-color .2s, box-shadow .2s, transform .1s; }
.pu-modal .btn:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); box-shadow: 0 0 18px -6px rgba(255,255,255,.5); }
.pu-modal .btn:active:not(:disabled) { transform: translateY(1px); }
.pu-modal .btn-primary { border: 0; color: #2a1800; font-weight: 900; letter-spacing: .8px; background: linear-gradient(180deg, #ffe38a, #e5a92e); box-shadow: 0 3px 0 #8a6412, 0 8px 18px -8px rgba(0,0,0,.8); }
.pu-modal .btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #ffeaa3, #ecb43c); border: 0; box-shadow: 0 3px 0 #8a6412, 0 0 22px -4px rgba(255,216,102,.8); }
.pu-modal .btn-primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #8a6412; }
.pu-modal .btn:disabled { opacity: .4; cursor: default; }
.pu-modal .btn-sm { min-width: 0; height: 34px; padding: 0 15px; font-size: 12px; }
/* the tools in the dock: the hourglass, the zoom, the pause (small pills) */
.pu-dock .turnlbl { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 2px; }
.pu-dock .turnlbl > b, .pu-dock .turnlbl > span:not(.pu-dtools) { grid-column: 1; min-width: 0; text-align: left; }
.pu-dtools { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
.pu-dock .turnlbl .pu-dtools, .pu-dock .turnlbl .pu-dtools span { max-width: none; overflow: visible; color: inherit; font-size: inherit; font-weight: inherit; text-align: center; white-space: nowrap; }
.pu-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 12px; box-sizing: border-box; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #f4f1ea; font: 700 12px/1 'Inter', system-ui, sans-serif; letter-spacing: .5px;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .1s; }
.pu-tool svg.i { width: 16px; height: 16px; }
.pu-tool:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); box-shadow: 0 0 16px -6px rgba(255,255,255,.5); }
.pu-tool:active { transform: translateY(1px); }
.pu-tool.on { border-color: #ffd866; color: #ffe7a3; background: rgba(255,216,102,.14); box-shadow: 0 0 16px -6px rgba(255,216,102,.8); }
.pu-tool.hidden { display: none; }

/* the windows over the table: a street's card, buying, an auction, an offer */
.pu-modal { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 16px; background: rgba(4,4,12,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s; }
.pu-modal.on { opacity: 1; }
.pu-modal.hidden { display: none; }
.pm-box { width: min(340px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 16px; border-radius: 20px; color: #fff;
  background: radial-gradient(120% 80% at 50% 0%, rgba(226,182,80,.16), transparent 60%), linear-gradient(170deg, rgba(26,24,40,.98), rgba(10,10,20,.98));
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px -20px rgba(0,0,0,.95); transform: scale(.94) translateY(10px); transition: transform .3s cubic-bezier(.3,1.3,.5,1); }
.pu-modal.on .pm-box { transform: none; }
.pm-box.pm-trade { width: min(560px, 100%); }
.pm-t { margin: 2px 0 10px; font-size: 17px; font-weight: 900; text-align: center; }
.pm-how { margin: -4px 0 12px; text-align: center; font-size: 12.5px; line-height: 1.45; color: rgba(223,228,255,.72); }
.pm-acts { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.pm-acts.wrap { flex-wrap: wrap; }
.pm-acts .btn { flex: 1; } .pm-acts.wrap .btn { flex: 0 1 auto; }
.pm-note { margin: 8px 0 0; text-align: center; font-size: 12px; color: rgba(223,228,255,.6); }
.pm-owner { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: #dfe4ff; }
.pm-owner i { width: 10px; height: 10px; border-radius: 50%; background: var(--oc); box-shadow: 0 0 6px var(--oc); }
.pm-bar { display: block; height: 6px; margin: 10px 0 0; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.pm-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e5b13a, #ffe38a); transform-origin: left; }
/* a title deed */
.pu-deed { margin: 0 auto; width: min(260px, 100%); border-radius: 12px; overflow: hidden; color: #1c1810; background: linear-gradient(180deg, #fffaf0, #f2e8d2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 16px 30px -12px rgba(0,0,0,.9); animation: puDeed .4s cubic-bezier(.3,1.3,.5,1); }
@keyframes puDeed { from { transform: rotateX(70deg) translateY(-20px); opacity: 0; } }
.pd-head { padding: 10px 12px 9px; text-align: center; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 100%, #fff 18%), var(--gc) 60%, color-mix(in srgb, var(--gc) 75%, #000));
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.pd-head small { display: block; font-size: 9.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.pd-head b { display: block; margin-top: 3px; font-size: 18px; font-weight: 900; line-height: 1.15; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.pd-price { padding: 7px 0 2px; text-align: center; font-size: 20px; font-weight: 900; color: #5c4210; }
.pd-rows { padding: 4px 16px 14px; font-size: 13.5px; }
.pd-rows div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.pd-rows div span { color: #4d4432; } .pd-rows div b { font-variant-numeric: tabular-nums; }
.pd-rows .sep { margin-top: 5px; padding-top: 6px; border-top: 1px dashed rgba(0,0,0,.25); }
.pu-deed.small .pd-price { padding-bottom: 8px; }
/* an auction */
.pa-high { margin-top: 12px; text-align: center; }
.pa-high b { display: block; font-size: 30px; font-weight: 900; color: #ffe08a; font-variant-numeric: tabular-nums; animation: puPop .35s cubic-bezier(.3,1.6,.5,1); }
.pa-high small { font-size: 12.5px; color: rgba(223,228,255,.7); font-weight: 700; }
@keyframes puPop { from { transform: scale(1.25); } }
/* an offer */
.pm-tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-tr > div > em, .pt-side > em { display: block; margin-bottom: 6px; font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #ffe08a; }
.pt-list { display: flex; flex-wrap: wrap; gap: 5px; }
.pt-cash, .pt-card { padding: 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 900; background: rgba(255,224,138,.14); color: #ffe08a; }
.pt-sq { position: relative; padding: 4px 9px 4px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #e6e9ff;
  font: 700 12px/1.25 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer; }
.pt-sq::before { content: ''; position: absolute; left: 5px; top: 5px; bottom: 5px; width: 4px; border-radius: 2px; background: var(--gc, #8a8fa3); }
.pt-sq.on { border-color: #ffe08a; background: rgba(255,224,138,.16); color: #fff; }
.pt-sq.mort { opacity: .7; font-style: italic; }
.pt-who { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.pt-p { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: #e6e9ff; font: 800 12.5px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
.pt-p i { width: 22px; height: 22px; } .pt-p i svg { width: 100%; height: 100%; }
.pt-p.on { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), 0 0 12px -2px var(--pc); color: #fff; }
.pt-side { min-width: 0; }
.pt-sqs { display: flex; flex-direction: column; gap: 4px; max-height: 38dvh; overflow: auto; margin-top: 6px; }
.pt-money { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; color: #ffe08a; }
.pt-money input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.3); color: #fff; font: 800 14px 'Inter', system-ui, sans-serif; }

/* the three columns: everyone's deeds | the board | the table and what happened */
.page#table:has(.pu-layout) { max-width: 1720px; }
.pu-left { grid-area: pl; min-width: 0; }
.pu-layout > .t21-side { grid-area: side; }
/* computers: the board as tall as the screen (nothing to scroll), the controls on its right, above the table's panels */
@media (min-width: 1101px) {
  /* the board's column is exactly as wide as the board (as tall as the screen allows); the columns beside it take
     the rest of the width, so there is no empty space on either side of the board */
  .page#table:has(.pu-layout) { max-width: none; }
  .t21-layout.pu-layout { --bs: min(calc(100dvh - var(--top, 66px) - 30px), calc(100vw - 660px));
    grid-template-columns: minmax(270px, 480px) var(--bs) minmax(290px, 480px); justify-content: center;
    grid-template-rows: auto auto 1fr; column-gap: 18px; row-gap: 12px;
    grid-template-areas: "pl board dock" "pl board acts" "pl board side"; align-items: start; }
  .pu-layout > .t21-main { display: contents; }
  .pu-layout .pu-boardbox { grid-area: board; width: 100%; }
  .pu-layout .pu-dock { grid-area: dock; margin: 0; min-width: 0; }
  /* (in the narrow column: the text on top, the hourglass and the small buttons on their own line under it) */
  .pu-dock .turnlbl { grid-template-columns: minmax(0, 1fr); }
  .pu-dtools { grid-column: 1; grid-row: auto; flex-wrap: wrap; justify-content: flex-start; margin-top: 6px; }
  .pu-layout .pu-acts { grid-area: acts; justify-content: stretch; min-height: 0; }
  .pu-layout .pu-acts .pu-act { flex: 1 1 auto; }
  .pu-layout > .t21-side { position: static; }
  .pu-left { position: sticky; top: 84px; }
}
.pu-holdp { padding: 14px 12px; max-height: calc(100dvh - 110px); overflow: auto; scrollbar-width: thin; }
/* what each player owns: a plate with the token and the cash, the title deeds face up by colour */
.pu-hold { display: flex; flex-direction: column; gap: 10px; }
.pu-hp { position: relative; padding: 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.012)), rgba(8,8,16,.62); box-shadow: 0 10px 22px -16px rgba(0,0,0,.9);
  transition: border-color .25s, box-shadow .25s, opacity .3s; }
.pu-hp::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px; background: var(--pc); opacity: .8; }
.pu-hp.turn { border-color: color-mix(in srgb, var(--pc) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 18%, transparent), rgba(255,255,255,.015)), rgba(8,8,16,.7);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 30%, transparent), 0 14px 30px -16px var(--pc); }
.pu-hp.out { opacity: .4; filter: grayscale(.8); }
.pu-hp-h { display: flex; align-items: center; gap: 9px; }
.pu-jc { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; font-size: 12px; background: rgba(255,224,138,.14); color: #ffe08a; }
.pu-hp-none { margin: 8px 0 0; font-size: 12px; line-height: 1.35; color: rgba(223,228,255,.5); }
.pu-deeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; margin-top: 10px; }
.pu-dc { position: relative; display: flex; flex-direction: column; min-width: 0; height: 78px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  color: #1c1810; background: linear-gradient(180deg, #fffaf0, #eee2c6); font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 7px 12px -7px rgba(0,0,0,.95); transition: transform .15s, box-shadow .2s; }
.pu-dc:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 12px 18px -8px rgba(0,0,0,.95); }
.pu-dc > i { flex: none; display: flex; align-items: center; justify-content: center; gap: 2px; height: 17px; font-style: normal;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 100%, #fff 20%), var(--gc) 60%, color-mix(in srgb, var(--gc) 78%, #000)); box-shadow: inset 0 -1px 0 rgba(0,0,0,.3); }
.pu-dc > i b { width: 8px; height: 8px; background: linear-gradient(160deg, #8dffb6, #1c9a50); clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); }
.pu-dc > i b.o { width: 15px; height: 9px; background: linear-gradient(160deg, #ff9aa3, #b71f33); clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%); }
.pu-dc > i svg { width: 13px; height: 13px; fill: none; stroke: #ffe08a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pu-dc > span { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2px 4px; font-size: 10.5px; font-weight: 800; line-height: 1.1; text-align: center;
  overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.pu-dc > small { flex: none; padding: 0 3px 4px; font-size: 10px; font-weight: 900; color: #6b4d12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pu-dc.full { box-shadow: 0 0 0 2px var(--gc), 0 0 14px -3px var(--gc), 0 7px 12px -7px rgba(0,0,0,.95); }
.pu-dc.mort { filter: saturate(.35); }
.pu-dc.mort::after { content: ''; position: absolute; inset: 17px 0 0; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 4px, transparent 4px 8px); }
.pu-dc.mort > small { color: #b3202f; }
.pu-dc.new { animation: puDeal .7s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes puDeal { from { transform: translateY(-26px) rotateY(95deg) scale(.6); opacity: 0; } 60% { opacity: 1; } }
@media (min-width: 1101px) and (max-width: 1360px) {
  .t21-layout.pu-layout { --bs: min(calc(100dvh - var(--top, 66px) - 30px), calc(100vw - 420px));
    grid-template-columns: var(--bs) minmax(300px, 1fr); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "board dock" "board acts" "board pl" "board side"; }
  .pu-left { position: static; }
  .pu-holdp { max-height: 46vh; }
}
@media (max-width: 1100px) {
  .t21-layout.pu-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "main" "pl" "side"; }
  .pu-layout > .t21-main { grid-area: main; }
  .pu-top { display: flex; align-items: stretch; gap: 8px; }
  .pu-holdp { max-height: none; }
  .pu-deeds { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
}

/* the roll: a big pill in the middle of the board, two little dice and the words (as in backgammon); space rolls too */
.pu-rollb { position: absolute; left: 50%; top: 50%; z-index: 76; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 28px 13px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 800 18px/1 'Inter', system-ui, sans-serif; color: #fff3cf; letter-spacing: .8px; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(42,34,16,.95), rgba(16,12,6,.96)); border: 1px solid rgba(226,182,80,.75);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,236,190,.22), 0 0 0 3px rgba(226,182,80,.14);
  animation: puRollIn .35s cubic-bezier(.3,1.4,.5,1), puRollGlow 2s ease-in-out .4s infinite; transition: border-color .2s; }
.pu-rollb:hover { border-color: #ffe08a; }
.pu-rollb:active { transform: translate(-50%, calc(-50% + 2px)); }
.pu-rollb.hidden { display: none; }
@keyframes puRollIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }
@keyframes puRollGlow { 50% { box-shadow: 0 12px 28px -8px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,236,190,.22), 0 0 0 6px rgba(226,182,80,.2), 0 0 32px -4px rgba(255,216,102,.6); } }
.pu-rd { position: relative; flex: none; width: 38px; height: 30px; }
.pu-rd b { position: absolute; width: 20px; height: 20px; border-radius: 4.5px; box-shadow: 1px 2px 3px rgba(0,0,0,.6);
  background: radial-gradient(circle, #17151c 0 2px, transparent 2.5px) 50% 50% / 100% 100% no-repeat, linear-gradient(150deg, #fffdf8, #e2d6bd); }
.pu-rd b:first-child { left: 0; top: 2px; transform: rotate(-12deg); }
.pu-rd b:last-child { left: 16px; top: 9px; transform: rotate(16deg);
  background: radial-gradient(circle at 30% 30%, #17151c 0 1.8px, transparent 2.3px), radial-gradient(circle at 70% 70%, #17151c 0 1.8px, transparent 2.3px), linear-gradient(150deg, #fffdf8, #e2d6bd); }
.pu-rollb:hover .pu-rd b:first-child { transform: rotate(-24deg) translateY(-2px); } .pu-rollb:hover .pu-rd b:last-child { transform: rotate(28deg); }
.pu-rd b { transition: transform .25s; }
@media (max-width: 620px) { .pu-rollb { padding: 10px 20px 10px 11px; font-size: 15px; gap: 9px; } .pu-rd { width: 32px; height: 26px; } .pu-rd b { width: 17px; height: 17px; } .pu-rd b:last-child { left: 13px; top: 8px; } }
@media (prefers-reduced-motion: reduce) { .pu-rollb { animation: none; } }

/* small flashes of what happens, near the top of the board */
.pu-feed { position: absolute; left: 50%; top: 15%; z-index: 72; transform: translateX(-50%); width: min(62%, 440px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.pu-note { --nc: #8f8bb5; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; padding: 6px 14px 6px 6px; border-radius: 999px;
  font: 700 13px/1.25 'Inter', system-ui, sans-serif; color: #f4f1ea; background: rgba(12,11,20,.88); border: 1px solid color-mix(in srgb, var(--nc) 45%, transparent);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.9), 0 0 16px -8px var(--nc); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: puNoteIn .45s cubic-bezier(.2,1.3,.4,1) both; }
.pu-note.out { animation: puNoteOut .4s ease-in forwards; }
.pu-note i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 900; color: #15120a;
  background: var(--nc); box-shadow: 0 0 10px -1px var(--nc); }
.pu-note span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-note.good { --nc: #7fe25a; } .pu-note.bad { --nc: #ff6b78; } .pu-note.gold { --nc: #ffd866; } .pu-note.info { --nc: #6cc6ff; }
@keyframes puNoteIn { from { transform: translateY(-14px) scale(.9); opacity: 0; filter: blur(3px); } }
@keyframes puNoteOut { to { transform: translateY(-8px) scale(.96); opacity: 0; } }
/* coins flying from one to another */
.pu-coin { position: absolute; z-index: 65; width: calc(var(--un) * .3); aspect-ratio: 1; margin: calc(var(--un) * -.15) 0 0 calc(var(--un) * -.15); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff6c9, #f3c84b 45%, #b07d14 82%); box-shadow: inset 0 0 0 1.5px rgba(122,76,16,.7), 0 3px 6px rgba(0,0,0,.6); }
.pu-coin::after { content: ''; position: absolute; inset: 24%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(122,76,16,.55), 0 1px 0 rgba(255,255,255,.5); }
/* the money sign: a small gold coin before every amount */
.pu-c { display: inline-block; width: .9em; height: .9em; margin: 0 .2em 0 .02em; vertical-align: -.1em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff6c9, #f3c84b 45%, #b07d14 85%);
  box-shadow: inset 0 0 0 .08em rgba(122,76,16,.6), inset 0 0 0 .2em rgba(255,236,160,.25), 0 .06em .12em rgba(0,0,0,.45); }
/* a glow where something happened */
.pu-flash { position: absolute; inset: 0; z-index: 64; pointer-events: none; background: radial-gradient(circle at var(--x) var(--y), var(--fc) 0, transparent 22%); animation: puGlow .95s ease-out forwards; }
@keyframes puGlow { from { opacity: 1; } to { opacity: 0; } }
/* to jail: the token lifts and flies slowly, the bars drop on it, the corner flashes red */
.pu-tok.fly { z-index: 90 !important; }
.pu-tok.fly .pu-tb { animation: puFly var(--hop, 1.3s) cubic-bezier(.3,.1,.3,1); }
.pu-tok.fly .pu-tsh { animation: puFlySh var(--hop, 1.3s) ease-in-out; }
@keyframes puFly { 0% { transform: none; } 30% { transform: translateY(-120%) scale(1.5) rotate(-14deg); } 70% { transform: translateY(-80%) scale(1.35) rotate(10deg); } 100% { transform: none; } }
@keyframes puFlySh { 30%, 70% { transform: scale(.45); opacity: .35; } }
.pu-sq.jailed { z-index: 7; animation: puJailed 1.5s ease-out; }
@keyframes puJailed { 25% { box-shadow: inset 0 0 0 calc(var(--un) * .08) #ff4d5e, 0 0 30px #ff4d5e; filter: brightness(1.5); } }
.pu-bars { position: absolute; z-index: 66; width: calc(var(--un) * 1.05); aspect-ratio: 1; transform: translate(-50%, -50%); transform-origin: 0 0; rotate: var(--cr, 0deg); pointer-events: none; box-sizing: border-box; border-radius: 5px;
  border-top: 4px solid #d6dae3; border-bottom: 4px solid #d6dae3; background: repeating-linear-gradient(90deg, transparent 0 15%, #c9ced8 15% 22%);
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.75)); animation: puBars 1.8s ease-out forwards; }
@keyframes puBars { 0% { transform: translate(-50%, -170%); opacity: 0; } 30% { transform: translate(-50%, -50%); opacity: 1; } 38% { transform: translate(-50%, -58%); }
  46%, 80% { transform: translate(-50%, -50%); opacity: 1; } 100% { transform: translate(-50%, -50%); opacity: 0; } }

/* the end */
.pu-end { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; padding: 6%; border-radius: 6px; background: rgba(6,6,16,.64);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pu-end.hidden { display: none; }
.pu-end .le-av { background: #1b1a24; box-shadow: inset 0 0 0 2px var(--pc); } .pu-end .le-av svg { width: 80%; height: 80%; }
.le-why { margin: -6px 0 10px; font-size: 12.5px; color: rgba(223,228,255,.7); }
.pu-dock { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.pu-dock .turnlbl { align-items: center; }

@media (min-width: 621px) {
  .page#table:has(.pu-layout) { padding-top: 12px; padding-bottom: 12px; }
  .pu-dock { padding: 9px 14px; }
}
/* phones, held upright: the board as wide as the screen, the players two by two above it */
@media (max-width: 620px) {
  .page#table:has(.pu-layout) { padding: 8px 6px 20px; }
  .pu-players { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pu-pl { padding: 5px 7px 5px 5px; gap: 6px; border-radius: 12px; }
  .pu-av { width: 32px; height: 32px; }
  .pu-pn > b { font-size: 11.5px; } .pu-cash { font-size: 13.5px; } .pu-worth { font-size: 9.5px; }
  .pu-boardbox { width: 100%; padding: 5px; border-radius: 12px; }
  .pu-boardbox.zoom .pu-board { width: 230%; height: 230%; }
  .pu-act { height: 46px; padding: 0 14px; font-size: 13.5px; } .pu-act.main { padding: 0 20px; font-size: 15px; }
  .pu-dock .turnlbl { flex-direction: row; }
  .pu-clock { height: 34px; padding: 0 9px 0 8px; } .pu-tool { height: 34px; min-width: 34px; padding: 0 9px; }
  .pu-tool span:empty { display: none; }
  .pm-tr { grid-template-columns: 1fr; }
  .pu-feed { width: 86%; top: 13%; } .pu-note { font-size: 12px; padding: 5px 11px 5px 5px; } .pu-note i { width: 19px; height: 19px; font-size: 11px; }
  .pu-modal .btn { min-width: 110px; }
  .pcf-card { width: 86%; } .pcf-front p { font-size: 14.5px; padding: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pu-board.intro, .pu-tok.turn .pu-tb, .pu-tok.hop .pu-tb, .pu-tok.hop .pu-tsh, .pu-tok.land .pu-tb, .pu-dice.throw .pu-die, .pu-act.main:not(:disabled), .pu-sq.can,
  .pu-art-board, .pu-art-tok, .pu-art-die .pu-cube, .pu-hs svg, .pu-pl.turn .pu-ring::after, .pu-hp.turn .pu-ring::after, .pu-flame, .pu-dc.new { animation: none; }
  .pu-dust, .pu-money, .pu-coin, .pu-flash, .pu-bars { display: none; }
  .pu-note, .pu-note.out, .pu-tok.fly .pu-tb, .pu-sq.jailed { animation: none; }
}

/* ================= the fixed controls, the middle of the board, the windows and the cards (dark and gold, like the roll) */
/* the two buttons that are always there: side by side, the same size, never moving (dimmed when they cannot be used) */
.pu-acts, .pu-layout .pu-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 0; }
.pu-acts .pu-act { width: 100%; min-width: 0; height: 46px; padding: 0 10px; white-space: normal; text-align: center; line-height: 1.15; font-size: 12.5px; animation: none; }
.pu-acts .pu-act span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pu-acts .pu-act svg.i { flex: none; }
/* the middle of the board: the roll, and under it the things of the moment (jail, a debt, an offer waiting) */
.pu-mid { position: absolute; left: 50%; top: 50%; z-index: 76; transform: translate(-50%, -50%); width: 72%; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.pu-mid > * { pointer-events: auto; }
.pu-mid .pu-rollb { position: relative; left: auto; top: auto; transform: none; animation: puRollIn2 .4s cubic-bezier(.3,1.4,.5,1), puRollGlow 2s ease-in-out .4s infinite; }
.pu-mid .pu-rollb:active { transform: translateY(2px); }
@keyframes puRollIn2 { from { opacity: 0; transform: scale(.8); } }
.pu-cacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pu-cacts:empty { display: none; }
.pu-cmsg { flex-basis: 100%; margin: 0; padding: 9px 14px; border-radius: 14px; text-align: center; font-size: 13.5px; font-weight: 700; line-height: 1.4; color: #fff3cf;
  background: linear-gradient(180deg, rgba(42,34,16,.95), rgba(16,12,6,.96)); box-shadow: inset 0 0 0 1px rgba(226,182,80,.6), 0 10px 22px -10px rgba(0,0,0,.9);
  animation: puWatchIn .4s cubic-bezier(.2,1.3,.4,1) both; }
.pu-cmsg.bad { color: #ffd0d4; box-shadow: inset 0 0 0 1px rgba(255,107,120,.6), 0 10px 22px -10px rgba(0,0,0,.9); }
.pu-cacts .pu-act:not(.main) { background: linear-gradient(180deg, rgba(42,34,16,.94), rgba(16,12,6,.95)); border-color: rgba(226,182,80,.65); color: #fff3cf;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.9); }
.pu-cacts .pu-act.bad { border-color: rgba(255,120,130,.7); color: #ffd9d9; background: linear-gradient(180deg, rgba(60,18,24,.95), rgba(24,8,10,.96)); }

/* the windows: dark glass with a gold edge; they come in tilting forward, a light runs across once */
.pu-modal { background: radial-gradient(circle at 50% 42%, rgba(12,9,4,.35), rgba(4,4,10,.72)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pm-box { position: relative; padding: 20px 18px 18px; border-radius: 24px; color: #fff3cf;
  background: radial-gradient(120% 70% at 50% 0%, rgba(226,182,80,.2), transparent 60%), linear-gradient(180deg, rgba(44,36,18,.97), rgba(14,11,6,.985));
  border: 1px solid rgba(226,182,80,.72); box-shadow: 0 0 0 4px rgba(226,182,80,.1), 0 40px 90px -24px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,236,190,.22);
  transform: perspective(900px) rotateX(16deg) translateY(28px) scale(.92); opacity: 0; transition: transform .5s cubic-bezier(.2,1.25,.4,1), opacity .25s; }
.pu-modal.on .pm-box { transform: none; opacity: 1; }
.pm-box::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,236,190,.14) 50%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 130% 0; }
.pu-modal.on .pm-box::before { animation: puSweep 1.2s .25s ease-out both; }
@keyframes puSweep { to { background-position: -130% 0; } }
/* closing: it sinks a little and fades away softly (no bounce), and takes no more taps */
.pu-modal.out { transition: opacity .32s ease; pointer-events: none; }
.pu-modal.out .pm-box { transform: translateY(14px) scale(.96); opacity: 0; transition: transform .32s cubic-bezier(.4,0,.6,1), opacity .28s ease; }
.pm-t { margin: 0 0 12px; font-size: 14px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #ffe08a; text-shadow: 0 0 14px rgba(255,216,102,.45); }
.pm-note, .pm-how { color: rgba(255,236,190,.66); }
.pm-owner { color: #fff3cf; }
.pa-high b { text-shadow: 0 0 18px rgba(255,216,102,.5); }

/* a title deed: a cream card with the group's colour on top, the price on a gold badge, the rents with little houses;
   the rent paid now lights up */
.pu-deed { position: relative; width: min(280px, 100%); border-radius: 16px; overflow: hidden; color: #1d1a14; background: linear-gradient(180deg, #fffdf6, #f1e6cc);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 0 4px rgba(255,236,190,.14), 0 22px 40px -14px rgba(0,0,0,.95);
  transform-origin: 50% 0; animation: puDeedIn .65s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes puDeedIn { from { transform: perspective(700px) rotateX(-80deg); opacity: 0; } }
.pu-deed::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0; animation: puSweep 1.1s .55s ease-out both; }
.pd-head { position: relative; padding: 13px 12px 12px; }
.pd-head::before { content: ''; position: absolute; inset: 0 0 50%; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent); pointer-events: none; }
.pd-head b { font-size: 19px; }
.pu-deed.dark .pd-head { background: linear-gradient(180deg, #3a3f52, #1d2030); }
.pd-sign { display: block; width: 26px; height: 26px; margin: 0 auto 4px; }
.pd-sign svg { width: 100%; height: 100%; fill: none; stroke: #ffe08a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255,216,102,.5)); }
.pd-price { display: flex; justify-content: center; padding: 11px 0 4px; }
.pd-price span { display: inline-flex; align-items: center; padding: 5px 16px; border-radius: 999px; font-size: 19px; font-weight: 900; color: #ffe08a;
  background: linear-gradient(180deg, #2c2412, #151008); box-shadow: inset 0 0 0 1px rgba(226,182,80,.75), 0 6px 14px -6px rgba(0,0,0,.6); }
.pu-deed.small .pd-price { padding-bottom: 12px; }
.pd-rows { padding: 6px 12px 8px; font-size: 13px; }
.pd-rows .pd-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 9px;
  animation: puRowIn .4s ease-out both; animation-delay: calc(.35s + var(--k, 0) * 45ms); }
@keyframes puRowIn { from { opacity: 0; transform: translateX(-10px); } }
.pd-rows .pd-r + .pd-r { box-shadow: inset 0 1px 0 rgba(0,0,0,.07); }
.pd-rows .pd-r span { display: flex; align-items: center; gap: 8px; min-width: 0; color: #4d4432; }
.pd-rows .pd-r em { font-style: normal; }
.pd-rows .pd-r b { font-variant-numeric: tabular-nums; color: #1d1a14; }
.pd-rows .pd-r.on { background: linear-gradient(90deg, #ffe9a6, #f6cf55); box-shadow: 0 0 0 1px rgba(160,110,20,.45), 0 6px 14px -8px rgba(160,110,20,.9); }
.pd-rows .pd-r.on span, .pd-rows .pd-r.on b { color: #2a1800; font-weight: 900; }
.pd-hs, .pd-g, .pd-st { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; width: 46px; }
.pd-hs i { width: 9px; height: 9px; background: linear-gradient(160deg, #4ad07f, #17803f); clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); }
.pd-hs i.o { width: 17px; height: 11px; background: linear-gradient(160deg, #ff6b78, #b71f33); clip-path: polygon(0 30%, 50% 0, 100% 30%, 100% 100%, 0 100%); }
.pd-g i { width: 7px; height: 11px; border-radius: 2px; background: var(--gc); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.pd-st i { width: 7px; height: 10px; border-radius: 2px; background: #3a3f52; }
.pd-foot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 2px 12px 12px; }
.pd-foot span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; background: rgba(0,0,0,.055);
  font-size: 10.5px; font-weight: 700; color: #6b5e43; text-align: center; }
.pd-foot b { font-size: 14px; font-weight: 900; color: #1d1a14; }

/* a card drawn (Opportunity, Vault): a dim over the board, the card flips, dark with a gold edge, the deck's colour on top */
.pu-cardfx::before { content: ''; position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(circle, rgba(0,0,0,.25), rgba(0,0,0,.6)); opacity: 0; transition: opacity .4s; }
.pu-cardfx.on::before { opacity: 1; }
.pcf-card { width: 62%; }
.pcf-back, .pcf-front { border-radius: 16px; }
.pcf-back { box-shadow: 0 0 0 1px rgba(255,236,190,.8), 0 0 0 5px rgba(255,236,190,.15), 0 26px 50px -14px rgba(0,0,0,.95), inset 0 0 0 6px rgba(255,255,255,.15); }
.pcf-front { color: #fff3cf; background: radial-gradient(120% 70% at 50% 100%, rgba(226,182,80,.16), transparent 60%), linear-gradient(180deg, #2c2412, #120d06);
  box-shadow: 0 0 0 1px rgba(226,182,80,.85), 0 0 0 5px rgba(226,182,80,.13), 0 30px 60px -14px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,236,190,.25); }
.pcf-front em { padding: 10px 10px 9px; font-size: 12.5px; }
.pcf-front p { color: #fff6dc; font-size: 17px; font-weight: 700; line-height: 1.42; padding: 8px 18px; }
.pcf-front small { color: rgba(255,236,190,.6); }
.pcf-front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,236,190,.2) 50%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 130% 0; }
.pu-cardfx.on .pcf-front::after { animation: puSweep 1.2s .95s ease-out both; }
@media (max-width: 620px) {
  .pcf-card { width: 90%; } .pcf-front p { font-size: 14.5px; padding: 4px 12px; }
  .pu-mid { width: 88%; gap: 8px; }
  .pm-box { padding: 16px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-box, .pu-modal.on .pm-box, .pu-modal.out .pm-box { transition: opacity .2s; transform: none; }
  .pu-deed, .pd-rows .pd-r, .pm-box::before, .pu-deed::after, .pcf-front::after, .pu-mid .pu-rollb { animation: none; }
}

/* ================= an offer made to you: the sentence, what you get / give, you now and after, the warning */
.pm-box.pm-answer { width: min(460px, 100%); }
.po-say { margin: -2px 0 14px; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.4; color: #fff3cf; }
.po-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.po-side { --sc: rgba(127,226,90,.5); --sa: #7fe25a; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px var(--sc); }
.po-side.give { --sc: rgba(255,107,120,.5); --sa: #ff6b78; }
.po-side em { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; font-style: normal; font-size: 11.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sa) 70%, #fff); }
.po-side em b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sa); color: #15120a; font-size: 15px; line-height: 1; }
.po-list { display: flex; flex-direction: column; gap: 6px; }
.po-cash { align-self: flex-start; padding: 5px 12px; border-radius: 999px; font-size: 16px; font-weight: 900; color: #ffe08a; background: rgba(255,224,138,.12); box-shadow: inset 0 0 0 1px rgba(255,224,138,.35); }
.po-sq { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 6px 10px 6px 15px; border-radius: 10px; overflow: hidden; color: #1d1a14;
  background: linear-gradient(180deg, #fffdf6, #efe3c8); box-shadow: 0 4px 10px -6px rgba(0,0,0,.8); }
.po-sq i { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--gc); }
.po-sq b { font-size: 13px; font-weight: 800; line-height: 1.2; } .po-sq small { font-size: 11px; font-weight: 800; color: #6b4d12; }
.po-card { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #ffe08a; background: rgba(255,224,138,.12); }
.po-after { margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(226,182,80,.3); }
.po-after h4 { margin: 0 0 5px; font-size: 10.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,236,190,.6); }
.po-after div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 0; font-size: 13.5px; }
.po-after span { color: rgba(255,236,190,.75); }
.po-after b { font-weight: 900; font-variant-numeric: tabular-nums; color: #fff3cf; white-space: nowrap; }
.po-after b i { margin: 0 7px; font-style: normal; color: rgba(255,236,190,.5); }
.po-after b span.up { color: #9ff07a; } .po-after b span.down { color: #ff9aa4; }
.po-warn { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.po-warn.bad { color: #ffc6cb; background: rgba(255,90,100,.12); box-shadow: inset 0 0 0 1px rgba(255,107,120,.45); }
.po-warn.good { color: #cff8bb; background: rgba(127,226,90,.1); box-shadow: inset 0 0 0 1px rgba(127,226,90,.45); }
@media (max-width: 620px) { .po-sides { grid-template-columns: 1fr; } }

/* ================= an offer between others (or yours, waiting): a panel on the board, then its answer */
.pu-watch { position: absolute; left: 50%; top: 61%; z-index: 74; transform: translateX(-50%); width: min(74%, 440px); pointer-events: none; }
.pu-watch.hidden { display: none; }
.pw-box { padding: 11px 12px 10px; border-radius: 18px; color: #fff3cf;
  background: radial-gradient(120% 70% at 50% 0%, rgba(226,182,80,.18), transparent 60%), linear-gradient(180deg, rgba(42,34,16,.96), rgba(14,11,6,.97));
  border: 1px solid rgba(226,182,80,.7); box-shadow: 0 0 0 3px rgba(226,182,80,.1), 0 22px 44px -16px rgba(0,0,0,.95);
  animation: puWatchIn .45s cubic-bezier(.2,1.3,.4,1) both; transition: border-color .3s, box-shadow .3s; }
@keyframes puWatchIn { from { opacity: 0; transform: translateY(14px) scale(.92); } }
.pw-box h4 { margin: 0 0 9px; text-align: center; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #ffe08a; }
.pw-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
.pw-swap { align-self: center; width: 22px; height: 22px; color: #ffe08a; } .pw-swap svg { width: 100%; height: 100%; }
.pw-side em { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-style: normal; font-size: 11.5px; font-weight: 800; color: color-mix(in srgb, var(--pc) 60%, #fff); }
.pw-side .po-sq { padding: 4px 8px 4px 13px; } .pw-side .po-sq b { font-size: 12px; } .pw-side .po-sq small { font-size: 10px; }
.pw-side .po-cash { font-size: 14px; padding: 4px 10px; }
.pw-state { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 9px 0 0; font-size: 12.5px; font-weight: 800; color: rgba(255,236,190,.8); }
.pw-bar { flex: 1; max-width: 140px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.pw-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e5b13a, #ffe38a); transform-origin: left; }
.pw-state b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; color: #15120a; }
.pu-watch.yes .pw-box { border-color: rgba(127,226,90,.8); box-shadow: 0 0 0 3px rgba(127,226,90,.14), 0 0 26px -6px rgba(127,226,90,.6), 0 22px 44px -16px rgba(0,0,0,.95); }
.pu-watch.yes .pw-state { color: #cff8bb; } .pu-watch.yes .pw-state b { background: #7fe25a; animation: puPop .4s cubic-bezier(.3,1.6,.5,1); }
.pu-watch.no .pw-box { border-color: rgba(255,107,120,.8); box-shadow: 0 0 0 3px rgba(255,107,120,.12), 0 22px 44px -16px rgba(0,0,0,.95); }
.pu-watch.no .pw-state { color: #ffc6cb; } .pu-watch.no .pw-state b { background: #ff6b78; animation: puPop .4s cubic-bezier(.3,1.6,.5,1); }
@media (max-width: 620px) { .pu-watch { width: 92%; top: 56%; } .pw-sides { gap: 5px; } .pw-side .po-sq b { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .pw-box { animation: none; } }

/* ================= the cards drawn (Opportunity, Vault): light rays behind, a framed card that turns, sparks */
.pu-cardfx { perspective: 1100px; }
.pcf-rays { position: absolute; left: 50%; top: 50%; width: 125%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) scale(.3); transition: transform 1s .25s cubic-bezier(.2,1,.3,1), opacity .6s .25s;
  background: repeating-conic-gradient(from 0deg, rgba(255,216,102,.17) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); }
.pu-cardfx.vault .pcf-rays { background: repeating-conic-gradient(from 0deg, rgba(120,195,255,.17) 0 7deg, transparent 7deg 18deg); }
.pu-cardfx.on .pcf-rays { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: puRays 16s linear infinite; }
@keyframes puRays { to { rotate: 360deg; } }
.pcf-card { width: 60%; aspect-ratio: 1.5; }
.pu-cardfx.on .pcf-card { animation: puCardFloat 3.2s 1.2s ease-in-out infinite; }
@keyframes puCardFloat { 50% { translate: 0 -5px; } }
/* the frame: a thin gold line inside the edge with a dot at each corner */
.pcf-orn { position: absolute; inset: 7px; border-radius: 11px; pointer-events: none; border: 1px solid rgba(226,182,80,.55); box-shadow: inset 0 0 0 3px rgba(226,182,80,.07);
  background: radial-gradient(circle, #e2b650 2px, transparent 2.6px) -6px -6px / 12px 12px no-repeat, radial-gradient(circle, #e2b650 2px, transparent 2.6px) calc(100% + 6px) -6px / 12px 12px no-repeat,
    radial-gradient(circle, #e2b650 2px, transparent 2.6px) -6px calc(100% + 6px) / 12px 12px no-repeat, radial-gradient(circle, #e2b650 2px, transparent 2.6px) calc(100% + 6px) calc(100% + 6px) / 12px 12px no-repeat; }
.pcf-back .pcf-orn { border-color: rgba(255,255,255,.55); }
/* the back: the deck's colour with fine stripes, the sign and the deck's name */
.pcf-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 6px, transparent 6px 12px), radial-gradient(circle at 50% 42%, rgba(255,255,255,.3), transparent 60%),
    linear-gradient(145deg, var(--dk1), var(--dk2)); }
.pcf-back b { font-size: 58px; } .pcf-back b svg { width: 58px; height: 58px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pcf-back > i { font-style: normal; font-size: 11.5px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.92); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
/* the front: dark, the frame, a big faint sign behind the text, the deck's badge, the text, who drew it */
.pcf-front { justify-content: space-between; padding: 0; overflow: hidden;
  background: radial-gradient(130% 80% at 50% 0%, color-mix(in srgb, var(--dk1) 24%, transparent), transparent 60%), linear-gradient(180deg, #2a2213, #100c06); }
.pcf-wm { position: absolute; right: -6%; bottom: -14%; width: 52%; aspect-ratio: 1; display: grid; place-items: center; transform: rotate(-12deg); pointer-events: none;
  font: 900 120px/1 'Inter', system-ui, sans-serif; color: var(--dk1); opacity: .09; }
.pcf-wm svg { width: 100%; height: 100%; fill: none; stroke: var(--dk1); stroke-width: 1.6; }
.pcf-front em { position: relative; align-self: center; display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 5px 14px 5px 5px; border-radius: 999px;
  font-size: 11.5px; letter-spacing: .16em; box-shadow: 0 6px 14px -6px var(--dk2), inset 0 1px 0 rgba(255,255,255,.35); }
.pcf-ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 13px; letter-spacing: 0; }
.pcf-ic svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pcf-front p { position: relative; flex: 1; font-size: 17.5px; line-height: 1.42; padding: 6px 24px; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.pcf-front small { position: relative; align-self: center; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 3px 11px 3px 3px; border-radius: 999px;
  background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(226,182,80,.35); color: rgba(255,236,190,.85); font-size: 12px; font-weight: 700; }
.pcf-tok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pc) 35%, #1b1a24), #0b0a10 72%);
  box-shadow: inset 0 0 0 1.5px var(--pc); }
.pcf-tok svg { width: 80%; height: 80%; }
/* sparks when it turns */
.pcf-spark { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.pcf-spark i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffe7a0; box-shadow: 0 0 8px #ffd866; opacity: 0; }
.pu-cardfx.vault .pcf-spark i { background: #d6ecff; box-shadow: 0 0 8px #7cc4ff; }
.pu-cardfx.on .pcf-spark i { animation: puSpark 1.1s .85s ease-out both; }
.pcf-spark i:nth-child(1) { --a: 0deg; --d: 170px; } .pcf-spark i:nth-child(2) { --a: 30deg; --d: 200px; } .pcf-spark i:nth-child(3) { --a: 60deg; --d: 160px; }
.pcf-spark i:nth-child(4) { --a: 90deg; --d: 210px; } .pcf-spark i:nth-child(5) { --a: 120deg; --d: 175px; } .pcf-spark i:nth-child(6) { --a: 150deg; --d: 195px; }
.pcf-spark i:nth-child(7) { --a: 180deg; --d: 165px; } .pcf-spark i:nth-child(8) { --a: 210deg; --d: 205px; } .pcf-spark i:nth-child(9) { --a: 240deg; --d: 170px; }
.pcf-spark i:nth-child(10) { --a: 270deg; --d: 200px; } .pcf-spark i:nth-child(11) { --a: 300deg; --d: 160px; } .pcf-spark i:nth-child(12) { --a: 330deg; --d: 190px; }
@keyframes puSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-40px) scale(1.2); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.3); } }
@media (max-width: 620px) {
  .pcf-card { width: 90%; }
  .pcf-front p { font-size: 15px; padding: 4px 16px; }
  .pcf-front em { margin-top: 12px; } .pcf-front small { margin-bottom: 12px; }
  .pcf-back b { font-size: 44px; } .pcf-back b svg { width: 44px; height: 44px; }
  .pcf-spark i:nth-child(n) { --d: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .pu-cardfx.on .pcf-rays, .pu-cardfx.on .pcf-card, .pu-cardfx.on .pcf-spark i { animation: none; }
  .pcf-spark { display: none; }
}


/* ================= the windows in the colours of the player's own board (the gold of onyx, the cyan of carbon…) */
.pu-modal .pm-box { border-color: color-mix(in srgb, var(--ln) 75%, transparent);
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--ln) 20%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--bd1) 92%, var(--ln) 8%), var(--bd2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ln) 12%, transparent), 0 40px 90px -24px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.14); }
.pu-modal .pm-t { color: var(--ln2); text-shadow: 0 0 14px var(--glow); }

/* ================= buildings anywhere (the bank's stock, the deeds of the players) in the owner's colour */
.pu-bld { display: inline-flex; align-items: flex-end; gap: 1px; }
.pu-bld svg { display: block; height: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.pu-bld .pu-bh { width: 13px; } .pu-bld .pu-bo { width: 22px; }
.pu-bank .pu-bld { --oc: #47c977; align-items: center; gap: 4px; } .pu-bank .pu-bld:last-child { --oc: #e2414f; }
.pu-bank .pu-bld .pu-bh { width: calc(var(--un) * .26); } .pu-bank .pu-bld .pu-bo { width: calc(var(--un) * .42); }
.pu-bank .pu-bld b { font-weight: 900; }
.pu-dc > i .pu-bld .pu-bh { width: 11px; } .pu-dc > i .pu-bld .pu-bo { width: 20px; }

/* ================= the bank: a small classical building; its drawer opens when money goes in or out */
.pu-vault { position: absolute; left: 6%; top: 66%; width: 18%; aspect-ratio: 64 / 56; pointer-events: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.pu-vault svg { width: 100%; height: 100%; display: block; }
.pu-vault .vs-hi { stop-color: color-mix(in srgb, var(--ln) 30%, #f4efe2); } .pu-vault .vs-mid { stop-color: color-mix(in srgb, var(--ln) 55%, #8f8a7c); }
.pu-vault .vs-sh { stop-color: color-mix(in srgb, var(--ln) 45%, #5e5a50); }
.pu-vault .v-tymp { fill: color-mix(in srgb, var(--ln) 40%, #1b1913); opacity: .55; }
.pu-vault .v-ring { fill: none; stroke: #8a5d0c; stroke-width: .5; opacity: .8; }
.pu-vault .v-band { fill: color-mix(in srgb, var(--ln) 45%, #d9d3c3); } .pu-vault .v-dent { fill: color-mix(in srgb, var(--ln) 50%, #57524a); }
.pu-vault .v-arch { fill: color-mix(in srgb, var(--ln) 35%, #c9c2b0); } .pu-vault .v-cap { fill: color-mix(in srgb, var(--ln) 35%, #e6e0d0); }
.pu-vault .v-flute { stroke: rgba(0,0,0,.18); stroke-width: .45; fill: none; }
.pu-vault .v-wall { fill: color-mix(in srgb, var(--ln) 25%, #26231d); }
.pu-vault .v-step.s1 { fill: color-mix(in srgb, var(--ln) 30%, #d8d1bf); } .pu-vault .v-step.s2 { fill: color-mix(in srgb, var(--ln) 35%, #b7b09e); }
.pu-vault .v-step.s3 { fill: color-mix(in srgb, var(--ln) 40%, #948d7c); }
/* the drawer: a slot between the columns; its front (a brass plate, a gold handle) slides out towards you and the
   tray behind shows the coins and a note */
.v-drawer { position: absolute; left: 35.9%; width: 28.1%; top: 50%; height: 21.4%; }
.v-slot { position: absolute; inset: 0; border-radius: 1.5px; overflow: hidden; background: linear-gradient(180deg, #030205, #17141c);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.95), 0 0 0 1px color-mix(in srgb, var(--ln) 55%, transparent); }
.v-tray { position: absolute; inset: 0; opacity: 0; transform: translateY(40%); transition: opacity .25s, transform .4s cubic-bezier(.3,1.4,.5,1); }
.v-tray b { position: absolute; left: 12%; right: 30%; top: 22%; height: 42%; border-radius: 1px; transform: rotate(-6deg);
  background: linear-gradient(135deg, #8fd6a0, #3f9a5c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.v-tray i { position: absolute; top: 38%; width: 26%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c2, #f2c14e 55%, #9c6d12); box-shadow: 0 1px 1px rgba(0,0,0,.6); }
.v-tray i:nth-of-type(1) { left: 44%; } .v-tray i:nth-of-type(2) { left: 62%; top: 30%; } .v-tray i:nth-of-type(3) { left: 30%; top: 50%; }
.v-front { position: absolute; inset: 0; border-radius: 1.5px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ln) 55%, #fff) 0%, color-mix(in srgb, var(--ln) 70%, #6b5a2a) 55%, color-mix(in srgb, var(--ln) 60%, #2a2416) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1.5px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.65);
  transition: transform .4s cubic-bezier(.3,1.4,.5,1), box-shadow .4s; }
.v-front .v-plate { position: absolute; left: 30%; right: 30%; top: 14%; height: 22%; border-radius: 1px; background: linear-gradient(180deg, #fbe7a6, #b98a2a);
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.4); }
.v-front .v-handle { position: absolute; left: 26%; right: 26%; top: 54%; height: 22%; border-radius: 99px; background: linear-gradient(180deg, #fff1bd, #d9a53a 50%, #8a5d0c);
  box-shadow: 0 1px 1px rgba(0,0,0,.55), inset 0 .5px 0 rgba(255,255,255,.8); }
.pu-vault.open .v-front { transform: translateY(78%) scale(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1.5px 0 rgba(0,0,0,.35), 0 3px 4px rgba(0,0,0,.7); }
.pu-vault.open .v-tray { opacity: 1; transform: none; }
.pu-vault.open { animation: puVault .9s ease-out; }
@keyframes puVault { 30% { filter: drop-shadow(0 0 14px var(--glow)) drop-shadow(0 6px 8px rgba(0,0,0,.6)); transform: translateY(-3%); } }

/* ================= a card to Start: the token races round like a comet, leaving sparks */
.pu-tok.comet { z-index: 95 !important; }
.pu-tok.comet .pu-tb { transform: translateY(-30%) scale(1.25); filter: drop-shadow(0 0 6px #ffd866) drop-shadow(0 0 14px #ff8a3d); transition: transform .2s; }
.pu-spark { position: absolute; z-index: 64; width: calc(var(--un) * .22); aspect-ratio: 1; margin: calc(var(--un) * -.11) 0 0 calc(var(--un) * -.11); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6c9, #ffb13d 45%, rgba(255,90,40,0) 72%); animation: puSparkle .7s ease-out forwards; }
@keyframes puSparkle { from { transform: scale(1.4); opacity: 1; } to { transform: scale(.2) translateY(30%); opacity: 0; } }

/* ================= a card's amount, on its own line under the text */
.pcf-amt { position: relative; align-self: center; margin: 2px 0 8px; padding: 5px 14px; border-radius: 999px; font-size: 18px; font-weight: 900; letter-spacing: .02em;
  color: #fff3cf; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,236,190,.35); white-space: nowrap; }
.pcf-amt.good { color: #b9f59a; box-shadow: inset 0 0 0 1px rgba(127,226,90,.55), 0 0 18px -6px rgba(127,226,90,.7); }
.pcf-amt.bad { color: #ffb3ba; box-shadow: inset 0 0 0 1px rgba(255,107,120,.55), 0 0 18px -6px rgba(255,107,120,.6); }
.pcf-amt .pu-c { width: .85em; height: .85em; }

/* ================= a flash: one sign only (the coin itself, or a symbol in a disc) */
.pu-note i.coin { background: none; box-shadow: none; } .pu-note i.coin .pu-c { width: 20px; height: 20px; margin: 0; }

/* ================= the dock: the turn's words and the last roll on one line; it never changes its size */
.pu-dock .turnlbl { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 34px; }
.pu-dock .turnlbl > b { flex: 0 1 auto; min-width: 0; }
.pu-dock .pu-dtools { margin-left: auto; }
.pu-dicebadge { display: inline-flex !important; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 999px; max-width: none !important;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ln) 45%, transparent); color: var(--ln2) !important; animation: puWatchIn .35s cubic-bezier(.2,1.3,.4,1); }
.pu-dicebadge > i { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 18px; height: 18px; padding: 2.5px; box-sizing: border-box; border-radius: 4px;
  background: linear-gradient(150deg, #fffdf8, #e2d6bd); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pu-dicebadge > i i.on { place-self: center; width: 3.2px; height: 3.2px; border-radius: 50%; background: #17151c; padding: 0; box-shadow: none; }
.pu-dicebadge > i i:not(.on) { visibility: hidden; padding: 0; width: 0; height: 0; }
.pu-dicebadge b { font-size: 13px; font-weight: 900; margin-left: 2px; }
@media (min-width: 1101px) { .pu-dock .pu-dtools { margin-left: 0; flex-basis: 100%; } }
/* (2026-10-11) the last roll's badge never moves the bar: its place on the line is always kept (empty or not), it is a
   little smaller than the line, and the words shorten (…) instead of pushing it onto a line of its own */
.pu-dock .turnlbl > b { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-dock .turnlbl > #dockSub { flex: none; display: inline-flex; align-items: center; min-height: 22px; }
.pu-dicebadge { padding: 2px 8px 2px 3px; gap: 3px; }
.pu-dicebadge > i { width: 16px; height: 16px; padding: 2px; }
.pu-dicebadge > i i.on { width: 2.8px; height: 2.8px; }
.pu-dicebadge b { font-size: 12px; line-height: 1; }

/* ================= End turn: the seconds left when it passes by itself */
.pu-endt:empty { display: none; }
.pu-endt { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px; border-radius: 999px; font-style: normal; font-size: 12px;
  background: rgba(42,24,0,.25); }

/* ================= out for missed rolls: a banner that stays over the board */
.pu-benchbar { position: absolute; left: 50%; top: 4%; z-index: 79; transform: translateX(-50%); width: min(84%, 520px); padding: 10px 16px; border-radius: 14px;
  text-align: center; font-size: 13.5px; font-weight: 800; line-height: 1.4; color: #ffd0d4; pointer-events: none;
  background: linear-gradient(180deg, rgba(60,18,24,.94), rgba(24,8,10,.95)); box-shadow: inset 0 0 0 1px rgba(255,107,120,.6), 0 12px 26px -12px rgba(0,0,0,.9); }
.pu-benchbar.hidden { display: none; }

/* ================= my look: the card on the setup, and its window */
.pu-mylook { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px; border-radius: 18px; cursor: pointer; text-align: left; color: #fff;
  border: 1px solid rgba(226,182,80,.45); background: linear-gradient(180deg, rgba(42,34,16,.7), rgba(16,12,6,.75)); transition: border-color .2s, box-shadow .2s; }
.pu-mylook:hover { border-color: #ffe08a; box-shadow: 0 0 18px -6px rgba(255,216,102,.7); }
.pu-mylook .lk-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pu-mylook .lk-t b { font-size: 14.5px; } .pu-mylook .lk-t small { font-size: 12px; color: rgba(255,236,190,.65); }
.pu-mylook .lk-go { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #2a1800; background: linear-gradient(180deg, #ffe38a, #e5a92e); }
.pu-lkpv { position: relative; flex: none; width: 92px; height: 66px; display: block; }
.pu-lkpv .lk-board { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 4px;
  background: var(--ctr); box-shadow: 0 0 0 2px var(--ln), 0 8px 16px -8px rgba(0,0,0,.8); }
.pu-lkpv .lk-band { border-radius: 3px; background: linear-gradient(180deg, var(--c) 0 26%, rgba(255,255,255,.07) 26%); box-shadow: inset 0 0 0 1px var(--sqb); }
.pu-lkpv .lk-logo { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font: 900 9px/1 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ln); }
.pu-lkpv .lk-tok { position: absolute; left: 6px; top: 8px; width: 36px; height: 36px; }
.pu-lkpv .lk-tok .pu-tb { position: absolute; inset: 0; filter: drop-shadow(0 0 2px var(--pc)) drop-shadow(0 3px 2px rgba(0,0,0,.6)); }
.pu-lkpv .lk-tok .pu-tb::before { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, var(--pc), color-mix(in srgb, var(--pc) 40%, #000)); }
.pu-lkpv .lk-dice { position: absolute; right: 6px; top: 10px; display: flex; gap: 4px; width: 42px; }
.pu-lkpv .lk-dice .pu-die { width: 19px; flex: none; }
.pu-lkpv.big { width: 220px; height: 150px; margin: 0 auto; }
.pu-lkpv.big .lk-tok { width: 78px; height: 78px; left: 18px; top: 22px; } .pu-lkpv.big .lk-dice { width: 96px; right: 16px; top: 30px; gap: 10px; }
.pu-lkpv.big .lk-dice .pu-die { width: 40px; } .pu-lkpv.big .lk-logo { font-size: 14px; bottom: 10px; }
.pu-lkpv .pu-f i.on { visibility: hidden; } .pu-lkpv .pu-cube[data-f="5"] .f5 i.on, .pu-lkpv .pu-cube[data-f="2"] .f2 i.on { visibility: visible; }
.pm-box.pm-look { width: min(480px, 100%); }
.lk-live { margin: 0 0 6px; }
.lk-h { margin: 14px 0 7px; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,236,190,.7); }
.lk-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lk-row.lk-cols { grid-template-columns: repeat(8, 1fr); }
.lk-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px 6px; border-radius: 14px; cursor: pointer; color: #fff;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); transition: border-color .2s, box-shadow .2s, transform .12s; }
.lk-tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.35); }
.lk-tile.on { border-color: var(--ln, #e2b650); box-shadow: 0 0 0 1px var(--ln, #e2b650), 0 0 18px -6px var(--glow, rgba(226,182,80,.7)); background: rgba(255,255,255,.08); }
.lk-tile small { font-size: 10.5px; font-weight: 700; color: rgba(255,236,190,.75); text-align: center; line-height: 1.2; }
.lk-sw { display: block; width: 100%; aspect-ratio: 1.5; border-radius: 8px; background: var(--ctr); box-shadow: inset 0 0 0 2px var(--ln); }
.lk-die { display: block; width: 34px; height: 34px; } .lk-die .pu-die { width: 100%; height: 100%; display: block; }
.lk-die .pu-f i.on { visibility: hidden; } .lk-die .pu-cube[data-f="5"] .f5 i.on { visibility: visible; }
.lk-tk { position: relative; display: block; width: 46px; height: 46px; filter: drop-shadow(0 0 2px var(--pc)) drop-shadow(0 3px 3px rgba(0,0,0,.6)); }
.lk-tk svg { width: 100%; height: 100%; }
.lk-col { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 10px -2px var(--c); }
.lk-cols .lk-tile { padding: 8px 2px; }
@media (max-width: 520px) { .lk-row.lk-cols { grid-template-columns: repeat(4, 1fr); } .pu-lkpv.big { width: 190px; height: 130px; } }

/* ================= my streets: one list, by colour; every action with its amount; the goal on top */
.pm-box.pm-manage { width: min(560px, 100%); }
.mg-cash { margin: -4px 0 10px; text-align: center; font-size: 14px; font-weight: 900; color: #ffe08a; }
.mg-goal { display: grid; gap: 5px; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px rgba(255,107,120,.5); }
.mg-goal span { font-size: 13px; font-weight: 700; color: rgba(255,236,190,.85); } .mg-goal b { font-size: 15px; color: #ffb3ba; }
.mg-goal small { font-size: 12px; color: rgba(255,236,190,.65); }
.mg-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.mg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e5b13a, #ffe38a); transition: width .4s ease; }
.mg-goal.ok { grid-template-columns: 1fr auto; align-items: center; box-shadow: inset 0 0 0 1px rgba(127,226,90,.55), 0 0 18px -8px rgba(127,226,90,.7); }
.mg-goal.ok b { color: #b9f59a; }
.mg-list { display: flex; flex-direction: column; gap: 6px; max-height: min(52dvh, 460px); overflow: auto; padding-right: 2px; }
.mg-row { position: relative; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 0; border-radius: 12px;
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.mg-row.mort { opacity: .82; background: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 6px, transparent 6px 12px); }
.mg-c { align-self: stretch; border-radius: 12px 0 0 12px; background: var(--gc); }
.mg-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.mg-n b { font-size: 13.5px; } .mg-n em { font-style: normal; font-size: 11px; font-weight: 800; color: #ffb3ba; }
.mg-btns { display: flex; gap: 5px; }
.mg-b { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px; padding: 5px 8px; border-radius: 10px; cursor: pointer; color: #f4f1ea;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); font: 800 11.5px/1.15 'Inter', system-ui, sans-serif; transition: background .2s, border-color .2s, transform .1s; }
.mg-b small { font-size: 11px; font-weight: 900; }
.mg-b:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); }
.mg-b:active:not(:disabled) { transform: translateY(1px); }
.mg-b:disabled { opacity: .3; cursor: default; }
.mg-b.build { border-color: rgba(127,226,90,.5); } .mg-b.build small { color: #ffb3ba; }
.mg-b.sell small, .mg-b.mort small { color: #b9f59a; } .mg-b.un small { color: #ffb3ba; }
@media (max-width: 560px) { .mg-row { grid-template-columns: 6px minmax(0, 1fr); } .mg-btns { grid-column: 2; } .mg-b { min-width: 0; flex: 1; } }

/* ================= the auction: any amount, or pass */
.pa-own { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 10px; }
.pa-own .pt-money { flex: 0 1 140px; }

/* ================= the end: a compact podium, never longer than the board */
.pu-end { padding: 4%; }
.pu-end .le-box { width: min(92%, 440px); max-height: 92%; overflow: auto; padding: 18px 16px 14px; border-radius: 22px; color: #fff3cf;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--ln) 22%, transparent), transparent 60%), linear-gradient(180deg, rgba(30,26,18,.97), rgba(10,9,6,.98));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ln) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--ln) 12%, transparent), 0 30px 70px -20px rgba(0,0,0,.95);
  animation: puEndIn .6s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes puEndIn { from { transform: translateY(24px) scale(.9); opacity: 0; } }
.pu-end .le-box h3 { margin: 4px 0 6px; text-align: center; font-size: 20px; }
.pu-end .le-crown { display: block; width: 46px; height: 46px; margin: 0 auto; animation: puCrown 2.4s ease-in-out infinite; }
.pu-end .le-crown svg { width: 100%; height: 100%; }
@keyframes puCrown { 50% { transform: translateY(-4px) rotate(-4deg); } }
.pu-end .le-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pu-end .le-row { display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); animation: puRowIn .45s ease-out both; animation-delay: calc(.2s + var(--i, 0) * 90ms); }
.pu-end .le-row.win { background: linear-gradient(90deg, color-mix(in srgb, var(--ln) 28%, transparent), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ln) 60%, transparent); }
.pu-end .le-row.me { box-shadow: inset 0 0 0 1px var(--pc), 0 0 14px -6px var(--pc); }
.pu-end .le-pl { font-size: 18px; font-weight: 900; text-align: center; color: var(--ln2); }
.pu-end .le-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.pu-end .le-av svg { width: 78%; height: 78%; }
.pu-end .le-n { display: flex; flex-direction: column; min-width: 0; font-weight: 800; font-size: 14px; }
.pu-end .le-n small { font-size: 11.5px; font-weight: 700; color: rgba(255,236,190,.6); }
.pu-end .le-row em { font-style: normal; font-weight: 900; font-size: 15px; color: #b9f59a; } .pu-end .le-row em.neg { color: #ffb3ba; }

/* the waiting room: my token and colour; the ones others already took are dimmed with the taker's name */
.pu-room { margin: 4px 0 14px; display: grid; gap: 8px; }
.pu-room .lk-tile small { color: var(--muted); }
.pu-room .lk-tile.taken { cursor: not-allowed; opacity: .38; filter: grayscale(.7); transform: none; border-style: dashed; }
.pu-room .lk-tile.taken small { color: var(--text); }
.pu-room .pm-note { margin: 0; color: var(--muted); }
.pu-room .pm-note.warn { color: var(--gold); font-weight: 700; }
/* the buy window: "buy" a gold bar, the auction under it a dark plate with a gold edge — one above the other, as wide
   as the deed; the words wrap, whatever the language */
.pu-modal .pm-acts.pm-buy { flex-direction: column; align-items: stretch; gap: 9px; width: min(280px, 100%); margin: 14px auto 0; }
.pb-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 46px; padding: 10px 16px;
  border: 0; border-radius: 14px; font: inherit; font-size: 14px; font-weight: 900; letter-spacing: .02em; line-height: 1.2; text-align: center;
  white-space: normal; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform .14s, box-shadow .2s, filter .2s; }
.pb-btn svg.i { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.pb-btn span { min-width: 0; }
/* gold: like a bar of it — light on top, deep underneath, an engraved edge, a gleam passing now and then */
.pb-btn.gold { min-height: 52px; font-size: 15px; color: #2a1c05; text-shadow: 0 1px 0 rgba(255,244,205,.6);
  background: linear-gradient(180deg, #fff1b8 0%, #ffd768 26%, #e8b347 58%, #b9842a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(120,78,14,.55), inset 0 0 0 1px rgba(255,236,170,.5),
    0 0 0 1px rgba(96,62,10,.85), 0 12px 24px -10px rgba(226,170,60,.75), 0 4px 10px -4px rgba(0,0,0,.8); }
.pb-btn.gold::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%) no-repeat; background-size: 260% 100%;
  background-position: 140% 0; animation: pbGleam 3.6s 1s ease-in-out infinite; }
@keyframes pbGleam { 0%, 62% { background-position: 140% 0; } 100% { background-position: -140% 0; } }
.pb-btn.gold:hover { filter: brightness(1.06) saturate(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(120,78,14,.55),
  inset 0 0 0 1px rgba(255,236,170,.5), 0 0 0 1px rgba(96,62,10,.85), 0 14px 30px -10px rgba(255,196,70,.9), 0 4px 10px -4px rgba(0,0,0,.8); }
.pb-btn.gold:disabled { cursor: not-allowed; filter: grayscale(.75) brightness(.7); }
.pb-btn.gold:disabled::after { display: none; }
/* the plate: dark, a fine gold edge and gold letters; it lights up a little under the finger */
.pb-btn.plate { color: #ffe08a; background: linear-gradient(180deg, rgba(58,46,20,.92), rgba(20,15,7,.96));
  box-shadow: inset 0 0 0 1px rgba(226,182,80,.62), inset 0 1px 0 rgba(255,236,190,.16), 0 8px 18px -10px rgba(0,0,0,.9); }
.pb-btn.plate:hover { color: #fff1b8; box-shadow: inset 0 0 0 1px rgba(255,216,102,.9), inset 0 1px 0 rgba(255,236,190,.2), 0 0 18px -4px rgba(226,182,80,.45), 0 8px 18px -10px rgba(0,0,0,.9); }
.pb-btn:active:not(:disabled) { transform: translateY(2px) scale(.99); }
.pb-btn:focus-visible { outline: 2px solid #ffe08a; outline-offset: 3px; }
/* the small gold one: the auction's "bid", beside the amount */
.pb-btn.gold.sm { width: auto; flex: 0 0 auto; min-height: 38px; padding: 8px 18px; border-radius: 12px; font-size: 13.5px; gap: 7px; }
.pb-btn.gold.sm svg.i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .pb-btn.gold::after { animation: none; } }
/* an auction above my cash: the amount and "bid" greyed out, only "pass" left */
.pa-own .pt-money.off { opacity: .4; filter: grayscale(.5); }
.pu-modal .pm-note.warn { color: #ffcf4d; font-weight: 700; }
/* the card's amount: a touch smaller */
.pcf-amt { font-size: 16px; padding: 4px 13px; }
/* "Pay" / "Buy" at the top of my streets' window: dark letters on the gold, easy to read */
.mg-goal .btn-primary { color: #2a1800; text-shadow: none; }
.mg-goal .btn span { color: inherit; font-size: inherit; font-weight: inherit; }      /* (not the box's own cream text) */
.mg-goal .pb-btn span { color: inherit; font-size: inherit; font-weight: inherit; }
/* the buttons in the middle of the board (pay the jail fine, the card): on hover they light up, never turn see-through */
.pu-cacts .pu-act:not(.main):hover:not(:disabled) { background: linear-gradient(180deg, rgba(74,58,22,.97), rgba(30,23,9,.97)); border-color: #ffd866;
  box-shadow: 0 0 18px -6px rgba(255,216,102,.7); }
.pu-cacts .pu-act.bad:hover:not(:disabled) { background: linear-gradient(180deg, rgba(92,26,34,.97), rgba(34,10,13,.97)); border-color: rgba(255,140,150,.9); }
/* a street of mine: its whole colour group in the same window, my cash on top (it moves with every tap) */
.pm-box.pm-deed:has(.pd-grp) { width: min(470px, 100%); }
/* (narrower: the street's name wraps onto two lines rather than run into the buttons; the buttons a little tighter) */
.pd-grp .mg-row { gap: 8px; }
.pd-grp .mg-n b { overflow-wrap: anywhere; line-height: 1.2; }
.pd-grp .mg-btns { gap: 4px; }
.pd-grp .mg-b { min-width: 60px; padding: 5px 6px; }
.pd-grp { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,236,190,.14); }
.pd-grp .mg-cash { margin: 0 0 8px; animation: puCashBump .4s cubic-bezier(.3,1.5,.5,1); }
.pd-grp .mg-list { max-height: none; }
.mg-row.other { opacity: .7; }
.mg-row.other .mg-n em { color: rgba(255,236,190,.7); }
@keyframes puCashBump { 0% { transform: scale(1.12); } 100% { transform: none; } }
/* "my look": in the middle of the screen over the whole page (which does not scroll behind it); the choices scroll
   inside, the title and Save / Close always in sight */
body.pu-lock { overflow: hidden; }
#puLookModal { position: fixed; inset: 0; z-index: 400; }
.pm-box.pm-look { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 32px); }
.pm-look .lk-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px 6px; }
.pm-look > .pm-acts { flex: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,236,190,.12); }
/* the little title deeds on the left: the same houses and hotels as on the board, in the owner's colour, smaller
   (not the gold line icon of the stations and companies) */
.pu-dc > i .pu-bld { display: inline-flex; align-items: flex-end; gap: 1px; }
.pu-dc > i .pu-bld svg { fill: initial; stroke: none; height: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
/* the end, 1: the winner alone — the token big in a ring of the winner's colour, light turning behind it */
.pu-end .le-hero-box { text-align: center; animation: puHeroIn .6s cubic-bezier(.2,1.3,.4,1) both; }
/* (the light turns inside its own circle — its angle moves, not the box — and stays inside the window: nothing to
   scroll, nothing that shakes) */
@property --ra { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.le-hero { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: 18px auto 10px; }
.le-rays { position: absolute; inset: -16%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from var(--ra), color-mix(in srgb, var(--pc) 45%, transparent) 0 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%); mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  animation: puRaysA 14s linear infinite; opacity: .8; }
.pu-end .le-box { overflow-x: hidden; }
.le-ring { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--pc) 35%, #1a1610), #0c0a07 72%);
  box-shadow: inset 0 0 0 3px var(--pc), 0 0 32px -4px var(--pc), inset 0 -10px 22px rgba(0,0,0,.6); }
.le-tok { position: relative; width: 62%; height: 62%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.7)) drop-shadow(0 0 3px var(--pc)); animation: puHeroTok 2.6s ease-in-out infinite; }
.le-tok svg { width: 100%; height: 100%; }
.pu-end .le-hero-box h3 { font-size: 24px; margin: 6px 0 2px; }
.le-worth { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: #ffe08a; }
.le-hero-box:not(.won) .le-rays { opacity: .45; }
@keyframes puRaysA { to { --ra: 360deg; } }
@keyframes puHeroTok { 50% { transform: translateY(-6%) scale(1.04); } }
@keyframes puHeroIn { 0% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: none; } }
/* the end, 2: the standings, each line coming in after the other; small buttons */
.pu-end .le-final { animation: puHeroIn .45s ease-out both; }
.pu-end .le-final .le-row { animation: puRowIn .45s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--i) * .14s + .15s); }
.pu-end .le-final .le-row.win .le-pl { color: #ffd866; text-shadow: 0 0 10px rgba(255,216,102,.7); }
@keyframes puRowIn { from { opacity: 0; transform: translateX(-14px); } }
.le-acts { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.le-b { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 800; color: #ffe7a3; background: rgba(255,255,255,.05); border: 1px solid rgba(255,216,102,.45); transition: background .2s, box-shadow .2s, transform .12s; }
.le-b:hover { background: rgba(255,216,102,.12); box-shadow: 0 0 16px -6px rgba(255,216,102,.8); }
.le-b:active { transform: translateY(1px); }
.le-b.go { color: #2a1800; border: 0; background: linear-gradient(180deg, #ffe7a0, #e2b13c); box-shadow: 0 2px 0 #8a6412; }
.le-b.go:hover { background: linear-gradient(180deg, #fff0bf, #ecbf4c); }
@media (prefers-reduced-motion: reduce) { .le-rays, .le-tok, .pu-end .le-final .le-row, .pu-end .le-hero-box { animation: none; } }
/* the tokens: they face the way they go (turning round at a corner), lean into their jumps, squash as they land, and
   standing still they sway a little each on its own time, as if waiting; out of jail they spring up in gold */
.pu-tb { will-change: transform; }
.pu-tok .pu-tsvg { transform: scaleX(var(--face, 1)); transition: transform .32s cubic-bezier(.3,1.4,.5,1); }
@keyframes puHop {
  0% { transform: scale(1.06, .9); }
  40% { transform: translateY(-58%) rotate(var(--lean, 0deg)) scale(.95, 1.07); }
  75% { transform: translateY(-14%) rotate(calc(var(--lean, 0deg) * .4)) scale(1.02, .98); }
  100% { transform: none; } }
@keyframes puHopSh { 40% { transform: scale(.5); opacity: .45; } }
.pu-tok:not(.turn):not(.hop):not(.land):not(.fly):not(.comet):not(.freed):not(.settle) .pu-tb { animation: puIdle var(--idt, 3.6s) ease-in-out var(--idd, 0s) infinite; }
.pu-tok:not(.turn):not(.hop):not(.land):not(.fly):not(.comet):not(.freed):not(.settle) .pu-tsh { animation: puIdleSh var(--idt, 3.6s) ease-in-out var(--idd, 0s) infinite; }
@keyframes puIdle { 0%, 100% { transform: none; } 30% { transform: translateY(-2.5%) rotate(-2.2deg); } 65% { transform: translateY(-1%) rotate(1.8deg); } }
@keyframes puIdleSh { 30% { transform: scale(.92); opacity: .85; } }
.pu-tok.freed { z-index: 92 !important; }
.pu-tok.freed .pu-tb { animation: puFreed 1s cubic-bezier(.2,1.2,.4,1); }
.pu-tok.freed::after { content: ''; position: absolute; inset: -40%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255,216,102,.95), 0 0 26px 6px rgba(255,216,102,.65); animation: puFreedRing 1s ease-out forwards; }
@keyframes puFreed { 0% { transform: none; } 35% { transform: translateY(-70%) scale(1.25) rotate(-8deg); filter: brightness(1.6); }
  70% { transform: translateY(-10%) scale(.95, 1.05) rotate(4deg); } 100% { transform: none; } }
@keyframes puFreedRing { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pu-tok .pu-tb, .pu-tok .pu-tsh, .pu-tok.freed::after { animation: none !important; } }
/* full screen at the table: no site bar, no footer; the table fills the whole screen and the board grows to it */
body.game-fs[data-page="table"] { --top: 0px; }
body.game-fs[data-page="table"] header.top, body.game-fs[data-page="table"] footer.site-foot { display: none; }
body.game-fs[data-page="table"] .page#table:has(.pu-layout) { max-width: none; margin: 0; padding: 10px 12px; min-height: 100dvh; box-sizing: border-box; }
@media (min-width: 1101px) {
  body.game-fs .t21-layout.pu-layout { --bs: min(calc(100dvh - 20px), calc(100vw - 600px)); }
  body.game-fs .pu-left { top: 10px; }
  body.game-fs .pu-holdp { max-height: calc(100dvh - 20px); }
}
@media (min-width: 1101px) and (max-width: 1360px) { body.game-fs .t21-layout.pu-layout { --bs: min(calc(100dvh - 20px), calc(100vw - 380px)); } }
@media (max-width: 1100px) { body.game-fs .pu-boardbox { width: min(100%, calc(100dvh - 150px)); } }
/* my streets (the window, and a street's colour group): the name on top, under it the buttons side by side, each
   saying what it does and, smaller, what it does to my cash */
.mg-row { grid-template-columns: 6px minmax(0, 1fr); row-gap: 6px; }
.mg-row .mg-btns { grid-column: 2; display: flex; gap: 6px; }
.mg-row .mg-b, .pd-grp .mg-b { flex: 1 1 0; min-width: 0; padding: 6px 6px 5px; }
.mg-b span { font-size: 12px; font-weight: 800; line-height: 1.15; text-align: center; }
.mg-b small { font-size: 10.5px; font-weight: 800; opacity: .95; }
/* the buttons in three equal places on every line: a station or a company (only "Mortgage") has it the same size,
   in the same place as on a street */
.mg-row .mg-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mg-row .mg-b.mort, .mg-row .mg-b.un { grid-column: 3; }
/* ================= full screen: everything on the screen, no scrolling ================= */
body.game-fs .pu-layout { height: 100%; }
@media (min-width: 1101px) {
  /* the board as tall as the screen; the columns beside it the same height: their long lists scroll inside them,
     "Leave the table" always in sight */
  body.game-fs .t21-layout.pu-layout { align-items: stretch; }
  body.game-fs .pu-layout .pu-boardbox { align-self: start; }
  body.game-fs .pu-left { position: static; min-height: 0; display: flex; flex-direction: column; }
  body.game-fs .pu-left .pu-holdp { max-height: 100%; min-height: 0; overflow: auto; }
  body.game-fs .pu-layout > .t21-side { position: static; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  body.game-fs .pu-layout > .t21-side > .panel21 { flex: none; }
  body.game-fs .pu-layout > .t21-side > .panel21:has(.log21) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.game-fs .pu-layout > .t21-side .log21 { flex: 1 1 auto; min-height: 0; max-height: none; }
  body.game-fs .pu-layout > .t21-side > .btn { flex: none; }
}
@media (min-width: 1101px) and (max-width: 1360px) {
  body.game-fs .pu-left .pu-holdp { max-height: 34dvh; }
}
/* one column (tablets, phones): the table fills the first screen — the players above the board, the board as big as
   the room leaves, the buttons and the bar under it; scrolling down, what each player owns (the user's choice: here the
   page may scroll, so that the deeds are there); the side panels are not shown, a small "Leave" is in the bar */
@media (max-width: 1100px) {
  body.game-fs[data-page="table"]:has(.pu-layout) { height: auto; min-height: 100dvh; overflow: visible; }
  body.game-fs[data-page="table"] .page#table:has(.pu-layout) { height: auto; overflow: visible; }
  body.game-fs .t21-layout.pu-layout { display: grid; height: auto; row-gap: 12px; }
  body.game-fs .pu-left { display: block; position: static; }
  body.game-fs .pu-left .pu-holdp { max-height: none; overflow: visible; }
  body.game-fs .pu-layout > .t21-side { display: none; }
  /* (the table as tall as what is in it — no empty space before what each player owns; the board still never taller
     than the screen leaves) */
  body.game-fs .pu-layout > .t21-main { height: auto; display: flex; flex-direction: column; container-type: inline-size; }
  body.game-fs[data-page] .pu-boardbox { flex: none; width: min(100cqw, calc(100dvh - 230px)); }
  body.game-fs .pu-dock .fs-leave { display: inline-flex !important; }
}

/* a "go to Start" card: the token races round, brakes over the last squares and comes down softly onto Start */
.pu-tok.settle { z-index: 92 !important; }
.pu-tok.settle .pu-tb { animation: puSettle .7s cubic-bezier(.2,.8,.25,1); }
@keyframes puSettle { 0% { transform: translateY(-30%) scale(1.25); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pu-tok.settle .pu-tb { animation: none; } }
/* (2026-10-11) the buttons of an offer (accept / refuse, send / close): the game's gold bar and dark plate, side by side */
.pu-modal .pm-acts.pm-two { display: flex; flex-wrap: wrap; gap: 10px; }
.pu-modal .pm-acts.pm-two .pb-btn { flex: 1 1 150px; width: auto; min-height: 48px; }
/* (2026-10-11) leaving: a small icon among the bar's tools (always there), no big button under the panels */
.pu-layout > .t21-side > .btn[data-action="home"] { display: none; }
.pu-tool.pu-leave { width: 34px; padding: 0; }
.pu-tool.pu-leave:hover { color: #ffb3ab; border-color: rgba(255,90,78,.6); box-shadow: 0 0 16px -6px rgba(255,90,78,.7); }
/* a card to a street or a station: the token lifts a little and glides over the squares (no jumps), then sets down */
.pu-tok.glide { z-index: 94 !important; transition: left var(--hop, .08s) linear, top var(--hop, .08s) linear, opacity .4s, rotate .9s cubic-bezier(.45,.05,.2,1); }
.pu-tok.glide .pu-tb { animation: none !important; transform: translateY(-24%) scale(1.14); filter: drop-shadow(0 10px 10px rgba(0,0,0,.35)); transition: transform .22s ease-out; }
.pu-tok.glide .pu-tsh { animation: none !important; transform: scale(1.3); opacity: .55; transition: transform .22s, opacity .22s; }

/* phones: on top the bar (what was rolled, whose turn, the tools) and the two buttons (build or mortgage, offer a deal),
   then the board, then the players with their cash; the same in full screen */
@media (max-width: 620px) {
  .pu-layout > .t21-main > .pu-dock { order: 1; position: static; margin: 0; }
  .pu-layout > .t21-main > .pu-acts { order: 2; }
  .pu-layout > .t21-main > .pu-boardbox { order: 3; }
  .pu-layout > .t21-main > .pu-top { order: 4; }
}
/* ---------- two more boards: wood (a classic wooden board, brass) and neon city (night, neon lights) ---------- */
.pub-wood { --bd1: #3a2614; --bd2: #1a0f06; --sqb: rgba(224,176,112,.45); --ln: #e0b070; --ln2: #fff0d0; --tx: #fbf1e2; --tx2: rgba(251,241,226,.62);
  --ctr: repeating-linear-gradient(91deg, rgba(0,0,0,.16) 0 2px, transparent 2px 9px), repeating-linear-gradient(89deg, rgba(255,220,170,.06) 0 1px, transparent 1px 13px),
    radial-gradient(ellipse at 30% 40%, rgba(255,210,150,.12), transparent 60%), linear-gradient(160deg, #6b4423, #3d2512 60%, #2a190b);
  --frame: linear-gradient(135deg, #5a3a1c, #21130a 50%, #4a2f16); --glow: rgba(224,176,112,.35); }
.pub-neon { --bd1: #0b0716; --bd2: #030208; --sqb: rgba(57,255,136,.4); --ln: #39ff88; --ln2: #d4ffe6; --tx: #eafff2; --tx2: rgba(234,255,242,.6);
  --ctr: linear-gradient(rgba(255,63,180,.12) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(57,255,136,.1) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 50% 110%, rgba(255,63,180,.35), transparent 55%), #07040f;
  --frame: linear-gradient(135deg, #1d1236, #05030b 50%, #12241b); --glow: rgba(57,255,136,.35); }

/* the tokens stand on a round base of their metal, its enamel top in the player's colour (instead of the coloured disc) */
.tk-enamel { fill: var(--pc, #9aa3ae); }
.pu-tb::before, .pu-lkpv .lk-tok .pu-tb::before { display: none; }
/* the look window (2026-10-18): larger, every choice drawn larger */
.pm-box.pm-look { width: min(780px, 100%); padding: 22px 22px 16px; }
.pm-look .lk-row { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.pm-look .lk-row.lk-cols { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.pm-look .lk-tile { gap: 8px; padding: 10px 6px 9px; }
.pm-look .lk-tile small { font-size: 12px; }
.pm-look .lk-die { width: 56px; height: 56px; }
.pm-look .lk-tk { width: 68px; height: 68px; }
.pm-look .lk-live .pu-lkpv.big { zoom: 1.35; }
@media (max-width: 600px) {
  .pm-box.pm-look { padding: 16px 12px 12px; }
  .pm-look .lk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pm-look .lk-row.lk-cols { grid-template-columns: repeat(4, 1fr); }
  .pm-look .lk-live .pu-lkpv.big { zoom: 1.1; }
}

/* the table's rules (Table › Rules): one small tag each, apart — on in green, off struck through (as Biriba and Ludo) */
.br-tag { display: inline-block; margin: 2px 0 2px 4px; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; }
.br-tag.on { background: rgba(127,226,90,.16); color: #b5f58f; }
.br-tag.off { background: rgba(255,255,255,.06); color: var(--muted); text-decoration: line-through; }