/* Nonmodal workspace: menus occupy their own space beside/below the map. */
.panel-open #modal-root{position:fixed;inset:var(--dock-top) 0 var(--dock-bottom) auto;width:var(--dock-width);z-index:25;background:#082e23;border-inline-end:1px solid #718d65;pointer-events:auto}
#modal-root .workspace-panel{display:block;position:absolute;inset:0;padding:0;background:none;backdrop-filter:none;pointer-events:none}
#modal-root .workspace-panel .modal{position:absolute;inset:0;width:100%!important;max-width:none;max-height:none;height:100%;margin:0;padding:12px;border:0;border-radius:0;box-shadow:none;overflow:auto;pointer-events:auto;background:#082e23}
#modal-root .workspace-panel .modal-heading{position:sticky;top:-12px;z-index:5;margin:0 0 12px;padding:10px 0;background:#082e23}
#modal-root .workspace-panel .modal-heading h2{font-size:20px}
#modal-root .workspace-panel .modal-heading .icon-button{width:40px;height:40px;min-width:40px}
#modal-root .portfolio-grid,#modal-root .rules-grid,#modal-root .exchange-grid,#modal-root .trade-columns{grid-template-columns:1fr;gap:10px}
#modal-root .portfolio-summary{flex-direction:row;margin-bottom:8px}#modal-root .portfolio-summary strong{font-size:21px}
#modal-root .portfolio-summary>span{font-size:11px}
#modal-root .manage-tabs{top:48px;margin:8px 0;padding:4px}#modal-root .manage-tabs button{font-size:12px;min-height:40px}
#modal-root .portfolio-tip{font-size:11px;line-height:1.8;padding:9px;margin:8px 0 12px}
#modal-root .clean-deed{padding:11px!important}#modal-root .clean-deed h3{font-size:16px}
#modal-root .building-preview{margin:7px 0;padding:4px 6px;gap:8px}#modal-root .building-art{width:56px;height:52px;flex-basis:56px}
#modal-root .building-preview b{font-size:12px}#modal-root .clean-deed .asset-hint{min-height:20px;font-size:10px}
#modal-root .deed-rent{margin:8px 0}#modal-root .clean-deed .button{font-size:12px;min-height:42px}
#modal-root .trade-compose-footer{position:static;padding-bottom:0}#modal-root .trade-properties{max-height:170px;overflow:auto}
#modal-root .setting-row{flex-wrap:wrap;gap:10px}#modal-root .setting-row p{font-size:12px}
#modal-root .victory-medallion{margin-top:25px}#modal-root .victory-panel h3{font-size:24px}
#modal-root .victory-players{max-height:none}#modal-root .illustrated-card .card-front{min-height:0}
#modal-root .illustrated-card .card-art{height:150px}#modal-root .illustrated-card .card-copy p{font-size:16px}
.panel-open .sidebar{visibility:hidden}
.trade-notices{left:auto;right:12px;width:calc(100vw * 346 / 1672 - 24px)}
@media(min-width:1001px){
 .panel-open #board-window{display:block;position:absolute;left:0;top:0;width:var(--dock-board-width);height:calc(var(--stage-height) - 103px);overflow:hidden}
 .panel-open #board-content{display:block;position:absolute;inset:0;width:1672px;height:100%;transform:scaleX(var(--dock-board-x));transform-origin:0 0}
 .panel-open .topbar{width:var(--dock-board-width)}
 .panel-open #effects-root{transform:scale(var(--dock-board-x),var(--board-scale-y));transform-origin:0 0}
}
@media(max-width:1000px){
 html:has(.panel-open),body.panel-open{height:100dvh;overflow:hidden}
 .panel-open #modal-root{width:100%;inset:var(--dock-top) 0 var(--dock-bottom);border-top:1px solid #718d65}
 .panel-open .welcome-guide{visibility:hidden}
 #modal-root .workspace-panel .modal{padding:10px}
 #modal-root .workspace-panel .modal-heading{top:-10px;padding:3px 0;margin-bottom:8px}
 #modal-root .workspace-panel .modal-heading h2{font-size:17px}
 #modal-root .manage-tabs{top:36px}#modal-root .manage-tabs button{min-height:36px}
 .trade-notices{right:10px;left:auto;width:260px;top:auto;bottom:170px}
}
@media(min-width:651px) and (max-width:1000px) and (max-height:600px){
 .panel-open #modal-root{width:280px;left:auto;top:60px}
}

