*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } :root { --wood-dark: #3d2a1a; --wood-mid: #5c3d24; --board-aspect-w: 1117; --board-aspect-h: 759; --game-pad: 8px; --app-height: 100dvh; --app-width: 100vw; --keyboard-shift: 0px; --shares-icon-size: clamp(3.5px, 0.63vw, 9.3px); --shares-icon-gap: clamp(4px, 0.6vw, 10px); --shares-dots-gap: clamp(1px, 0.25vw, 4px); --goldbar-h: calc(var(--shares-icon-size) * 1.25); --goldbar-w: calc(var(--goldbar-h) * 3.3); --game-bg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html.game-theme-dark { --wood-dark: #1a1a1a; --wood-mid: #2e2e2e; } html, body { height: var(--app-height); max-height: var(--app-height); overflow: hidden; overscroll-behavior: none; } body { font-family: system-ui, sans-serif; background: radial-gradient(ellipse at 50% 0%, #4a3520 0%, transparent 60%), linear-gradient(160deg, #1a1208 0%, #2a1c10 40%, #120c06 100%); transition: background-color 0.45s ease, background-image 0.45s ease; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--game-pad); overflow: hidden; position: relative; top: calc(-1 * var(--keyboard-shift, 0px)); } html.game-theme-dark body { background-color: #353535; background-image: radial-gradient(ellipse 80% 55% at 50% 18%, rgba(70, 70, 70, 0.28), transparent 60%), radial-gradient(ellipse 70% 50% at 80% 90%, rgba(28, 28, 28, 0.5), transparent 55%), var(--game-bg-noise); } body > .game-seo { position: absolute !important; left: 0 !important; top: 0 !important; width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; flex: 0 0 0 !important; min-width: 0 !important; pointer-events: none !important; } .game { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; width: min( 100%, calc(var(--app-width) - 2 * var(--game-pad)), 1200px, calc((var(--app-height) - 2 * var(--game-pad) - var(--toolbar-space, 5.5rem)) * var(--board-aspect-w) / var(--board-aspect-h)) ); max-height: 100%; min-height: 0; animation: game-load-fade 0.5s ease-out both; } html.game-layout-pending .game, html.game-layout-pending .bg-leather-corner { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; animation: none !important; } html.game-layout-ready .game { animation: game-load-fade 0.2s ease-out both; } @keyframes game-load-fade { from { opacity: 0; } to { opacity: 1; } } body[data-board-frames="1"]:not(.board-frames-content-ready) #iconFg .frame-scale, body[data-board-frames="1"]:not(.board-frames-content-ready) #iconFg .frame-cell-label { opacity: 0; } body[data-board-frames="1"].board-frames-content-ready #iconFg .frame-scale, body[data-board-frames="1"].board-frames-content-ready #iconFg .frame-cell-label { animation: game-load-fade 0.5s ease-out both; } body[data-board-frames="1"]:not(.board-frames-content-ready) .board-objects, body[data-board-frames="1"]:not(.board-frames-content-ready) #board > .board-btn, body:not([data-board-frames="1"]):not(.board-ui-ready) .board-objects, body:not([data-board-frames="1"]):not(.board-ui-ready) #board > .board-btn { opacity: 0; pointer-events: none; } .is-load-fade { animation: game-load-fade 0.5s ease-out both; } @media (prefers-reduced-motion: reduce) { .game, body[data-board-frames="1"] #iconFg .frame-scale, body[data-board-frames="1"] #iconFg .frame-cell-label, .is-load-fade { animation: none; } } .game-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-bottom: 6px; flex: 0 0 auto; flex-shrink: 0; } .players-capital { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: min(100%, 640px); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } .players-capital:empty { display: none; } .players-capital-row { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 5px 12px 5px 9px; border-radius: 999px; border: 1px solid rgba(70, 45, 22, 0.45); background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), transparent 42%), url('../doc/leather.webp') center / cover; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.28); font-size: 0.82rem; font-weight: 700; color: #f0e6d4; line-height: 1.15; max-width: 100%; box-sizing: border-box; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.25s ease, color 0.35s ease; overflow: hidden; } .players-capital-row.is-turn .players-capital-token { isolation: isolate; } .players-capital-row.is-turn .players-capital-token::after { content: ''; position: absolute; left: 50%; top: 50%; width: 210%; height: 175%; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient( ellipse closest-side at center, rgba(var(--claim-r, 0), var(--claim-g, 0), var(--claim-b, 0), calc(var(--turn-glow, 1.5) * 1)) 0%, rgba(var(--claim-r, 0), var(--claim-g, 0), var(--claim-b, 0), calc(var(--turn-glow, 1.5) * 1)) 34%, rgba(var(--claim-r, 0), var(--claim-g, 0), var(--claim-b, 0), calc(var(--turn-glow, 1.5) * 0.56)) 55%, rgba(var(--claim-r, 0), var(--claim-g, 0), var(--claim-b, 0), calc(var(--turn-glow, 1.5) * 0.16)) 76%, transparent 100% ); pointer-events: none; } html.game-theme-dark .players-capital-row { border-color: rgba(180, 200, 240, 0.35); color: #e8eef8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.45); 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; } @keyframes monopoly-night-stars-drift { 0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 18px -14px, -14px 20px, 12px 22px, -20px -10px, 16px 12px, 6px 4px, 0 0; } } @media (prefers-reduced-motion: reduce) { html.game-theme-dark .players-capital-row, 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 { animation: none; } } .players-capital-identity { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; max-width: 100%; } .players-capital-token-row { position: relative; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; min-width: 0; max-width: 100%; z-index: 1; } .players-capital-figure { --tok-light: #c8c8c8; --tok-mid: #888; --tok-dark: #555; position: relative; flex-shrink: 0; width: 1.15em; height: 1.15em; display: inline-flex; align-items: center; justify-content: center; } .players-capital-wood { display: none !important; } .players-capital-token { --tok-h: 0.5; --tok-cap: 0.36em; --tok-shaft: calc(0.55em * var(--tok-h, 0.5)); position: relative; width: 58%; height: calc(var(--tok-cap) + var(--tok-shaft) + var(--tok-cap) * 0.5); pointer-events: none; opacity: 1; filter: none; } .players-capital-token::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--tok-cap) * 0.45 + var(--tok-shaft) + var(--tok-cap) * 0.2 - var(--tok-cap) * 0.5); height: var(--tok-cap); border-radius: 50%; opacity: 1; background-color: var(--tok-dark); background-image: linear-gradient( 90deg, var(--tok-dark) 0%, var(--tok-mid) 50%, var(--tok-dark) 100% ); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35); z-index: 0; } .players-capital-token-body { position: absolute; left: 0; right: 0; top: calc(var(--tok-cap) * 0.45); height: calc(var(--tok-shaft) + var(--tok-cap) * 0.2); border-radius: 0; opacity: 1; background-color: var(--tok-mid); background-image: linear-gradient( 90deg, var(--tok-dark) 0%, var(--tok-mid) 22%, var(--tok-light) 50%, var(--tok-mid) 78%, var(--tok-dark) 100% ); box-shadow: none; z-index: 1; } .players-capital-token-body::after { content: none; display: none; } .players-capital-token-top { position: absolute; left: 0; right: 0; top: 0; height: var(--tok-cap); border-radius: 50%; opacity: 1; background-color: var(--tok-mid); background-image: radial-gradient( circle at 38% 32%, var(--tok-light) 0%, var(--tok-mid) 58%, var(--tok-dark) 100% ); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 1px 0 rgba(0, 0, 0, 0.2); z-index: 2; } .players-capital-chip { display: none; } .players-capital-row.is-lost-spectator { cursor: help; } .players-capital-row.is-lost-spectator .players-capital-identity, .players-capital-row.is-lost-spectator .players-capital-value, .players-capital-row.is-lost-spectator .players-capital-net, .players-capital-row.is-lost-spectator .players-capital-shares, .players-capital-row.is-lost-spectator .players-capital-logos { opacity: 0.72; } .players-capital-row.is-lost-spectator .players-capital-figure { opacity: 1; filter: saturate(0.7) brightness(0.92); } .players-capital-row.is-lost-spectator .players-capital-value, .players-capital-row.is-lost-spectator .players-capital-net, .players-capital-row.is-lost-spectator .players-capital-shares-value { cursor: inherit; } .players-capital-name { opacity: 1; min-width: 0.75em; font-weight: 800; 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 .players-capital-name { color: #e8eef8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } .players-capital-name-input { width: 5.5em; max-width: 9em; padding: 0 4px; border-radius: 999px; border: 1px solid transparent; background: rgba(0, 0, 0, 0.12); color: #3f2816; font: inherit; font-weight: 800; text-shadow: 0 1px 0 rgba(255, 248, 230, 0.44), 0 0 1px rgba(42, 26, 10, 0.28); opacity: 1; outline: none; } .players-capital-name-input:hover { border-color: rgba(255, 255, 255, 0.35); } .players-capital-name-input:focus { border-color: rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.28); } .players-capital-row[data-capital-tip="capital"], .players-capital-row[data-capital-tip="loss"] { cursor: help; } .players-capital-value, .players-capital-net, .players-capital-shares-value { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .players-capital-net { opacity: 0.72; white-space: nowrap; flex: 0 1 auto; min-width: 0; } .players-capital-net::before { content: '/'; margin-right: 0.35em; opacity: 0.55; } .players-capital-shares { display: none; align-items: center; gap: 6px; min-width: 0; opacity: 0.72; white-space: nowrap; } .players-capital-shares-spacer { width: 0.7em; height: 0.7em; flex-shrink: 0; visibility: hidden; } .players-capital-logos { display: none; } .players-capital-row.is-capital-wrapped { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; row-gap: 1px; align-items: baseline; } .players-capital-row.is-capital-wrapped .players-capital-token-row, .players-capital-row.is-capital-wrapped .players-capital-figure { grid-column: 1; grid-row: 1 / span 2; align-self: center; } .players-capital-row.is-capital-wrapped .players-capital-identity { grid-column: 2; grid-row: 1; } .players-capital-row.is-capital-wrapped .players-capital-value { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; } .players-capital-row.is-capital-wrapped .players-capital-shares { display: inline-flex; grid-column: 2; grid-row: 2; } .players-capital-row.is-capital-wrapped .players-capital-net { grid-column: 3; grid-row: 2; justify-self: end; text-align: right; flex: none; } .players-capital-row.is-capital-wrapped .players-capital-net::before { content: none; margin: 0; } .players-capital-row.is-capital-wrapped .players-capital-ban-btn, .players-capital-row.is-capital-wrapped .players-capital-lose-btn { grid-column: 4; grid-row: 1 / span 2; align-self: center; } .players-capital-ban-btn { flex-shrink: 0; padding: 0 5px; border-radius: 4px; border: 1px solid rgba(200, 80, 80, 0.55); background: rgba(120, 30, 30, 0.55); color: #ffb8b8; font: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer; line-height: 1.2; } .players-capital-ban-btn:hover:not(:disabled) { background: rgba(160, 40, 40, 0.75); } .players-capital-ban-btn:disabled { opacity: 0.45; cursor: default; } .players-capital-row.is-banned .players-capital-name { opacity: 0.55; } .players-capital-lose-btn { flex-shrink: 0; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid rgba(200, 80, 80, 0.65); background: rgba(120, 30, 30, 0.55); color: #ffb8b8; font: inherit; font-size: 0.7rem; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .players-capital-lose-btn:hover:not(:disabled) { background: rgba(160, 40, 40, 0.8); } .players-capital-lose-btn:disabled { opacity: 0.45; cursor: default; } .players-capital-deal-btn { position: absolute; left: calc(100% + 1px); top: 50%; transform: translateY(-50%); z-index: 2; margin: 0; padding: 0; width: auto; height: auto; border: none; border-radius: 0; background: transparent; color: inherit; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 0.82em; font-weight: 400; line-height: 1; letter-spacing: 0; display: block; cursor: pointer; text-shadow: none; box-shadow: none; filter: none; } .players-capital-deal-btn:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); } .players-capital-deal-btn:active:not(:disabled) { transform: translateY(-50%) scale(0.96); } .players-capital-deal-btn:disabled { opacity: 0.45; cursor: default; } .players-capital-deal-btn[hidden] { display: none !important; } .players-capital-row.is-lost-spectator .players-capital-deal-btn { display: none !important; } .players-capital-dm { position: absolute; right: calc(100% + 1px); top: 50%; transform: translateY(-50%); z-index: 3; margin: 0; padding: 0; border: none; border-radius: 0; background: transparent; color: inherit; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-size: 0.95em; font-weight: 400; line-height: 1; letter-spacing: 0; display: block; cursor: pointer; text-shadow: none; box-shadow: none; filter: none; -webkit-user-select: none; user-select: none; } .players-capital-dm:hover { transform: translateY(-50%) scale(1.08); } .players-capital-dm:active { transform: translateY(-50%) scale(0.94); } .players-capital-dm.is-open { filter: drop-shadow(0 0 3px rgba(255, 196, 64, 0.95)); } .players-capital-dm-icon { position: relative; display: block; width: 1.15em; height: calc(1.15em * 18 / 24); overflow: visible; } .players-capital-dm-glyph { display: block; width: 100%; height: 100%; overflow: visible; } .players-capital-dm-dot { position: absolute; left: calc(23 / 24 * 100%); top: calc(3 / 18 * 100%); width: 0.42em; height: 0.42em; margin: 0; padding: 0; border: none; border-radius: 50%; background: #e10600; transform: translate(-50%, -50%); pointer-events: none; } .players-capital-dm-dot[hidden] { display: none !important; } body:not(.layout-side-toolbar):not(.layout-top-toolbar) .players-capital-token-row:has(.players-capital-dm) { margin-left: 1.35em; } .debug-toggle input[type="color"] { width: 22px; height: 18px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(0, 0, 0, 0.2); cursor: pointer; } .debug-toggle input[type="color"]:disabled { opacity: 0.45; cursor: default; } .dice3d-texture-wrap { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; } .dice3d-texture-btn, .dice3d-texture-clear { font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--ui-chip-fg); background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 2px 8px; cursor: pointer; line-height: 1.2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .dice3d-texture-btn:hover, .dice3d-texture-clear:hover { background: rgba(0, 0, 0, 0.34); } .dice3d-texture-btn:disabled, .dice3d-texture-clear:disabled { opacity: 0.45; cursor: default; } .dice3d-texture-preview { width: 20px; height: 20px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(0, 0, 0, 0.25); } .dice3d-texture-clear { padding: 1px 7px; font-size: 0.95rem; line-height: 1; } .billing-pay-host { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, 82%); height: min(640px, 88%); z-index: 220; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; border-radius: 12px; pointer-events: auto; box-shadow: 0 10px 36px rgba(0, 0, 0, 0.45); } .billing-pay-host[hidden] { display: none !important; } .billing-pay-frame { position: absolute; inset: 0; overflow: auto; border-radius: 12px; background: transparent; } .billing-pay-host iframe { display: block; width: 100% !important; height: 100% !important; border: 0; background: transparent !important; border-radius: 12px; } .billing-pay-close { position: absolute; top: -10px; right: -10px; z-index: 2; width: 32px; height: 32px; margin: 0; padding: 0; border: 1px solid rgba(240, 215, 140, 0.55); border-radius: 999px; background: rgba(18, 12, 6, 0.92); color: #f5e6c8; font-size: 1.25rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } .billing-pay-close:hover { background: rgba(40, 28, 14, 0.96); color: #fff; } .debug-toggle input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } .debug-toggle input[type="color"]::-webkit-color-swatch { border: none; border-radius: 999px; } .debug-toggle input[type="color"]::-moz-color-swatch { border: none; border-radius: 999px; } .clients-bar { text-align: center; font-size: 0.85rem; color: #c9b08a; letter-spacing: 0.03em; } html.game-theme-dark .clients-bar { color: #b8c0d0; } .clients-bar-part { white-space: nowrap; } .board-switch-link { font-size: 0.82rem; text-decoration: none; padding: 5px 12px; } .fullscreen-btn, .toolbar-action-btn { font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: none; padding: 5px 12px; white-space: nowrap; overflow: visible; box-sizing: border-box; } .fullscreen-btn { display: none; align-items: center; justify-content: flex-start; gap: 7px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .fullscreen-btn input { margin: 0; align-self: center; } #fullscreenBtnLabel { display: inline-flex; align-items: center; line-height: 1.15; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .fullscreen-btn[hidden] { display: none !important; } body.layout-top-toolbar .fullscreen-btn { display: inline-flex; } .toolbar-action-btn { display: inline-block; } .debug-toggle[hidden], .toolbar-action-btn[hidden] { display: none !important; } body.is-board-observer #paidFieldBtn, body.is-board-observer #autoPayToggleLabel, body.is-board-observer #autoAuctionToggleLabel, body.is-board-observer #lossBtn, body.is-board-observer #lossToolbarBtn:not([data-label="Лобби"]) { display: none !important; } .toolbar-action-btn:disabled { opacity: 0.45; cursor: default; transform: none; } .cell-message-panel { margin-bottom: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--wood-mid); background: rgba(26, 18, 8, 0.92); } .cell-message-label { display: block; margin-bottom: 6px; font-size: 0.8rem; color: #c9b08a; } .cell-message-input { width: 100%; min-height: 3.2em; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--wood-mid); background: #120c06; color: #f5e6c8; font-family: inherit; font-size: 0.9rem; line-height: 1.35; resize: vertical; } .cell-message-input:focus { outline: none; border-color: #2d8f4e; box-shadow: 0 0 0 2px rgba(45, 143, 78, 0.25); } .cell-message-input::placeholder { color: #7a6a52; } .board-stage { display: contents; } .board { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: var(--board-aspect-w) / var(--board-aspect-h); height: auto; align-self: center; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 3px var(--wood-mid), 0 0 0 6px var(--wood-dark), 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 80px rgba(212, 168, 75, 0.08); transition: box-shadow 0.45s ease; } html.game-theme-dark .board { box-shadow: 0 0 0 3px var(--wood-mid), 0 0 0 6px var(--wood-dark), 0 20px 60px rgba(0, 0, 0, 0.72), 0 0 64px rgba(0, 0, 0, 0.35); } @media (prefers-reduced-motion: reduce) { body, .board { transition: none !important; } } .cell-balances { position: absolute; inset: 0; z-index: 8; pointer-events: none; } .cell-debug-layer { position: absolute; inset: 0; z-index: 9; pointer-events: none; } .board.debug-mode { cursor: crosshair; } .cell-debug-label { position: absolute; transform: translate(-50%, -50%); min-width: 1.35em; padding: 0.12em 0.28em; border-radius: 4px; background: rgba(20, 12, 6, 0.82); border: 1px solid rgba(240, 215, 140, 0.75); color: #f0d78c; font-family: inherit; font-size: clamp(9px, 0.95vw, 12px); font-weight: 800; line-height: 1.1; text-align: center; pointer-events: auto; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); appearance: none; } .cell-debug-label:hover { background: rgba(45, 143, 78, 0.92); border-color: #fff; color: #fff; } .cell-balance-board { position: absolute; transform: translate(-50%, -50%); min-width: 7.5%; padding: 0.25em 0.35em; display: flex; flex-direction: column; gap: 0.15em; background: rgba(255, 252, 235, 0.92); border: 1px solid rgba(42, 26, 10, 0.35); border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .cell-balance-row { display: flex; align-items: center; gap: 0.3em; font-size: clamp(0.45rem, 0.85vw, 0.68rem); font-weight: 700; color: #2a1a0a; line-height: 1.1; white-space: nowrap; } .cell-balance-chip { width: 0.55em; height: 0.55em; border-radius: 50%; flex-shrink: 0; } .cell-balance-name { opacity: 0.75; min-width: 0.8em; } .cell-balance-value { font-variant-numeric: tabular-nums; } .board-objects { position: absolute; inset: 0; z-index: 15; pointer-events: none; } .board-object { position: absolute; overflow: hidden; pointer-events: none; } .board-object-message { pointer-events: auto; } .board-message-composer { display: flex; align-items: center; gap: 5px; width: 100%; height: 100%; padding: 4px 5px 4px 8px; box-sizing: border-box; border-radius: 10px; background: linear-gradient(165deg, rgba(255, 250, 236, 0.96) 0%, rgba(236, 214, 176, 0.94) 55%, rgba(220, 192, 148, 0.92) 100%); border: 1px solid rgba(92, 58, 28, 0.38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(90, 55, 25, 0.12), 0 2px 6px rgba(30, 18, 8, 0.22); transition: background 0.45s ease, border-color 0.35s ease, box-shadow 0.35s ease; } html.game-theme-dark .board-message-composer { border-color: rgba(0, 0, 0, 0.5); background: linear-gradient( 165deg, rgba(86, 80, 74, 0.96) 0%, rgba(52, 48, 44, 0.95) 55%, rgba(30, 28, 26, 0.94) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.48); } html.game-theme-dark .board-message-input { color: #ebe4d8; caret-color: #ebe4d8; } html.game-theme-dark .board-message-input::placeholder { color: #9a9084; } html.game-theme-dark .board-message-input::-webkit-scrollbar-thumb { background: rgba(210, 205, 195, 0.28); } html.game-theme-dark .board-message-bot-chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #ebe4d8; } html.game-theme-dark .board-message-bot-chip-clear { color: #c8bfb2; } html.game-theme-dark .board-message-bot-chip-clear:hover { background: rgba(255, 255, 255, 0.1); } html.game-theme-dark .board-message-mic:not(.is-listening):not(.is-voice) { border-color: rgba(0, 0, 0, 0.45); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 55%), linear-gradient(160deg, #6a6460 0%, #3a3632 100%); color: #ebe4d8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.4); } .board-message-bot-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; max-width: 42%; min-width: 0; height: 1.35em; padding: 0 2px 0 6px; border-radius: 999px; background: rgba(92, 58, 28, 0.14); border: 1px solid rgba(92, 58, 28, 0.28); color: #3a2410; box-sizing: border-box; } .board-message-bot-chip[hidden] { display: none !important; } .board-message-bot-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: clamp(8px, 0.85vw, 12px); font-weight: 600; line-height: 1.2; } .board-message-bot-chip-clear { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin: 0; padding: 0; border: none; border-radius: 50%; background: transparent; color: #5c3a1c; font-size: clamp(11px, 1.05vw, 14px); line-height: 1; cursor: pointer; opacity: 0.75; } .board-message-bot-chip-clear:hover { opacity: 1; background: rgba(92, 58, 28, 0.12); } .board-message-input { flex: 1 1 auto; width: auto; min-width: 0; height: 1.35em; max-height: 1.35em; padding: 0 4px; border: none; border-radius: 0; background: transparent; color: #2a1a0a; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: clamp(9px, 0.95vw, 13px); line-height: 1.35; resize: none; outline: none; box-sizing: border-box; pointer-events: auto; appearance: none; -webkit-appearance: none; overflow-x: hidden; overflow-y: auto; white-space: pre-wrap; word-break: break-word; scrollbar-width: thin; -ms-overflow-style: auto; } .board-message-input::-webkit-scrollbar { width: 4px; } .board-message-input::-webkit-scrollbar-thumb { background: rgba(92, 58, 28, 0.35); border-radius: 2px; } .board-message-input::-webkit-resizer { display: none; } .board-message-input:focus { background: transparent; box-shadow: none; outline: none; } .board-message-input::placeholder { color: #8a7358; font-size: clamp(8px, 0.85vw, 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-auction-composer { display: flex; flex-wrap: wrap; align-items: stretch; gap: 5px; row-gap: 6px; width: 100%; height: auto; min-height: 100%; padding: 0; box-sizing: border-box; border-radius: 0; background: transparent; border: none; box-shadow: none; pointer-events: auto; } .board-auction-break { flex: 1 1 100%; width: 100%; height: 0; margin: 0; padding: 0; } .board-deal-amount-group { display: flex; flex-direction: column; flex: 1 1 11em; align-items: stretch; justify-content: center; gap: 3px; min-width: 8.5em; max-width: 16em; height: auto; position: relative; z-index: 2; pointer-events: auto; } .board-deal-amount-row { display: flex; flex: 0 0 auto; align-items: stretch; gap: 5px; min-height: var(--board-action-btn-height, clamp(22px, 2.4vw, 32px)); } .board-deal-amount-row .board-auction-input, .board-deal-amount-input { flex: 1 1 auto; min-width: 5.5ch; width: auto; } input.board-deal-amount-slider { display: block; width: 100%; height: 28px; margin: 0 2px; padding: 0; border: none; background: transparent; accent-color: var(--ui-action-bg, #8a5a2b); touch-action: none; cursor: pointer; -webkit-appearance: none; appearance: none; position: relative; z-index: 2; pointer-events: auto; } input.board-deal-amount-slider:disabled { opacity: 0.45; cursor: default; } input.board-deal-amount-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(180deg, rgba(70, 45, 22, 0.22), rgba(40, 24, 10, 0.28)); } input.board-deal-amount-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; border: 1px solid rgba(255, 244, 220, 0.65); background: var(--ui-action-bg, #8a5a2b); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); cursor: pointer; position: relative; } input.board-deal-amount-slider::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(180deg, rgba(70, 45, 22, 0.22), rgba(40, 24, 10, 0.28)); } input.board-deal-amount-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 244, 220, 0.65); background: var(--ui-action-bg, #8a5a2b); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); cursor: pointer; } html.game-theme-dark input.board-deal-amount-slider::-webkit-slider-runnable-track, html.game-theme-dark input.board-deal-amount-slider::-moz-range-track { background: linear-gradient(180deg, rgba(180, 200, 240, 0.18), rgba(40, 50, 80, 0.45)); } .board-deal-action-group { display: flex; flex: 1 1 auto; align-items: stretch; gap: 5px; height: auto; min-height: var(--board-action-btn-height, clamp(22px, 2.4vw, 32px)); min-width: 0; } .board-auction-step { flex: 0 0 auto; align-self: center; width: var(--board-action-btn-height, clamp(22px, 2.4vw, 32px)); height: var(--board-action-btn-height, clamp(22px, 2.4vw, 32px)); padding: 0; border: 1px solid var(--ui-action-border, rgba(90, 55, 25, 0.28)); border-radius: 50%; background: var(--ui-action-bg); color: var(--ui-action-fg, #fff4e4); font: inherit; font-size: clamp(14px, 1.6vw, 20px); font-weight: 800; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--ui-action-shadow); transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.25s ease; } .board-auction-step:hover:not(:disabled) { filter: brightness(1.06); } .board-auction-step:disabled { opacity: 0.45; cursor: default; } .board-auction-composer .board-auction-input { flex: 0 0 auto; width: 9ch; min-width: 9ch; max-width: none; } .board-auction-input { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; padding: 2px 8px; border: 1px solid rgba(92, 58, 28, 0.38); border-radius: 10px; background: linear-gradient(165deg, rgba(255, 250, 236, 0.96) 0%, rgba(236, 214, 176, 0.94) 55%, rgba(220, 192, 148, 0.92) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(90, 55, 25, 0.12), 0 2px 6px rgba(30, 18, 8, 0.22); color: #2a1a0a; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: clamp(11px, 1.15vw, 15px); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; text-align: center; outline: none; box-sizing: border-box; appearance: textfield; -moz-appearance: textfield; } .board-auction-input::-webkit-outer-spin-button, .board-auction-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .board-auction-input:focus { outline: none; border-color: rgba(90, 55, 25, 0.55); } .board-auction-input:disabled { opacity: 0.7; } .board-auction-action { flex: 1 1 0; align-self: center; min-width: 0; height: var(--board-action-btn-height, clamp(22px, 2.4vw, 32px)); padding: 0 6px; border-radius: 8px; border: 1px solid var(--ui-action-border, rgba(90, 55, 25, 0.35)); font: inherit; font-size: clamp(9px, 0.95vw, 12px); font-weight: 800; cursor: pointer; white-space: nowrap; overflow: visible; box-sizing: border-box; color: var(--ui-action-fg, #fff4e4); background: var(--ui-action-bg); box-shadow: var(--ui-action-shadow); transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.25s ease, filter 0.15s ease; } .board-auction-bid-btn, .board-auction-pass-btn { color: var(--ui-action-fg, #fff4e4); background: var(--ui-action-bg); } .board-auction-action:hover:not(:disabled) { filter: brightness(1.08); } .board-auction-action:disabled { opacity: 0.45; cursor: default; } .board-deal-composer { display: flex; align-items: stretch; gap: 5px; width: 100%; height: auto; min-height: 100%; padding: 0; box-sizing: border-box; border-radius: 0; background: transparent; border: none; box-shadow: none; pointer-events: auto; } .board-deal-select { position: relative; flex: 1 1 9em; max-width: 46%; min-width: 7em; font-size: clamp(10px, 1.05vw, 13px); z-index: 6; } .board-deal-select-trigger { display: flex; align-items: center; gap: 0.35em; width: 100%; height: 100%; min-height: var(--board-action-btn-height, clamp(22px, 2.4vw, 32px)); padding: 2px 6px; border: 1px solid rgba(92, 58, 28, 0.38); border-radius: 10px; background: linear-gradient(165deg, rgba(255, 250, 236, 0.96) 0%, rgba(236, 214, 176, 0.94) 55%, rgba(220, 192, 148, 0.92) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(90, 55, 25, 0.12), 0 2px 6px rgba(30, 18, 8, 0.22); color: #2a1a0a; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: inherit; font-weight: 700; text-align: left; cursor: pointer; outline: none; } .board-deal-select-trigger:disabled { opacity: 0.7; cursor: default; } .board-deal-select-trigger:focus { border-color: rgba(90, 55, 25, 0.55); } .board-deal-select-label, .board-deal-select-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board-deal-select-chip { flex-shrink: 0; } .board-deal-select-menu { position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 20; display: flex; flex-direction: column; gap: 2px; max-height: min(40vh, 220px); overflow-y: auto; padding: 4px; border: 1px solid rgba(92, 58, 28, 0.38); border-radius: 10px; background: linear-gradient(165deg, rgba(255, 250, 236, 0.98) 0%, rgba(236, 214, 176, 0.96) 55%, rgba(220, 192, 148, 0.94) 100%); box-shadow: 0 6px 16px rgba(30, 18, 8, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55); } .board-deal-select-menu[hidden] { display: none !important; } .board-deal-select-option { display: flex; align-items: center; gap: 0.35em; width: 100%; padding: 4px 6px; border: none; border-radius: 8px; background: transparent; color: #2a1a0a; font-family: inherit; font-size: inherit; font-weight: 700; text-align: left; cursor: pointer; } .board-deal-select-option:hover, .board-deal-select-option.is-selected { background: rgba(90, 55, 25, 0.12); } .board-deal-compose-row .board-auction-input { flex: 0 0 auto; width: 9ch; min-width: 9ch; max-width: none; } .board-deal-waiting-label { flex: 1 1 auto; align-self: center; text-align: center; padding: 4px 10px; border-radius: 10px; border: 1px solid rgba(92, 58, 28, 0.38); background: linear-gradient(165deg, rgba(255, 250, 236, 0.96) 0%, rgba(236, 214, 176, 0.94) 55%, rgba(220, 192, 148, 0.92) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(90, 55, 25, 0.12), 0 2px 6px rgba(30, 18, 8, 0.22); color: #4a3218; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: clamp(10px, 1.05vw, 13px); font-weight: 700; opacity: 0.95; } .board-deal-accept-btn, .board-deal-reject-btn { color: var(--ui-action-fg, #fff4e4); background: var(--ui-action-bg); } .board-deal-submit-btn { flex: 0 0 auto; color: var(--ui-action-fg, #fff4e4); background: var(--ui-action-bg); white-space: nowrap; } .board-deal-cancel-btn { flex: 0 0 auto; color: var(--ui-action-fg, #fff4e4); background: var(--ui-action-bg); white-space: nowrap; } .board-message-mic { flex: 0 0 auto; align-self: center; width: clamp(22px, 2.4vw, 32px); height: clamp(22px, 2.4vw, 32px); padding: 0; border: 1px solid var(--ui-action-border, rgba(90, 55, 25, 0.28)); border-radius: 50%; background: var(--ui-action-bg); color: var(--ui-action-fg, #fff4e4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-touch-callout: none; box-shadow: var(--ui-action-shadow); transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.25s ease, transform 0.15s ease; } .board-message-mic svg { width: 58%; height: 58%; fill: currentColor; display: block; } .board-message-sticker { line-height: 0; font-size: 0; } .board-message-mic:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 5px rgba(40, 24, 10, 0.3); } .board-message-mic:active:not(:disabled) { transform: translateY(0); } .board-message-mic.is-listening { color: #fff8ee; border-color: rgba(140, 30, 30, 0.55); background: radial-gradient(circle at 35% 30%, rgba(255, 180, 160, 0.55), transparent 55%), linear-gradient(160deg, #e85a4a 0%, #b02020 100%); box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.35), 0 0 0 2px rgba(220, 70, 50, 0.28), 0 0 10px rgba(220, 60, 40, 0.45); animation: board-mic-pulse 1.4s ease-in-out infinite; } .board-message-mic.is-voice { color: #fff8ee; border-color: rgba(40, 110, 70, 0.55); background: radial-gradient(circle at 35% 30%, rgba(180, 230, 190, 0.5), transparent 55%), linear-gradient(160deg, #3c9a62 0%, #1e6b40 100%); box-shadow: inset 0 1px 0 rgba(210, 245, 220, 0.35), 0 0 0 2px rgba(50, 150, 90, 0.28), 0 0 10px rgba(40, 140, 80, 0.4); animation: board-mic-voice-pulse 1.6s ease-in-out infinite; } .board-message-mic.is-voice.is-voice-muted { animation: none; filter: grayscale(0.45); opacity: 0.82; } .board-message-mic.is-unavailable, .board-message-mic:disabled { opacity: 0.45; cursor: not-allowed; } @keyframes board-mic-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.35), 0 0 0 2px rgba(220, 70, 50, 0.22), 0 0 8px rgba(220, 60, 40, 0.35); } 50% { box-shadow: inset 0 1px 0 rgba(255, 220, 200, 0.45), 0 0 0 3px rgba(220, 70, 50, 0.4), 0 0 14px rgba(220, 60, 40, 0.55); } } @keyframes board-mic-voice-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(210, 245, 220, 0.35), 0 0 0 2px rgba(50, 150, 90, 0.22), 0 0 8px rgba(40, 140, 80, 0.32); } 50% { box-shadow: inset 0 1px 0 rgba(210, 245, 220, 0.5), 0 0 0 3px rgba(50, 150, 90, 0.4), 0 0 14px rgba(40, 140, 80, 0.5); } } .scoreboard { padding: 1.2% 0.6%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0.25em; overflow: hidden; text-align: left; pointer-events: auto; width: 100%; height: 100%; min-height: 0; box-sizing: border-box; } .board-object.scoreboard { overflow: hidden; text-align: left; border-radius: 14px; border: 1px solid rgba(92, 58, 28, 0.38); background: linear-gradient(165deg, rgba(255, 250, 236, 0.96) 0%, rgba(236, 214, 176, 0.94) 55%, rgba(220, 192, 148, 0.92) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(90, 55, 25, 0.12), 0 2px 6px rgba(30, 18, 8, 0.22); transition: background 0.45s ease, border-color 0.35s ease, box-shadow 0.35s ease; } html.game-theme-dark .board-object.scoreboard { border-color: rgba(0, 0, 0, 0.5); background: linear-gradient( 165deg, rgba(86, 80, 74, 0.96) 0%, rgba(52, 48, 44, 0.95) 55%, rgba(30, 28, 26, 0.94) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.48); } html.game-theme-dark .board-object.scoreboard .ledger-row, html.game-theme-dark .board-object.scoreboard .scoreboard-row { color: #ebe4d8; } html.game-theme-dark .board-object.scoreboard .ledger-empty { color: #b0a898; } html.game-theme-dark .board-object.scoreboard .ledger-dm-caption { color: #ebe4d8; background: rgba(86, 80, 74, 0.98); } html.game-theme-dark .board-object.scoreboard .ledger-row.bot-thought-row { color: #a89a88; } html.game-theme-dark .board-object.scoreboard .ledger-row.ledger-penalty-row { color: #ff6b6b; } html.game-theme-dark .board-object.scoreboard .ledger-row.move-row { color: #9a9a9a; } html.game-theme-dark .board-object.scoreboard .ledger-amount.plus { color: #5dca78; } html.game-theme-dark .board-object.scoreboard .ledger-amount.minus { color: #e07070; } html.game-theme-dark .board-object.scoreboard .scoreboard-ledger { scrollbar-color: rgba(210, 205, 195, 0.28) transparent; } html.game-theme-dark .board-object.scoreboard .scoreboard-ledger::-webkit-scrollbar-thumb { background: rgba(210, 205, 195, 0.28); } html.game-theme-dark .board-object.scoreboard .scoreboard-ledger::-webkit-scrollbar-thumb:hover { background: rgba(210, 205, 195, 0.45); } .board-info { padding: 2% 4% var(--info-reserve-height, 0%) 2%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.35em; width: 100%; height: 100%; min-height: 0; box-sizing: border-box; pointer-events: none; text-align: left; } .board-info-body { width: 100%; align-self: flex-start; } .board-info.board-info-deal-offer { overflow: visible; } .info-line { font-size: clamp(0.69rem, 1.33vw, 1.04rem); font-weight: 700; line-height: 1.3; color: #3f2816; text-shadow: 0 1px 0 rgba(255, 248, 230, 0.44), 0 0 1px rgba(42, 26, 10, 0.28); text-align: left; width: 100%; white-space: pre-line; } .info-line-muted { opacity: 0.81; font-weight: 600; color: #3a2414; } .scoreboard-ledger { flex: 1 1 auto; min-height: 0; width: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(92, 58, 28, 0.35) transparent; -webkit-user-select: text; user-select: text; } .scoreboard-ledger::-webkit-scrollbar { width: 6px; } .scoreboard-ledger::-webkit-scrollbar-track { background: transparent; } .scoreboard-ledger::-webkit-scrollbar-thumb { background: rgba(92, 58, 28, 0.35); border-radius: 3px; } .scoreboard-ledger::-webkit-scrollbar-thumb:hover { background: rgba(92, 58, 28, 0.55); } .ledger { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; width: 100%; text-align: left; } .ledger-empty { font-size: clamp(0.5rem, 1vw, 0.75rem); color: #5c4a32; opacity: 0.7; text-align: left; width: 100%; } .ledger-dm-caption { position: sticky; top: 0; z-index: 1; margin: 0 0 0.35em; padding: 0 0 0.2em; font-size: clamp(0.5rem, 1vw, 0.75rem); font-weight: 800; color: #5c3a1e; background: rgba(255, 250, 236, 0.97); } .ledger-row { width: 100%; max-width: 100%; box-sizing: border-box; font-size: clamp(0.48rem, 0.95vw, 0.72rem); font-weight: 600; color: #2a1a0a; line-height: 1.25; text-align: left; } .ledger-row:not(.message-row) { display: block; padding-left: 1.1em; text-indent: -1.1em; word-break: break-word; overflow-wrap: anywhere; } .ledger-row:not(.message-row) > .scoreboard-chip { display: inline-block; vertical-align: baseline; margin-right: 0.35em; } .ledger-row:not(.message-row) .ledger-player, .ledger-row:not(.message-row) .ledger-amount, .ledger-row:not(.message-row) .ledger-label { display: inline; } .ledger-row:not(.message-row) .ledger-player, .ledger-row:not(.message-row) .ledger-amount { margin-right: 0.35em; } .ledger-row.message-row { display: block; width: 100%; max-width: 100%; box-sizing: border-box; line-height: 1.25; text-align: left; word-break: break-word; overflow-wrap: anywhere; white-space: pre-line; font-weight: 400; } .ledger-row.message-row:has(.ledger-name-badge) { margin-top: 0.45em; margin-bottom: 0.2em; } .ledger-row.message-row:has(.ledger-name-badge):first-child { margin-top: 0; } .ledger-row.message-row .scoreboard-chip { display: inline-block; vertical-align: baseline; margin-right: 0.35em; position: relative; top: -0.05em; } .ledger-name-badge { display: inline; padding: 0.08em 0.38em; border-radius: 0.28em; font-weight: 600; line-height: 1.35; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22); } .ledger-row.opponent-message-row { font-weight: 400; } .ledger-row.bot-thought-row { font-weight: 500; color: #5a4a38; } .ledger-row.ledger-penalty-row { color: #c62828; font-weight: 600; } .ledger-row.move-row { color: #7a7a7a; font-weight: 500; opacity: 1; } .ledger-player { opacity: 0.8; min-width: 0.9em; text-align: left; } .ledger-amount { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: left; } .ledger-amount.plus { color: #1a6b2a; } .ledger-amount.minus { color: #9a2020; } .ledger-label { white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word; overflow-wrap: anywhere; opacity: 0.85; text-align: left; } .scoreboard-row { display: flex; align-items: center; gap: 0.45em; font-size: clamp(0.55rem, 1.1vw, 0.82rem); font-weight: 600; color: #2a1a0a; line-height: 1.2; } .scoreboard-chip { width: 0.75em; height: 0.75em; border-radius: 50%; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } .scoreboard-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .scoreboard-balance { font-variant-numeric: tabular-nums; white-space: nowrap; } .cell-claims { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .cell-claim { position: absolute; transform: translate(-50%, -50%); pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: visible; } .cell-claim.share-selectable { pointer-events: auto; cursor: pointer; } .board.shares-hover-dim .cell-claim.share-selected .cell-claim-fill { animation: share-selected-pulse 1s ease-in-out infinite; } @keyframes share-selected-pulse { 0%, 100% { filter: blur(0.371px) brightness(0.72); } 50% { filter: blur(0.371px) brightness(1.38); } } .cell-claim.sell-selectable { pointer-events: auto; cursor: pointer; } .sell-dim-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 12; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.25s ease-out, visibility 0.25s ease-out; } .board.board-dim-active .sell-dim-overlay { opacity: 1; visibility: visible; } .cell-claim.deal-selectable { pointer-events: auto; cursor: pointer; } .cell-claim-fill { --claim-r: 0; --claim-g: 0; --claim-b: 0; position: absolute; left: -10%; top: -8%; right: -10%; bottom: -8%; z-index: 0; border-radius: 6%; background: rgba(var(--claim-r), var(--claim-g), var(--claim-b), 0.45); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; filter: blur(0.6px); pointer-events: none; } .cell-claim.side-top .cell-claim-fill { bottom: 0; } .cell-claim.side-bottom .cell-claim-fill { top: 0; } .cell-claim.side-left .cell-claim-fill { right: 0; } .cell-claim.side-right .cell-claim-fill { left: 0; } .cell-shares-dots { position: absolute; left: 50%; top: auto; bottom: 2%; transform: translateX(-50%); z-index: 1; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: var(--shares-dots-gap); width: 100%; max-width: 100%; padding: 0 1px; box-sizing: border-box; } .share-dot { flex: 0 0 var(--shares-icon-size); width: var(--shares-icon-size); height: var(--shares-icon-size); aspect-ratio: 1; max-width: var(--shares-icon-size); max-height: var(--shares-icon-size); min-width: var(--shares-icon-size); min-height: var(--shares-icon-size); border-radius: 50%; box-shadow: 0 0 0 1px #fff; } .cell-rent-label { position: absolute; z-index: 1; width: auto; max-width: none; padding: 0; box-sizing: border-box; text-align: center; font-size: 12.8px; font-weight: 700; line-height: 1.1; color: #3f2816; text-shadow: 0 1px 0 rgba(255, 248, 230, 0.44), 0 0 1px rgba(42, 26, 10, 0.28); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: visible; text-overflow: unset; pointer-events: none; } .cell-rent-label.is-dice-rate { position: absolute; } .cell-rent-label.is-dice-rate .frame-price-amount { display: block; position: relative; } .cell-rent-label.is-dice-rate .frame-price-mult { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; line-height: 1.1; } .cell-rent-label.is-dice-outer-above .frame-price-mult { bottom: 100%; } .cell-rent-label.is-dice-outer-below .frame-price-mult { top: 100%; } .cell-rent-label.side-top { left: 50%; bottom: calc(4% + var(--shares-icon-size) + var(--shares-icon-gap)); top: auto; right: auto; transform: translateX(-50%); } .cell-rent-label.side-left { left: 15%; bottom: 1px; top: auto; right: auto; transform: translateX(-50%); } .cell-rent-label.side-right { left: 85%; bottom: 1px; top: auto; right: auto; transform: translateX(-50%); } .cell-rent-label.side-bottom { left: 50%; top: calc(4% + var(--shares-icon-size) + var(--shares-icon-gap)); bottom: auto; right: auto; transform: translateX(-50%); } .cell-claim.side-bottom .cell-shares-dots { top: 2%; bottom: auto; } .cell-claim.side-left .cell-shares-dots, .cell-claim.side-right .cell-shares-dots { top: 50%; transform: translateY(-50%); flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; width: auto; max-width: none; height: auto; max-height: 100%; padding: 0; gap: var(--shares-dots-gap); } .cell-claim.side-left .share-dot, .cell-claim.side-right .share-dot { flex: 0 0 var(--shares-icon-size); width: var(--shares-icon-size); height: var(--shares-icon-size); max-width: var(--shares-icon-size); max-height: var(--shares-icon-size); min-width: var(--shares-icon-size); min-height: var(--shares-icon-size); } .cell-claim.side-left .cell-shares-dots { left: auto; right: 4%; } .cell-claim.side-right .cell-shares-dots { left: 4%; right: auto; } .cell-shares-goldbar { position: absolute; left: 50%; top: auto; bottom: 2%; transform: translateX(-50%); z-index: 1; width: var(--goldbar-w); height: var(--goldbar-h); object-fit: contain; object-position: center; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); } .cell-claim.side-bottom .cell-shares-goldbar { top: 2%; bottom: auto; } .cell-claim.side-left .cell-shares-goldbar, .cell-claim.side-right .cell-shares-goldbar { top: 50%; width: var(--goldbar-w); height: var(--goldbar-h); object-fit: contain; object-position: center; } .cell-claim.side-left .cell-shares-goldbar { left: auto; right: calc(4% + (var(--shares-icon-size) - var(--goldbar-w)) / 2); transform: translateY(-50%) rotate(90deg); } .cell-claim.side-right .cell-shares-goldbar { left: calc(4% + (var(--shares-icon-size) - var(--goldbar-w)) / 2); right: auto; transform: translateY(-50%) rotate(90deg); } .tokens { position: absolute; inset: 0; z-index: 10; pointer-events: none; } .token { position: absolute; left: 0; top: 0; width: 3.36%; aspect-ratio: 1; transform: translate3d(0, 0, 0) translate(-50%, -65%); transition: transform 0.38s cubic-bezier(0.33, 1, 0.68, 1); pointer-events: auto; cursor: default; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .token.moving { will-change: transform; } .token-inner { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.35); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.55), inset 0 -2px 4px rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.2); z-index: 1; } .token-turn-glow { position: absolute; left: 50%; top: 50%; width: 175%; height: 175%; transform: translate(-50%, -50%); z-index: 0; background: radial-gradient( circle closest-side at center, rgba(var(--claim-r, 0), var(--claim-g, 0), var(--claim-b, 0), calc(var(--turn-glow, 1.5) * 1)) 0%, rgba(var(--claim-r, 0), var(--claim-g, 0), var(--claim-b, 0), calc(var(--turn-glow, 1.5) * 1)) 34%, rgba(var(--claim-r, 0), var(--claim-g, 0), var(--claim-b, 0), calc(var(--turn-glow, 1.5) * 0.56)) 55%, rgba(var(--claim-r, 0), var(--claim-g, 0), var(--claim-b, 0), calc(var(--turn-glow, 1.5) * 0.16)) 76%, transparent 100% ); opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } .token.is-turn .token-turn-glow { opacity: 1; } .token-shadow { position: absolute; left: 50%; top: 78%; transform: translate(-50%, -50%); width: 86%; height: 40%; background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.2) 42%, transparent 72% ); border-radius: 50%; transition: transform 0.38s ease, opacity 0.38s ease; pointer-events: none; z-index: 0; } .token.moving .token-shadow { transform: translate(-50%, -50%) scale(0.72); opacity: 0.65; } .token-own .token-inner { animation: token-idle 2.5s ease-in-out infinite; outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 2px; } .token.moving .token-inner { animation: token-hop 0.38s ease; } .token-disconnect-timer { position: absolute; top: -72%; left: 50%; transform: translateX(-50%); min-width: 1.8em; padding: 1px 5px; border-radius: 4px; background: rgba(20, 0, 0, 0.82); border: 1px solid rgba(255, 90, 90, 0.75); font-size: 0.58rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #ff8a8a; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); white-space: nowrap; pointer-events: none; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } .token-disconnect-timer.token-action-timer { background: rgba(0, 0, 0, 0.78); border: 1px solid rgba(255, 255, 255, 0.55); color: #f5e6c8; } .token-disconnected .token-inner { filter: saturate(0.55) brightness(0.88); } @keyframes token-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes token-hop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-5px) scale(1.03); } 100% { transform: translateY(0) scale(1); } } .board-btn { position: absolute; z-index: 18; display: flex; align-items: center; justify-content: center; padding: 0.25em 0.85em; border: 1px solid var(--ui-action-border, rgba(0, 0, 0, 0.32)); border-radius: 999px; cursor: pointer; font-family: inherit; font-size: clamp(0.6rem, 1.35vw, 0.9rem); font-weight: 700; letter-spacing: 0.02em; color: var(--ui-action-fg, #fff4e4); text-align: center; line-height: 1.15; white-space: nowrap; overflow: visible; box-sizing: border-box; background: var(--ui-action-bg); box-shadow: var(--ui-action-shadow); transition: filter 0.15s ease, box-shadow 0.2s ease, background 0.35s ease, border-color 0.35s ease, color 0.35s ease; } .board-btn:hover:not(:disabled) { filter: brightness(1.04); box-shadow: var(--ui-action-shadow-hover); } .board-btn:active:not(:disabled) { filter: brightness(0.96); box-shadow: var(--ui-action-shadow); } .board-btn:disabled { cursor: not-allowed; filter: brightness(0.82) saturate(0.9); } .board-btn[hidden] { display: none !important; pointer-events: none !important; } .board-btn-hotkey { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 2px; } .buy-shares-btn { } .sell-btn, .deal-btn, .pay-btn, .loss-btn, .auction-btn { color: var(--ui-action-fg, #fff4e4); background: var(--ui-action-bg); } .cell-info-panel { position: fixed; z-index: 200; min-width: 180px; max-width: min(92vw, 360px); padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(240, 215, 140, 0.65); background: rgba(18, 12, 6, 0.92); color: #f5e6c8; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); pointer-events: none; box-sizing: border-box; } .cell-info-panel-title { font-size: 0.95rem; font-weight: 800; margin-bottom: 4px; color: #f0d78c; } .cell-info-panel-quote { font-size: 0.82rem; font-weight: 700; line-height: 1.3; color: #9fd6a8; font-variant-numeric: tabular-nums; margin-bottom: 6px; } .cell-info-panel-desc { font-size: 0.8rem; line-height: 1.35; color: #c9b08a; margin-bottom: 6px; } .cell-info-panel-desc strong { font-weight: 700; color: #f0e2c8; } .cell-info-panel-rows { display: flex; flex-direction: column; gap: 4px; } .loss-confirm { position: fixed; inset: 0; z-index: 260; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.45); box-sizing: border-box; } .loss-confirm[hidden] { display: none !important; } .loss-confirm-card { min-width: 200px; max-width: min(96vw, 28rem); padding: 14px 16px 12px; border-radius: 10px; border: 1px solid rgba(240, 215, 140, 0.65); background: rgba(18, 12, 6, 0.94); color: #f5e6c8; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); text-align: center; box-sizing: border-box; } .loss-confirm-text { margin: 0 0 12px; font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: #f0d78c; } .loss-confirm-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .loss-confirm-btn { appearance: none; border: 1px solid var(--ui-action-border, rgba(0, 0, 0, 0.32)); border-radius: 999px; padding: 0.45em 0.85em; min-width: 4.2em; white-space: nowrap; cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 700; line-height: 1.15; color: var(--ui-action-fg, #fff4e4); background: var(--ui-action-bg); box-shadow: var(--ui-action-shadow); } .loss-confirm-btn:hover { filter: brightness(1.04); } .loss-confirm-btn:active { filter: brightness(0.96); } .loss-confirm-no { filter: saturate(0.85); } html.portrait-fs-rotate .loss-confirm { top: 0; left: 0; right: auto; bottom: auto; width: var(--app-width); height: var(--app-height); max-width: none; transform: rotate(-90deg) translateX(-100%); transform-origin: top left; } .tutorial-dim { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 190; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.25s ease-out, visibility 0.25s ease-out; } .tutorial-dim.is-on { opacity: 1; visibility: visible; } .tutorial-tip { z-index: 250; max-width: min(88vw, 300px); text-align: center; background: rgb(18, 12, 6); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); } .tutorial-tip .cell-info-panel-desc:last-child, .tutorial-tip .cell-info-panel-quote:last-child { margin-bottom: 0; } .tutorial-finish-btn { position: fixed; right: 12px; bottom: 12px; z-index: 251; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(240, 215, 140, 0.55); background: rgb(18, 12, 6); color: #f0d78c; font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .tutorial-finish-btn:hover { background: rgba(42, 30, 14, 0.96); } .cell-info-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; line-height: 1.25; color: #e8d7b8; font-variant-numeric: tabular-nums; } .cell-info-dots { display: inline-flex; flex-shrink: 0; gap: 3px; min-width: 60px; } .cell-info-dots .share-dot { width: 10px; height: 10px; background: #f0d78c; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); } .cell-info-prices { font-weight: 700; color: #ffe29a; } .dice-overlay { position: absolute; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; clip-path: inset( var(--board-cell-inset-y, 0%) var(--board-cell-inset-x, 0%) var(--board-cell-inset-y, 0%) var(--board-cell-inset-x, 0%) ); } .dice-stack { position: absolute; left: auto; right: calc(var(--board-cell-inset-x, 14%) + 1.8%); top: auto; bottom: calc(var(--board-cell-inset-y, 21.2%) + 1.6%); transform: none; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 0.35em; height: 11%; width: auto; max-width: 28%; box-sizing: border-box; } .die { position: relative; flex: 0 0 auto; height: 100%; width: auto; aspect-ratio: 1; border-radius: 14%; display: grid; place-items: center; background: transparent; box-shadow: none; border: none; overflow: hidden; container-type: size; transform-origin: center center; } .die-face { font-size: 82cqh; line-height: 1; color: #111; user-select: none; } .dice3d-layer { position: absolute; inset: 0; z-index: 46; pointer-events: none; display: none; } .dice3d-freeze { position: absolute; inset: auto; left: 0; top: 0; z-index: 46; width: 100%; height: 100%; object-fit: fill; pointer-events: none; display: none; } .dice3d-layer canvas { width: 100% !important; height: 100% !important; display: block; pointer-events: none; } .board.auction-active .board-btn { pointer-events: none !important; } .board.deal-active .board-btn, .board.deal-compose-active .board-btn { pointer-events: none !important; } .board.auction-active .dice-overlay, .board.auction-active .dice3d-layer { pointer-events: none !important; } .board.deal-active .dice-overlay, .board.deal-active .dice3d-layer { pointer-events: none !important; } .die.rolling { animation: die-shake 0.12s ease infinite; } .die.rolling .die-face { animation: die-flip 0.12s ease infinite; } @keyframes die-shake { 0%, 100% { transform: rotate(-8deg) scale(1.06); } 50% { transform: rotate(8deg) scale(1.06); } } @keyframes die-flip { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } } .dice-skin-hint-spot { position: fixed; left: 0; top: 0; z-index: 80; margin: 0; padding: 0; border-radius: 50%; pointer-events: none; background: radial-gradient( closest-side, rgba(22, 12, 6, 0.5) 0%, rgba(22, 12, 6, 0.26) 46%, rgba(22, 12, 6, 0.08) 72%, rgba(22, 12, 6, 0) 100% ); will-change: transform, opacity; } html.game-theme-dark .dice-skin-hint-spot { background: radial-gradient( closest-side, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.32) 50%, rgba(0, 0, 0, 0) 100% ); } .game-toolbar > .dice3d-color-toggle.is-dice-skin-hint::after, .game-toolbar > #paidFieldBtn.is-dice-skin-hint::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(28, 14, 6, 0.46); pointer-events: none; z-index: 2; opacity: 1; transition: opacity 0.25s ease; } .game-toolbar > .dice3d-color-toggle.is-dice-skin-hint.is-dice-skin-hint-release::after, .game-toolbar > #paidFieldBtn.is-dice-skin-hint.is-dice-skin-hint-release::after { opacity: 0; } html.game-theme-dark .game-toolbar > .dice3d-color-toggle.is-dice-skin-hint::after, html.game-theme-dark .game-toolbar > #paidFieldBtn.is-dice-skin-hint::after { background: rgba(0, 0, 0, 0.5); } .victory-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; display: flex; align-items: center; justify-content: center; max-width: 92%; padding: 20px 28px; border-radius: 16px; background: rgba(0, 0, 0, 0.82); border: 2px solid rgba(255, 80, 140, 0.55); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65); pointer-events: none; text-align: center; font-size: clamp(2rem, 10vw, 5.5rem); font-weight: 900; letter-spacing: 0.08em; line-height: 1.05; color: #ff3b7a; text-shadow: 0 0 16px rgba(255, 80, 140, 0.95), 0 4px 0 #8a1038, 0 8px 28px rgba(0, 0, 0, 0.85); text-transform: uppercase; } @media (max-height: 720px) { :root { --game-pad: 6px; --toolbar-space: 4.5rem; } .game-toolbar { gap: 6px 10px; margin-bottom: 4px; } .debug-toggle, .clients-bar, .board-switch-link { font-size: 0.78rem; } .players-capital-row { font-size: 0.76rem; padding: 2px 6px 2px 5px; } } @media (max-height: 520px), (max-height: 500px) and (orientation: landscape) { :root { --game-pad: 4px; } .debug-toggle, .clients-bar, .board-switch-link { font-size: 0.72rem; } .players-capital-row { font-size: 0.72rem; } } body.layout-side-toolbar { --game-pad: 4px; --toolbar-space: 0px; --side-panel-w: min(12rem, 16vw); align-items: center; justify-content: center; padding: var(--game-pad); } body.layout-side-toolbar .game { container-type: size; flex-direction: row; align-items: center; justify-content: center; width: calc(var(--app-width) - 2 * var(--game-pad)); height: calc(var(--app-height) - 2 * var(--game-pad)); max-height: 100%; max-width: 100%; } body.layout-side-toolbar .fullscreen-btn, body.layout-side-toolbar .toolbar-action-btn, body.layout-side-toolbar .debug-toggle, body.layout-side-toolbar .board-switch-link { display: inline-flex; align-items: center; width: 100%; box-sizing: border-box; font-size: 0.75rem; padding: 6px 10px; } body.layout-side-toolbar .toolbar-action-btn, body.layout-side-toolbar .board-switch-link { justify-content: center; } body.layout-side-toolbar .theme-toggle { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 2.15rem; --theme-toggle-h: 2.15rem; --theme-toggle-w: 100%; --theme-orb: 1rem; } body.layout-side-toolbar .game-toolbar { order: 1; flex: 0 0 var(--side-panel-w); width: var(--side-panel-w); max-height: 100%; margin: 0 6px 0 0; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; overflow-x: hidden; overflow-y: auto; gap: 6px; padding: 2px 0; -webkit-overflow-scrolling: touch; } body.layout-side-toolbar .players-capital { flex-direction: column; align-items: flex-end; max-width: none; width: 100%; gap: 5px; } body.layout-side-toolbar .players-capital-row { width: 100%; justify-content: flex-start; font-size: 0.78rem; padding: 3px 7px 3px 5px; } body.layout-side-toolbar .players-capital-identity { max-width: 100%; } body.layout-side-toolbar .players-capital-name-input { width: 5.5em; max-width: min(9em, 100%); flex: 1 1 auto; min-width: 2.5em; } body.layout-side-toolbar .clients-bar { text-align: center; font-size: 0.78rem; line-height: 1.2; } body.layout-side-toolbar .debug-toggle, body.layout-side-toolbar .board-switch-link { font-size: 0.75rem; line-height: 1.2; } body.layout-side-toolbar .board { order: 2; flex: 0 0 auto; align-self: center; border-radius: 8px; box-shadow: 0 0 0 2px var(--wood-mid); } @media (orientation: landscape) and (max-height: 600px) { body.layout-side-toolbar { --game-pad: 2px; --side-panel-w: min(34vw, 10.5rem); } body.layout-side-toolbar .game-toolbar { margin: 0 4px 0 0; gap: 5px; } body.layout-side-toolbar .fullscreen-btn, body.layout-side-toolbar .toolbar-action-btn { font-size: 0.68rem; } body.layout-side-toolbar .theme-toggle { height: 1.95rem; --theme-toggle-h: 1.95rem; --theme-orb: 0.95rem; } body.layout-side-toolbar .players-capital-row { font-size: 0.72rem; padding: 2px 6px 2px 5px; } body.layout-side-toolbar .clients-bar { font-size: 0.72rem; } body.layout-side-toolbar .debug-toggle, body.layout-side-toolbar .board-switch-link { font-size: 0.68rem; } body.layout-side-toolbar .board-switch-link { padding: 3px 6px; } } html:fullscreen { --game-pad: 0px; } html:fullscreen body { padding: 0; } html:fullscreen body.layout-side-toolbar, html:fullscreen body.layout-top-toolbar { --game-pad: 0px; } html.portrait-fs-rotate, html.portrait-fs-rotate body { overflow: hidden; touch-action: none; } html.portrait-fs-rotate body { position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; padding: 0; --game-pad: 0px; --side-panel-w: min(12rem, 22%); } html.portrait-fs-rotate.is-keyboard-open body { top: calc(-1 * var(--keyboard-shift, 0px)); bottom: auto; } html.portrait-fs-rotate .game { position: fixed; top: 0; left: 0; width: var(--app-height); height: var(--app-width); max-width: none; max-height: none; transform: rotate(-90deg) translateX(-100%); transform-origin: top left; animation: none; } html.portrait-fs-rotate body.layout-side-toolbar .game, html.portrait-fs-rotate body.layout-top-toolbar .game { width: var(--app-height); height: var(--app-width); max-width: none; max-height: none; justify-content: flex-start; align-items: stretch; } html.portrait-fs-rotate body.layout-side-toolbar { --side-panel-w: min(12rem, 26%); align-items: stretch; justify-content: flex-start; padding: 0; } html.portrait-fs-rotate body.layout-side-toolbar .game-toolbar { overflow-x: visible; overflow-y: auto; flex-shrink: 0; min-width: var(--side-panel-w); } html.portrait-fs-rotate body.layout-side-toolbar .debug-toggle, html.portrait-fs-rotate body.layout-side-toolbar .board-switch-link { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; } html.portrait-fs-rotate body.layout-side-toolbar .board { margin: 0; align-self: center; --board-area-w: calc(100cqw - var(--side-panel-w) - 6px); --board-area-h: 100cqh; } body.layout-top-toolbar { --game-pad: 4px; --toolbar-space: 0px; align-items: center; justify-content: center; padding: var(--game-pad); } body.layout-top-toolbar .game { container-type: size; flex-direction: column; align-items: stretch; justify-content: center; width: calc(var(--app-width) - 2 * var(--game-pad)); height: calc(var(--app-height) - 2 * var(--game-pad)); max-width: 100%; max-height: 100%; } body.layout-top-toolbar .game-toolbar { order: 1; flex: 0 0 auto; width: 100%; max-height: min(38cqh, 12rem); margin: 0 0 4px; flex-wrap: wrap; justify-content: center; gap: 4px 8px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.layout-top-toolbar .board-stage { order: 2; display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; align-items: center; justify-content: center; overflow: hidden; } body.layout-top-toolbar .board { flex: 0 0 auto; align-self: auto; margin: 0 auto; border-radius: 8px; box-shadow: 0 0 0 2px var(--wood-mid); } @media (max-width: 520px) and (orientation: portrait) { :root { --toolbar-space: 7rem; } body.layout-top-toolbar { --game-pad: 2px; } body.layout-top-toolbar .game-toolbar { gap: 3px 6px; margin-bottom: 2px; max-height: min(40cqh, 11rem); } body.layout-top-toolbar .fullscreen-btn, body.layout-top-toolbar .toolbar-action-btn { font-size: 0.68rem; } body.layout-top-toolbar .players-capital-row { font-size: 0.72rem; padding: 2px 6px 2px 5px; } body.layout-top-toolbar .clients-bar { font-size: 0.72rem; } body.layout-top-toolbar .debug-toggle, body.layout-top-toolbar .board-switch-link { font-size: 0.68rem; } } .token.token-bentley-hide { opacity: 0 !important; pointer-events: none !important; transition: none !important; } .token.token-bentley-landing { position: fixed !important; margin: 0; pointer-events: none !important; z-index: 12050; } .bentley-intro { position: fixed; inset: 0; z-index: 12000; pointer-events: none; overflow: visible; --bentley-light: #ff8a8a; --bentley-mid: #e03030; --bentley-dark: #a01010; --bentley-car-w: 240px; } .bentley-intro-stage { position: absolute; inset: 0; overflow: visible; } .bentley-intro-car { position: absolute; left: 0; top: 0; width: var(--bentley-car-w); aspect-ratio: 900 / 450; transform: translate(-50%, -50%); transform-origin: 50% 50%; will-change: transform; opacity: 1; isolation: isolate; } .bentley-intro-photo { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; user-select: none; -webkit-user-drag: none; pointer-events: none; position: relative; z-index: 1; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5)); } .bentley-intro-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; user-select: none; -webkit-user-drag: none; overflow: visible; pointer-events: none; z-index: 6; } .bentley-passenger { position: absolute; left: 52%; top: 35%; width: 17%; height: auto; overflow: visible; transform: translate(-50%, -50%) rotate(180deg); transform-origin: center; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); z-index: 2; pointer-events: none; } .bentley-token-slot { position: absolute; left: 52.5%; top: 62.5%; width: 10%; aspect-ratio: 1; z-index: 2; transform: translate(-50%, -50%); transform-origin: center; transition: transform 0.55s cubic-bezier(0.33, 0.2, 0.25, 1), opacity 0.15s linear 0.4s; } .bentley-token-disk { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 42%), radial-gradient(circle at 50% 62%, var(--bentley-dark) 0%, var(--bentley-mid) 48%, var(--bentley-light) 100%); border: 1px solid rgba(0, 0, 0, 0.4); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45), 0 0 0 1.5px rgba(255, 255, 255, 0.55); } .bentley-intro.is-drop .bentley-token-slot { opacity: 0; transition: opacity 0.08s linear; } @media (prefers-reduced-motion: reduce) { .bentley-token-slot { transition: none !important; } } .chance-pick-overlay { position: absolute; left: calc(var(--board-cell-inset-x, 14%) + 28%); right: calc(var(--board-cell-inset-x, 14%) + 0.6%); top: auto; bottom: calc(var(--board-cell-inset-y, 21.2%) + 0.6%); z-index: 45; display: flex; align-items: flex-end; justify-content: stretch; pointer-events: none; background: none; padding: 0; max-height: 42%; } .chance-pick-overlay[hidden] { display: none !important; } .chance-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 1.1%, 14px); width: 100%; padding: 0; pointer-events: auto; } .chance-card { position: relative; aspect-ratio: 2 / 3; width: 100%; border: 0; padding: 0; margin: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: linear-gradient(180deg, rgba(40, 24, 14, 0.15), rgba(20, 12, 6, 0.45)), url('../doc/leather.webp') center / cover; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transform-style: preserve-3d; } .chance-card-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; } .chance-card-caption { position: absolute; left: 5%; right: 5%; bottom: 6%; display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; pointer-events: none; } .chance-card-label { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 2px; font: 700 clamp(7px, 0.88vw, 11px) / 1.12 system-ui, Segoe UI, sans-serif; color: #f5e6c8; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); white-space: normal; overflow-wrap: break-word; word-break: normal; hyphens: none; -webkit-hyphens: none; } .chance-card-hint { display: none; } .chance-pick-grid .chance-card-face-up { box-shadow: 0 0 0 2px rgba(245, 230, 200, 0.55), 0 6px 18px rgba(0, 0, 0, 0.35); cursor: pointer; } .chance-card.is-fading { opacity: 0; transition: opacity 0.45s ease; pointer-events: none; } .chance-card.is-spinning { animation: chance-card-spin 0.7s ease-in-out; } .chance-card.is-disabled, .chance-card:disabled { opacity: 0.55; cursor: default; } .chance-hand { position: absolute; left: auto; right: calc(var(--board-cell-inset-x, 14%) + 0.45%); width: 20%; bottom: calc(var(--board-cell-inset-y, 21.2%) + 0.45%); z-index: 36; display: flex; gap: clamp(3px, 0.55vw, 8px); align-items: flex-end; justify-content: flex-end; pointer-events: auto; box-sizing: border-box; overflow: visible; } .chance-hand[hidden] { display: none !important; } .chance-hand-card { width: clamp(52px, 32%, 78px); flex: 0 0 auto; aspect-ratio: 2 / 3; height: auto; max-height: 100%; } .chance-hand-card .chance-card-label { font-size: clamp(6.5px, 0.78vw, 10px); } .chance-hand-card.is-peer, .chance-hand-card.is-peer-anim { pointer-events: none; } @keyframes chance-card-spin { 0% { transform: rotateY(0deg) scale(1); } 40% { transform: rotateY(180deg) scale(1.06); } 100% { transform: rotateY(360deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .chance-card.is-spinning { animation: none; } } #board.paid-field-pick-active { cursor: crosshair; } #board.paid-field-pick-active .token { pointer-events: none; } button.debug-toggle#paidFieldBtn { opacity: 1; filter: none; cursor: pointer; pointer-events: auto; } button.debug-toggle#paidFieldBtn.is-active { outline: 2px solid #c9a227; } button.debug-toggle#paidFieldBtn.is-blocked { opacity: 0.55; filter: saturate(0.85) brightness(0.96); cursor: help; pointer-events: auto; } .paid-field-pick-glow { position: absolute; inset: 0; z-index: 19; pointer-events: none; } .paid-field-pick-glow-cell { position: absolute; box-sizing: border-box; border-radius: 8%; background: rgba(255, 214, 120, 0.7); box-shadow: 0 0 16px rgba(255, 200, 80, 0.9), inset 0 0 10px rgba(255, 240, 180, 0.45); opacity: 0; will-change: opacity; } @media (prefers-reduced-motion: reduce) { .paid-field-pick-glow-cell { will-change: auto; } }