.pawn-token { width: 36px; height: 48px; flex: 0 0 auto; overflow: visible; filter: drop-shadow(0 3px 2px #16312325); }
.table-players { margin-bottom: 20px; }
.table-players .player-card { padding: 10px 14px; border-radius: 12px; gap: 12px; }
.table-players .player-card div > span { font-size: 20px; font-variant-numeric: tabular-nums; }
.table-players .player-card div > span small { font-size: 11px; }
.table-players .player-card > small { font-size: 10px; }
.match-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; align-items: start; }
.match-stage { position: relative; min-width: 0; width: 100%; max-width: 950px; margin: 0 auto; }
.board-dialog-layer { position: absolute; inset: 0; display: grid; place-items: center; padding: 15px; z-index: 3; }
.board-dialog { position: relative; width: min(100%, 360px); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #fffef9; color: var(--ink); border: 1px solid #e0e5d6; border-radius: 18px; padding: clamp(14px, 3cqw, 30px); text-align: center; box-shadow: 0 18px 50px #1f39271a, 0 2px 5px #1f392708; animation: dialog-arrive .22s ease-out; scrollbar-width: thin; }
.board-dialog:focus { outline: none; }
.board-dialog:focus-visible { outline: 2px solid #91b38a; outline-offset: -3px; }
.board-dialog .eyebrow { font-size: clamp(7px, 1.15cqw, 10px); letter-spacing: 1.8px; margin-bottom: 10px; }
.board-dialog h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(20px, 3.5cqw, 30px); line-height: 1.13; margin: 0 0 15px; overflow-wrap: anywhere; }
.board-dialog p { font-size: clamp(10px, 1.6cqw, 13px); color: #788673; line-height: 1.6; margin: 12px 0; }
.board-dialog .upgrade-reminder { font-size: clamp(10px, 1.5cqw, 12px); margin: 0 0 15px; }
.board-dialog small { display: block; font-size: clamp(8px, 1.2cqw, 10px); color: #839079; margin-top: 12px; }
.board-dialog .button { min-height: 40px; padding: 10px 14px; font-size: clamp(10px, 1.6cqw, 13px); gap: 6px; }
.board-dialog .full { margin-top: 9px; }
.dialog-close { position: absolute; top: 9px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; background: #f2f4ec; border: 0; border-radius: 50%; color: #718069; font-size: 22px; }
.cell-dialog { padding-top: 34px; }
.property-ribbon { position: absolute; height: 5px; top: 0; left: 0; right: 0; }
.dialog-facts { display: flex; justify-content: center; gap: 18px; padding: 14px 0; border-block: 1px solid #e9ede3; font-size: 10px; color: #8a9384; }
.dialog-facts strong { display: block; margin-top: 6px; color: var(--ink); font-size: clamp(11px, 1.8cqw, 15px); font-weight: 600; }
.purchase-price { display: block; font-family: Georgia, serif; font-size: clamp(30px, 7cqw, 54px); color: var(--green); line-height: 1; margin: 22px 0; }
.purchase-price small { display: inline; font-size: .5em; color: inherit; }
.debt-price { color: #b76b4e; }
.debt-properties { display: grid; gap: 6px; }
.debt-properties .small-button { text-align: left; font-size: 11px; }
.table-dice { display: flex; justify-content: center; gap: clamp(26px, 5cqw, 40px); padding: 26px 12px 22px; perspective: 650px; }
.die {
    --die-size: clamp(32px, 7.5cqw, 56px); --die-half: calc(var(--die-size) / 2);
    --rest-z: -8deg; --roll-y: 720deg; --roll-z: 360deg; --throw-x: -12px;
    position: relative; width: var(--die-size); height: var(--die-size); flex: 0 0 auto; transform-style: preserve-3d;
}
.die:nth-child(even) { --rest-z: 9deg; --roll-y: -720deg; --roll-z: -360deg; --throw-x: 12px; }
.die::before {
    content: ""; position: absolute; inset: auto -12% -24%; height: 24%; border-radius: 50%;
    background: #203c2d38; filter: blur(5px); transform: scale(1);
}
.die-flight, .die-pose, .die-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.die-pose { transform: rotateX(-16deg) rotateY(22deg) rotateZ(var(--rest-z)); }
.die-cube { transform: rotateX(var(--face-x)) rotateY(var(--face-y)); }
.die-face {
    position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 9%; padding: 18%;
    box-sizing: border-box; border: 1px solid #c8d1c4; border-radius: 5%; backface-visibility: hidden;
    background: linear-gradient(145deg, #fffef9, #e9eee3); box-shadow: inset 0 0 3px 1px #ffffffd9;
}
.die-face[data-face="1"] { transform: translateZ(var(--die-half)); }
.die-face[data-face="2"] { transform: rotateX(90deg) translateZ(var(--die-half)); }
.die-face[data-face="3"] { transform: rotateY(90deg) translateZ(var(--die-half)); }
.die-face[data-face="4"] { transform: rotateY(-90deg) translateZ(var(--die-half)); }
.die-face[data-face="5"] { transform: rotateX(-90deg) translateZ(var(--die-half)); }
.die-face[data-face="6"] { transform: rotateY(180deg) translateZ(var(--die-half)); }
.die-face i { border-radius: 50%; }
.die-face .pip { background: #355741; box-shadow: inset 0 1px 2px #132a2780, 0 1px 0 #ffffffd9; }
.rolling .die-cube { animation: dice-spin var(--dice-duration) cubic-bezier(.16, .65, .3, 1) both; }
.rolling .die-flight { animation: dice-flight var(--dice-duration) linear both; }
.rolling .die::before { animation: dice-shadow var(--dice-duration) linear both; }
.rolling.waiting .die-cube { animation: dice-wait 900ms linear infinite; }
.rolling.waiting .die-flight, .rolling.waiting .die::before { animation: none; }
@keyframes dice-wait {
    from { transform: rotateX(var(--face-x)) rotateY(var(--face-y)); }
    to { transform: rotateX(calc(360deg + var(--face-x))) rotateY(calc(360deg + var(--face-y))); }
}
@keyframes dice-spin {
    from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    to { transform: rotateX(calc(1080deg + var(--face-x))) rotateY(calc(var(--roll-y) + var(--face-y))) rotateZ(var(--roll-z)); }
}
@keyframes dice-flight {
    0%, 70%, 88%, 100% { transform: translate3d(0, 0, 0); }
    30% { transform: translate3d(var(--throw-x), -26px, 22px); }
    52% { transform: translate3d(calc(var(--throw-x) * .6), -20px, 14px); }
    79% { transform: translate3d(0, -7px, 3px); }
    94% { transform: translate3d(0, -2px, 0); }
}
@keyframes dice-shadow {
    0%, 70%, 88%, 100% { transform: scale(1); opacity: 1; }
    30% { transform: scale(.7); opacity: .35; }
    52% { transform: scale(.8); opacity: .5; }
    79% { transform: scale(.9); opacity: .75; }
    94% { transform: scale(.96); opacity: .9; }
}
.dialog-timer { font-variant-numeric: tabular-nums; border-top: 1px solid #e9ede3; padding-top: 10px; }
.table-journal { padding: 22px 18px; border: 0; background: #f0f3e9; border-radius: 12px; }
.table-journal .eyebrow { font-size: 8px; }
.table-journal > div { max-height: 540px; }
.table-journal p { font-size: 11px; line-height: 1.65; padding-bottom: 12px; border-bottom: 1px solid #dfe6d5; }
.cell-popup { position: absolute; visibility: hidden; z-index: 5; width: 290px; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; background: #fffef9; color: var(--ink); border: 0; border-radius: 12px; box-shadow: 0 4px 10px #18352620; text-align: left; }
.cell-popup.positioned { visibility: visible; }
.cell-popup:focus { outline: none; }
.cell-popup:focus-visible { outline: none; }
.cell-popup-heading { display: flex; align-items: center; gap: 10px; padding: 12px 15px; flex: 0 0 auto; background: var(--property-color); color: var(--popup-heading-ink); }
.cell-popup-heading > div { min-width: 0; flex: 1; }
.cell-popup-heading > .pawn-token { width: 27px; height: 36px; }
.cell-popup-heading .eyebrow { font-size: 7px; letter-spacing: 1.2px; margin: 0 0 5px; color: inherit; overflow-wrap: anywhere; }
.cell-popup-heading h3 { font-family: Georgia, serif; font-size: 22px; font-weight: 400; color: inherit; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popup-close { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; padding: 0; background: color-mix(in srgb,var(--popup-heading-ink) 10%,transparent); color: inherit; border: 0; border-radius: 50%; line-height: 1; }
.popup-close:hover { background: color-mix(in srgb,var(--popup-heading-ink) 20%,transparent); }
.popup-close svg { display: block; width: 16px; height: 16px; pointer-events: none; }
.cell-popup-content { min-height: 0; padding: 12px 15px 15px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.cell-popup-content p { font-size: 11px; line-height: 1.65; color: #788673; margin: 0 0 12px; }
.cell-popup-content .cell-description { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.popup-title-row { display:flex; align-items:baseline; gap:10px; min-width:0; }
.popup-title-row h3 { flex:1; min-width:0; }
.popup-price { flex:none; white-space:nowrap; font-variant-numeric:tabular-nums; }
.popup-price strong { color: inherit; font-size: 13px; }
.current-rent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin: 4px 0 12px; font-size: 11px; color: #778c66; }
.current-rent strong { color: var(--green); font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space:nowrap; }
.rent-table { width: 100%; border-collapse: collapse; font-size: 10px; font-variant-numeric: tabular-nums; margin: 14px 0 0; }
.rent-table caption, .rent-upgrades h4 { margin: 0; text-align: left; color: var(--ink); font-size: 11px; font-weight: 600; padding: 0 0 9px; }
.rent-table th { text-align: left; font-weight: 400; }
.rent-table th, .rent-table td { padding: 7px 4px; border-bottom: 1px solid #e8edde; }
.rent-table th:last-child, .rent-table td { text-align: right; }
.rent-table td { white-space: nowrap; font-weight: 600; }
.rent-table .rent-active { background: #edf5e5; color: #407733; }
.rent-upgrades { margin-top: 12px; font-size: 10px; }
.cell-popup-content .rent-upgrades p { margin: 6px 0 0; font-size: 10px; }
.rent-upgrades .rent-table { margin-top: 0; }
.cell-popup-content .rent-modifier { margin: 12px 0 0; padding: 8px; background: #fcf3d9; border-radius: 6px; color: #8b7539; font-size: 10px; }
.popup-actions { border-top: 1px solid #e4eadc; margin-top: 12px; padding-top: 2px; }
.popup-actions .button { font-size: 10px; padding: 8px; min-height: 34px; margin-top: 8px; }
.popup-actions small { display: block; color: #87947b; font-size: 9px; margin: 7px 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.inspecting-cell .board-dialog-layer { display: none; }
.cell-inspection-status { position: absolute; top: 5px; left: 6px; right: 6px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #fffef9e8; border: 1px solid #dfe6d6; border-radius: 8px; text-align: left; }
.cell-inspection-status > div { min-width: 0; flex: 1; }
.cell-inspection-status strong, .cell-inspection-status span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-inspection-status strong { font-size: 12px; font-weight: 600; }
.cell-inspection-status span { margin-top: 3px; font-size: 10px; color: #7a8b6d; }
.cell-inspection-status small { font-size: 9px; white-space: nowrap; color: #73836a; }
.cell-inspection-status button { flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #edf3e6; color: #52784a; font-size: 18px; }
.cell-inspection-status.awaiting-action { background: #fff4e5; border-color: #e4a460; color: #713e12; animation: awaiting-action-pulse 2.4s ease-in-out infinite; }
.cell-inspection-status.awaiting-action span, .cell-inspection-status.awaiting-action small { color: #8a571f; }
.cell-inspection-status.awaiting-action button { background: #ffe3b8; color: #995016; }
@keyframes awaiting-action-pulse {
    0%, 100% { background-color: #fff7ea; border-color: #edc18c; box-shadow: 0 0 0 0 #ed942800; }
    50% { background-color: #ffe0ae; border-color: #dc8a2d; box-shadow: 0 0 0 3px #ed942820; }
}
@media (prefers-reduced-motion: reduce) { .cell-inspection-status.awaiting-action { animation: none; } }
@media (max-width: 720px) { .cell-popup-heading { padding: 8px 10px; } .cell-popup-heading h3 { font-size: 18px; } .cell-popup-content { padding: 10px; } .cell-inspection-status { padding: 5px 7px; gap: 5px; } .cell-inspection-status strong { font-size: 10px; } .cell-inspection-status span { font-size: 9px; } }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .match-table-layout { gap: 18px; } .room-body { padding: 20px 10px; } .table-players { gap: 6px; margin-bottom: 14px; } .table-players .player-card { padding: 7px; gap: 7px; } .table-players .pawn-token { width: 28px; height: 38px; } .table-players .player-card div > span { font-size: 16px; } .table-players .player-card > small { font-size: 8px; } .board-dialog-layer { padding: 5px; } .board-dialog { border-radius: 12px; padding: 13px; } .board-dialog h2 { font-size: 20px; margin-bottom: 10px; } .board-dialog .button { min-height: 34px; padding: 8px; } .board-dialog .eyebrow { margin-bottom: 8px; } .board-dialog p { margin: 8px 0; } .board-dialog small { margin-top: 8px; } .purchase-price { margin: 12px 0; } .dialog-facts { padding: 10px 0; gap: 12px; font-size: 9px; } .cell-dialog { padding-top: 38px; } }
@media (prefers-reduced-motion: reduce) { .board-dialog, .rolling .die-cube, .rolling.waiting .die-cube, .rolling .die-flight, .rolling .die::before { animation: none; } }
@media (max-width: 480px) {
    .board-dialog:has(.purchase-price:not(.debt-price)) { padding: 10px; }
    .board-dialog:has(.purchase-price:not(.debt-price)) .eyebrow { font-size: 6px; margin-bottom: 5px; }
    .board-dialog:has(.purchase-price:not(.debt-price)) h2 { font-size: 18px; margin-bottom: 6px; }
    .board-dialog:has(.purchase-price:not(.debt-price)) .purchase-price { font-size: 28px; margin: 8px 0; }
    .board-dialog:has(.purchase-price:not(.debt-price)) > p:not(.waiting-note) { display: none; }
    .board-dialog:has(.purchase-price:not(.debt-price)) .button { min-height: 29px; padding: 6px; margin-top: 6px; }
}

/* The board and its conversation share the available viewport height. */
.app-shell:has(.match-active) { height:100dvh; min-height:0; overflow:hidden; }
.app-shell:has(.match-active) > .sidebar { min-height:0; overflow-y:auto; }
.main-content:has(> .match-active) { height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.room-body.match-active { flex:1; width:100%; max-width:none; margin:0; min-height:0; padding:20px 24px 24px; display:flex; flex-direction:column; gap:18px; overflow:hidden; }
.match-active > .section-heading { flex-shrink:0; margin:0; align-items:center; gap:16px; }
.match-active > .section-heading > div:first-child { min-width:0; }
.room-title { display:flex; align-items:center; gap:10px; }
.room-title h1 { margin-bottom:0; }
.room-title .connection-status { display:flex; align-items:center; flex-shrink:0; }
.room-title .live-dot { width:7px; height:7px; margin:0; }
.match-active > .section-heading h1 { margin:0; font-size:28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.match-active > .section-heading .eyebrow { margin-bottom:6px; }
.room-heading-status { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.match-table-layout { flex:1; min-height:0; grid-template-columns:minmax(0,1fr) clamp(280px,25vw,340px); grid-template-rows:minmax(0,1fr); align-items:stretch; gap:24px; }
.match-board-area { min-width:0; min-height:0; display:grid; place-items:center; container-type:size; }
.match-stage { width:min(100cqw,100cqh); height:min(100cqw,100cqh); max-width:none; margin:0; }
.match-sidebar { display:flex; flex-direction:column; gap:16px; min-width:0; min-height:0; }
.match-players { flex:0 1 auto; max-height:45%; min-height:0; overflow:auto; scrollbar-width:thin; }
.match-players h2, .chat-heading h2 { font-size:15px; font-weight:600; letter-spacing:0; margin:0; }
.match-players h2 { margin:0 0 10px; }
.match-sidebar .table-players { grid-template-columns:minmax(0,1fr); margin:0; gap:7px; }
.match-sidebar .player-card { padding:9px 12px; min-width:0; }
.match-sidebar .player-card > div { min-width:0; flex:1; }
.match-sidebar .player-card strong { overflow-wrap:anywhere; }
.match-sidebar .player-card div > span { font-size:18px; margin-top:3px; }
.match-sidebar .player-card > small { flex-shrink:0; }
.match-sidebar .pawn-token { width:28px; height:39px; flex-shrink:0; }
.match-chat { flex:1; min-height:0; min-width:0; position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fffefb; }
.chat-heading { display:flex; justify-content:space-between; align-items:center; flex-shrink:0; gap:10px; padding:15px 16px; border-bottom:1px solid var(--line); }
.chat-feed { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:14px; display:flex; flex-direction:column; gap:10px; overflow-anchor:none; }
.chat-event { display:flex; flex-shrink:0; align-items:baseline; gap:7px; color:#829079; font-size:11px; line-height:1.55; }
.chat-event > span { color:#a4b696; font-size:17px; line-height:1; }
.chat-event p { margin:0; min-width:0; overflow-wrap:anywhere; line-height:inherit; }
.chat-event-player { font-weight:600; }
.chat-message { flex-shrink:0; border-radius:10px; padding:10px 12px; background:#f0f3ec; color:var(--ink); }
.chat-message.mine { background:#e5f1e9; }
.chat-message header { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:5px; }
.chat-message strong { color:var(--author-color); font-size:11px; overflow-wrap:anywhere; }
.chat-message time { flex-shrink:0; color:#94a08b; font-size:9px; font-variant-numeric:tabular-nums; }
.chat-message p { margin:0; font-size:13px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-composer { flex-shrink:0; padding:12px; border-top:1px solid var(--line); background:#fffefb; }
.chat-input-row { display:flex; gap:8px; align-items:center; }
.chat-input-row input { flex:1; min-width:0; height:40px; padding:9px 11px; font-size:12px; }
.chat-send { display:grid; place-items:center; flex:0 0 40px; height:40px; padding:0; border:0; border-radius:8px; color:white; background:var(--green); }
.chat-send:hover:not(:disabled) { background:#1d6651; }
.chat-error { margin:0 0 8px; color:#ad5344; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.chat-offline { display:block; margin-top:6px; font-size:10px; color:#8a795a; }
.chat-jump { position:absolute; bottom:76px; left:50%; transform:translateX(-50%); padding:7px 12px; white-space:nowrap; border:1px solid #c9ddcd; border-radius:20px; background:#e6f2e9; color:#267b62; box-shadow:0 2px 10px #24483318; font-size:11px; }
@media(max-width:1100px) { .room-body.match-active { padding:16px; gap:14px; } .match-table-layout { gap:16px; grid-template-columns:minmax(0,1fr) 260px; } }
@media(max-width:900px) {
    .match-table-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr); gap:12px; }
    .match-sidebar { gap:10px; }
    .match-players { max-height:36%; }
    .match-players h2 { font-size:12px; margin-bottom:6px; }
    .match-sidebar .table-players { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
    .match-sidebar .player-card { padding:6px 8px; gap:7px; }
    .match-sidebar .player-card div > span { font-size:15px; }
    .match-sidebar .player-card > small { font-size:8px; }
    .match-sidebar .pawn-token { width:23px; height:32px; }
    .chat-heading { padding:9px 12px; }
    .chat-feed { padding:10px; }
    .chat-composer { padding:8px; }
}
@media(max-width:720px) {
    .app-shell:has(.match-active) { display:flex; flex-direction:column; }
    .app-shell:has(.match-active) > .sidebar { flex:0 0 auto; }
    .main-content:has(> .match-active) { flex:1; height:auto; }
    .room-body.match-active { padding:10px; gap:10px; }
    .match-active > .section-heading h1 { font-size:20px; }
    .match-active > .section-heading .eyebrow { font-size:7px; letter-spacing:.5px; }
    .room-heading-status { gap:4px; }
    .room-heading-status .badge { font-size:8px; padding:5px 6px; }
    .match-sidebar .player-card strong { font-size:9px; }
}

.board-dialog .drawn-card-text, .board-dialog .cell-action-text { white-space:pre-wrap; overflow-wrap:anywhere; color:#52684e; }
.debt-card-context { text-align:left; padding:10px 12px; border-radius:8px; background:#f1f4eb; font-size:13px; }
.debt-card-context p { margin:6px 0 0; }
.cell-popup-content .mortgage-note { margin:10px 0 0; color:#986321; }
.mortgage-mark { position:absolute; right:3px; bottom:5px; border-radius:3px; padding:2px 4px; background:#fff3d8; color:#85561c; font-size:clamp(6px,1cqw,10px); }
.debt-properties { margin-top:10px; }


.debt-dialog { padding:16px; }
.debt-dialog h2 { margin-bottom:12px; }
.debt-dialog .debt-facts { margin-top:10px; padding:10px 0; }
.debt-facts > span:first-child strong { color:#b76b4e; }
.debt-dialog p { margin:8px 0; line-height:1.5; }
.debt-dialog small { margin-top:8px; }
.debt-dialog .debt-card-context p { margin:4px 0 0; }