.board-art{display:inline-block;width:32px;height:32px;flex:0 0 32px;background:url('./assets/board-icons.png') var(--art-x) var(--art-y)/400% 300% no-repeat;vertical-align:middle}
.property-title .board-art{width:30px;height:30px;flex-basis:30px}
.property-picture .board-art{width:76px;height:76px;filter:drop-shadow(0 3px 3px #0005)}

/* Short headers leave room for the actual controls on phones. */
@media(max-width:1000px){
 .panel-open .actionbar{min-height:0}
 .panel-open .turn-status{display:none}
 #modal-root .portfolio-summary{align-items:center;margin:0 0 5px}
 #modal-root .portfolio-summary>div{display:flex;align-items:center;gap:8px}
 #modal-root .portfolio-summary small{font-size:10px}
 #modal-root .portfolio-summary strong{font-size:17px}
 #modal-root .portfolio-tip{display:none}
 #modal-root .manage-tabs{margin:5px 0 9px}
 #modal-root .modal-heading{border-bottom:0}
}
/* Chance, community and jail share the board-centered reward anchor. */
#reward-dock,.panel-open #reward-dock{position:fixed;left:40%;top:45%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 28px));z-index:35;pointer-events:none;overflow:visible}
#reward-dock .game-reward{position:relative;inset:auto;width:100%;max-width:none;transform:none;max-height:calc(100dvh - var(--dock-bottom,103px) - 85px);overflow:auto;pointer-events:auto;filter:drop-shadow(0 7px 16px #0007)}
#reward-dock .card-reward{height:400px;min-height:0;overflow:visible}
#reward-dock .game-reward h2{font-size:22px}
#reward-dock .card-front{padding:12px}
#reward-dock .card-copy{flex:1;min-height:0;padding:8px 0;overflow:auto}
#reward-dock .card-copy p{font-size:17px}
#reward-dock .card-art{height:145px;min-height:60px}
#reward-dock .effect-dismiss{right:auto;left:6px;top:6px;width:32px;height:32px;z-index:4}
@media(max-width:650px){
 #reward-dock .card-reward{height:360px}
 #reward-dock .card-art{display:block;height:110px;min-height:60px;flex:none}
 #reward-dock .card-copy p{font-size:16px}
}
@media(min-width:651px) and (max-width:1000px) and (max-height:600px){
 #reward-dock .card-reward{height:240px}
 #reward-dock .card-art,#reward-dock .card-edition,#reward-dock .card-emblem{display:none}
 #reward-dock .card-copy p{font-size:15px}
}

@media(min-width:1001px){#game-viewport{overflow:clip}}

/* Match history fills the space previously occupied by the repeated deed. */
.in-room:not(.lobby-screen) .sidebar{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.in-room:not(.lobby-screen) .sidebar>.section-heading{flex-shrink:0}
.in-room:not(.lobby-screen) .roster{flex:0 1 auto;max-height:52%;min-height:90px}
.in-room:not(.lobby-screen) .sidebar>.debt-banner{flex:0 0 auto;max-height:none;overflow:visible}
.activity{display:flex;flex-direction:column;flex:1 1 0;min-height:140px;margin:10px 5px 0;padding:10px 12px;overflow:hidden;background:#082e24;border-color:#416e54}
.activity .section-heading{flex-shrink:0;margin:0;padding-bottom:9px;border-bottom:1px solid #65856844}
.activity .section-heading h2{font:700 14px 'Noto Arabic',sans-serif;letter-spacing:0}
.event-list{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;list-style:none;margin:0;padding:0;outline-offset:-2px;touch-action:pan-y}
.activity .event{display:block!important;margin:0;padding:10px 0;border-bottom:1px solid #65856833;direction:rtl}
.activity .event:last-child{border-bottom:0}
.activity .event time{display:block;font:11px 'Noto Arabic',sans-serif;color:#99b9a6;margin-bottom:3px}
.activity .event p{margin:0;font:13px/1.9 'Noto Arabic',sans-serif;color:#e5ebd8;overflow-wrap:anywhere}
@media(max-width:1000px){
 .in-room:not(.lobby-screen) .sidebar{display:block;overflow:visible}
 .in-room:not(.lobby-screen) .roster{max-height:none;min-height:0}
 .activity{height:clamp(220px,40dvh,380px);min-height:0;margin:12px 0 0}
 .activity .event p{font-size:13px}
}

/* Give the countdown a dedicated cell alongside the turn title. */
@media(min-width:1001px){
 .turn-status{grid-template-columns:64px minmax(0,1fr) 54px;grid-template-rows:34px 28px;column-gap:10px;row-gap:2px;align-content:center;align-items:center}
 .turn-status>.turn-emblem{grid-column:1;grid-row:1 / 3}
 .turn-status>div:nth-child(2){display:contents}
 .turn-status strong{grid-column:2;grid-row:1;min-width:0;max-width:100%;font-size:23px}
 .turn-status>div>span{grid-column:2 / 4;grid-row:2;min-width:0;max-width:100%;line-height:22px}
 .turn-status .turn-clock{position:static;inset:auto;grid-column:3;grid-row:1;width:54px;height:28px;margin:0;padding:5px 4px;font:700 15px/16px Roboto,sans-serif;opacity:1;display:block;align-self:center}
}

/* Keep panel headings and settings controls clear of the screen edges. */
#modal-root .workspace-panel .modal{overflow-x:hidden}
#modal-root .workspace-panel .modal-heading{gap:12px;min-width:0;padding-inline:4px}
#modal-root .workspace-panel .modal-heading h2{min-width:0;max-width:100%;line-height:1.6;overflow-wrap:anywhere}
#modal-root .workspace-panel .modal-heading .icon-button{flex-shrink:0}


@media(min-width:1001px){
 #modal-root .workspace-panel .modal{padding-inline:20px}
 .topbar-right{padding-inline:20px}
 .topbar-right .connection{left:22px}
 .panel-open .topbar-right{left:var(--dock-board-width);width:calc(1672px - var(--dock-board-width))}
}

/* Tile inspection stays anchored to the board, separate from management. */
.tile-popup-open #modal-root{position:fixed;inset:0;width:auto;height:auto;z-index:30;background:none;pointer-events:none}
#modal-root .property-popover{position:absolute;inset:0;padding:0;background:none;backdrop-filter:none;pointer-events:none}
#modal-root .property-popover .modal{position:fixed;inset:auto;margin:0;width:330px;max-width:calc(100vw - 24px);height:auto;min-height:0;padding:12px;overflow:auto;overscroll-behavior:contain;border:1px solid #c3aa69;border-radius:16px;box-shadow:0 10px 28px #00180db3;background:#082e23;pointer-events:auto;outline:none}
#modal-root .property-popover .modal-heading{position:static;display:flex;align-items:center;gap:12px;margin:0 0 8px;padding:0 0 8px;min-width:0}
#modal-root .property-popover .modal-heading h2{font:700 18px/1.6 'Noto Arabic',sans-serif;margin:0;min-width:0;overflow-wrap:anywhere}
#modal-root .property-popover .modal-heading .icon-button{width:36px;height:36px;min-width:36px}
#modal-root .property-popover .property-card{height:auto;margin:0;overflow:hidden}
#modal-root .property-popover .property-title{display:none}
#modal-root .property-popover .property-detail{height:100px;min-height:0}
#modal-root .property-popover .property-picture{height:100px;width:42%}
#modal-root .property-popover .property-numbers{min-width:0;padding:8px;font-size:13px}
#modal-root .property-popover .property-numbers strong{font-size:20px;line-height:27px}
#modal-root .property-popover .property-numbers b{font-size:17px;line-height:24px}
#modal-root .property-popover .property-owner{position:static;width:100%;height:auto;min-height:32px;display:flex;justify-content:center;padding:6px 8px;line-height:20px;border-radius:0;font-size:12px}
#modal-root .property-popover .illustrated-card .card-front{min-height:0;padding:12px}
#modal-root .property-popover .illustrated-card .card-art{height:100px}
#modal-root .property-popover .illustrated-card .card-copy{min-height:0}
#modal-root .property-popover .illustrated-card .card-copy p{font-size:16px}

#modal-root .settings-popover .setting-row{display:flex;align-items:center;gap:12px;padding:12px 0;margin:0;border-bottom:1px solid #65856844}
#modal-root .settings-popover .setting-row>div{flex:1;min-width:0}
#modal-root .settings-popover .setting-row strong{font-size:14px;line-height:1.7}
#modal-root .settings-popover .setting-row p{font-size:11px;line-height:1.7;margin:5px 0}
#modal-root .settings-popover .setting-row label{font-size:10px;line-height:1.7;margin:7px 0 3px}
#modal-root .settings-popover .setting-row input[type=range]{width:100%;max-width:100%;height:26px;min-height:26px}
#modal-root .settings-popover .setting-row .button{min-width:0;max-width:105px;min-height:40px;padding:7px 9px;font-size:11px;line-height:1.7;white-space:normal}
#modal-root .settings-popover>.modal>.button{min-height:40px;padding:8px;font-size:12px;margin-top:8px}
#modal-root .settings-popover .text-button{font-size:11px;white-space:normal;text-align:start}

#modal-root .settings-popover .setting-row>div{font:12px/1.7 'Noto Arabic',sans-serif}
#modal-root .settings-popover .setting-row strong{display:block}

@media(min-width:651px) and (max-width:1000px) and (max-height:600px){
 #modal-root .property-popover:not(.settings-popover) .modal{padding:8px}
 #modal-root .property-popover:not(.settings-popover) .modal-heading{padding-bottom:3px;margin-bottom:4px}
 #modal-root .property-popover:not(.settings-popover) .modal-heading .icon-button{width:28px;height:28px;min-width:28px}
 #modal-root .property-popover .property-detail,#modal-root .property-popover .property-picture{height:72px}
 #modal-root .property-popover .property-numbers{padding:3px 8px}
 #modal-root .property-popover .property-numbers>span{font-size:10px;line-height:14px;margin:0}
 #modal-root .property-popover .property-numbers strong,#modal-root .property-popover .property-numbers b{font-size:16px;line-height:20px}
 #modal-root .property-popover .rent-comparison>div{padding:2px}
 #modal-root .property-popover .rent-comparison span{font-size:10px;line-height:14px}
 #modal-root .property-popover .rent-comparison b{font-size:12px;line-height:18px}
 #modal-root .property-popover .property-owner{font-size:10px;min-height:24px;line-height:16px;padding:3px 5px}
}

/* Purchase and payment receipts share a compact centered notification area. */
#transaction-notifications{position:fixed;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));z-index:35;pointer-events:none}
#transaction-notifications .game-reward{position:relative;min-height:0;inset:auto;width:100%;max-width:none;max-height:calc(100dvh - 48px);overflow:auto;padding:12px 14px;transform:none;filter:none;pointer-events:auto;direction:rtl;border:1px solid #9e925a;border-radius:16px;background:linear-gradient(120deg,#123c2f,#08291f);box-shadow:0 8px 24px #001b1680;color:#f3e9c8;text-align:start}
.payment-details .payment-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:28px;margin-bottom:10px}
.payment-details .payment-summary>div{min-width:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.payment-details .payment-summary span{font-size:11px;color:#c5d2b9;line-height:1.7}
.payment-details .payment-summary strong{font-size:16px;line-height:1.6;color:#f6e7b1}
.payment-details .payment-summary>b{font-size:20px;line-height:1.5;color:#f0d07c;white-space:nowrap;flex-shrink:0}
.payment-details .payment-transfer{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:10px;direction:ltr;border-top:1px solid #74987740;padding-top:10px}
.payment-details .payment-person{display:flex;align-items:center;gap:9px;padding:0;border:0;border-radius:0;background:none;direction:ltr;min-width:0}
.payment-details .payment-person>div{min-width:0;flex:1;text-align:start;direction:rtl}
.payment-details .payment-person .character-portrait,.payment-details .payment-bank{width:44px;height:44px;flex:0 0 44px;margin:0;border-radius:10px;border-bottom:3px solid var(--person-color);background-color:#05261b}
.payment-details .payment-bank{font:36px/42px Georgia;text-align:center;color:#e8d393}
.payment-details .payment-person strong{font:700 13px/1.7 'Noto Arabic',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.payment-details .payment-person div>span{font:11px/1.5 'Noto Arabic',sans-serif;color:#c6d8c4}
.payment-details .payment-arrow{font:24px/1 Arial;color:#d9bd6d;text-align:center}
#transaction-notifications .effect-dismiss{top:8px;left:8px;right:auto;width:28px;height:28px;font-size:19px;background:transparent;border:0;color:#bfd0bd}
.payment-details .payment-partial{margin:8px 0 0;padding-top:6px;font-size:11px;line-height:1.8;color:#efcda3;border-top:1px solid #74987740}
@media(max-width:650px){
 #transaction-notifications{width:calc(100vw - 20px)}
 #transaction-notifications .payment-reward{padding:10px 12px}
 .payment-details .payment-summary{gap:8px}
 .payment-details .payment-summary>b{font-size:18px}
 .payment-details .payment-person{gap:6px}
 .payment-details .payment-person .character-portrait,.payment-details .payment-bank{width:38px;height:38px;flex-basis:38px}
 .payment-details .payment-person strong{font-size:12px}
}

/* Property management: one identity row, useful figures, one action. */
#modal-root .compact-deed{border-top-width:3px;border-radius:12px;background:#10392b;box-shadow:none;padding:10px 12px!important}
#modal-root .compact-deed header{gap:10px;align-items:center;margin:0 0 8px}
#modal-root .compact-deed .deed-identity{display:flex;align-items:center;gap:8px;min-width:0}
#modal-root .compact-deed .deed-identity>div{min-width:0}
#modal-root .compact-deed h3{font-size:15px;line-height:1.7;overflow-wrap:anywhere}
#modal-root .compact-deed .deed-identity span{display:block;color:#afc7b4;font-size:10px;line-height:1.7}
#modal-root .compact-deed .deed-identity span b{font-weight:600;color:#d1dfc7}
#modal-root .compact-deed .building-art{width:38px;height:36px;flex:0 0 38px;filter:none}
#modal-root .compact-deed .deed-group{font-size:10px;padding:3px 8px;line-height:1.8;background:#052a20;color:#d2dfc8}
#modal-root .compact-deed .is-mortgaged{color:#efc693;background:#473c234d}
#modal-root .compact-deed .deed-facts{display:flex;gap:16px;align-items:center;border-top:1px solid #75916a33;padding:7px 0;margin:0 0 3px;direction:rtl}
#modal-root .compact-deed .deed-facts>div{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;min-width:0}
#modal-root .compact-deed .deed-facts:has(>div+div)>div{display:block}
#modal-root .compact-deed .deed-facts span{color:#b4c9b4;font-size:10px;line-height:1.8}
#modal-root .compact-deed .deed-facts b{display:block;color:#f2e4bc;font-size:14px;line-height:1.8;white-space:nowrap}
#modal-root .compact-deed .button{min-height:40px;border-radius:8px;line-height:1.8;padding:7px 10px;font-size:12px;box-shadow:none}
#modal-root .compact-deed .button strong{font-size:14px;line-height:1.8}
#modal-root .compact-deed .asset-hint{min-height:0;margin:6px 0 0;font-size:10px;line-height:1.8;color:#c4d3ba}
#modal-root .compact-deed .button:disabled{opacity:1;background:#163f30;color:#9eb39f;border:1px solid #49694c;box-shadow:none}
#modal-root .compact-deed .button:disabled strong{color:#adc0a8}
#modal-root .compact-deed .button:focus-visible{outline:2px solid #fff0bc;outline-offset:3px}
@media(max-width:1000px){#modal-root .portfolio-tip:has(+.portfolio-grid .deed-mortgage){display:block;margin:5px 0 8px;padding:0;font-size:10px}}

#modal-root .workspace-panel .modal:has(.compact-deed) .modal-heading{padding:6px 0;margin-bottom:8px}
#modal-root .modal:has(.compact-deed) .portfolio-summary{align-items:center;margin:0 0 6px}
#modal-root .modal:has(.compact-deed) .portfolio-summary>div{display:flex;align-items:center;gap:8px}
#modal-root .modal:has(.compact-deed) .portfolio-summary strong{font-size:18px;line-height:1.8}
#modal-root .modal:has(.compact-deed) .portfolio-summary small{font-size:10px}
#modal-root .modal:has(.compact-deed) .portfolio-tip{background:none;border:0;padding:0 2px;margin:8px 0 10px;font-size:10px;line-height:1.8}

@media(max-width:1000px){
 #modal-root .workspace-panel .modal:has(.compact-deed) .modal-heading{height:32px;min-height:0;padding:0;margin:0 0 4px}
 #modal-root .modal:has(.compact-deed) .modal-heading h2{margin:0;font-size:16px}
 #modal-root .modal:has(.compact-deed) .modal-heading .icon-button{width:32px;height:32px;min-width:32px}
 #modal-root .modal:has(.compact-deed) .portfolio-summary{margin:0 0 3px}
 #modal-root .modal:has(.compact-deed) .portfolio-summary strong{font-size:16px;line-height:1.6}
 #modal-root .modal:has(.compact-deed) .manage-tabs{top:34px;margin:4px 0;padding:3px}
 #modal-root .modal:has(.compact-deed) .manage-tabs button{min-height:32px;font-size:11px}
 #modal-root .modal:has(.compact-deed) .portfolio-tip{margin:5px 0 7px;font-size:10px;line-height:1.6}
 #modal-root .compact-deed{padding:8px 10px!important}
 #modal-root .compact-deed header{margin-bottom:4px}
 #modal-root .compact-deed .deed-facts{padding:4px 0}
}

#transaction-notifications .purchase-summary{padding-left:28px;margin-bottom:10px}
#transaction-notifications .purchase-summary>span{font-size:11px;line-height:1.7;color:#c5d2b9}
#transaction-notifications .purchase-summary h2{margin:0;font-size:18px;line-height:1.6;color:#f6e7b1;overflow-wrap:anywhere}
#transaction-notifications .purchase-owner{display:flex;align-items:center;gap:10px;border-top:1px solid #74987740;padding-top:10px;min-width:0}
#transaction-notifications .purchase-owner .character-portrait{display:block;width:44px;height:44px;flex:0 0 44px;border-radius:10px;border-bottom:3px solid var(--reward-color);background-color:#05261b}
#transaction-notifications .purchase-owner>div{min-width:0;flex:1}
#transaction-notifications .purchase-owner>div>span{font-size:11px;line-height:1.5;color:#c6d8c4}
#transaction-notifications .purchase-owner strong{display:block;font-size:13px;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#transaction-notifications .purchase-status{flex-shrink:0;font-size:12px;line-height:1.8;color:#d6e8b6;background:#44643733;border:1px solid #8ca66a55;border-radius:7px;padding:4px 8px}
@media(max-width:650px){#transaction-notifications .purchase-reward{padding:10px 12px}}

/* Auction: highest offer and bidder are separate from bid controls. */
.auction-active .turn-status{display:none}
.action-dock.auction-dock{top:auto;bottom:10px;width:640px;height:auto;padding:12px 14px;border:1px solid #bba567;border-radius:16px;background:linear-gradient(120deg,#163f30,#062a20);box-shadow:0 8px 24px #00190c80;text-align:start;direction:rtl}
.auction-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.auction-title>div:first-child{display:flex;align-items:baseline;gap:10px;min-width:0}
.auction-title span{font-size:12px;color:#b4cdb7}
.auction-title h3{font-size:20px;line-height:1.5;margin:0;color:#f5e4b6;overflow-wrap:anywhere}
.auction-timer{display:flex;align-items:center;gap:6px;border:1px solid #7b946366;border-radius:8px;padding:4px 9px;flex-shrink:0;background:#08291f}
.auction-timer .auction-clock{font:700 19px/1.5 'Noto Arabic',sans-serif;color:#eedba5;min-width:39px;text-align:center;white-space:nowrap}
.auction-timer small{font-size:10px;color:#bfd0b5}
.auction-timer.urgent{border-color:#e88c69;background:#632e204d}.auction-timer.urgent .auction-clock{color:#ffc3a3}
.auction-standing{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 12px;margin-bottom:9px;background:#051f19;border:1px solid #73926855;border-radius:10px}
.auction-best>span{display:block;font-size:11px;color:#bdcdb6}.auction-best>strong{display:block;font-size:28px;line-height:1.5;white-space:nowrap;color:#f1d180}
.auction-leader{display:flex;align-items:center;gap:10px;min-width:0;max-width:55%}
.auction-leader .character-portrait,.auction-first{display:block;width:48px;height:48px;flex:0 0 48px;border-radius:9px;border-bottom:3px solid var(--leader);background-color:#123729}
.auction-first{text-align:center;font-size:30px;color:#dbc47d}.auction-leader>div{min-width:0}.auction-leader small{display:block;color:#c1d0b8;font-size:11px}.auction-leader strong{display:block;color:#f2e6c6;font-size:17px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auction-dock .auction-buttons{height:auto;gap:8px}
.auction-dock .auction-buttons>.button{display:flex;flex-direction:column;gap:0;flex:1;min-width:0;max-width:none;height:58px;padding:5px 10px;border-radius:10px}
.auction-buttons>.button>span{font-size:11px;line-height:1.7}.auction-buttons>.button>strong{font-size:20px;line-height:1.6;white-space:nowrap}
.auction-dock .auction-buttons>.button.subtle{flex:0 0 90px;font-size:13px}
.auction-footnote{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:10px;line-height:1.8;color:#bbceb7}
.auction-footnote>span:last-child{white-space:nowrap}.auction-footnote b{color:#e5ddb8;font-weight:600}
@media(max-width:1000px){
 .actionbar.auction-active{min-height:0}
 .action-dock.auction-dock{position:static;inset:auto;transform:none;width:100%;padding:6px 0;border:0;border-radius:0;box-shadow:none;background:none}
 .auction-title{margin-bottom:5px}.auction-title h3{font-size:16px}.auction-title>div:first-child{gap:7px}.auction-title span{font-size:10px}
 .auction-standing{padding:6px 9px;margin-bottom:6px;gap:12px}.auction-best>strong{font-size:23px}.auction-leader strong{font-size:14px}
 .auction-leader .character-portrait,.auction-first{width:38px;height:38px;flex-basis:38px}
 .auction-dock .auction-buttons>.button{height:48px;padding:3px 6px}.auction-buttons>.button>strong{font-size:17px}.auction-dock .auction-buttons>.button.subtle{flex-basis:64px;font-size:11px}
 .auction-footnote{font-size:9px;gap:7px;margin-top:5px}.auction-footnote .auction-hint{white-space:normal}
}
@media(min-width:651px) and (max-width:1000px) and (max-height:600px){
 .actionbar.auction-active{grid-template-rows:auto;grid-template-columns:minmax(0,1fr) 240px;align-items:end;gap:10px}
 .auction-active .auction-dock,.auction-active .bottom-nav{grid-row:1}
 .auction-title h3{font-size:14px}.auction-title{margin-bottom:3px}.auction-standing{padding:4px 8px;margin-bottom:4px}.auction-best>strong{font-size:20px}
 .auction-dock .auction-buttons>.button{height:44px}.auction-footnote{margin-top:3px}
}

/* Payment belongs to the related deed/card, with one frame and one close button. */
.payment-details{padding:12px 14px;background:#0b3024;color:#f3e9c8;direction:rtl;flex-shrink:0;text-align:start}
.payment-details .payment-summary{padding-left:0;margin-bottom:8px}
.payment-details .payment-summary span{font-weight:700;font-size:12px;color:#ddce99}
.payment-details .payment-transfer{display:grid}
.payment-details .payment-person strong{display:block}
#transaction-notifications .property-payment{padding:0;border:0;background:none;border-radius:14px}
#transaction-notifications .property-card{height:auto;margin:0;border-radius:14px;overflow:hidden;border-color:#b8a265}
#transaction-notifications .property-title{height:42px;padding-left:42px}
#transaction-notifications .property-title h3{font-size:20px}
#transaction-notifications .property-detail{height:100px;min-height:0}
#transaction-notifications .property-picture{height:100px;width:42%}
#transaction-notifications .property-numbers{padding:6px 12px}
#transaction-notifications .property-numbers strong{font-size:21px;line-height:28px}
#transaction-notifications .property-numbers b{font-size:18px;line-height:24px}
#transaction-notifications .property-numbers>span{font-size:11px;line-height:18px}
#transaction-notifications .rent-comparison{margin:0}
#reward-dock .card-with-payment{height:470px}
#reward-dock .card-with-payment .card-art{height:110px;min-height:60px}
#reward-dock .card-with-payment .payment-details{border-radius:10px;padding:8px 10px;margin-top:4px}
#reward-dock .card-with-payment footer{display:none}
#reward-dock .card-with-payment .payment-summary>b{font-size:18px}
@media(max-width:650px){
 #reward-dock .card-with-payment{height:430px}
 #reward-dock .card-with-payment .card-art{height:85px;min-height:40px}
}
@media(min-width:651px) and (max-width:1000px) and (max-height:600px){
 #transaction-notifications .property-detail,#transaction-notifications .property-picture{height:72px}
 #transaction-notifications .property-title{height:32px}
 #transaction-notifications .property-numbers{padding:2px 8px}
 #transaction-notifications .property-numbers strong,#transaction-notifications .property-numbers b{font-size:15px;line-height:18px}
 #transaction-notifications .rent-comparison{display:none}
 .payment-details{padding:7px 10px}
 .payment-details .payment-summary{margin-bottom:4px}
 .payment-details .payment-transfer{padding-top:4px}
 .payment-details .payment-person .character-portrait,.payment-details .payment-bank{width:32px;height:32px;flex-basis:32px}
 #reward-dock .card-with-payment{height:240px}
 #reward-dock .card-with-payment .card-copy{padding:3px 0}
}

.trade-notices{left:14px;right:auto;top:auto;bottom:calc(var(--dock-bottom,103px) + 14px);width:310px;max-width:calc(100vw - 28px);z-index:45}
.trade-notice{padding:12px 14px}
.offer-notice-heading{display:flex;align-items:center;gap:10px;padding-left:20px}
.offer-notice-heading .character-portrait{width:48px;height:48px;flex:0 0 48px}
.offer-notice-heading b,.offer-notice-heading span{display:block}
.offer-notice-heading div>span{font-size:12px;color:#c5d6bc}
.trade-notice .offer-review{display:block;width:100%;padding:8px;border-radius:8px;background:#e6cd81;color:#123427;margin-top:8px;min-height:38px}
.nav-button.has-offer{position:relative;border-color:#e6cd81;box-shadow:0 0 0 2px #e6cd8133}
.offer-badge{position:absolute;top:-7px;left:-6px;display:grid;place-items:center;width:23px;height:23px;border:2px solid #082d23;border-radius:50%;background:#f1ce70;color:#173b2b;font:bold 13px Arial}

.active-pawn-marker{position:absolute;z-index:3;transform:translate(-50%,-100%);max-width:150px;padding:3px 10px;border:2px solid #fff0ad;border-radius:20px;background:#0b3829;box-shadow:0 3px 10px #001c14aa;color:#ffe6a2;font:700 13px/1.8 'Noto Arabic',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.active-pawn-marker[hidden]{display:none}
.fallback-character.active-character{filter:drop-shadow(0 0 6px #ffe6a2);animation:active-character-bob 2.8s ease-in-out infinite}
@keyframes active-character-bob{50%{transform:translate(-50%,calc(-97% - 6px))}}
@media(prefers-reduced-motion:reduce){.fallback-character.active-character{animation:none}}

/* Landing payments use the same illustrated card shell as Chance/Community. */
#reward-dock .payment-card{height:auto;min-height:0;padding:0;border:0;background:none;overflow:visible;direction:rtl}
#reward-dock .payment-card>.card-front{position:relative;inset:auto;width:100%;padding:14px;gap:0}
#reward-dock .card-heading{padding-left:34px}
#reward-dock .card-heading>div{min-width:0}
#reward-dock .card-heading h2{overflow-wrap:anywhere}
#reward-dock .payment-card .card-emblem{background:#1b6549}
#reward-dock .payment-card .card-emblem .board-art{display:block;width:38px;height:38px}
#reward-dock .payment-card-art{height:120px;min-height:0;flex:none;margin:12px 0;background-image:url('./assets/algeria-diorama.png');background-size:160%;border-radius:10px}
#reward-dock .payment-card .payment-details{border-radius:10px;padding:10px;margin:0}
#reward-dock .payment-card .payment-summary>b{font-size:24px}
#reward-dock .payment-card .payment-summary span{font-size:11px}
.active-pawn-marker.below-pawn{border-color:#ffe7a0;box-shadow:0 -2px 10px #001c1480}
@media(max-width:650px){#reward-dock .payment-card-art{height:95px}#reward-dock .payment-card>.card-front{padding:12px}}
@media(min-width:651px) and (max-width:1000px) and (max-height:600px){
 #reward-dock .payment-card .payment-card-art{display:none}
 #reward-dock .payment-card .card-heading{margin-bottom:8px}
 #reward-dock .payment-card>.card-front{padding:10px}
}

/* Debt recovery stays readable; controls never live inside a clipped banner. */
.debt-banner{padding:12px;border:1px solid #c8a45e;background:linear-gradient(120deg,#183d2e,#0b2b21);border-radius:14px;color:#f6e8bc}
.debt-banner header{align-items:center;gap:10px}
.debt-player{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.debt-player .character-portrait{display:block;width:40px;height:40px;flex:0 0 40px}
.debt-player>div{min-width:0}.debt-player b{display:block;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.debt-player small{display:block;font-size:11px;line-height:1.8;color:#c6d5b9}
.debt-time{flex:0 0 auto;text-align:center;padding:5px 8px;border:1px solid #8d9e6e66;background:#05271e;border-radius:8px}
.debt-time small{display:block;font-size:9px;color:#c7d6bd}.debt-time .debt-clock{display:block;font:700 20px/1.5 'Noto Arabic',sans-serif;color:#f5d789}
.debt-time.urgent{border-color:#ea9e73}.debt-time.urgent .debt-clock{color:#ffb78f}
.debt-banner>.debt-amounts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.debt-amounts>div{min-width:0;padding:8px;background:#05251b;border:1px solid #74906544;border-radius:9px}
.debt-amounts span{display:block;font-size:10px;line-height:1.8;color:#c6d3b8;overflow-wrap:anywhere}
.debt-amounts strong{font-size:18px;line-height:1.8;color:#fff1c4;white-space:normal}
.debt-amounts>div:last-child strong{color:#f5ce72}
.debt-banner>.debt-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0}
.debt-actions .button{min-width:0;min-height:38px;padding:7px 5px;font-size:11px;line-height:1.8;white-space:normal}
.debt-actions .full{grid-column:1/-1}
.debt-actions .button:disabled{opacity:1;background:#153b2c;border-color:#507452;color:#b5c5ab;box-shadow:none}
.debt-banner .debt-explanation{font-size:11px;line-height:1.8;margin:8px 0 4px;color:#d3dec4}
.debt-help{font-size:10px;line-height:1.8;color:#bbceb3}.debt-help summary{cursor:pointer;padding:3px 0;color:#e5cd92}.debt-help p{margin:5px 0;font-size:11px}
@media(min-width:1001px){
 .in-room:not(.lobby-screen) .sidebar:has(>.debt-banner){overflow-y:auto;overscroll-behavior:contain}
 .sidebar:has(>.debt-banner) .roster{max-height:32%;flex-shrink:0}
 .sidebar:has(>.debt-banner) .activity{min-height:130px;flex-shrink:0}
}

/* The fixed action bar handles repayment while managing assets. */
#modal-root .compact-debt{padding:8px;margin-bottom:8px}
#modal-root .compact-debt .debt-player .character-portrait{width:30px;height:30px;flex-basis:30px}
#modal-root .compact-debt .debt-player b{font-size:12px}
#modal-root .compact-debt .debt-player small{font-size:9px}
#modal-root .compact-debt .debt-time{padding:2px 6px}
#modal-root .compact-debt .debt-clock{font-size:16px}
#modal-root .compact-debt .debt-amounts{margin:6px 0;gap:6px}
#modal-root .compact-debt .debt-amounts>div{padding:3px 7px}
#modal-root .compact-debt .debt-amounts strong{font-size:16px}
#modal-root .compact-debt .debt-explanation{display:none}
#modal-root .compact-debt .debt-help{font-size:9px}

#modal-root .compact-deed.focused-deed{border-color:#e7cc80;border-top-color:var(--property);box-shadow:0 0 0 1px #e7cc8070;background:#174330}
#modal-root .focused-deed h3{color:#ffe7a0}

/* Debt is a persistent board notice, outside the scaled/clipped sidebar. */
#debt-notice{position:fixed;left:40%;top:45%;transform:translate(-50%,-50%);z-index:36;width:min(420px,calc(100vw - 24px));overflow-y:auto;overscroll-behavior:contain;direction:rtl;border-radius:16px;box-shadow:0 12px 40px #00180ecc}
#debt-notice[hidden]{display:none}
#debt-notice .debt-banner{margin:0;padding:16px;border:2px solid #e3bd6b;background:linear-gradient(135deg,#204936,#092c22)}
#debt-notice .debt-player b{font-size:17px}
#debt-notice .debt-player .character-portrait{width:48px;height:48px;flex-basis:48px}
#debt-notice .debt-amounts strong{font-size:23px}
#debt-notice .debt-actions .button{font-size:13px;min-height:44px}
#debt-notice.is-compact{width:min(360px,calc(100vw - 24px))}
#debt-notice.is-compact .debt-banner{padding:8px 10px}
#debt-notice.is-compact .debt-player b{font-size:13px}
#debt-notice.is-compact .character-portrait{width:32px;height:32px;flex-basis:32px}
#debt-notice.is-compact .debt-player small,#debt-notice.is-compact .debt-explanation,#debt-notice.is-compact .debt-help{display:none}
#debt-notice.is-compact .debt-amounts{margin:6px 0 0}
#debt-notice.is-compact .debt-amounts>div{padding:3px 8px}
#debt-notice.is-compact .debt-amounts strong{font-size:18px}
#debt-notice.is-compact .debt-time{padding:2px 6px}
#debt-notice.is-compact .debt-clock{font-size:17px}
.has-debt #reward-dock,.has-debt #transaction-notifications{visibility:hidden}
@media(max-height:500px){#debt-notice .debt-banner{padding:10px}#debt-notice .debt-explanation{display:none}#debt-notice .debt-amounts{margin:6px 0}#debt-notice .debt-player .character-portrait{width:32px;height:32px;flex-basis:32px}#debt-notice .debt-amounts strong{font-size:18px}}

@media(min-width:651px) and (max-height:500px){
 #debt-notice .debt-help{display:none}
 #debt-notice .debt-time{padding:2px 6px}
 #debt-notice .debt-clock{font-size:17px}
 #debt-notice .debt-player b{font-size:14px}
 #debt-notice .debt-amounts>div{padding:3px 8px}
 #debt-notice .debt-actions{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0}
 #debt-notice .debt-actions .full{grid-column:auto}
 #debt-notice .debt-actions .button{font-size:11px;line-height:1.5;padding:5px;min-height:40px}
}

@media(min-width:1001px){
 .topbar-right{align-items:center;justify-content:space-between;gap:12px}
 .topbar-right .connection{position:static;font-size:11px;letter-spacing:0;margin-inline-start:auto;gap:5px}
 .topbar-right .icon-button{align-self:center;border:1px solid #36715888;border-radius:8px;height:40px;width:40px}
}

.open-trade{margin-top:12px}.open-trade .modal-actions{display:flex;flex-wrap:wrap;gap:7px}.open-trade .modal-actions .button{flex:1 1 42%;font-size:12px;min-height:40px;padding:8px}
#trade-stale:not([hidden]){padding:10px;border:1px solid #e1b864;border-radius:9px;background:#483a21;color:#fff0c6;line-height:1.8;margin-bottom:10px}
#reward-dock .readable-card{height:auto;max-height:calc(100dvh - var(--dock-bottom,103px) - 85px);overflow:auto}
#reward-dock .readable-card>.card-front{position:relative;inset:auto;height:auto;min-height:0;transform:none;backface-visibility:visible;display:flex;gap:6px}
#reward-dock .readable-card .card-copy{flex:0 0 auto;overflow:visible;padding:10px 0}
#reward-dock .readable-card .card-art{flex:none}
#reward-dock .readable-card .card-copy p{margin:0;line-height:1.8}
.notice-progress{position:absolute;bottom:0;left:0;height:3px;background:#f3d783;width:100%;transform-origin:left;animation:notice-countdown var(--notice-duration) linear forwards;pointer-events:none}
@keyframes notice-countdown{to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.notice-progress{animation:none}}

#modal-root .open-trade{border:1px solid #4b7254;border-radius:12px;padding:10px;background:#0e3528}
#modal-root .open-trade .trade-summary{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
#modal-root .open-trade .trade-summary>div{min-width:0;padding:8px}
#modal-root .open-trade .trade-summary small{font-size:10px;line-height:1.7}
#modal-root .open-trade .trade-summary strong{font-size:13px;line-height:1.8;overflow-wrap:anywhere}
#modal-root .open-trade .trade-state{font-size:11px;line-height:1.8}
#modal-root .open-trade .trade-hint{font-size:10px;line-height:1.7;margin:7px 0 0}
#modal-root .open-trade .modal-actions{margin:6px 0 0}
/* Keep the game exit beside Settings, with the existing confirmation flow. */
.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.topbar-right .header-actions .icon-button{order:0}
.topbar-right .header-actions .forfeit-button{color:#e8b7a1;border-color:#a46d5755;background:#3d2c2466}
.topbar-right .header-actions .forfeit-button:hover{background:#634135;color:#fff0dc;border-color:#dba27d}
.topbar-right .header-actions .forfeit-button:focus-visible{outline:2px solid #f0d584;outline-offset:3px}
@media(max-width:650px){
 .topbar{gap:6px;padding-inline:8px}.topbar .brand{min-width:0;flex-shrink:1}.topbar .brand span{max-width:88px}
 .topbar .room-header{flex-shrink:0;padding-inline:2px}
 .topbar-right{gap:4px}.header-actions{gap:4px}
 .topbar-right .language-toggle{padding-inline:6px}
}
@media(max-width:380px){.topbar .brand img{display:none}.topbar .brand span{max-width:70px;font-size:12px;line-height:1.3}}