html[data-mobile="1"], html[data-mobile="1"] body { overflow: hidden; overscroll-behavior: none; } html[data-mobile="1"].is-view-zoomed body { will-change: transform; } .label-full { display: none !important; } .label-short { display: inline; } body .game-players { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; flex: 0 0 auto; min-width: 0; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; } body .game-players .players-capital { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: min(100%, 640px); } body .game-players .players-capital:empty { display: none; } body.layout-top-toolbar .game { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr); grid-template-areas: "spacer-top" "players" "board" "toolbar" "spacer-bot"; align-items: stretch; justify-content: stretch; width: calc(var(--app-width) - 2 * var(--game-pad)); height: calc(var(--app-height) - 2 * var(--game-pad)); max-width: none; max-height: 100%; container-type: size; row-gap: 0; } body.layout-top-toolbar .game::before, body.layout-top-toolbar .game::after { content: ""; min-height: 0; } body.layout-top-toolbar .game::before { grid-area: spacer-top; } body.layout-top-toolbar .game::after { grid-area: spacer-bot; } body.layout-top-toolbar { --chrome-btn-h: 44px; --player-tile-max: calc(var(--chrome-btn-h) * 2); --players-chrome-max: calc(var(--player-tile-max) + 1.75rem); } body.layout-top-toolbar .game-players { grid-area: players; width: 100%; height: auto; max-height: var(--players-chrome-max); margin: 0 0 var(--board-chrome-gap, 0px); flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 4px; overflow: hidden; } body.layout-top-toolbar .game-players .players-capital { flex: 0 1 auto; position: relative; z-index: 2; min-width: 0; min-height: 0; width: 100%; max-width: none; height: auto; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; overflow: hidden; } body.layout-top-toolbar .game-players .clients-bar { flex: 0 0 auto; position: relative; z-index: 1; align-self: center; width: auto; max-width: 100%; text-align: center; white-space: nowrap; font-size: 0.72rem; line-height: 1.2; } body.layout-top-toolbar .board-stage { grid-area: board; display: flex; flex: unset; min-height: 0; min-width: 0; width: 100%; height: auto; align-items: center; justify-content: center; overflow: hidden; order: unset; } body.layout-top-toolbar .board { flex: 0 0 auto; align-self: center; width: min( 100cqw, calc( ( 100cqh - 2 * var(--board-chrome-gap, 0px) - var(--players-chrome-max) - min(36cqh, 11rem) ) * var(--board-aspect-w) / var(--board-aspect-h) ) ); max-width: 100%; height: auto; aspect-ratio: var(--board-aspect-w) / var(--board-aspect-h); margin: 0 auto; } body.layout-top-toolbar .game-toolbar { grid-area: toolbar; order: unset; flex: unset; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--chrome-btn-h); align-content: start; align-items: stretch; justify-items: stretch; width: 100%; max-height: min(36cqh, 11rem); margin: var(--board-chrome-gap, 0px) 0 0; gap: 4px 6px; padding: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.layout-top-toolbar .game-toolbar > .debug-toggle, body.layout-top-toolbar .game-toolbar > .toolbar-action-btn, body.layout-top-toolbar .game-toolbar > .fullscreen-btn, body.layout-top-toolbar .game-toolbar > .theme-toggle { width: 100%; min-width: 0; height: var(--chrome-btn-h); min-height: var(--chrome-btn-h); max-height: var(--chrome-btn-h); margin: 0; box-sizing: border-box; justify-content: center; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; padding-left: 6px; padding-right: 6px; } body.layout-top-toolbar .game-toolbar > .site-feedback, body.layout-side-toolbar .game-toolbar > .site-feedback { display: contents; } body.layout-top-toolbar .game-toolbar .site-feedback-text, body.layout-top-toolbar .game-toolbar .site-feedback-icons { width: 100%; min-width: 0; max-width: 100%; height: var(--chrome-btn-h); min-height: var(--chrome-btn-h); max-height: var(--chrome-btn-h); margin: 0; box-sizing: border-box; justify-self: stretch; pointer-events: auto; } body.layout-top-toolbar .game-toolbar .site-feedback-text { padding-left: 6px; padding-right: 6px; font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.layout-side-toolbar .game-toolbar .site-feedback-text, body.layout-side-toolbar .game-toolbar .site-feedback-icons { flex: 0 0 auto; width: var(--player-tile-size, 100%); max-width: 100%; min-width: 0; height: var(--chrome-btn-h); min-height: var(--chrome-btn-h); max-height: var(--chrome-btn-h); margin: 0; box-sizing: border-box; pointer-events: auto; } body.layout-side-toolbar .game-toolbar .site-feedback-text { justify-content: center; padding-left: 10px; padding-right: 10px; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.layout-side-toolbar .game-toolbar .site-feedback-icons .site-feedback-link { flex: 1 1 0; width: auto; min-width: 0; height: 100%; justify-content: center; } body.layout-top-toolbar .game-toolbar .site-feedback-icons .site-feedback-link { flex: 1 1 0; width: auto; min-width: 0; height: 100%; margin: 0; justify-content: center; box-sizing: border-box; pointer-events: auto; } body.layout-top-toolbar .game-toolbar > .theme-toggle { --theme-toggle-w: 100%; --theme-toggle-h: var(--chrome-btn-h); height: var(--chrome-btn-h); border-radius: 999px; justify-content: flex-start; padding-left: 7px; padding-right: 6px; } body .dice3d-color-toggle { container-type: inline-size; --dice3d-ctrl-size: min( calc(var(--chrome-btn-h, 36px) * 0.62), calc((100cqi - 3em) / 2.3) ); --dice3d-texture-size: var(--dice3d-ctrl-size); position: relative; gap: 0; justify-content: flex-start; align-items: center; padding: 0 12px 0 9px; box-sizing: border-box; } body.layout-top-toolbar .game-toolbar > .dice3d-color-toggle { justify-content: flex-start; text-align: left; height: var(--chrome-btn-h); min-height: var(--chrome-btn-h); max-height: var(--chrome-btn-h); padding-left: 9px; padding-right: 9px; } body.layout-side-toolbar .game-toolbar > .dice3d-color-toggle { justify-content: space-between; gap: 6px; height: var(--chrome-btn-h); min-height: var(--chrome-btn-h); max-height: var(--chrome-btn-h); padding: 0 10px; } body.layout-side-toolbar .dice3d-color-toggle .dice3d-extras { flex: 0 1 auto; margin-left: 0; justify-content: flex-end; } body .dice3d-color-toggle .dice3d-on-label { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; font: inherit; font-weight: inherit; font-size: inherit; color: inherit; cursor: pointer; opacity: 1; filter: none; transform: none; user-select: none; position: relative; z-index: 1; flex: 0 0 auto; } body .dice3d-color-toggle .dice3d-on-label:hover, body .dice3d-color-toggle .dice3d-on-label:active { transform: none; box-shadow: none; opacity: 1; } body .dice3d-color-toggle .dice3d-extras { position: static; left: auto; top: auto; transform: none; flex: 1 1 auto; min-width: 0; margin-left: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; pointer-events: none; } body .dice3d-color-toggle .dice3d-extras > *, body .dice3d-color-toggle .dice3d-extras .dice3d-texture-btn, body .dice3d-color-toggle .dice3d-extras .dice3d-texture-clear, body .dice3d-color-toggle .dice3d-extras input[type="color"] { pointer-events: auto; } body .dice3d-color-toggle:not(:has(#dice3dToggle:checked)) { opacity: 0.72; filter: saturate(0.82) brightness(0.96); } body .dice3d-color-toggle:not(:has(#dice3dToggle:checked)) input[type="color"]:disabled, body .dice3d-color-toggle:not(:has(#dice3dToggle:checked)) .dice3d-texture-btn:disabled, body .dice3d-color-toggle:not(:has(#dice3dToggle:checked)) .dice3d-texture-clear:disabled, body .dice3d-color-toggle:not(:has(#dice3dToggle:checked)) .dice3d-texture-preview { pointer-events: none; } body .dice3d-color-toggle input[type="color"] { width: var(--dice3d-ctrl-size); height: var(--dice3d-ctrl-size); border-radius: 999px; padding: 0; flex: 0 0 auto; box-sizing: border-box; } body .dice3d-texture-wrap { margin-left: 0; gap: 3px; display: inline-flex; align-items: center; } body .dice3d-texture-btn { position: relative; width: var(--dice3d-texture-size); height: var(--dice3d-texture-size); min-width: var(--dice3d-texture-size); padding: 0; border-radius: 999px; font-size: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 32% 28%, rgba(255, 230, 160, 0.28), transparent 52%), linear-gradient(165deg, rgba(90, 62, 28, 0.95) 0%, rgba(42, 28, 12, 0.98) 100%); border: 1px solid rgba(240, 215, 140, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(180, 130, 40, 0.22), 0 2px 6px rgba(0, 0, 0, 0.35); } body .dice3d-texture-btn::before { content: ''; display: block; width: 72%; height: 72%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='3.2' stroke='%23f0d78c' stroke-width='1.7'/%3E%3Ccircle cx='8.2' cy='8.2' r='1.4' fill='%23f0e6d4'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='%23f0e6d4'/%3E%3Ccircle cx='15.8' cy='15.8' r='1.4' fill='%23f0e6d4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; transform-origin: 50% 55%; animation: dice3d-texture-spin 9s linear infinite, dice3d-texture-toss 2.8s ease-in-out infinite; will-change: transform; } body .dice3d-texture-btn:hover { border-color: rgba(240, 215, 140, 0.85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(220, 170, 60, 0.35), 0 3px 10px rgba(0, 0, 0, 0.4); } body .dice3d-texture-btn:hover::before { animation-duration: 4.5s, 1.6s; } @keyframes dice3d-texture-spin { to { rotate: 360deg; } } @keyframes dice3d-texture-toss { 0%, 62%, 100% { translate: 0 0; scale: 1; } 70% { translate: 0 -18%; scale: 1.08; } 78% { translate: 0 4%; scale: 0.96; } 86% { translate: 0 -6%; scale: 1.03; } } @media (prefers-reduced-motion: reduce) { body .dice3d-texture-btn::before { animation: none; } } body .dice3d-texture-preview { width: var(--dice3d-texture-size); height: var(--dice3d-texture-size); border-radius: 999px; border: 1px solid rgba(240, 215, 140, 0.45); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } body .dice3d-texture-preview[hidden] { display: none !important; } body .dice3d-texture-wrap:has(#dice3dTexturePreview:not([hidden])) .dice3d-texture-btn { display: none; } body .dice3d-texture-clear { width: 16px; height: 16px; min-width: 16px; padding: 0; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; } body .dice3d-texture-clear[hidden] { display: none !important; } body.layout-top-toolbar .fullscreen-btn { display: inline-flex; align-items: center; justify-content: flex-start; } body.layout-top-toolbar .game-toolbar > .debug-toggle, body.layout-top-toolbar .game-toolbar > .fullscreen-btn, body.layout-top-toolbar .game-toolbar > .theme-toggle { justify-content: flex-start; padding-left: 9px; } body.layout-top-toolbar .cell-info-panel { grid-area: board; } body.layout-side-toolbar { --side-panel-min: 5rem; --side-panel-w: max( var(--side-panel-min), calc( ( var(--app-width) - 2 * var(--game-pad) - (var(--app-height) - 2 * var(--game-pad)) * var(--board-aspect-w) / var(--board-aspect-h) ) / 2 ) ); --chrome-btn-h: 2.15rem; } body.layout-side-toolbar .game { display: grid; grid-template-columns: var(--side-panel-w) minmax(0, 1fr) var(--side-panel-w); grid-template-rows: 1fr; grid-template-areas: none; align-items: stretch; justify-content: stretch; width: calc(var(--app-width) - 2 * var(--game-pad)); height: calc(var(--app-height) - 2 * var(--game-pad)); max-width: none; max-height: 100%; container-type: size; column-gap: 0; position: relative; } body.layout-side-toolbar .game-players { grid-column: 1; grid-row: 1; z-index: 28; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; justify-self: stretch; width: 100%; height: 100%; max-height: 100%; overflow-x: hidden; overflow-y: hidden; gap: 6px; padding: 2px 6px 2px 0; box-sizing: border-box; min-height: 0; pointer-events: none; } body.layout-side-toolbar .game-players > * { pointer-events: auto; } body.layout-side-toolbar .game-players .players-capital { flex: 0 1 auto; position: relative; z-index: 2; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-start; max-width: none; width: 100%; min-height: 0; gap: 5px; overflow: hidden; } body.layout-side-toolbar .game-players .clients-bar { flex: 0 0 auto; position: relative; z-index: 1; align-self: flex-end; width: var(--player-tile-size, 100%); max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: min(0.78rem, calc(var(--player-tile-size, 5rem) * 0.155)); line-height: 1.25; } body.layout-side-toolbar .game-players .clients-bar-sep { display: none; } body.layout-side-toolbar .game-players .players-capital-row, body.layout-top-toolbar .game-players .players-capital-row { width: var(--player-tile-size, 100%); height: var(--player-tile-size, auto); min-width: 0; min-height: 0; max-width: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; flex: 0 0 auto; border-radius: 12px; padding: calc(var(--player-tile-size, 5rem) * 0.07) calc(var(--player-tile-size, 5rem) * 0.07) calc(var(--player-tile-size, 5rem) * 0.1); gap: 1px 4px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; overflow: hidden; font-size: clamp(0.5rem, calc(var(--player-tile-size, 5rem) * 0.145), 0.92rem); line-height: 1.15; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; border: 1px solid rgba(55, 32, 14, 0.55); background: linear-gradient(165deg, rgba(255, 245, 220, 0.07), transparent 40%), url('../doc/leather.webp') center / cover; box-shadow: inset 0 0 0 1px rgba(90, 55, 28, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.32); } body.layout-side-toolbar .game-players .players-capital-row::before, body.layout-top-toolbar .game-players .players-capital-row::before { content: ''; position: absolute; inset: 3px; border-radius: 9px; box-sizing: border-box; border: 1.5px dotted rgba(40, 20, 12, 0.72); background: none; box-shadow: none; pointer-events: none; z-index: 0; } html.game-theme-dark body.layout-side-toolbar .game-players .players-capital-row, html.game-theme-dark body.layout-top-toolbar .game-players .players-capital-row { border-color: rgba(180, 200, 240, 0.35); background: var(--ui-action-bg); background-repeat: no-repeat; background-size: auto; background-attachment: scroll; background-blend-mode: normal; transition: border-color 0.35s ease, box-shadow 0.25s ease, color 0.35s ease; animation: monopoly-night-stars-drift 48s linear infinite; box-shadow: inset 0 0 0 1px rgba(120, 140, 180, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.45); color: #e8eef8; } html.game-theme-dark body.layout-side-toolbar .game-players .players-capital-row::before, html.game-theme-dark body.layout-top-toolbar .game-players .players-capital-row::before { border-color: rgba(200, 208, 224, 0.38); background: none; box-shadow: none; } body.layout-top-toolbar .game-players .players-capital-row { max-width: min(100%, var(--player-tile-max)); max-height: var(--player-tile-max); } body.layout-side-toolbar .game-players .players-capital-identity, body.layout-top-toolbar .game-players .players-capital-identity { max-width: 100%; justify-content: center; min-width: 0; flex: 0 0 auto; order: 0; position: relative; z-index: 1; flex-direction: row; align-items: center; gap: 0; } body.layout-side-toolbar .game-players .players-capital-token-row, body.layout-top-toolbar .game-players .players-capital-token-row { order: 1; position: relative; z-index: 1; width: calc(var(--player-tile-size, 5rem) * 0.36); height: calc(var(--player-tile-size, 5rem) * 0.22); max-width: 42%; max-height: 26%; margin: calc(var(--player-tile-size, 5rem) * 0.035) auto; flex: 0 0 auto; align-self: center; font-size: calc(var(--player-tile-size, 5rem) * 0.18); } body.layout-side-toolbar .game-players .players-capital-figure, body.layout-top-toolbar .game-players .players-capital-figure { order: unset; position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; flex: 0 0 auto; align-self: center; font-size: inherit; } body.layout-side-toolbar .game-players .players-capital-deal-btn, body.layout-top-toolbar .game-players .players-capital-deal-btn { left: calc(100% + 1px); top: 50%; width: auto; height: auto; font-size: clamp(0.72rem, calc(var(--player-tile-size, 5rem) * 0.175), 1rem); line-height: 1; padding: 0; } body.layout-side-toolbar .game-players .players-capital-dm, body.layout-top-toolbar .game-players .players-capital-dm { right: calc(100% + 1px); top: 50%; width: auto; height: auto; font-size: clamp(0.72rem, calc(var(--player-tile-size, 5rem) * 0.175), 1rem); line-height: 1; padding: 0; } body.layout-side-toolbar .game-players .players-capital-value, body.layout-top-toolbar .game-players .players-capital-value, body.layout-side-toolbar .game-players .players-capital-net, body.layout-top-toolbar .game-players .players-capital-net, body.layout-side-toolbar .game-players .players-capital-shares, body.layout-top-toolbar .game-players .players-capital-shares { color: #3f2816; text-shadow: 0 1px 0 rgba(255, 248, 230, 0.44), 0 0 1px rgba(42, 26, 10, 0.28); } html.game-theme-dark body.layout-side-toolbar .game-players .players-capital-value, html.game-theme-dark body.layout-top-toolbar .game-players .players-capital-value, html.game-theme-dark body.layout-side-toolbar .game-players .players-capital-net, html.game-theme-dark body.layout-top-toolbar .game-players .players-capital-net, html.game-theme-dark body.layout-side-toolbar .game-players .players-capital-shares, html.game-theme-dark body.layout-top-toolbar .game-players .players-capital-shares { color: #e8eef8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } body.layout-side-toolbar .game-players .players-capital-value, body.layout-top-toolbar .game-players .players-capital-value { flex: 0 0 auto; order: 2; position: relative; z-index: 1; } body.layout-side-toolbar .game-players .players-capital-shares, body.layout-top-toolbar .game-players .players-capital-shares { margin-top: auto; flex: 0 0 auto; order: 3; position: relative; z-index: 1; } body.layout-side-toolbar .game-players .players-capital-net, body.layout-top-toolbar .game-players .players-capital-net { flex: 0 0 auto; order: 4; position: relative; z-index: 1; margin-bottom: 2px; } body.layout-side-toolbar .game-players .players-capital-ban-btn, body.layout-top-toolbar .game-players .players-capital-ban-btn, body.layout-side-toolbar .game-players .players-capital-lose-btn, body.layout-top-toolbar .game-players .players-capital-lose-btn { order: 5; align-self: center; position: relative; z-index: 1; } body.layout-side-toolbar .game-players .players-capital-name, body.layout-top-toolbar .game-players .players-capital-name, body.layout-side-toolbar .game-players .players-capital-name-input, body.layout-top-toolbar .game-players .players-capital-name-input { width: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: clamp(0.56rem, calc(var(--player-tile-size, 5rem) * 0.17), 1rem); font-weight: 800; color: #3f2816; letter-spacing: 0.01em; text-shadow: 0 1px 0 rgba(255, 248, 230, 0.44), 0 0 1px rgba(42, 26, 10, 0.28); } html.game-theme-dark body.layout-side-toolbar .game-players .players-capital-name, html.game-theme-dark body.layout-top-toolbar .game-players .players-capital-name, html.game-theme-dark body.layout-side-toolbar .game-players .players-capital-name-input, html.game-theme-dark body.layout-top-toolbar .game-players .players-capital-name-input { color: #e8eef8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } body.layout-side-toolbar .game-players .players-capital-value, body.layout-top-toolbar .game-players .players-capital-value, body.layout-side-toolbar .game-players .players-capital-net, body.layout-top-toolbar .game-players .players-capital-net, body.layout-side-toolbar .game-players .players-capital-shares, body.layout-top-toolbar .game-players .players-capital-shares { justify-content: center; text-align: center; width: 100%; min-width: 0; flex-shrink: 0; min-height: 1.15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.layout-side-toolbar .game-players .players-capital-net::before, body.layout-top-toolbar .game-players .players-capital-net::before { content: none; margin: 0; } body.layout-side-toolbar .game-players .players-capital-shares, body.layout-top-toolbar .game-players .players-capital-shares { display: inline-flex; margin-top: auto; } body.layout-side-toolbar .game-players .players-capital-shares-spacer, body.layout-top-toolbar .game-players .players-capital-shares-spacer { display: none; } body.layout-side-toolbar .game-players .players-capital.is-money-balance-only .players-capital-shares, body.layout-top-toolbar .game-players .players-capital.is-money-balance-only .players-capital-shares, body.layout-side-toolbar .game-players .players-capital.is-money-balance-only .players-capital-net, body.layout-top-toolbar .game-players .players-capital.is-money-balance-only .players-capital-net, body.layout-side-toolbar .game-players .players-capital-row.is-money-balance-only .players-capital-shares, body.layout-top-toolbar .game-players .players-capital-row.is-money-balance-only .players-capital-shares, body.layout-side-toolbar .game-players .players-capital-row.is-money-balance-only .players-capital-net, body.layout-top-toolbar .game-players .players-capital-row.is-money-balance-only .players-capital-net { display: none !important; } body.layout-side-toolbar .game-players .players-capital-logos, body.layout-top-toolbar .game-players .players-capital-logos { display: none; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; gap: 2px; order: 3; position: relative; z-index: 1; width: 100%; min-height: 0; margin-top: 2px; margin-bottom: 1px; overflow: hidden; pointer-events: none; } body.layout-side-toolbar .game-players .players-capital-row.is-money-balance-only .players-capital-logos, body.layout-top-toolbar .game-players .players-capital-row.is-money-balance-only .players-capital-logos { display: flex; } body.layout-side-toolbar .game-players .players-capital-row.is-money-balance-only.is-tile-tight .players-capital-logos, body.layout-top-toolbar .game-players .players-capital-row.is-money-balance-only.is-tile-tight .players-capital-logos, body.layout-side-toolbar .game-players .players-capital-logos:empty, body.layout-top-toolbar .game-players .players-capital-logos:empty { display: none; } body.layout-side-toolbar .game-players .players-capital-logo, body.layout-top-toolbar .game-players .players-capital-logo { width: var(--player-logo-size, calc(var(--player-tile-size, 5rem) * 0.22)); height: var(--player-logo-size, calc(var(--player-tile-size, 5rem) * 0.22)); object-fit: contain; object-position: center; flex: 0 0 auto; } body.layout-side-toolbar .game-players .players-capital-row.is-tile-tight, body.layout-top-toolbar .game-players .players-capital-row.is-tile-tight { padding-top: calc(var(--player-tile-size, 5rem) * 0.04); padding-bottom: calc(var(--player-tile-size, 5rem) * 0.05); } body.layout-side-toolbar .game-players .players-capital-row.is-tile-tight .players-capital-token-row, body.layout-top-toolbar .game-players .players-capital-row.is-tile-tight .players-capital-token-row { margin-top: 1px; margin-bottom: 1px; } body.layout-side-toolbar .game-players .players-capital-row.is-tile-tight .players-capital-figure, body.layout-top-toolbar .game-players .players-capital-row.is-tile-tight .players-capital-figure { margin-top: 0; margin-bottom: 0; } body.layout-side-toolbar .game-players .players-capital-row.is-tile-tight .players-capital-value, body.layout-top-toolbar .game-players .players-capital-row.is-tile-tight .players-capital-value, body.layout-side-toolbar .game-players .players-capital-row.is-tile-tight .players-capital-name, body.layout-top-toolbar .game-players .players-capital-row.is-tile-tight .players-capital-name { font-size: 0.5rem; } body.layout-side-toolbar .game-players .players-capital-row.is-money-tight .players-capital-value, body.layout-top-toolbar .game-players .players-capital-row.is-money-tight .players-capital-value, body.layout-side-toolbar .game-players .players-capital-row.is-money-tight .players-capital-net, body.layout-top-toolbar .game-players .players-capital-row.is-money-tight .players-capital-net, body.layout-side-toolbar .game-players .players-capital-row.is-money-tight .players-capital-shares, body.layout-top-toolbar .game-players .players-capital-row.is-money-tight .players-capital-shares { font-size: 0.5rem; letter-spacing: 0; } body.layout-side-toolbar .board-stage { grid-column: 2; grid-row: 1; z-index: 0; display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; align-items: center; justify-content: center; overflow: hidden; container-type: size; } body.layout-side-toolbar .board { flex: 0 0 auto; align-self: center; width: min( 100cqw, calc(100cqh * var(--board-aspect-w) / var(--board-aspect-h)) ); max-width: 100%; max-height: 100%; height: auto; aspect-ratio: var(--board-aspect-w) / var(--board-aspect-h); margin: 0; } body.layout-side-toolbar .game-toolbar { grid-column: 3; grid-row: 1; z-index: 28; order: unset; flex: unset; justify-self: stretch; width: 100%; max-width: none; max-height: 100%; margin: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; overflow-x: hidden; overflow-y: auto; gap: 6px; padding: 2px 0 2px 6px; box-sizing: border-box; -webkit-overflow-scrolling: touch; pointer-events: none; } body.layout-side-toolbar .game-toolbar > * { pointer-events: auto; width: var(--player-tile-size, 100%); max-width: 100%; box-sizing: border-box; flex-shrink: 0; } .game-toolbar > .debug-toggle, .game-toolbar > .toolbar-action-btn, .game-toolbar > .fullscreen-btn, .game-toolbar > .theme-toggle, .game-toolbar > .dice3d-color-toggle, .game-toolbar > .board-switch-link, .game-toolbar .site-feedback-text, .game-toolbar .site-feedback-link { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid rgba(55, 32, 14, 0.55); background: linear-gradient(165deg, rgba(255, 245, 220, 0.07), transparent 40%), url('../doc/leather.webp') center / cover; box-shadow: inset 0 0 0 1px rgba(90, 55, 28, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.32); color: #3f2816; text-shadow: 0 1px 0 rgba(255, 248, 230, 0.44), 0 0 1px rgba(42, 26, 10, 0.28); font-weight: 800; } .game-toolbar > .debug-toggle::before, .game-toolbar > .toolbar-action-btn::before, .game-toolbar > .fullscreen-btn::before, .game-toolbar > .theme-toggle::before, .game-toolbar > .dice3d-color-toggle::before, .game-toolbar > .board-switch-link::before, .game-toolbar .site-feedback-text::before, .game-toolbar .site-feedback-link::before { content: ''; position: absolute; inset: 3px; border-radius: 9px; box-sizing: border-box; border: 1.5px dotted rgba(40, 20, 12, 0.72); background: none; box-shadow: none; pointer-events: none; z-index: 0; } .game-toolbar > .debug-toggle > *, .game-toolbar > .fullscreen-btn > *, .game-toolbar > .toolbar-action-btn, .game-toolbar > .fullscreen-btn, .game-toolbar > .theme-toggle > *, .game-toolbar > .dice3d-color-toggle > *, .game-toolbar > .board-switch-link, .game-toolbar .site-feedback-text, .game-toolbar .site-feedback-link { position: relative; z-index: 1; } .game-toolbar .site-feedback-link svg { position: relative; z-index: 1; } .game-toolbar .site-feedback-link.is-wiggle { animation: feedbackLinkWiggle 0.55s ease-in-out; } @keyframes feedbackLinkWiggle { 0%, 100% { transform: translateX(0) rotate(0deg); } 15% { transform: translateX(-3px) rotate(-2deg); } 30% { transform: translateX(3px) rotate(2deg); } 45% { transform: translateX(-2px) rotate(-1.5deg); } 60% { transform: translateX(2px) rotate(1.5deg); } 75% { transform: translateX(-1px) rotate(-0.5deg); } 90% { transform: translateX(1px) rotate(0.5deg); } } @media (prefers-reduced-motion: reduce) { .game-toolbar .site-feedback-link.is-wiggle { animation: none; } } .game-toolbar > .debug-toggle:hover, .game-toolbar > .toolbar-action-btn:hover, .game-toolbar > .fullscreen-btn:hover, .game-toolbar > .theme-toggle:hover, .game-toolbar > .dice3d-color-toggle:hover, .game-toolbar > .board-switch-link:hover, .game-toolbar .site-feedback-text:hover, .game-toolbar .site-feedback-text:focus-visible, .game-toolbar .site-feedback-text[aria-expanded="true"], .game-toolbar .site-feedback-link:hover, .game-toolbar .site-feedback-link:focus-visible { filter: brightness(1.04); box-shadow: inset 0 0 0 1px rgba(90, 55, 28, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 3px 8px rgba(0, 0, 0, 0.36); border-color: rgba(55, 32, 14, 0.65); transform: translateY(-1px); color: #3f2816; outline: none; } .game-toolbar > .debug-toggle:active, .game-toolbar > .toolbar-action-btn:active, .game-toolbar > .fullscreen-btn:active, .game-toolbar > .theme-toggle:active, .game-toolbar > .dice3d-color-toggle:active, .game-toolbar > .board-switch-link:active, .game-toolbar .site-feedback-text:active, .game-toolbar .site-feedback-link:active { transform: translateY(0); filter: brightness(0.98); } .game-toolbar > .debug-toggle input, .game-toolbar > .fullscreen-btn input, .game-toolbar > .theme-toggle input[type="checkbox"], .game-toolbar > .dice3d-color-toggle input[type="checkbox"] { accent-color: #8a6430; } html.game-theme-dark .game-toolbar > .debug-toggle, html.game-theme-dark .game-toolbar > .toolbar-action-btn, html.game-theme-dark .game-toolbar > .fullscreen-btn, html.game-theme-dark .game-toolbar > .theme-toggle, html.game-theme-dark .game-toolbar > .dice3d-color-toggle, html.game-theme-dark .game-toolbar > .board-switch-link, html.game-theme-dark .game-toolbar .site-feedback-text, html.game-theme-dark .game-toolbar .site-feedback-link { border-color: var(--ui-action-border); background: var(--ui-action-bg); background-repeat: no-repeat; background-size: auto; background-attachment: scroll; background-blend-mode: normal; transition: border-color 0.35s ease, box-shadow 0.25s ease, color 0.35s ease, transform 0.2s ease, filter 0.2s ease; animation: monopoly-night-stars-drift 48s linear infinite; box-shadow: var(--ui-action-shadow); color: var(--ui-action-fg); text-shadow: none; font-weight: 600; } html.game-theme-dark .game-toolbar > .debug-toggle:hover, html.game-theme-dark .game-toolbar > .toolbar-action-btn:hover, html.game-theme-dark .game-toolbar > .fullscreen-btn:hover, html.game-theme-dark .game-toolbar > .theme-toggle:hover, html.game-theme-dark .game-toolbar > .dice3d-color-toggle:hover, html.game-theme-dark .game-toolbar > .board-switch-link:hover, html.game-theme-dark .game-toolbar .site-feedback-text:hover, html.game-theme-dark .game-toolbar .site-feedback-text:focus-visible, html.game-theme-dark .game-toolbar .site-feedback-text[aria-expanded="true"], html.game-theme-dark .game-toolbar .site-feedback-link:hover, html.game-theme-dark .game-toolbar .site-feedback-link:focus-visible { filter: none; box-shadow: var(--ui-action-shadow-hover); border-color: var(--ui-action-border); color: var(--ui-action-fg); } html.game-theme-dark .game-toolbar > .debug-toggle:active, html.game-theme-dark .game-toolbar > .toolbar-action-btn:active, html.game-theme-dark .game-toolbar > .fullscreen-btn:active, html.game-theme-dark .game-toolbar > .theme-toggle:active, html.game-theme-dark .game-toolbar > .dice3d-color-toggle:active, html.game-theme-dark .game-toolbar > .board-switch-link:active, html.game-theme-dark .game-toolbar .site-feedback-text:active, html.game-theme-dark .game-toolbar .site-feedback-link:active { filter: none; box-shadow: var(--ui-action-shadow); } html.game-theme-dark .game-toolbar > .debug-toggle input, html.game-theme-dark .game-toolbar > .fullscreen-btn input, html.game-theme-dark .game-toolbar > .theme-toggle input[type="checkbox"], html.game-theme-dark .game-toolbar > .dice3d-color-toggle input[type="checkbox"] { accent-color: #f0d78c; } html.game-theme-dark .game-toolbar > .debug-toggle::before, html.game-theme-dark .game-toolbar > .toolbar-action-btn::before, html.game-theme-dark .game-toolbar > .fullscreen-btn::before, html.game-theme-dark .game-toolbar > .theme-toggle::before, html.game-theme-dark .game-toolbar > .dice3d-color-toggle::before, html.game-theme-dark .game-toolbar > .board-switch-link::before, html.game-theme-dark .game-toolbar .site-feedback-text::before, html.game-theme-dark .game-toolbar .site-feedback-link::before { content: none; display: none; } .game-toolbar > .theme-toggle { border-radius: 12px; } body.layout-top-toolbar .game-toolbar > .theme-toggle { border-radius: 12px; } body.layout-side-toolbar .game-toolbar > .fullscreen-btn, body.layout-side-toolbar .game-toolbar > .toolbar-action-btn, body.layout-side-toolbar .game-toolbar > .debug-toggle, body.layout-side-toolbar .game-toolbar > .theme-toggle, body.layout-side-toolbar .game-toolbar > .board-switch-link { display: inline-flex; align-items: center; font-size: 0.75rem; padding: 0 10px; height: var(--chrome-btn-h); min-height: var(--chrome-btn-h); max-height: var(--chrome-btn-h); overflow: hidden; } body.layout-side-toolbar .toolbar-action-btn { justify-content: center; } body.layout-side-toolbar .theme-toggle { display: flex; align-items: center; justify-content: flex-start; width: var(--player-tile-size, 100%); max-width: 100%; height: var(--chrome-btn-h); --theme-toggle-h: var(--chrome-btn-h); --theme-toggle-w: 100%; --theme-orb: 1rem; padding: 0 6px 0 7px; } body.layout-side-toolbar .cell-info-panel { grid-column: 1 / -1; grid-row: 1; z-index: 40; pointer-events: none; } @media (max-width: 520px) and (orientation: portrait) { body.layout-top-toolbar { --game-pad: 2px; } body.layout-top-toolbar .game-toolbar { gap: 3px 5px; max-height: min(38cqh, 12rem); } body.layout-top-toolbar .game-players { max-height: var(--players-chrome-max); } body.layout-top-toolbar .game-players .clients-bar { font-size: 0.68rem; } } html[data-mobile="1"].mobile-chrome-fs body, html[data-mobile="1"]:fullscreen body, html[data-mobile="1"].portrait-fs-rotate body { --game-pad: 0px; padding: 0 !important; } html[data-mobile="1"].mobile-chrome-fs body .game, html[data-mobile="1"]:fullscreen body .game, html[data-mobile="1"].portrait-fs-rotate body .game, html[data-mobile="1"].mobile-chrome-fs body.layout-side-toolbar .game, html[data-mobile="1"]:fullscreen body.layout-side-toolbar .game, html[data-mobile="1"].portrait-fs-rotate body.layout-side-toolbar .game, html[data-mobile="1"].mobile-chrome-fs body.layout-top-toolbar .game, html[data-mobile="1"]:fullscreen body.layout-top-toolbar .game, html[data-mobile="1"].portrait-fs-rotate body.layout-top-toolbar .game { position: relative !important; display: grid !important; width: var(--app-width) !important; height: var(--app-height) !important; max-width: 100% !important; max-height: 100% !important; grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; grid-template-areas: "board" !important; column-gap: 0 !important; row-gap: 0 !important; } html[data-mobile="1"].mobile-chrome-fs body .board-stage, html[data-mobile="1"]:fullscreen body .board-stage, html[data-mobile="1"].portrait-fs-rotate body .board-stage { grid-area: board !important; display: flex !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; align-items: center; justify-content: center; overflow: hidden !important; container-type: size; } html[data-mobile="1"].mobile-chrome-fs body .board, html[data-mobile="1"]:fullscreen body .board, html[data-mobile="1"].portrait-fs-rotate body .board, html[data-mobile="1"].mobile-chrome-fs body.layout-side-toolbar .board, html[data-mobile="1"]:fullscreen body.layout-side-toolbar .board, html[data-mobile="1"].portrait-fs-rotate body.layout-side-toolbar .board, html[data-mobile="1"].mobile-chrome-fs body.layout-top-toolbar .board, html[data-mobile="1"]:fullscreen body.layout-top-toolbar .board, html[data-mobile="1"].portrait-fs-rotate body.layout-top-toolbar .board { height: 100cqh !important; width: calc(100cqh * var(--board-aspect-w) / var(--board-aspect-h)) !important; max-height: 100cqh !important; max-width: none !important; margin: 0 auto !important; flex: 0 0 auto !important; aspect-ratio: var(--board-aspect-w) / var(--board-aspect-h); } html[data-mobile="1"].mobile-chrome-fs body .game-players, html[data-mobile="1"]:fullscreen body .game-players, html[data-mobile="1"].portrait-fs-rotate body .game-players, html[data-mobile="1"].mobile-chrome-fs body .game-toolbar, html[data-mobile="1"]:fullscreen body .game-toolbar, html[data-mobile="1"].portrait-fs-rotate body .game-toolbar { position: absolute !important; z-index: 28; grid-area: unset !important; max-height: none !important; margin: 0 !important; } html[data-mobile="1"].mobile-chrome-fs body.layout-side-toolbar .game-players, html[data-mobile="1"]:fullscreen body.layout-side-toolbar .game-players, html[data-mobile="1"].portrait-fs-rotate body.layout-side-toolbar .game-players { left: 0; top: 0; bottom: 0; width: min(7.25rem, 17vw); flex-direction: column; flex-wrap: nowrap; align-items: center; overflow-y: auto; padding: 4px; background: linear-gradient( 90deg, rgba(26, 18, 8, 0.72) 0%, rgba(26, 18, 8, 0.35) 70%, transparent 100% ); } html[data-mobile="1"].mobile-chrome-fs body.layout-side-toolbar .game-toolbar, html[data-mobile="1"]:fullscreen body.layout-side-toolbar .game-toolbar, html[data-mobile="1"].portrait-fs-rotate body.layout-side-toolbar .game-toolbar { right: 0; top: 0; bottom: 0; width: min(7.25rem, 17vw); display: flex !important; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 5px; overflow-x: hidden; overflow-y: auto; padding: 4px; background: linear-gradient( 270deg, rgba(26, 18, 8, 0.72) 0%, rgba(26, 18, 8, 0.35) 70%, transparent 100% ); } html[data-mobile="1"].mobile-chrome-fs body.layout-side-toolbar .game-toolbar > *, html[data-mobile="1"]:fullscreen body.layout-side-toolbar .game-toolbar > *, html[data-mobile="1"].portrait-fs-rotate body.layout-side-toolbar .game-toolbar > *, html[data-mobile="1"].mobile-chrome-fs body.layout-side-toolbar .game-toolbar .site-feedback-text, html[data-mobile="1"]:fullscreen body.layout-side-toolbar .game-toolbar .site-feedback-text, html[data-mobile="1"].portrait-fs-rotate body.layout-side-toolbar .game-toolbar .site-feedback-text, html[data-mobile="1"].mobile-chrome-fs body.layout-side-toolbar .game-toolbar .site-feedback-icons, html[data-mobile="1"]:fullscreen body.layout-side-toolbar .game-toolbar .site-feedback-icons, html[data-mobile="1"].portrait-fs-rotate body.layout-side-toolbar .game-toolbar .site-feedback-icons { width: 100%; max-width: 100%; box-sizing: border-box; } html[data-mobile="1"].mobile-chrome-fs body.layout-top-toolbar .game-players, html[data-mobile="1"]:fullscreen body.layout-top-toolbar .game-players, html[data-mobile="1"].portrait-fs-rotate body.layout-top-toolbar .game-players { left: 0; right: 0; top: 0; width: auto; max-height: 28%; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-end; padding: 4px 6px; background: linear-gradient( 180deg, rgba(26, 18, 8, 0.75) 0%, rgba(26, 18, 8, 0.3) 75%, transparent 100% ); } html[data-mobile="1"].mobile-chrome-fs body.layout-top-toolbar .game-players .players-capital, html[data-mobile="1"]:fullscreen body.layout-top-toolbar .game-players .players-capital, html[data-mobile="1"].portrait-fs-rotate body.layout-top-toolbar .game-players .players-capital { width: 100%; flex-direction: row; flex-wrap: nowrap; justify-content: center; } html[data-mobile="1"].mobile-chrome-fs body.layout-top-toolbar .game-players .clients-bar, html[data-mobile="1"]:fullscreen body.layout-top-toolbar .game-players .clients-bar, html[data-mobile="1"].portrait-fs-rotate body.layout-top-toolbar .game-players .clients-bar { width: auto; max-width: 100%; flex: 0 0 auto; align-self: center; text-align: center; } html[data-mobile="1"].mobile-chrome-fs body.layout-top-toolbar .game-toolbar, html[data-mobile="1"]:fullscreen body.layout-top-toolbar .game-toolbar, html[data-mobile="1"].portrait-fs-rotate body.layout-top-toolbar .game-toolbar { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 34%; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(44px, auto); padding: 4px 6px; background: linear-gradient( 0deg, rgba(26, 18, 8, 0.75) 0%, rgba(26, 18, 8, 0.3) 75%, transparent 100% ); }