:root{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:#20382f;background:#e8eee7}*{box-sizing:border-box}body{margin:0}header{height:70px;background:#153c32;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.brand{font-weight:900;letter-spacing:1px;font-size:23px}.brand span{color:#f7c964}#roomBadge{font-weight:700}main{max-width:1480px;margin:25px auto;padding:0 18px}.hidden{display:none!important}.card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 4px 20px #20382f12;margin-bottom:16px}.landing{max-width:590px;margin:70px auto;text-align:center;padding:40px}.landing h1{font-size:32px;margin:0 0 12px}.landing p{line-height:1.5;color:#65776c}.landing label{display:block;text-align:left;font-weight:700;margin:25px 0 12px}input,select{width:100%;padding:12px;border:1px solid #cbd6cf;border-radius:9px;font:inherit;margin-top:8px;min-width:0}button{border:0;background:#e3eae4;color:#193a2d;padding:12px 16px;border-radius:9px;font-weight:800;cursor:pointer}button:hover{filter:brightness(.95)}button:disabled{opacity:.5;cursor:default}.primary{background:#166e4c;color:white}.join{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.join input{flex:1;min-width:115px}.hint{font-size:13px;color:#748379;line-height:1.5}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}.boardWrap{width:100%;max-width:920px;margin:auto}.board{position:relative;width:100%;aspect-ratio:1;background:#dbe9dc;border:7px solid #254b3b;border-radius:9px;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));overflow:hidden;box-shadow:0 10px 30px #173f3028}.tile{position:relative;min-width:0;min-height:0;background:#f8f8ee;border:1px solid #4b6454;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;overflow:hidden;cursor:pointer}.tile:hover{background:#fff9d9}.tile.corner{background:#e4eddd}.tile .stripe{height:21%;width:100%;flex-shrink:0;border-bottom:1px solid #4b6454}.tile .tileName{font-size:clamp(6px,.77vw,11px);font-weight:750;line-height:1.05;overflow-wrap:anywhere}.tile .price{font-size:clamp(6px,.7vw,10px)}.tile .tokens{display:flex;gap:1px;flex-wrap:wrap;justify-content:center}.token{height:clamp(7px,1.15vw,13px);width:clamp(7px,1.15vw,13px);border:1px solid #fff;border-radius:50%;box-shadow:0 1px 2px #2228}.tile .owner{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%}.centre{grid-column:2/11;grid-row:2/11;display:flex;flex-direction:column;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#e1eee1,#e1eee1 20px,#dbe9dc 20px,#dbe9dc 40px);text-align:center;padding:12px}.logo{font-size:clamp(23px,5.8vw,82px);font-weight:900;line-height:.98;letter-spacing:-2px;color:#174f3c}.logo b{background:#c74848;color:white;padding:0 15px;transform:rotate(-5deg);display:inline-block}.subtitle{letter-spacing:3px;font-weight:800;font-size:clamp(7px,1.1vw,15px);margin-top:18px}.dice{font-size:clamp(22px,4vw,54px);margin:25px 0 12px}#turnInfo{font-weight:800;font-size:clamp(10px,1.3vw,18px)}h2{margin:0 0 14px;font-size:18px}.player{display:flex;align-items:center;gap:9px;padding:9px;border-radius:9px;margin-bottom:5px;background:#f3f6f1}.player.active{outline:2px solid #d2ad55}.player .token{width:18px;height:18px;flex-shrink:0}.player .who{flex:1;font-weight:750}.player .cash{font-weight:800}.player.bankrupt{opacity:.4;text-decoration:line-through}.buttons{display:flex;flex-wrap:wrap;gap:8px}.buttons button{flex:1}#hostPanel input,#hostPanel select,#hostPanel button{margin-bottom:8px}#hostPanel button{width:100%}#log{max-height:220px;overflow:auto;font-size:12px;color:#526359}#log div{border-bottom:1px solid #edf0ed;padding:6px 0}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#8f3434;color:white;border-radius:9px;padding:12px 20px;display:none;z-index:10}@media(max-width:960px){.layout{grid-template-columns:1fr}.boardWrap{max-width:740px}.tile .tileName{font-size:clamp(5px,1.3vw,10px)}}@media(max-width:500px){main{padding:0 5px;margin:8px auto}.board{border-width:3px}.tile{padding:0}.tile .tileName{font-size:5px}.tile .price{font-size:5px}.tile .token{height:6px;width:6px}.tile .owner{width:5px;height:5px}.centre .logo{letter-spacing:-1px}.landing{margin:25px 8px;padding:20px}.join button{flex:1}.subtitle{letter-spacing:1px}}
/* V3 additions */
.squareIcon{font-size:clamp(10px,1.8vw,22px);line-height:1.1}.tile.corner .squareIcon{font-size:clamp(17px,2.4vw,32px)}.tile[data-id="10"]{background:linear-gradient(135deg,#e9f0e5 49%,#f6c0a4 50%)}.tile[data-id="30"]{background:#f8d9ca}.die{display:inline-flex;align-items:center;justify-content:center;width:1.3em;height:1.3em;margin:0 .12em;border-radius:16%;background:linear-gradient(140deg,#fff,#e7e7e7 65%,#a7b1a8);box-shadow:inset -5px -6px 8px #89988b70,5px 7px 0 #6e8073,8px 12px 14px #183c3440;color:#173c32;transform:rotate(-8deg);font-size:.95em}.die:nth-child(2){transform:rotate(12deg)}.dice.rolling .die{animation:roll3d .85s cubic-bezier(.15,.75,.2,1)}.dice.rolling .die:nth-child(2){animation-delay:.09s}@keyframes roll3d{0%{transform:rotateX(0) rotateY(0) rotateZ(0) scale(.7)}45%{transform:rotateX(400deg) rotateY(280deg) rotateZ(160deg) scale(1.2)}100%{transform:rotateX(720deg) rotateY(720deg) rotateZ(360deg) scale(1)}}#turnTimer{font-weight:800;color:#bc5b28;margin:12px}.cardOverlay{position:absolute;z-index:12;left:24%;top:24%;width:52%;min-height:42%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;border:8px double #1c563f;border-radius:14px;background:linear-gradient(145deg,#fff9df,#f6e4a7);box-shadow:0 16px 30px #14392f77;transform:rotate(-3deg);animation:cardPop .5s ease-out;text-align:center}.cardOverlay.chanceCard{background:linear-gradient(145deg,#fbe2c6,#f2a767);border-color:#9a4b23}.cardLabel{font-weight:950;font-size:clamp(13px,1.8vw,23px);letter-spacing:1px}.cardText{font-weight:800;font-size:clamp(13px,2vw,25px);margin:18px 0}.cardFoot{font-size:11px;opacity:.65}@keyframes cardPop{from{opacity:0;transform:perspective(500px) rotateY(75deg) scale(.5)}to{opacity:1;transform:rotate(-3deg)}}.movingPiece{position:absolute;z-index:15;width:28px;height:28px;border:2px solid white;border-radius:50%;box-shadow:0 3px 9px #0008;color:white;text-align:center;line-height:25px;font-size:19px;transform:translate(-50%,-50%);transition:left .12s linear,top .12s linear;pointer-events:none}.movingPiece span{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);background:#173b30;color:white;border-radius:5px;padding:3px 6px;font-size:10px;white-space:nowrap}.movingPiece span:after{content:'▼';position:absolute;top:100%;left:48%;font-size:9px}.buildings{font-size:clamp(7px,1vw,12px)}#propertyPanel button{width:100%;margin-top:8px}@media(max-width:500px){.squareIcon{font-size:9px}.tile.corner .squareIcon{font-size:13px}.cardOverlay{left:12%;width:76%;top:28%;min-height:36%;padding:8px}.movingPiece{width:20px;height:20px;font-size:13px;line-height:18px}.movingPiece span{font-size:8px}}

.roomActions{display:flex;align-items:center;gap:14px}.leaveButton{background:#b73535;color:white;padding:9px 13px}.leaveButton:hover{background:#952b2b}.propertyTitle{margin:0 0 12px;font-size:17px}.rentRow{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:5px 0;border-bottom:1px solid #edf0ed;font-size:13px}.rentRow strong{text-align:right}.rentDivider{height:12px}@media(max-width:500px){header{padding:0 9px}.brand{font-size:17px}.roomActions{gap:6px}.leaveButton{padding:7px;font-size:11px}#roomBadge{font-size:11px}}

/* Longer custom title */
.logo{font-size:clamp(20px,4.3vw,61px)}
.brand{font-size:clamp(16px,2vw,23px)}

/* V2 fixed three-column desktop layout */
.layout{grid-template-columns:270px minmax(0,1fr) 280px;align-items:start;gap:16px}
.boardWrap{max-width:820px;min-width:0}
.propertySidebar{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;min-width:0}
.propertySidebar.hidden{display:block!important;visibility:hidden;pointer-events:none}
.propertyHeader{display:flex;align-items:center;justify-content:space-between;gap:8px}
.propertyHeader h2{margin:0}
#closeProperty{font-size:24px;padding:0 10px;background:transparent}
#saleControls{border-top:1px solid #dce4dc;margin-top:14px;padding-top:12px}
#saleControls h3{margin:0 0 8px}
#saleControls button{width:100%;margin-top:8px}
#offerBanner{border:2px solid #e8b84c}
@media(max-width:1100px){.layout{grid-template-columns:230px minmax(0,1fr) 240px;gap:10px}}
@media(max-width:850px){.layout{grid-template-columns:1fr}.propertySidebar{position:fixed;z-index:30;top:80px;left:12px;width:min(330px,calc(100vw - 24px));max-height:calc(100vh - 100px);box-shadow:0 10px 40px #0005}.propertySidebar.hidden{display:none!important}.boardWrap{grid-row:1}aside{grid-row:2}}

/* Darija version: marketplace lives above property details on the left */
.leftStack{min-width:0;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
.leftStack .propertySidebar{position:static;max-height:none}
#offerBanner{background:#fff3cb;border:3px solid #d49b22;box-shadow:0 6px 25px #c18a2730;animation:offerGlow 1.5s ease-in-out infinite alternate}
@keyframes offerGlow{to{box-shadow:0 0 20px #e6ac54a0}}
.victory{position:fixed;inset:0;background:#092b24ec;z-index:100;display:flex;justify-content:center;align-items:center;overflow:hidden}
.victoryBox{position:relative;z-index:2;background:#fffdf1;border:5px solid #e8bf53;border-radius:24px;text-align:center;padding:28px;max-width:470px;width:92%;box-shadow:0 0 65px #ffdb7380}
.victoryBox h1{font-size:clamp(25px,4vw,42px);color:#176548;margin:5px 0}.victoryBox h2{color:#ad7331}
.trophy{font-size:72px;animation:bounce .6s ease-in-out infinite alternate}@keyframes bounce{to{transform:translateY(-12px) rotate(7deg)}}
.standing{display:flex;justify-content:space-between;background:#f0eacb;border-radius:9px;padding:12px;margin:7px 0;font-weight:800}
.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;top:-30px;width:9px;height:18px;animation:fall 4s linear infinite;transform:rotate(30deg)}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@media(max-width:850px){.leftStack{position:static;max-height:none}.leftStack .propertySidebar{position:fixed;max-height:calc(100vh - 100px)}.leftStack #offerBanner{position:fixed;z-index:32;left:12px;top:80px;width:min(330px,calc(100vw - 24px))}}

/* V5: cinematic dice, landing alerts, money payments */
.diceReveal{position:absolute;z-index:24;inset:22% 20%;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:24px;background:#153d33ef;color:#fff;border:4px solid #e8c46a;box-shadow:0 20px 70px #102a24b0;animation:revealIn .35s ease-out;pointer-events:none}
.revealHeading{font-weight:900;font-size:clamp(16px,2.5vw,30px);color:#ffdd83}.revealDice{font-size:clamp(55px,9vw,125px);white-space:nowrap;margin:12px}.revealTotal{font-weight:900;font-size:clamp(20px,3vw,38px)}
.diceReveal.shrinkDice{animation:shrinkReveal 1s forwards}
@keyframes revealIn{from{opacity:0;transform:scale(.5) rotate(-7deg)}to{opacity:1;transform:scale(1)}}
@keyframes shrinkReveal{to{opacity:0;transform:scale(.25) translateY(130px)}}
.eventReveal{position:absolute;z-index:26;top:33%;left:19%;width:62%;background:#fff0be;border:5px solid #b86428;border-radius:16px;box-shadow:0 12px 40px #0006;padding:22px;text-align:center;font-size:clamp(16px,2.6vw,30px);font-weight:900;animation:revealIn .3s ease-out;pointer-events:none}
.moneyFly{position:fixed;z-index:90;top:17%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:17px 28px;border-radius:18px;border:3px solid #e5c259;background:#fff9db;color:#154735;box-shadow:0 10px 40px #0006;white-space:nowrap;max-width:95vw;animation:moneyTravel 2.2s ease-in-out forwards;font-size:clamp(13px,2vw,23px)}
.moneyFly strong{color:#b14d2b}
@keyframes moneyTravel{0%{opacity:0;transform:translate(-65%,40px) scale(.6)}20%{opacity:1;transform:translate(-50%,0) scale(1.12)}65%{opacity:1;transform:translate(-40%,-12px) scale(1)}100%{opacity:0;transform:translate(-20%,-55px) scale(.7)}}
@media(max-width:600px){.diceReveal{inset:25% 7%}.revealDice{font-size:50px}.eventReveal{left:8%;width:84%}}

.soundToggle{background:transparent;color:#fff;border:1px solid #90b4a5;border-radius:8px;padding:7px 11px;cursor:pointer;font-weight:700;white-space:nowrap}.soundToggle:hover{background:rgba(255,255,255,.12)}

/* V7 emergency debt panel */
.debtPanel{border:2px solid #d25a37!important;background:#fff4e8!important;color:#492b20;box-shadow:0 5px 20px #8b36192b}
.debtPanel h2{color:#a63323}.debtDue{font-size:1.25rem;font-weight:900;color:#af3825}.debtClock{font-size:1.1rem;font-weight:800;color:#a63323}

/* V7 visual polish: new lobby and central room copy badge */
header{position:relative;min-height:72px;height:auto;gap:16px;flex-wrap:wrap;padding:12px 24px}
.roomActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.roomBadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff5d5;border:2px solid #f4cb62;color:#194938;padding:10px 20px;font-size:15px;font-weight:900;letter-spacing:1px;box-shadow:0 3px 12px #0002;white-space:nowrap}
.roomBadge:hover{background:#fff0b8;filter:none}
.landing{max-width:870px;margin:50px auto;padding:38px 42px;background:linear-gradient(155deg,#fff 70%,#fff9e9)}
.welcomeIcon{font-size:36px;margin-bottom:12px}.landing h1{font-size:clamp(24px,3vw,37px);color:#174735}
.landing .welcomeIntro{max-width:590px;margin:0 auto 24px;font-size:16px}
.landing .nameLabel{margin:10px 0 4px;text-align:left;max-width:530px;margin-left:auto;margin-right:auto}
.landing #name{max-width:530px;margin:5px auto 25px;display:block;font-size:18px;border:2px solid #afcabb;background:#f9fffb}
.roomChoice{display:grid;grid-template-columns:1fr 55px 1fr;gap:12px;align-items:stretch;margin:10px 0 22px}
.choiceCard{border:2px solid #d7e6dc;border-radius:17px;padding:25px 18px;background:#f6faf5;display:flex;flex-direction:column;align-items:center;gap:8px}
.choiceCard:nth-child(3){background:#fff9ec;border-color:#ecdcb1}
.choiceCard h2{margin:0;font-size:20px}.choiceCard p{margin:0 0 10px;font-size:13px;min-height:38px}
.choiceIcon{font-size:32px}.choiceDivider{align-self:center;font-weight:900;color:#a47a36}
.choiceCard input{margin:0 0 6px;text-align:center;text-transform:uppercase;letter-spacing:3px;font-weight:900;font-size:17px;max-width:260px}
.roomBtn{width:100%;max-width:260px;margin-top:auto;padding:14px;font-size:15px}.choiceCard #join{background:#dcb14e;color:#21382b}
.tile .squareIcon{font-size:clamp(12px,1.7vw,24px);line-height:1.1}
@media(max-width:1100px){.roomBadge{position:static;transform:none;order:-1}.roomActions{margin-left:auto}}
@media(max-width:650px){.landing{margin:15px 5px;padding:24px 16px}.roomChoice{grid-template-columns:1fr;gap:10px}.choiceDivider{padding:2px}.choiceCard{padding:18px 12px}.choiceCard p{min-height:0}.landing #name{margin-bottom:18px}.roomBadge{font-size:12px;padding:7px 9px}header{padding:10px}.brand{font-size:17px}}

/* Bigger, easy-to-see player position markers (desktop and mobile). */
.tile .tokens {position:absolute;left:1px;right:1px;bottom:1px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;z-index:5;pointer-events:none;}
.tile .tokens .token {display:block;width:clamp(11px,1.55vw,18px);height:clamp(11px,1.55vw,18px);flex:0 0 auto;border:2px solid #fff;box-shadow:0 0 0 1px #20382f,0 2px 4px #0009;}
@media(max-width:500px){.tile .tokens {gap:1px;bottom:0}.tile .tokens .token{width:9px;height:9px;border-width:1.5px;}}

/* Focused AGADIROPOLY improvements: compact clickable player list and wealth pop-up */
.playerClickable{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;border:0;display:flex;align-items:center;gap:9px;padding:9px;border-radius:9px;margin-bottom:5px;background:#f3f6f1}
.playerClickable:hover,.playerClickable:focus-visible{background:#e8f2e8;outline:2px solid #82b99d}
.playerClickable .who{min-width:0;overflow-wrap:anywhere}.playerClickable .cash{white-space:nowrap}.playerChevron{font-size:20px;color:#71887a;font-weight:700}
.wealthOverlay{position:fixed;inset:0;z-index:110;background:#092b2499;display:flex;align-items:center;justify-content:center;padding:14px}
.wealthCard{position:relative;background:#fffdf6;border-radius:16px;padding:25px 22px;width:min(390px,100%);box-shadow:0 16px 60px #0006;outline:none}
.wealthCard h2{padding-right:30px;margin-bottom:4px}.wealthSubtitle{margin:0 0 17px;color:#65776c;font-size:13px}
#closeWealth{position:absolute;right:12px;top:10px;font-size:25px;background:transparent;padding:2px 10px}
.wealthLine,.wealthTotal{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;font-size:14px}.wealthLine strong,.wealthTotal strong{white-space:nowrap}
.wealthLine{border-bottom:1px solid #e7ece6}.wealthTotal{border-top:2px solid #a8c6b4;margin-top:10px;font-weight:800;color:#135d41}.wealthTotal strong{font-size:20px}
.wealthFoot{font-size:12px;color:#687c70;margin:12px 0 0}.bankruptcyBtn{background:#ad3535;color:#fff;width:100%;margin-top:10px}


/* Optional multiplayer extras: preserve existing three-column board layout. */
.shareRoom{background:#17a768;color:white;white-space:nowrap}.voiceJoin{background:#e4f1e8;color:#124d38;white-space:nowrap}.voiceMute{background:#f1d8d8;color:#8d3030;white-space:nowrap}
#reactionPanel{margin-top:12px}.reactionButtons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.reactionButtons button{font-size:11px;padding:9px 5px;background:#f4f7f0;border:1px solid #dce8db}.reactionFeed{font-size:12px;color:#385b4b;margin-top:10px}.reactionFeed div{padding:5px 0;border-bottom:1px solid #e9eee8}
.reactionBubble{position:absolute;bottom:14%;left:50%;transform:translateX(-50%);z-index:20;max-width:75%;background:#fffdf2;border:2px solid #e9bd56;border-radius:24px;padding:9px 15px;font-weight:800;font-size:clamp(11px,1.3vw,17px);box-shadow:0 7px 20px #183b3038;pointer-events:none;animation:cardPop .25s ease-out;text-align:center}
.voiceStatus{font-size:12px;flex-shrink:0}.playerClickable .who{min-width:0;overflow-wrap:anywhere}
#propertyPanel .propertyTitle{background:#e8efe9;border-radius:8px;padding:9px;text-align:center;font-weight:900}
@media(max-width:1100px){.roomActions{gap:5px}.shareRoom,.voiceJoin,.voiceMute{padding:7px;font-size:11px}}
@media(max-width:750px){header{height:auto;min-height:70px;flex-wrap:wrap;gap:8px;padding:9px}.roomActions{flex-wrap:wrap;justify-content:flex-end}.shareRoom,.voiceJoin,.voiceMute{font-size:11px}.reactionButtons{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* Mobile-only gameplay controls; desktop and game rules unchanged. */
.mobilePlayers,.mobileReactionsToggle{display:none}
@media(max-width:850px){
 body:has(#actionPanel.mobileGameActive){padding-bottom:155px}
 .boardWrap{min-width:0;width:100%}
 .mobilePlayers{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 1px 10px;scrollbar-width:thin}
 .mobilePlayer{display:flex;align-items:center;gap:5px;flex:0 0 auto;background:#fff;border:1px solid #d5e2d8;border-radius:10px;padding:7px 9px;font-size:12px;font-weight:750;max-width:170px}
 .mobilePlayerTurn{border-color:#d9a834;background:#fff8df}
 .mobilePlayerDot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
 .mobilePlayerName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:75px}
 #actionPanel.mobileGameActive{position:fixed;z-index:55;bottom:0;left:0;right:0;margin:0;padding:11px 14px max(12px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0;box-shadow:0 -5px 24px #102e2940;border-top:2px solid #d9bd6c;background:#fffefa}
 #actionPanel.mobileGameActive h2{font-size:13px;margin:0 0 3px}
 #actionPanel.mobileGameActive #status{font-size:13px;line-height:1.25;margin:3px 0 9px;max-height:36px;overflow:auto}
 #actionPanel.mobileGameActive .buttons{display:flex;gap:7px}
 #actionPanel.mobileGameActive .buttons button:not(.hidden){min-height:44px;padding:10px 8px;font-size:14px}
 .mobileJump:not(.hidden){display:flex;margin:3px 0 7px}
 .mobileJump button{width:100%;padding:8px;background:#fff1ce;color:#63430e;font-size:12px}
 .mobileReactionsToggle:not(.hidden){display:block;position:fixed;z-index:58;right:12px;bottom:calc(146px + env(safe-area-inset-bottom));width:45px;height:45px;border-radius:50%;background:#ffe5a0;box-shadow:0 4px 16px #102e2940;font-size:23px;padding:0}
 #reactionPanel:not(.hidden){display:none}
 #reactionPanel.mobileReactionOpen:not(.hidden){display:block;position:fixed;z-index:57;right:10px;left:10px;bottom:calc(195px + env(safe-area-inset-bottom));max-height:min(45vh,340px);overflow:auto;margin:0;box-shadow:0 8px 32px #102e2960;padding:14px}
 #reactionPanel.mobileReactionOpen .reactionButtons{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:500px){
 header{gap:5px}
 #actionPanel.mobileGameActive .buttons button:not(.hidden){font-size:13px}
}

/* Compact header: game effects separated by space from independent voice controls. */
.audioControls{display:flex;align-items:center;gap:clamp(18px,3vw,52px)}
.callControls{display:flex;align-items:center;gap:7px}
.audioControls button{min-width:73px;white-space:nowrap;padding:9px 11px;border-radius:9px;font-size:13px;font-weight:850}
.audioControls .soundToggle{background:#e3f1df;color:#174f3c;border:1px solid #a7d0ac}
.audioControls .voiceMute,.audioControls .voiceListen{background:#e3f1df;color:#174f3c;border:1px solid #a7d0ac}
.audioControls .audioOff{background:#f1d8d8;color:#84332e;border-color:#e6aaaa}
@media(max-width:850px){
 header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 10px;min-height:0}
 header .brand{font-size:clamp(15px,4vw,20px);white-space:nowrap}
 .roomActions{display:contents}
 .roomActions #leaveGame{order:1;margin-left:auto;padding:8px 10px;font-size:0;min-width:38px;min-height:38px}
 .roomActions #leaveGame:not(.hidden)::after{content:'🚪';font-size:18px}
 .audioControls{order:3;flex:0 0 100%;justify-content:space-between;gap:8px;margin-top:4px}
 .callControls{gap:7px}
 .audioControls button{min-width:67px;min-height:39px;padding:8px 10px;font-size:12px}
 .roomActions #roomBadge:not(.hidden){order:4;position:static;transform:none;margin:3px auto 0;font-size:12px}
 .roomActions #shareRoom:not(.hidden){order:5;margin:3px auto 0;padding:8px 12px}
}
@media(max-width:370px){.audioControls{gap:5px}.audioControls button{min-width:61px;padding:8px 6px}}

/* Mobile property offers: dismiss without rejecting, reopen from the action bar. */
.mobileOfferClose{display:none}
@media(max-width:850px){
 .leftStack #offerBanner{top:clamp(110px,21vh,240px);left:50%;transform:translateX(-50%);width:min(390px,calc(100vw - 32px));max-height:55dvh;overflow-y:auto;z-index:65;padding:20px 16px 18px;border-radius:18px;box-shadow:0 8px 30px #1b382e55}
 .leftStack #offerBanner h2{padding-right:42px}
 .leftStack #offerBanner.mobileOfferMinimized{display:none!important}
 .mobileOfferClose{display:block;position:absolute;right:9px;top:8px;width:40px;height:40px;padding:0;border-radius:50%;font-size:26px;line-height:1;background:#fff8e8;color:#61491c;border:1px solid #d49b22}
}

/* Mobile debt liquidation: keep all property sale controls reachable above sticky action bar. */
@media(max-width:850px){
 .leftStack .propertySidebar:not(.hidden){
  position:fixed;z-index:75;top:max(8px,env(safe-area-inset-top));
  bottom:calc(156px + env(safe-area-inset-bottom));
  left:12px;width:min(530px,calc(100vw - 24px));
  max-height:none;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding-bottom:24px;
  box-shadow:0 10px 40px #0005;
 }
 .leftStack .propertySidebar:not(.hidden) #saleControls{padding-bottom:16px}
}

/* Visual polish: board dimensions and mobile controls are unchanged. */
.board{box-shadow:0 12px 26px #16392e2c,0 3px 0 #102d24,inset 0 2px 4px #ffffff60}
.tile{box-shadow:inset 0 2px 0 #ffffffa8,inset 0 -3px 4px #193b2912}
.tile .stripe{box-shadow:0 2px 2px #00000022}
.tile.deckTile{background:linear-gradient(150deg,#fff7dc,#f9e6af)}
.tile.deckTile .squareIcon{position:relative;display:grid;place-items:center;width:62%;min-height:36%;margin:auto;z-index:1;font-size:clamp(17px,2.2vw,30px);background:linear-gradient(145deg,#ffdf78,#f2ad35);border:1px solid #c88625;border-radius:5px;box-shadow:-3px 3px 0 #e7bc60,-6px 6px 0 #cf9d48,0 7px 8px #3325093a;transform:rotate(-7deg)}
.tile[data-id="7"] .squareIcon,.tile[data-id="22"] .squareIcon,.tile[data-id="36"] .squareIcon{background:linear-gradient(145deg,#e9c6ff,#a879e8);border-color:#8b59bb;box-shadow:-3px 3px 0 #d1b4ec,-6px 6px 0 #a487c6,0 7px 8px #3325093a}
.tile.taxTile{background:linear-gradient(160deg,#fff0e2,#ffdbbd)}
.tile.taxTile .price{font-weight:900;color:#9b2929;background:#fff4e7;border:1px solid #e4a27c;border-radius:5px;padding:1px 3px}
.tile[data-id="0"] .squareIcon{color:#13784d;font-size:clamp(20px,2.6vw,34px)}
@media(max-width:500px){
 .tile.deckTile .squareIcon{font-size:clamp(9px,3.3vw,16px);border-radius:2px;box-shadow:-1px 1px 0 #e7bc60,-2px 2px 0 #cf9d48}
 .tile[data-id="7"] .squareIcon,.tile[data-id="22"] .squareIcon,.tile[data-id="36"] .squareIcon{box-shadow:-1px 1px 0 #d1b4ec,-2px 2px 0 #a487c6}
 .tile.taxTile .price{padding:0 1px}
}

/* Desktop only: keep the full board in view while the information column scrolls.
   Mobile/tablet stacking and controls below 851px are deliberately untouched. */
@media (min-width:851px){
  #game .layout{
    height:calc(100dvh - 115px);
    min-height:0;
    align-items:start;
  }
  #game .boardWrap{
    position:sticky;
    top:12px;
    width:100%;
    max-width:min(820px, calc(100dvh - 135px));
    align-self:start;
  }
  #game .layout > aside{
    min-height:0;
    max-height:calc(100dvh - 115px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:5px;
  }
  #game .leftStack{
    max-height:calc(100dvh - 115px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
}

/* Desktop: important turn controls immediately below player list.
   Chat/reactions and game log remain scrollable below. Mobile untouched. */
@media (min-width:851px){
  #game .layout > aside{display:flex;flex-direction:column;align-items:stretch;}
  #game .layout > aside > .card:first-child{order:0;flex-shrink:0;}
  #game .layout > aside > #actionPanel{order:1;flex-shrink:0;}
  #game .layout > aside > #hostPanel{order:2;flex-shrink:0;}
  #game .layout > aside > #reactionPanel{order:3;flex-shrink:0;}
  #game .layout > aside > .card:last-child{order:4;flex-shrink:0;}
}

/* Chat stays compact, with latest messages at the top. */
#agChatMessages{height:145px;max-height:145px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column;gap:4px;margin:8px 0;}
#agChatMessages>div{overflow-wrap:anywhere;padding:4px 0;border-bottom:1px solid #e8eee8;font-size:13px;line-height:1.35;}
#agChatForm{display:flex;align-items:center;gap:7px;}
#agChatForm input{flex:1;min-width:0;margin:0;}
#agChatForm button{width:42px;min-width:42px;height:42px;border-radius:12px;background:#146b50;color:white;font-size:20px;display:grid;place-items:center;padding:0;}
.voiceSingleMute,.kickPlayerBtn{display:inline-block;font-size:11px;padding:5px 8px;margin:2px 4px 6px 0;border-radius:8px;}
.kickPlayerBtn{color:#a11e1e;background:#fff0f0;}
@media(max-width:850px){
 #mobileReactionsToggle.hasUnreadChat::after{content:' ';position:absolute;top:5px;right:5px;width:12px;height:12px;border-radius:50%;background:#ed4e50;border:2px solid white;box-shadow:0 0 0 1px #ed4e50;}
 #agChatMessages{height:125px;max-height:125px;}
 #landing .roomChoice{display:flex;flex-direction:column;gap:10px;}
 #landing .roomChoice .choiceCard{padding:12px 14px;}
 #landing .roomChoice .choiceIcon{font-size:23px;}
 #landing .roomChoice .choiceCard h2{margin:4px 0;font-size:19px;}
 #landing .roomChoice .choiceCard p{margin:4px 0 10px;font-size:13px;}
 #landing .roomChoice .choiceDivider{margin:0;}
 body.hasRoomInvite #landing .roomChoice .choiceCard:last-child{order:-2;border:2px solid #16845f;background:#eaf9f0;}
 body.hasRoomInvite #landing .roomChoice .choiceDivider{order:-1;}
}
@media(max-width:850px){
 /* Show Join Room before Create Room on small screens. */
 #landing .roomChoice .choiceCard:last-child{order:0;}
 #landing .roomChoice .choiceDivider{order:1;}
 #landing .roomChoice .choiceCard:first-child{order:2;}
 body.hasRoomInvite #landing .roomChoice .choiceCard:last-child{order:0;}
 body.hasRoomInvite #landing .roomChoice .choiceDivider{order:1;}
}

/* Player management: visible on desktop and mobile, separate from player detail buttons. */
#players .agPlayerEntry{display:block;width:100%;margin-bottom:10px;min-width:0;}
#players .agPlayerEntry .playerClickable{width:100%;margin-bottom:3px;min-width:0;}
#players .agPlayerTools{display:flex;flex-wrap:wrap;gap:6px;padding:0 2px 3px;}
#players .agPlayerTools button{display:inline-flex!important;align-items:center;justify-content:center;position:relative;z-index:2;margin:0;padding:7px 10px;font-size:12px;line-height:1.2;min-height:30px;max-width:100%;white-space:normal;cursor:pointer;}
#players .agPlayerTools .voiceSingleMute{background:#e8f2ed;color:#15523b;}
#players .agPlayerTools .kickPlayerBtn{background:#fff0f0;color:#a11e1e;}
#players .agPlayerTools button:focus-visible{outline:2px solid #167d58;outline-offset:2px;}

/* 2026-10-20: chat composer first, compact independently scrolling history */
#agChat{display:flex;flex-direction:column;min-width:0}
#agChat h3{margin-bottom:10px}
#agChatForm{order:1;margin:0 0 8px}
#agChatMessages{order:2;height:175px;max-height:175px;min-height:0;overflow-y:auto;margin:0;scrollbar-width:thin}
#agChatForm button{flex-shrink:0}
/* Ownership tab: coloured semicircular marker on the board-facing edge.
   Player name is shown on the marker; tooltip has the full name. */
.tile .owner{display:none}
.tile .agOwnerTab{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;background:var(--ag-owner-color);color:#fff;box-shadow:0 1px 3px #0008;border:1px solid #fff9;pointer-events:none;overflow:hidden;max-width:100%;font-size:clamp(5px,.56vw,9px);font-weight:900;line-height:1.1;text-shadow:0 1px 2px #0008}
.tile .agOwnerTab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding:0 2px}
.tile.agBottom .agOwnerTab{top:0;left:10%;width:80%;height:18%;border-radius:0 0 999px 999px}
.tile.agTop .agOwnerTab{bottom:0;left:10%;width:80%;height:18%;border-radius:999px 999px 0 0}
.tile.agLeft .agOwnerTab{right:0;top:18%;height:64%;width:29%;border-radius:999px 0 0 999px;writing-mode:vertical-rl;transform:none}
.tile.agRight .agOwnerTab{left:0;top:18%;height:64%;width:29%;border-radius:0 999px 999px 0;writing-mode:vertical-rl;transform:rotate(180deg)}
@media(max-width:850px){
 #reactionPanel.mobileReactionOpen:not(.hidden){max-height:min(65dvh,520px);bottom:calc(95px + env(safe-area-inset-bottom));overflow-y:auto}
 #agChatMessages{height:205px;max-height:205px}
 .tile .agOwnerTab{font-size:clamp(4px,1.3vw,7px)}
 .tile.agBottom .agOwnerTab,.tile.agTop .agOwnerTab{height:20%}
 .tile.agLeft .agOwnerTab,.tile.agRight .agOwnerTab{width:30%}
}
@media(max-width:500px){
 #reactionPanel.mobileReactionOpen:not(.hidden){left:6px;right:6px;padding:12px;max-height:min(67dvh,510px)}
 #agChatMessages{height:215px;max-height:215px}
}

/* Owner name markers OUTSIDE tiles, on the central playing-field edge. */
.tile .agOwnerTab{display:none!important}
.board .agInnerOwner{position:absolute;z-index:9;display:flex;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;background:var(--ag-owner-color);color:white;border:1px solid #fff9;box-shadow:0 2px 4px #173b2d55;font-size:clamp(6px,.65vw,10px);font-weight:850;line-height:1;min-width:0;overflow:hidden;text-shadow:0 1px 1px #0006}
.board .agInnerOwner span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 3px}
.board .agInnerOwner-top,.board .agInnerOwner-bottom{width:8.6%;height:2.6%;left:auto;transform:translateX(-50%)}
.board .agInnerOwner-top{margin-top:4.55%;border-radius:0 0 16px 16px}
.board .agInnerOwner-bottom{margin-top:-7.15%;border-radius:16px 16px 0 0}
.board .agInnerOwner-left,.board .agInnerOwner-right{height:8.6%;width:2.6%;top:auto;writing-mode:vertical-rl;transform:translateY(-50%)}
.board .agInnerOwner-left{margin-left:4.55%;border-radius:0 16px 16px 0}
.board .agInnerOwner-right{margin-left:-7.15%;border-radius:16px 0 0 16px;transform:translateY(-50%)}
.board .agInnerOwner-right span{transform:rotate(180deg)}
@media(max-width:850px){.board .agInnerOwner{font-size:clamp(5px,1.4vw,8px)}.board .agInnerOwner-top,.board .agInnerOwner-bottom{height:3.3%}.board .agInnerOwner-left,.board .agInnerOwner-right{width:3.3%}}
/* Chat composer above the newest-first conversation; compact, app-like controls. */
#agChatForm{order:1;display:flex;gap:6px;align-items:center;margin:0 0 10px}
#agChatForm input{border-radius:12px;min-height:40px}
#agChatForm button{width:42px;height:42px;border-radius:12px;font-size:22px}
#agChatMessages{order:2;height:190px;max-height:190px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:850px){#agChatMessages{height:225px;max-height:225px}#reactionPanel.mobileReactionOpen:not(.hidden){max-height:min(72dvh,560px)}}

/* Compact individual voice control beside each player's name — desktop and mobile. */
#players .agPlayerEntry .agPlayerMain{display:flex;align-items:center;gap:5px;min-width:0;}
#players .agPlayerEntry .agPlayerMain .playerClickable{flex:1 1 auto;width:auto;min-width:0;margin-bottom:0;}
#players .agPlayerEntry .voiceMuteIcon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;min-height:30px;padding:0;margin:0;border:1px solid #d6e6dc;border-radius:9px;background:#e8f2ed;color:#15523b;font-size:15px;line-height:1;cursor:pointer;}
#players .agPlayerEntry .voiceMuteIcon:hover{background:#d4e8da;}
#players .agPlayerEntry .voiceMuteIcon:focus-visible{outline:2px solid #167d58;outline-offset:2px;}
#players .agPlayerEntry .agPlayerTools{padding-top:4px;}