/* Arabic UI follows RTL flow; board coordinates and numeric values keep their
   own direction. Never mirror the board, dice, characters or media controls. */
#app,.game-shell,.topbar,.sidebar,.actionbar,.bottom-nav,.modal,.trade-notices{direction:rtl}
.button,.nav-button,.icon-button,.room-header>button,.feature-pills>span{direction:rtl;flex-direction:row}
.icon{flex-shrink:0;vertical-align:middle}
.button>.icon,.nav-button>.icon{order:0;margin:0}
.brand{direction:rtl;flex-direction:row}.brand img{order:0}
.room-header{padding-left:0;padding-inline-start:15px;border-left:0;border-inline-start:1px solid #bfbd9388}
.room-header>span{direction:rtl;border-left:0;border-inline-start:1px solid #e1ddba99;padding-left:0;padding-inline-start:15px}
.room-header strong,.room-code,bdi[dir=ltr],.turn-clock,.auction-clock,.trade-clock{unicode-bidi:isolate;direction:ltr}
bdi[dir=auto]{unicode-bidi:isolate}
.sidebar,.welcome-panel,.modal .setting-row,.trade-side,.deed,.trade-summary{text-align:start}
.welcome-panel label,.clean-trade>label,.cash-field{display:block;text-align:start}
.welcome-panel input[name=name]{text-align:right;unicode-bidi:plaintext}
.welcome-panel .join-input{direction:rtl;display:flex;gap:0;min-height:54px;border-radius:10px;border:1px solid #658963;background:#06271f}
.welcome-panel .join-input input{min-width:0;flex:1;width:0;margin:0;text-align:center;direction:ltr;unicode-bidi:isolate;font-family:Roboto,'Noto Arabic',sans-serif;font-size:20px}
.welcome-panel .join-input input::placeholder{direction:rtl;text-align:right;unicode-bidi:plaintext;font-family:'Noto Arabic',sans-serif;font-size:15px;text-transform:none}
.welcome-panel .join-input button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:88px;min-height:52px;padding:8px 13px;direction:rtl;font-size:16px;font-weight:700;border:0;border-inline-start:1px solid #658963;background:#204c36}
.join-input button .icon{width:20px;height:20px}
.resume-link{display:flex;align-items:center;justify-content:flex-start;gap:8px;direction:rtl;text-align:start;min-height:42px;max-width:100%}
.resume-link .icon{width:18px;height:18px}.resume-link bdi{white-space:nowrap}
.welcome-footer{display:flex;justify-content:center;align-items:center;gap:7px;direction:rtl;flex-wrap:wrap}
.welcome-footer .pulse-dot{margin:0;flex:0 0 5px}.feature-pills{direction:rtl;flex-wrap:wrap}
.section-heading,.property-title,.property-owner,.property-detail,.player,.trade-list-heading,.modal-heading,.modal-actions,.building-preview,.deed-rent,.portfolio-summary{direction:rtl}
.property-numbers{text-align:start}.turn-status{direction:rtl;flex-direction:row}
.turn-status>div:nth-child(2){text-align:start}
.empty-seat .icon{margin-left:0;margin-right:0;margin-inline-start:auto}
.trade-title{direction:rtl;text-align:start}.trade-title input{margin:0;flex-shrink:0}
.trade-notice .notice-close{float:inline-end}.cash-field>span{float:inline-end}
.trade-columns input[type=number],.cash-field input{direction:ltr;unicode-bidi:isolate;text-align:right}
.modal .setting-row input[type=range]{direction:rtl}
.history-list{text-align:start;padding-inline-start:22px;padding-inline-end:0}
@media(max-width:1000px){
 .topbar{direction:rtl}.room-header{padding:0 5px;border:0}.room-header>span{border:0;padding:0}
 .topbar-right{justify-content:flex-end}.turn-status{flex-direction:row}
 .welcome-panel .join-input button{min-height:48px;min-width:82px;font-size:15px}
 .welcome-panel .join-input input{font-size:18px}
}
.topbar{background:#05291ff2}.property-count{margin-left:0;margin-right:0}.modal .icon-button{display:inline-flex;align-items:center;justify-content:center}

.welcome-panel .button>.icon{width:23px;height:23px}.welcome-panel .feature-pills .icon{width:18px;height:18px}.welcome-panel .button{gap:10px}.nav-button>.icon{flex-shrink:0}
@media(max-width:1000px){.topbar-right>.icon-button{display:inline-flex;align-items:center;justify-content:center}}

/* Position the header group on the left; its Arabic content stays RTL. */
.topbar{direction:ltr;justify-content:flex-start}
.topbar .brand,.topbar .room-header{direction:rtl}
@media(max-width:1000px){.topbar .room-header{margin-left:0;margin-right:0}.topbar .topbar-right{margin-left:auto}}

.action-buttons .button>.icon{order:1}