/* Fit the stage to the window; keep controls proportional and anchored to its edges. */
#game-viewport{top:0;height:var(--stage-height,941px);transform:translateX(-50%) scale(var(--scene-scale,1));transform-origin:50% 0}
#app,.game-shell{height:100%}
#scene-root,.board-area,#effects-root{transform:scaleY(var(--board-scale-y,1));transform-origin:0 0}
.actionbar{top:auto;bottom:0}
.sidebar,.lobby-screen .sidebar{height:calc(var(--stage-height,941px) - 165px);padding-bottom:12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#658666 #082d22;background:#05291ff5}
.topbar-right .icon-button,.topbar-right .icon-button:last-child{align-self:flex-start;height:32px;margin-top:0}
.topbar-right .connection{display:flex;justify-content:center;left:12px;top:40px;width:36px;height:16px;font-size:10px;line-height:16px;white-space:nowrap;gap:3px}
.topbar-right .connection>span{width:5px;height:5px;flex-shrink:0}
.topbar-right .connection.offline{left:7px;width:85px;background:#05291f;border-radius:4px;font-size:9px}
.welcome-flag{display:block;object-fit:contain;background:none;width:48px;height:32px;flex-shrink:0}
.lobby-screen .bottom-nav,.welcome .bottom-nav{display:none}
.lobby-screen .invite-card{margin-top:12px;padding-top:10px}.lobby-screen .invite-card p{margin:4px 0 10px}.lobby-screen .waiting{padding:8px 0;margin:8px;font-size:15px}
.portrait-scene .portrait-tip{top:auto;bottom:10%;font-size:16px}
.action-buttons .button,.nav-button{transition:transform .16s,filter .16s,box-shadow .16s}
.action-buttons .button:not(:disabled):hover,.nav-button:not(:disabled):hover{transform:translateY(-3px);filter:brightness(1.12);box-shadow:0 6px 20px #e7c65e33}
.action-buttons .button:not(:disabled):active,.nav-button:not(:disabled):active{transform:translateY(2px) scale(.98)}
.deck-hit:hover{box-shadow:0 0 24px #ffe6a766;background:#f9d67422;transition:box-shadow .2s,background .2s}
#effects-root{position:absolute;inset:0;width:1672px;height:941px;z-index:12;pointer-events:none;overflow:hidden}
.tile-flare{position:absolute;inset:0;filter:drop-shadow(0 0 9px #ffe99b)}.tile-flare svg{width:1672px;height:941px}
.claim-spark{position:absolute;font-size:28px;text-shadow:0 2px 5px #152116;will-change:transform,opacity}
.cash-pop{position:absolute;z-index:4;white-space:nowrap;font:700 23px/1.6 'Noto Arabic',sans-serif;direction:ltr;transform:translateX(-50%);padding:0 12px;border:1px solid #f2e9be;border-radius:30px;box-shadow:0 3px 16px #0008;text-shadow:0 1px 3px #0005}
.cash-pop.gain{background:#104e2f;color:#b2ffb2}.cash-pop.loss{background:#5d2b22;color:#ffe0aa}
.balance-gain{color:#b3ffae!important;text-shadow:0 0 15px #71fc64}.balance-loss{color:#ffd098!important}
.flying-coin{position:absolute;z-index:3;width:25px;height:25px;display:grid;place-items:center;border:2px solid #fff1b0;border-radius:50%;background:linear-gradient(120deg,#fff1a9,#b98222);box-shadow:0 1px 8px #ffda7988,inset 0 0 0 2px #a57831;color:#79531a;font:700 10px 'Noto Arabic',sans-serif;backface-visibility:visible}
.game-reward{position:absolute;left:662px;top:218px;width:348px;direction:rtl;text-align:center;transform:translateX(-50%);filter:drop-shadow(0 16px 24px #0009);font-family:'Noto Arabic',sans-serif;pointer-events:none}
.game-reward h2{font-family:'Noto Arabic',sans-serif;font-size:31px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.effect-dismiss{position:absolute;right:-13px;top:-13px;width:31px;height:31px;border-radius:50%;border:1px solid #ddc998;background:#0a2a20;color:#fff1ca;font:22px/1 Roboto,sans-serif;pointer-events:auto;cursor:pointer;box-shadow:0 3px 6px #0007}
.purchase-reward{padding:18px 22px 22px;min-height:285px;border-radius:16px;border:3px solid #e5cf8b;background:radial-gradient(ellipse at top,#fff3cc,#ead7a7 80%);color:#163728;box-shadow:inset 0 0 0 5px #ac86462b}
.reward-ribbon{background:linear-gradient(90deg,#0c3728,var(--reward-color),#0c3728);border:1px solid #a4d290;color:#071f13;padding:4px 10px;border-radius:5px;font-weight:700;font-size:18px;text-shadow:0 1px 2px #fff8}
.reward-player{display:flex;align-items:center;justify-content:center;gap:9px;margin:8px 0 2px;font-size:17px;font-weight:700;min-width:0}.reward-player>span:last-child{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reward-player .character-portrait{display:block;flex-shrink:0;width:62px;height:62px}
.ownership-seal{display:inline-flex;flex-direction:column;gap:1px;align-items:center;justify-content:center;border:3px double #195337;color:#195337;border-radius:7px;transform:rotate(-9deg);font-size:25px;font-weight:700;padding:0 18px;margin-top:12px;line-height:1.6;background:#a9cba333}.ownership-seal span{font-size:11px;line-height:1.5}
.card-reward{top:179px;height:388px;perspective:1000px}.card-turn{position:relative;width:100%;height:100%;transform-style:preserve-3d}.card-face{position:absolute;inset:0;border:5px solid #f2da9e;border-radius:19px;backface-visibility:hidden;overflow:hidden;box-shadow:inset 0 0 0 2px #ad9864}.card-front{display:flex;flex-direction:column;align-items:center;padding:19px 23px 22px;background:radial-gradient(ellipse at top,#fff5da,#eadbbc);color:#183f30}.card-edition{font:700 10px Roboto,sans-serif;letter-spacing:3px;color:#887245;margin-bottom:10px}.card-front h2{color:var(--card-color);font-size:27px}.card-emblem{display:grid;place-items:center;width:67px;height:67px;min-height:67px;border-radius:50%;background:var(--card-color);color:#fff6d3;font:700 53px/1 'Noto Arabic',sans-serif;margin:12px 0 3px;box-shadow:0 0 0 5px #c8b68455}.card-front p{font-size:22px;line-height:1.7;flex:1;display:flex;align-items:center;margin:8px 0;overflow-wrap:anywhere}.card-front footer{font-size:12px;color:#6a7154;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#ffffff0b 0 2px,transparent 2px 12px),var(--card-color);color:#fff4c6;display:flex;flex-direction:column;align-items:center;justify-content:center}.card-back b{font-size:140px;line-height:1.2}.card-back span{font-size:26px;font-weight:700}
.jail-reward{top:195px;padding:18px 20px 20px;border:3px solid #b0afb0;border-radius:17px;background:linear-gradient(#27343c,#132d2b);color:#f4ecd0;overflow:visible;box-shadow:inset 0 0 0 5px #ffffff0b}.jail-reward h2{color:#ffcc90;font-size:33px}.jail-reward>strong{font-size:20px;display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.jail-reward p{font-size:16px;line-height:1.8;margin:5px 0 0;color:#d4ded3}.jail-cell{height:123px;width:130px;margin:8px auto 6px;position:relative;overflow:hidden;background:radial-gradient(#69877d,#071411);border:5px ridge #9aa6a4;border-radius:4px}.jail-cell .character-portrait{position:absolute;width:115px;height:115px;left:3px;top:2px}.jail-bars{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,#354249 22px 25px,#c0c5bf 25px 28px,#465152 28px 30px);box-shadow:inset 0 0 0 4px #586563;border-top:6px ridge #a3b0a8;border-bottom:6px ridge #a3b0a8}.siren-lights{display:flex;position:absolute;left:50%;top:-16px;transform:translateX(-50%);gap:6px}.siren-lights i{width:33px;height:22px;border-radius:14px 14px 4px 4px;background:#ec6b43;box-shadow:0 0 25px #ff422b;animation:siren .55s alternate infinite}.siren-lights i+i{background:#59b9f0;box-shadow:0 0 25px #4ec6ff;animation-delay:-.55s}
@keyframes siren{from{opacity:.45}to{opacity:1}}
.payment-reward{width:480px;top:246px;padding:18px 22px;border:2px solid #e1c779;border-radius:20px;background:radial-gradient(ellipse at top,#19523a,#06271e 80%);color:#f8edc9;box-shadow:inset 0 0 0 5px #c7a85616}
.payment-heading{color:#eacb78;font-size:24px;font-weight:700}.payment-reward h2{font-size:28px;margin:0 0 12px}.payment-transfer{display:grid;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);direction:ltr;align-items:center;gap:8px}.payment-person{min-width:0;border:1px solid var(--person-color);border-bottom:4px solid var(--person-color);border-radius:14px;padding:10px 7px;background:#001b1766;direction:rtl}.payment-person .character-portrait,.payment-bank{display:block;margin:0 auto;width:75px;height:75px}.payment-bank{font:70px/75px Georgia;color:#ebd486}.payment-person strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:19px;line-height:30px}.payment-person>span:not(.character-portrait):not(.payment-bank){font-size:13px;color:#c9d5c5}.payment-person b{display:block;font-size:22px;line-height:34px;white-space:nowrap}.payer b{color:#ffcbad}.recipient b{color:#bbf1a7}.payment-arrow{font:40px/1 Arial;color:#ebcd74}.payment-arrow span{display:block;font:12px/24px Arial;white-space:nowrap;animation:payment-coins .8s ease-in-out 4}.payment-reward p{font-size:14px;line-height:24px;margin:12px 0 0;color:#d8dfc8}
@keyframes payment-coins{from{transform:translateX(-16px);opacity:0}50%{opacity:1}to{transform:translateX(16px);opacity:0}}
@media(prefers-reduced-motion:reduce){.payment-arrow span{animation:none}}
@media(prefers-reduced-motion:reduce){.siren-lights i{animation:none}.action-buttons .button,.nav-button,.deck-hit{transition:none}}

/* Card copy is a single text flow: inline amounts must never become flex columns. */
.card-reward{width:410px;height:350px;top:222px}
.card-face{border:3px solid #f2da9e;border-radius:22px;box-shadow:inset 0 0 0 3px #ac895c33}
.card-front{padding:22px 24px 16px;background:radial-gradient(ellipse at top,#fff8e7,#eddeb9);align-items:stretch}
.card-heading{display:flex;align-items:center;justify-content:flex-start;gap:14px;text-align:right;flex-shrink:0}
.card-heading .card-emblem{width:54px;height:54px;min-height:54px;flex-shrink:0;font-size:42px;margin:0;box-shadow:0 3px 0 #0002,inset 0 0 0 2px #fff5}
.card-heading h2{font-size:26px;line-height:1.5}.card-heading .card-edition{display:block;font-size:9px;letter-spacing:2px;margin:0 0 2px}
.card-copy{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:12px 0}
.card-front .card-copy p{display:block;flex:none;width:100%;font-size:24px;line-height:1.8;overflow-wrap:normal;word-break:normal;margin:0;padding:6px 0;text-wrap:pretty}
.card-copy bdi{display:inline;white-space:nowrap;unicode-bidi:isolate;direction:ltr}
.card-copy h3{font-size:18px;line-height:26px;margin:0 0 10px;color:#6d5d3e;font-weight:600}
.repair-cost{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff9e88c;border:1px solid #d8c497;border-radius:10px;padding:8px 14px;margin:4px 0;font-size:17px;line-height:30px}.repair-cost strong{font-size:24px;line-height:38px;white-space:nowrap;color:#8e3926}
.card-front footer{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #ae90504d;padding-top:10px;flex-shrink:0;font-size:12px;line-height:20px}.card-front footer>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.card-front footer b{color:#2a6b44;background:#cadaab66;border:1px solid #90a67755;border-radius:20px;padding:2px 9px;white-space:nowrap;font-size:11px;font-weight:500}

/* Compact game controls: player badge, one main move, and two tool buttons. */
.actionbar{background:linear-gradient(#0a3027,#051f19);border-top:1px solid #c6aa6559;box-shadow:0 -5px 22px #0003}
.turn-status{left:24px;top:12px;width:310px;height:78px;display:grid;grid-template-columns:66px minmax(0,1fr);direction:ltr;gap:14px;padding:0 16px 0 0;border-right:1px solid #b0ba8750}
.turn-status>div:nth-child(2){direction:rtl;text-align:right}.turn-status strong{font-size:24px;line-height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.turn-status>div>span{display:block;font-size:13px;line-height:22px;color:#a9c7b3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.turn-emblem{width:64px;height:64px;min-width:64px;border:1px solid #8caa6977;border-radius:50%;background:radial-gradient(#52714b66,#0a281d);box-shadow:inset 0 0 0 3px #001c164d}.turn-emblem .character-portrait{width:64px;height:64px;transform:translateY(-5px)}
.turn-clock{position:absolute;left:8px;top:56px;bottom:auto;width:50px;height:20px;padding:2px 5px;border:1px solid #a5b98b88;border-radius:8px;background:#102f22;color:#e0e7bc;font:700 12px/14px Roboto,sans-serif;text-align:center;box-shadow:0 2px 5px #0004}.turn-clock.urgent{color:#fff0d1;background:#943e2d;border-color:#ef9c72}
.action-dock{top:6px;height:89px;width:740px;display:flex;flex-direction:column;justify-content:center;gap:3px}.action-heading{height:auto;min-height:0;font-size:12px;line-height:19px;color:#d8d2ac}.action-heading:empty{display:none}.action-buttons{height:62px;gap:12px}
.action-buttons>.button{height:60px;min-width:150px;max-width:390px;border-radius:15px;padding:8px 21px;font-size:21px;gap:12px;transition:transform .14s,filter .14s,box-shadow .14s}
.action-buttons>.button:only-child{min-width:258px}.action-buttons>.button.gold{background:linear-gradient(#ffe6a3,#d6b460);color:#24391f;border:1px solid #ffedb7;box-shadow:0 5px 0 #8b7136,0 9px 18px #0004,inset 0 2px 0 #fff6}
.action-buttons>.button.outline{background:linear-gradient(#1c4a37,#123727);border:1px solid #668866;box-shadow:0 4px 0 #092317,0 6px 10px #0003;color:#ebebc3;font-size:18px}
.action-buttons>.button.subtle{height:45px;min-width:95px;background:transparent;border-color:#57745f;box-shadow:none;font-size:15px}
.action-buttons>.button.gold:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 7px 0 #8b7136,0 12px 24px #0005,inset 0 2px 0 #fff6;filter:brightness(1.06)}
.action-buttons>.button:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 #655b32}
.action-buttons>.button:disabled{opacity:.4;box-shadow:0 2px 0 #233b28;transform:none}
.action-buttons [data-act=roll] .icon{width:36px;height:36px;stroke-width:2;padding:4px;border-radius:8px;background:#fff8dc;color:#294331;box-shadow:2px 3px 0 #9f8441;transform:rotate(-9deg)}
.action-buttons [data-act=roll]:hover .icon{transform:rotate(7deg);transition:transform .15s}
.bottom-nav{right:24px;top:18px;gap:12px;height:66px}.nav-button:nth-child(n){width:104px;height:64px;min-height:64px;padding:7px 12px;border-radius:13px;flex-direction:column;gap:3px;font-size:13px;line-height:19px;background:linear-gradient(#174232,#0e3024);border:1px solid #416751;box-shadow:0 3px 0 #001b13}.nav-button .icon{width:23px;height:23px}.nav-button:disabled{opacity:.3;box-shadow:none}
.wait-action{font-size:20px;padding:12px 24px;border:1px solid #55735977;border-radius:28px;background:#173a2a88;color:#d6e0c5}.wait-action:before{content:'';display:inline-block;width:8px;height:8px;margin-left:10px;border-radius:50%;background:#d7c47b;box-shadow:0 0 0 5px #d7c47b15}
@media(prefers-reduced-motion:reduce){.action-buttons>.button,.action-buttons [data-act=roll]:hover .icon{transition:none}}