/* Classic board illustration: live spaces around a printed blue city center. */
.graphics-library{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.game-graphic{display:block;width:100%;height:100%;overflow:visible}
.game-layout{grid-template-columns:210px minmax(480px,1fr) 270px;gap:18px;max-width:1660px}
.board-stage{width:100%;max-width:840px;margin:0 auto}
.board-3d{width:100%;max-width:780px;aspect-ratio:1;margin:12px auto 0;transform:none;filter:drop-shadow(0 20px 25px #0006);container-type:inline-size}
.board-3d.angled-view{transform:perspective(1600px) rotateX(18deg) rotateZ(-1deg)}
.board-surface{inset:-.6%;border:4px solid #172b3e;border-radius:3px;background:linear-gradient(135deg,#159ace 0%,#047cb9 45%,#046bab 100%);box-shadow:0 6px 0 #061527,0 8px 0 #29475d,inset 0 0 24px #025a93}
.board-inlay{position:absolute;inset:9.2%;border:1px solid #81d8ed7a;background:radial-gradient(ellipse at 45% 28%,#56c5df70,transparent 70%);box-shadow:inset 0 0 0 1px #0c5d90;pointer-events:none}
.board-inlay:before,.board-inlay:after{content:'';position:absolute;background:#ddf3fc21;pointer-events:none}.board-inlay:before{height:1px;left:0;right:0;top:50%}.board-inlay:after{width:1px;top:0;bottom:0;left:50%}
.city-skyline{position:absolute;left:13%;top:23%;width:76%;height:auto;z-index:1;pointer-events:none;filter:drop-shadow(0 6px 3px #00396255);user-select:none}
.board-title{position:absolute;left:13%;top:52%;width:74%;height:11.5%;transform:rotate(-33deg);z-index:2;border-radius:1cqw;border:2px solid #d7e7f0;background:linear-gradient(#257bb5,#054f8d 45%,#0c396b);box-shadow:0 .8cqw .5cqw #034575,0 1.2cqw 1.5cqw #00325970;display:grid;place-items:center;align-content:center;gap:.4cqw;color:white;text-shadow:0 .3cqw .2cqw #002f65;pointer-events:none}
.board-title span{font:800 4.7cqw/1 system-ui,sans-serif;letter-spacing:-.13cqw;white-space:nowrap}
.board-title small{font:700 1cqw/1 system-ui,sans-serif;letter-spacing:.3cqw;color:#c7e8ff}
.board-seal{position:absolute;left:17%;top:19%;width:10%;aspect-ratio:1;border:1.5px solid #daf7ff;border-radius:50%;background:radial-gradient(circle at 30% 20%,#fc7881,#d4364b 70%);color:#fff;display:grid;align-content:center;place-items:center;transform:rotate(-25deg);box-shadow:0 2px 5px #00528844;z-index:2}
.board-seal span{font-size:6cqw;line-height:.75}.board-seal small{font:bold 1.2cqw/1 system-ui;margin-top:.4cqw;letter-spacing:.2cqw}
.printed-deck{position:absolute;right:17%;bottom:23%;width:14%;height:10%;transform:rotate(-34deg);border:1.5px solid #d2f4ff;border-radius:.4cqw;background:linear-gradient(135deg,#139bd2,#006eb5);box-shadow:inset 0 0 12px #023d85;display:flex;gap:.5cqw;align-items:center;justify-content:center;color:white;pointer-events:none}
.printed-deck b{color:#ffca58;font-size:4.6cqw;line-height:1}.printed-deck span{font:800 1.3cqw/1.15 system-ui;text-align:center}
.board-tiles{inset:0;transform:none;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));z-index:3}
.tile{padding:0;border:.5px solid #d2e5f3aa;border-radius:0;background:var(--tile-color);color:#fff;box-shadow:inset 0 0 12px #ffffff0f;min-height:0;overflow:hidden;text-shadow:0 1px 1px #00335045}
.tile:before{display:none}.tile-content{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:0;width:100%;height:100%;padding:.5cqw .15cqw .4cqw;pointer-events:none}
.tile-name{font:750 1.05cqw/1.12 system-ui,sans-serif;letter-spacing:-.025cqw;text-transform:uppercase;max-height:34%;overflow:hidden;overflow-wrap:normal}
.tile .tile-art{width:78%;height:46%;filter:drop-shadow(0 1px 1px #023f5c44);flex-shrink:0}
.tile .tile-price{margin:0;color:#fff;font:800 1.05cqw/1 system-ui,sans-serif;white-space:nowrap;max-width:100%;overflow:hidden}
.tile.side-north .tile-content{transform:rotate(180deg)}.tile.side-west .tile-content{transform:rotate(90deg)}.tile.side-east .tile-content{transform:rotate(-90deg)}
.tile.corner{background:linear-gradient(135deg,#ffd886,#e78d38);font-size:inherit}.tile.corner .tile-name{font-size:1.15cqw;max-height:30%}.tile.corner .tile-art{width:70%;height:50%}
.tile.corner .tile-price{font-size:.85cqw}.tile.type-start{background:linear-gradient(145deg,#17ba8d,#117a9c)}.tile.type-goToJail{background:linear-gradient(145deg,#f25158,#ca343e)}.tile.type-jail{background:linear-gradient(145deg,#9baec6,#4b7599)}
.tile.type-card{background:linear-gradient(145deg,#56c6de,#138bbc)}.tile.type-tax{background:linear-gradient(145deg,#377fb0,#19507d)}.tile.type-bonus{background:linear-gradient(145deg,#52ba97,#287d85)}
.tile.selected{outline:2px solid #fff7af;outline-offset:-2px;box-shadow:inset 0 0 0 4px #e4aa21;z-index:5}.tile:hover{filter:brightness(1.16)}
.tile.mortgaged{background:repeating-linear-gradient(45deg,var(--tile-color),var(--tile-color) 5px,#172b4799 5px,#172b4799 10px)}
.tile .owner-mark{left:auto;right:2px;bottom:2px;width:1cqw;height:1cqw;border-radius:50%;background:var(--owner-color);box-shadow:0 0 0 1px #ffffff65}
.tile .buildings{position:absolute;display:flex;align-items:end;justify-content:center;gap:.1cqw;top:auto;bottom:1.5cqw;left:1%;width:98%;height:2cqw;z-index:2;pointer-events:none;filter:drop-shadow(0 2px 1px #0006)}
.buildings:empty{display:none}.buildings .game-graphic{width:1.6cqw;height:1.8cqw}.buildings .mortgage-tag{display:grid;place-items:center;color:#fff;background:#27313c;border:1px solid white;border-radius:2px;font-size:1.15cqw;width:1.8cqw;height:1.8cqw}
.board-token{width:3.5cqw;height:5.7cqw;border:0;border-radius:0;background:none!important;box-shadow:none;filter:drop-shadow(0 .3cqw .2cqw #001a4170);transform:translate(-50%,-85%);text-shadow:none;z-index:9;transition:left .09s linear,top .09s linear}
.board-token .game-graphic{width:100%;height:100%}.board-token.active-pawn:after{content:'';position:absolute;left:-8%;right:-8%;bottom:1%;height:18%;border-radius:50%;border:1px solid #fff5bc;box-shadow:0 0 5px #fff7a5;z-index:-1}
.pawn-mini{width:20px;height:30px}.player-row .avatar{background:#0c213a;border-color:currentColor;width:35px;height:39px;border-radius:8px}
.dice-tray{position:absolute;left:29%;right:auto;bottom:14%;width:30%;height:12%;display:flex;align-items:center;justify-content:center;gap:3.4cqw;z-index:5;perspective:650px;pointer-events:none}
.die{--die-size:clamp(22px,5.5cqw,48px);position:relative;width:var(--die-size);height:var(--die-size);display:block;flex:0 0 var(--die-size);perspective:500px;filter:drop-shadow(0 .7cqw .4cqw #00457a88)}
.die-cube{display:block;position:absolute;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-24deg);transition:transform .35s ease}
.dice-tray .die:nth-child(2) .die-cube{transform:rotateX(-18deg) rotateY(-28deg) rotateZ(8deg)}
.die .die-face{position:absolute;inset:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10%;padding:17%;border-radius:16%;border:1px solid #c3e0ee;background:#f7fcff;backface-visibility:hidden;box-shadow:inset 0 0 0 1px #fff,inset 0 0 6px #d6e8f2;color:#316d9e;font-size:inherit}
.die-front{transform:translateZ(calc(var(--die-size)/2))}.die .die-top{transform:rotateX(90deg) translateZ(calc(var(--die-size)/2));background:#fff}.die .die-right{transform:rotateY(90deg) translateZ(calc(var(--die-size)/2));background:#cce4f3}.die-back{transform:rotateY(180deg) translateZ(calc(var(--die-size)/2))}.die-bottom{transform:rotateX(-90deg) translateZ(calc(var(--die-size)/2))}.die-left{transform:rotateY(-90deg) translateZ(calc(var(--die-size)/2))}
.pip{display:block;width:100%;height:100%;border-radius:50%;background:#286390;box-shadow:inset 0 1px 2px #123b5f;opacity:0}.pip.visible{opacity:1}
.dice-tray.rolling .die-cube{animation:diceTumble .42s ease-in-out infinite}.dice-tray.rolling .die:nth-child(2) .die-cube{animation-direction:reverse}
.dock-die{--die-size:27px;filter:drop-shadow(0 3px 3px #006e4266);margin:0 8px 0 2px}.dock-die .die-face{border-color:#d8efe5}.dock-die .pip{background:#19865e}
.board-caption{margin-top:14px;color:#9dbed5;letter-spacing:.8px}.turn-banner{margin-top:14px}
@keyframes diceTumble{0%{transform:rotateX(-22deg) rotateY(-24deg) translateY(0)}50%{transform:rotateX(160deg) rotateY(140deg) translateY(-8px)}100%{transform:rotateX(338deg) rotateY(336deg) translateY(0)}}
@media(max-width:1180px){.game-layout{grid-template-columns:185px minmax(420px,1fr) 235px;gap:12px}.board-3d{width:100%;max-width:none}.property-content{padding:12px}}
@media(max-width:1000px){.game-layout{grid-template-columns:1fr 1fr}.board-stage{grid-column:1/-1;width:min(100%,720px);order:0}.left-rail{display:flex;order:1}.right-rail{order:2}.board-3d{max-width:720px;margin:12px auto 0}.bank-panel{display:none}}
@media(max-width:560px){.game-layout{grid-template-columns:1fr;padding:0 10px}.board-stage{grid-column:1}.board-surface{border-width:2px}.board-title{border-width:1px}.printed-deck{border-width:1px}.tile-name{font-size:1.02cqw}.tile .tile-price{font-size:1.05cqw}.board-3d.angled-view{transform:perspective(1200px) rotateX(12deg)}.board-caption{font-size:6px}.dice-tray{bottom:15%}.die{--die-size:5.5cqw}.dock-die{--die-size:26px}.left-rail{order:1}.right-rail{order:2}.pawn-mini{width:18px;height:29px}}
@media(prefers-reduced-motion:reduce){html:not([data-animations="on"]) .dice-tray.rolling .die-cube{animation:none}html:not([data-animations="on"]) .board-token,html:not([data-animations="on"]) .die-cube{transition:none}}
.dice-tray .die-cube{width:100%;height:100%;display:block;border:0;border-radius:0;background:none;box-shadow:none;padding:0;font-size:0}
.city-skyline{transform:rotate(-10deg);transform-origin:50% 70%;top:23%}
@media(min-width:1001px){.board-3d{width:min(100%,max(420px,calc(100vh - 285px)));max-width:780px}}


/* Player preferences, dice totals and the purchase decision. */
.board-effects{display:flex;align-items:center;gap:8px;position:relative;z-index:4;padding:0 6px 5px}
.effect-toggle,.effects-button{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 10px;border:1px solid #3d6182;border-radius:8px;background:#112b42;color:#a6c5df;font:600 11px/1.2 system-ui;white-space:nowrap;min-height:33px}
.effect-toggle span,.effects-button span{font-size:16px;line-height:1;color:#c9e7ff}
.effect-toggle[aria-pressed="true"]{border-color:#258c91;color:#b5f8df;background:#103e42}.effect-toggle[aria-pressed="true"] span{color:#50e5ae}
.effects-button{margin-left:auto}.effect-toggle:hover,.effects-button:hover{border-color:#81dbff;filter:brightness(1.15)}
.turn-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.dice-result{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 system-ui;color:#98bcd8;background:#10283b;border:1px solid #386680;border-radius:8px;padding:6px 9px;min-height:32px}
.dice-result .dice-label{font-size:8px;letter-spacing:1px;margin-right:2px}.die-value{display:grid;place-items:center;width:24px;height:24px;border-radius:5px;background:#e3f4fe;color:#22638c;font-size:16px;box-shadow:0 2px 0 #7caaca}.dice-total{font-size:19px;color:#74f0c2}.dice-result small{font-size:10px;color:#b6d4e9}.dice-result.is-rolling{color:#ffdb79;border-color:#b88642}
.effects-settings{margin-top:18px}.effect-option{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:15px 13px;border:1px solid #2c506c;border-radius:10px;background:#10283e;margin:10px 0;font-size:13px;color:#d3e8f7}
.effect-option input{width:18px;height:18px;accent-color:#28dca0;flex:0 0 18px;margin:0}.effect-option b{font-weight:650}.effect-option small{display:block;font-size:11px;line-height:1.5;color:#93b4ce;margin-top:6px}
.setup-effects{display:flex;flex-wrap:wrap;gap:10px}.setup-effects .effect-option{flex:1 1 190px;padding:11px;margin:0;font-size:11px}.setup-effects input{width:16px;height:16px;flex-basis:16px}
.volume-label{display:flex;justify-content:space-between;align-items:center;color:#cbe0f0;font-size:13px;margin:22px 0 12px}.volume-label output{color:#68e5b4;font-weight:700}#effectsVolume{width:100%;accent-color:#28dca0;cursor:pointer;min-height:24px}
.sound-tests{display:flex;gap:10px;margin:18px 0}.sound-tests button{flex:1;padding:12px;font-size:11px}
.board-token{transition:left .16s linear,top .16s linear}.board-token.stepping .game-graphic{animation:pawnHop .16s ease-in-out infinite;transform-origin:50% 90%}.tile.path-step{filter:brightness(1.4);box-shadow:inset 0 0 0 2px #c2fbff}
@keyframes pawnHop{0%,100%{transform:translateY(0) scaleY(1)}45%{transform:translateY(-17%) scaleY(1.05)}80%{transform:translateY(0) scaleY(.96)}}
html[data-animations="off"] *,html[data-animations="off"] *:before,html[data-animations="off"] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.purchase-hero{display:flex;align-items:center;gap:12px;padding:15px;margin:18px 0;border-radius:11px;border:1px solid #ffffff40;background:linear-gradient(135deg,var(--lot-color),#102b45);color:#fff}
.purchase-hero .game-graphic{width:58px;height:62px;flex:0 0 58px;filter:drop-shadow(0 2px 2px #0005)}.purchase-hero div{flex:1;min-width:0}.purchase-hero small{font-size:9px;letter-spacing:.5px;color:#e5f2ff}.purchase-hero h3{margin:7px 0 0;font-size:20px;line-height:1.2}.purchase-hero>strong{font-size:21px;white-space:nowrap;color:#ffe48d}
.purchase-details{margin:15px 0;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.purchase-details>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #ffffff17;padding:9px 0;font-size:11px}.purchase-details dt{color:#aac6dd}.purchase-details dd{color:#f3db98;margin:0;text-align:right;font-weight:700}.purchase-shortfall{color:#ffd28e!important}
@media(max-width:560px){.board-effects{gap:5px;padding:0 0 6px}.effect-toggle,.effects-button{font-size:10px;padding:7px 8px;min-height:36px}.effect-toggle span,.effects-button span{font-size:14px}.turn-heading{gap:10px}.dice-result{font-size:11px}.purchase-hero{gap:9px;padding:12px}.purchase-hero .game-graphic{width:42px;flex-basis:42px;height:48px}.purchase-hero h3{font-size:17px}.purchase-hero>strong{font-size:18px}.purchase-details{grid-template-columns:1fr}.setup-effects .effect-option{flex-basis:100%}}
@media(min-width:1001px){.board-3d{width:min(100%,max(400px,calc(100vh - 320px)))}}

/* Responses stay in the dialog's top layer until the player reads them. */
.modal-notice{padding:14px;margin:16px 0;border:1px solid #4ab6ca;border-radius:10px;background:#123949;color:#e0f9ff;font-size:13px;line-height:1.5}.modal-notice[hidden]{display:none}
.offer-feedback,.trade-response{display:flex;align-items:flex-start;gap:13px;padding:18px;border-radius:12px;border:1px solid #bd9853;background:#493b21;color:#fff0c8;margin:20px 0}
.response-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:1px solid currentColor;border-radius:50%;font:bold 25px/1 system-ui}.offer-feedback strong,.trade-response strong{display:block;font-size:16px;line-height:1.3}.offer-feedback p,.trade-response p{color:inherit;font-size:13px;margin:8px 0 0;line-height:1.6}
.offer-feedback.declined,.trade-response.declined{background:#49283b;border-color:#ee7395;color:#ffd6e1}.trade-response.accepted{background:#103e39;border-color:#46d6a4;color:#c1ffe4}.trade-response{padding:22px}.trade-response b{color:#fff}
.trade-balances{margin:20px 0}.trade-balances>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #ffffff20;font-size:13px}.trade-balances dt{color:#accce2}.trade-balances dd{margin:0;color:#6febbf;font-weight:700}
@media(max-width:560px){.offer-feedback,.trade-response{padding:15px;gap:10px}.offer-feedback strong,.trade-response strong{font-size:14px}.offer-feedback p,.trade-response p{font-size:12px}.response-icon{width:29px;height:29px;flex-basis:29px;font-size:22px}}

.landing-owner{display:flex;align-items:center;gap:12px;margin:14px 0;padding:12px;border:1px solid #406887;border-radius:10px;background:#132c43}.owner-pawn{width:25px;height:38px;flex:0 0 25px}.landing-owner div{flex:1;min-width:0}.landing-owner small{display:block;font-size:9px;letter-spacing:1px;color:#91b8d2}.landing-owner strong{display:block;font-size:15px;margin-top:5px;color:#fff}.landing-owner>b{font-size:9px;color:#ffd184;text-align:right}.modal .rent-notice{padding:11px 13px;border-left:3px solid #ffd184;background:#263242;border-radius:4px;color:#e2d9be;font-size:12px}

/* Ownership is readable directly on each property, in its player's color. */
.tile.has-title .tile-art{height:33%;width:65%}.tile.has-title .tile-content{padding-bottom:.2cqw}.owner-label{display:block;align-content:center;width:98%;min-height:1.25em;max-height:2.25em;padding:.15cqw .1cqw;border-radius:.25cqw;background:#081b32e6;border-left:.45cqw solid var(--owner-color);color:#f3faff;font:750 clamp(6px,1.45cqw,10px)/1.08 system-ui,sans-serif;text-transform:none;letter-spacing:0;text-shadow:none;overflow:hidden;overflow-wrap:anywhere;flex-shrink:0}.owner-label.bank-owned{background:#173e60aa;border-left-color:#adcbe4;color:#d7edfc;font-size:clamp(5px,1.1cqw,9px)}.tile.has-title .buildings{bottom:2.6cqw}.tile .owner-mark{z-index:3;right:1px;bottom:1px;width:.6cqw;height:.6cqw}

.board-effects{flex-wrap:wrap}.board-effects .dice-result{margin-left:auto;font-size:11px}.board-effects .effects-button{margin-left:0}.owner-label:not(.bank-owned){font-size:clamp(7px,1.5cqw,10px);white-space:nowrap;text-overflow:ellipsis}
@media(max-width:560px){.board-effects .dice-result{order:4;flex:1 0 100%;justify-content:center;margin:3px 0 0}.board-effects .effects-button{margin-left:auto}}

/* Full owner labels sit beside the title, inside the board's inner border. */
.tile.has-owner{overflow:visible}.tile.has-owner .tile-art{height:46%;width:78%}.tile .owner-callout{--owner-width:clamp(38px,11cqw,86px);--owner-height:clamp(20px,5cqw,36px);position:absolute;z-index:6;display:grid;place-items:center;align-content:center;width:var(--owner-width);height:var(--owner-height);min-height:0;max-height:none;border:1px solid #a0bdd6;border-left:3px solid var(--owner-color);padding:2px;border-radius:4px;background:#081d36f2;box-shadow:0 1px 3px #0007;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;color:#fff;font:750 clamp(7px,1.65cqw,11px)/1.1 system-ui,sans-serif;letter-spacing:0;text-transform:none;pointer-events:none}
.tile.side-south .owner-callout{bottom:calc(100% + (var(--owner-width) - var(--owner-height))/2 + 3px);left:50%;transform:translateX(-50%) rotate(-90deg)}
.tile.side-north .owner-callout{top:calc(100% + (var(--owner-width) - var(--owner-height))/2 + 3px);left:50%;transform:translateX(-50%) rotate(90deg)}
.tile.side-west .owner-callout{left:calc(100% + 3px);top:50%;transform:translateY(-50%)}
.tile.side-east .owner-callout{right:calc(100% + 3px);top:50%;transform:translateY(-50%)}

.dock-button .bankruptcy-icon{color:#ffb4c5;background:linear-gradient(145deg,#492639,#231622);border-color:#ae5773}#bankruptcyButton b{max-width:75px;line-height:1.4}.action-button.danger{background:linear-gradient(135deg,#b93f63,#8d2849);border:1px solid #e97796;color:#fff}.action-button.danger:hover{filter:brightness(1.15)}

/* Near the corners, keep adjacent perpendicular owner labels from crossing. */
.tile.has-owner:is([data-position="9"],[data-position="19"],[data-position="29"],[data-position="39"]) .owner-callout{top:50%;left:50%;bottom:auto;right:auto;transform:translate(-50%,-50%);width:calc(100% - 2px)}
.tile.has-owner:is([data-position="9"],[data-position="19"],[data-position="29"],[data-position="39"]) .tile-art{opacity:.25}

.tile .owner-callout{--owner-height:clamp(24px,6cqw,40px)}.tile.has-owner:is([data-position="9"],[data-position="19"],[data-position="29"],[data-position="39"]) .owner-callout{font-size:clamp(6px,1.5cqw,10px)}

/* Construction is offered only when the next house or hotel can be purchased. */
.property-actions [hidden]{display:none!important}.construction-available{display:block;margin-top:7px;padding:5px 7px;border:1px solid #3d8b6c;border-radius:5px;background:#123a32;color:#9affcf;font-size:10px;font-weight:750;line-height:1.4}.construction-question{font-size:14px!important;color:#d7eaff!important;margin:18px 0}.construction-details>div{font-size:13px;padding:11px 0}.construction-details .construction-balance dd{color:#77f4b9}.construction-group{margin:16px 0;padding:14px;border:1px solid #41647a;border-radius:9px;background:#112a3e}.construction-group>strong{display:block;color:#9cc6de;font-size:10px;letter-spacing:1px;margin-bottom:9px}.construction-group>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #ffffff14;font-size:12px}.construction-group>div:last-child{border:0}.construction-group b{color:#a0f2c8;white-space:nowrap}.construction-hero .game-graphic{height:55px}
@media(max-width:560px){.construction-details>div{font-size:12px}.construction-group{padding:12px}.construction-question{font-size:13px!important}}

/* Colour groups expose collection progress and the owners of missing titles. */
.portfolio-guide{color:#9bbbd2;font-size:11px;line-height:1.6;margin:0 3px 14px}.portfolio-group{margin-top:12px;border:1px solid #3a526b;border-left:4px solid var(--group-color);border-radius:9px;background:#0c1f33;overflow:hidden}.portfolio-group>summary{display:flex;align-items:center;gap:9px;padding:13px 10px;cursor:pointer;background:#142b41;list-style:none}.portfolio-group>summary::-webkit-details-marker{display:none}.portfolio-group>summary:before{content:'▸';color:var(--group-color);font-size:15px}.portfolio-group[open]>summary:before{content:'▾'}.portfolio-group>summary>span{flex:1;min-width:0}.portfolio-group summary strong{display:block;color:#edf6ff;font-size:13px}.portfolio-group summary small{display:block;color:#9ebbd4;margin-top:4px;font-size:10px}.group-count{font-size:12px;color:#fff;background:#223d55;border-radius:5px;padding:6px;white-space:nowrap}.portfolio-group.complete .group-count{background:#17483c;color:#b0ffdc}.group-body{padding:0 10px 11px}.group-status{color:#f4cf80;font-size:9px;font-weight:800;line-height:1.5;letter-spacing:.35px;margin:12px 0 8px}.group-status.ready{color:#8decb6}.portfolio-group .portfolio-item{padding:10px 9px;background:#162f44;font-size:11px}.portfolio-item.selected,.portfolio-missing.selected{outline:2px solid #f6ca63;outline-offset:-2px}.missing-properties{padding-top:10px;margin-top:10px;border-top:1px solid #536a804d}.missing-properties>strong{display:block;color:#ffce81;font-size:9px;line-height:1.5;letter-spacing:.25px;margin-bottom:8px}.portfolio-missing{display:block;width:100%;text-align:left;margin:6px 0;padding:9px 8px;background:#142336;border:1px dashed #647991;border-radius:5px;color:#dfecf7;line-height:1.4}.portfolio-missing>span{display:block;font-size:11px;font-weight:700}.portfolio-missing>small{display:block;margin-top:4px;color:#b0c3d5;font-size:10px}.portfolio-missing:hover,.portfolio-item:hover{filter:brightness(1.15)}.group-guidance{color:#a9c3d8;font-size:10px;line-height:1.6;margin:12px 0 0}.portfolio-group>summary:focus-visible{outline:3px solid #55d7ff;outline-offset:-3px}

/* A single settings centre keeps future-match values and live audio controls together. */
.topbar .main-nav{flex-wrap:wrap}.modal.settings-modal{width:min(800px,calc(100% - 24px))}.settings-modal .modal-body{padding:24px}.settings-tabs{display:flex;gap:8px;margin:18px 0;padding:5px;border:1px solid #365b76;border-radius:10px;background:#081d31}.settings-tabs button{flex:1;min-width:0;padding:12px 9px;border-radius:6px;background:transparent;color:#97b7d2;font-size:11px;font-weight:750}.settings-tabs button[aria-selected="true"]{background:linear-gradient(135deg,#136daf,#17466c);color:#f4fbff;box-shadow:0 2px 5px #0005}.settings-panel[hidden]{display:none!important}.settings-money-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.settings-money-field{display:block;padding:16px;border:1px solid #355d79;border-radius:11px;background:#122c43;min-width:0}.settings-money-field>strong{display:block;font-size:14px;color:#eef8ff}.settings-money-field>small{display:block;min-height:34px;margin-top:8px;font-size:11px;line-height:1.5;color:#a8c6db}.settings-money-input{display:flex;align-items:center;gap:12px;margin-top:13px;padding:10px 13px;border:1px solid #4c8295;border-radius:7px;background:#091f32}.settings-money-input>span{font-size:23px;color:#72ecc0}.settings-money-input input{width:100%;min-width:0;background:transparent;border:0;color:#94ffd0;font-size:24px;font-weight:750;padding:0;line-height:1.3}.settings-money-input:focus-within{border-color:#6debcd;box-shadow:0 0 0 2px #54cab44a}.settings-money-input input[aria-invalid="true"]{color:#ffb2bf}.modal .settings-range{font-size:10px;color:#98b9d2;margin:10px 0}.settings-preview{display:block;margin:12px 0;padding:12px 14px;border:1px solid #306b63;border-radius:8px;background:#103a36;color:#b7fbe2;font-size:12px;line-height:1.6}.settings-preview.invalid{border-color:#937241;background:#3b3023;color:#efd6aa}.settings-current{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;margin:12px 0;padding:12px;border:1px solid #3e5670;border-radius:8px;background:#13243a}.settings-current>strong{color:#9cb9d1;font-size:9px;letter-spacing:.6px}.settings-current>span{font-size:11px;color:#abc6dc}.settings-current b{color:#e8f5ff;white-space:nowrap}.settings-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.settings-actions button{padding:14px 10px;min-height:43px}.settings-back{display:block;width:100%;margin-top:14px;padding:10px;border:1px solid #49637e;border-radius:7px;background:#14283c;color:#b9d7ee;font-size:11px;font-weight:750}.settings-back:hover{background:#1c3b56}.setup-rules-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0;padding:14px;background:#112b42;border:1px solid #365b76;border-radius:10px}.setup-rules-summary small{display:block;font-size:8px;letter-spacing:.5px;line-height:1.5;color:#9bc2dc}.setup-rules-summary b{display:block;margin-top:6px;color:#86f6c3;font-size:18px}.setup-rules-summary button{grid-column:1/-1;font-size:10px;padding:10px}
@media(max-width:700px){.topbar .main-nav{gap:3px}.topbar .nav-item{font-size:10px;padding:9px 8px}}
@media(max-width:560px){.topbar .main-nav{justify-content:center}.settings-modal .modal-body{padding:22px 16px}.settings-money-grid{grid-template-columns:1fr;gap:10px}.settings-money-field{padding:13px}.settings-money-field>small{min-height:0}.settings-money-input{margin-top:10px}.settings-tabs button{font-size:10px;padding:12px 7px}.settings-actions{grid-template-columns:1fr}.settings-current{gap:7px 14px}.settings-current>strong{flex-basis:100%}}

/* Square details remain readable without opening a dialog or changing the turn. */
.board-tooltip[hidden]{display:none!important}.board-tooltip{position:fixed;z-index:40;width:294px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;border:1px solid #5b839f;border-radius:12px;background:#0b2137;box-shadow:0 12px 36px #0009;color:#eaf6ff;text-align:left;font-family:system-ui,sans-serif}.board-hint-heading{padding:14px 16px 12px;border-top:5px solid var(--hint-color);background:linear-gradient(125deg,#203e56,#11283d)}.board-hint-heading small{display:block;color:#b0d1e6;font-size:10px;line-height:1.4}.board-hint-heading strong{display:block;margin-top:6px;font-size:17px;line-height:1.3;overflow-wrap:anywhere}.board-tooltip dl{margin:8px 16px}.board-tooltip dl>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #53789140;font-size:12px;line-height:1.4}.board-tooltip dt{color:#a5c3d8;flex:1}.board-tooltip dd{margin:0;color:#92f3c8;font-weight:650;text-align:right;max-width:58%;overflow-wrap:anywhere}.board-tooltip p{margin:12px 16px 15px;font-size:11px;line-height:1.6;color:#b9d3e6}.tile:focus-visible{outline:3px solid #e4faff;outline-offset:-3px;z-index:8}

/* Negotiation shows the complete asset and its investment before either party agrees. */
.trade-bundle{margin:15px 0;border:1px solid #45657d;border-top:4px solid var(--lot-color);border-radius:11px;background:#10283d;overflow:hidden}.trade-bundle-heading{display:flex;align-items:center;gap:13px;padding:14px 16px}.trade-bundle-heading>.game-graphic{width:42px;height:50px;flex:0 0 42px}.trade-bundle-heading small{font-size:9px;letter-spacing:.5px;color:#9cbdd4}.trade-bundle-heading h3{font-size:18px;line-height:1.3;margin:5px 0;color:#f0f9ff}.trade-bundle-heading strong{display:block;font-size:12px;color:#f9d58b}.trade-investment{margin:0 16px 13px}.trade-investment>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #59778d35;font-size:12px;line-height:1.4}.trade-investment dt{color:#a9c7dc}.trade-investment dd{margin:0;color:#e3f3ff;text-align:right;font-weight:650;white-space:nowrap}.trade-investment .investment-total{border:0;padding-top:12px}.investment-total dt{font-size:11px;color:#b3f5d9;font-weight:800}.investment-total dd{font-size:18px;color:#83edbc}.modal .trade-estimate{margin:8px 16px 13px;font-size:10px;color:#d6bc83}.modal .negotiation-scope{font-size:11px;color:#adc9df;line-height:1.6}.modal .negotiation-balance{font-size:12px;color:#c3dbea}.negotiation-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.negotiation-actions button{padding:13px 8px;min-height:44px}.negotiation-offer{padding:13px 16px;border:1px solid #42a48a;border-radius:9px;background:#0d3c35;margin:14px 0}.negotiation-offer span{display:block;font-size:12px;color:#b9e3da}.negotiation-offer strong{display:block;font-size:27px;color:#b0ffd9;margin:6px 0}.negotiation-offer small{display:block;font-size:11px;color:#abcec4}.investment-comparison,.modal .negotiation-investment-note{margin:9px 0 13px;padding:11px 12px;border-radius:7px;background:#123c35;color:#a6ebd0;font-size:11px;line-height:1.6}.below-investment,.modal .negotiation-investment-note.below-investment{background:#45361f;color:#ffe0a7;border-left:3px solid #e2b162}.trade-counter{border-top:1px solid #54708955;padding-top:5px;margin-top:20px}.trade-counter .field-label{flex-wrap:wrap;align-items:center;margin:14px 0 8px}.trade-counter .field-label input{flex:1;min-width:140px}.trade-counter-notice{padding:13px 15px;border:1px solid #4eb9db;border-radius:9px;background:#12384c;margin:15px 0}.trade-counter-notice strong{font-size:12px;color:#8ce4ff}.modal .trade-counter-notice p{font-size:12px;color:#cce8f4;margin:7px 0 0}.trade-bundle-heading div{min-width:0;overflow-wrap:anywhere}
@media(max-width:560px){.trade-bundle-heading{padding:12px;gap:10px}.trade-bundle-heading h3{font-size:17px}.trade-investment{margin:0 12px 12px}.trade-investment>div{font-size:11px}.investment-total dd{font-size:17px}.negotiation-actions{grid-template-columns:1fr}.trade-counter .field-label{display:block}.trade-counter .field-label input{max-width:none;margin-top:10px}.negotiation-offer strong{font-size:24px}}
.city-building-count{display:block;margin-top:7px;font-size:11px;line-height:1.5;color:#8de3c3}

/* Keep the proposal and investment visible together; each new response starts at the top. */
.modal.trade-modal{width:min(850px,calc(100% - 24px))}.trade-modal .modal-body{padding:24px}.negotiation-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}.negotiation-layout .trade-bundle,.negotiation-layout .negotiation-offer{margin-top:0}.negotiation-decision{min-width:0}.trade-modal .trade-counter{margin-top:14px}.trade-modal .trade-counter .field-label{display:block;margin:10px 0 8px}.trade-modal .trade-counter input{display:block;width:100%;max-width:none;margin-top:8px}.trade-modal .trade-counter .wide{margin-top:8px}.trade-modal .negotiation-actions button{font-size:10px}.trade-modal .trade-counter-notice{margin:12px 0 18px}
@media(max-width:720px){.negotiation-layout{grid-template-columns:1fr;gap:0}.trade-modal .modal-body{padding:24px 18px}.negotiation-layout .trade-bundle{margin-bottom:16px}}
/* Investment sector: capital, cash income and optional match settings. */
.investment-panel{padding:16px;border-radius:14px;border-color:#358b7c;background:linear-gradient(140deg,#122f3c,#0d1d30)}.investment-panel[hidden],.investment-income-message[hidden]{display:none!important}.investment-panel>small{display:block;color:#99c7d5;font-size:11px}.investment-panel>strong{display:block;color:#8cf1c4;font-size:25px;margin:7px 0}.investment-panel>span{font-size:11px;color:#b8ddcc}.investment-panel dl{margin:14px 0 8px}.investment-panel dl>div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid #ffffff18;font-size:11px}.investment-panel dt{color:#a9c7dc}.investment-panel dd{margin:0;white-space:nowrap;color:#99f0ca;font-weight:700}.investment-panel button{font-size:10px}.investment-income-message{margin-top:12px;padding:11px 13px;border:1px solid #399378;border-radius:7px;background:#103d34;color:#a0f6ce;font-size:12px;line-height:1.5}
.modal.investment-modal{width:min(760px,calc(100% - 24px))}.investment-modal .modal-body{padding:24px}.investment-hero{display:flex;align-items:center;gap:16px;margin:18px 0;padding:16px;border:1px solid #499d8e;border-radius:12px;background:linear-gradient(130deg,#143f42,#103349)}.investment-symbol{display:grid;place-items:center;flex:0 0 52px;width:52px;height:58px;border-radius:10px;background:#2d887377;font-size:38px;color:#a7ffdb}.investment-hero small{font-size:9px;color:#a6cbd9;letter-spacing:.5px}.investment-hero h3{font-size:19px;margin:6px 0;color:#ecfff9;line-height:1.3}.investment-hero div>span{font-size:12px;color:#8deac2}.investment-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.investment-metrics>div{padding:13px 15px;border:1px solid #3b5d75;border-radius:9px;background:#112b40;min-width:0}.investment-metrics dt{font-size:11px;color:#a8c6dc}.investment-metrics dd{margin:7px 0 0;color:#a3f2cd;font-size:22px;font-weight:750;overflow-wrap:anywhere}.modal .investment-explanation{font-size:11px;line-height:1.6;color:#aac8dc;margin:14px 0}.investment-forms{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.investment-forms form{padding:14px;border:1px solid #45647d;border-radius:10px;background:#0d2439;min-width:0}.investment-forms label{display:block;margin-bottom:10px;font-size:13px;font-weight:700;color:#e0f3fe}.investment-forms input{display:block;width:100%;min-width:0;border:1px solid #4b6e8a;border-radius:6px;padding:11px;background:#163448;color:#fff;font-size:15px}.investment-forms output{display:block;min-height:48px;margin:10px 0;color:#98c8cf;font-size:11px;line-height:1.6}.investment-forms button{width:100%;min-height:42px;font-size:11px;padding:12px 8px}.investment-footer{display:flex;gap:10px;margin-top:17px}.investment-footer button{flex:1;min-width:0;font-size:10px;padding:12px 7px;min-height:40px}.investment-feedback{padding:12px;border:1px solid #40a782;border-radius:8px;background:#113e33;color:#aafad1;font-size:12px;line-height:1.5}.investment-warning{padding:11px;border-left:3px solid #e2b162;background:#443522;border-radius:6px;color:#ffe0a7!important;font-size:11px!important}.investment-rate-field{margin-top:14px}.setup-rules-summary .setup-investment-note{grid-column:1/-1;border-top:1px solid #526a7f55;padding-top:10px}.setup-investment-note b{font-size:14px}.settings-tabs button{white-space:normal}
@media(max-width:560px){.investment-modal .modal-body{padding:22px 16px}.investment-hero{padding:12px;gap:10px}.investment-hero h3{font-size:16px}.investment-symbol{width:40px;height:48px;flex-basis:40px;font-size:31px}.investment-metrics>div{padding:11px}.investment-metrics dt{font-size:10px}.investment-metrics dd{font-size:19px}.investment-forms{grid-template-columns:1fr;gap:10px}.investment-forms output{min-height:0}.investment-footer{flex-direction:column}.settings-tabs button{font-size:9px;line-height:1.5;padding:10px 5px}}
/* Keep the investment actions visible together on desktop screens. */
@media(min-width:561px){.investment-modal .modal-body{padding:20px 24px}.investment-modal .investment-hero{padding:12px 14px;margin:12px 0}.investment-modal .investment-symbol{width:44px;height:48px;flex-basis:44px;font-size:32px}.investment-modal .investment-hero h3{font-size:18px;margin:4px 0}.investment-modal .investment-metrics{margin:12px 0;gap:8px}.investment-modal .investment-metrics>div{padding:9px 12px}.investment-modal .investment-metrics dd{font-size:20px;margin-top:4px}.investment-modal .investment-explanation{margin:10px 0}.investment-modal .investment-forms{margin-top:12px;gap:12px}.investment-modal .investment-forms form{padding:12px}.investment-modal .investment-forms label{margin-bottom:8px}.investment-modal .investment-forms input{padding:9px}.investment-modal .investment-forms output{min-height:32px;margin:8px 0}.investment-modal .investment-forms button{min-height:40px;padding:10px 8px}.investment-modal .investment-footer{margin-top:12px}.investment-modal .investment-feedback{padding:9px 12px}}
.player-info .player-investment{color:#91dbba}
.player-investment b{display:block;margin-top:4px;font-size:10px;color:#c2ffdf}.investment-total-balance{display:block;margin-top:6px;font-size:12px;color:#c3ffdf}.investment-hero div{min-width:0;overflow-wrap:anywhere}
/* Performance: on small screens disable GPU-heavy filters; visuals stay, only cheaper. */
@media(max-width:700px){
 .board-3d,.board-token,.city-skyline,.splash-city,.die,.dock-die{filter:none!important;}
 .glass-panel,.turn-activity,.modal::backdrop,.property-drawer::backdrop{backdrop-filter:none!important;}
 .board-surface,.tile,.board-token{box-shadow:none!important;}
 .dice-tray.rolling .die-cube{animation-duration:.7s!important;}
}
@media(min-width:561px){#investmentSettingsForm{display:grid;grid-template-columns:1fr 1fr;gap:10px}#investmentSettingsForm>label{margin:0}#investmentSettingsForm>.effect-option{align-items:flex-start;padding:15px;align-self:stretch}#investmentSettingsForm>.investment-rate-field{padding:12px}#investmentSettingsForm>.investment-rate-field>small{min-height:0;font-size:10px;margin-top:6px}#investmentSettingsForm .settings-money-input{margin-top:8px;padding:7px 10px}#investmentSettingsForm>*:not(label){grid-column:1/-1;margin-top:0;margin-bottom:0}#investmentSettingsForm .settings-preview{font-size:11px;padding:10px 12px}#investmentSettingsForm .settings-current{padding:10px}#investmentSettingsForm .setup-note{font-size:10px;line-height:1.5}#investmentSettingsForm .settings-actions button,#investmentSettingsForm>.wide{padding:11px 8px;min-height:40px;font-size:10px}.investment-modal .modal-body{padding-top:16px;padding-bottom:16px}}