/* Shared device layout. Coordinate-based game maps retain their geometry. */
:root{--tatar-touch:44px}
.tatar-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tatar-scroll:focus-visible{outline:2px solid #5d7b30;outline-offset:2px}
@media(max-width:1100px){
 html,body{min-width:0!important;max-width:100%!important;overflow-x:auto!important}
 .wrapper,#wrap,#container,#mid,#lmid1,#lmid3{box-sizing:border-box;min-width:0!important;max-width:100%!important}
 #lmid1,#lmid3{width:100%!important;margin-inline:0!important;float:none!important}
 #content:not(.village1):not(.village2):not(.map),#build{box-sizing:border-box;max-width:100%!important;min-width:0!important;overflow-x:auto!important}
 #content input:not([type=checkbox]):not([type=radio]):not([type=image]),#content select,#content textarea,.commerce-admin input{max-width:100%;box-sizing:border-box}
 textarea{resize:vertical}
 #content:not(.village1):not(.village2):not(.map) img:not([class^=unit]):not([class^=building]){max-width:100%}
 #menu{display:flex!important;flex-wrap:wrap!important;gap:4px;height:auto!important;width:100%!important;padding:8px!important;box-sizing:border-box}
 #menu li{float:none!important;position:static!important;list-style:none;max-width:100%}
 #menu a{display:inline-block;min-height:36px;box-sizing:border-box;padding:6px 8px;white-space:normal!important}
 .village1 #village_map,.village2 #village_map,.map #map{flex-shrink:0;max-width:none!important}
 #content.village1,#content.village2,#content.map{overflow-x:auto!important}
 .tatar-scroll table{max-width:none!important}
}
@media(max-width:600px){
 input:not([type=checkbox]):not([type=radio]):not([type=image]),select,textarea{font-size:16px}
 #lmid3{padding:10px!important}
 .commerce-admin button,.world-settings button{min-height:var(--tatar-touch)}
 #content h1,#content h2{overflow-wrap:anywhere}
}

/* Keep Arabic page tabs aligned with the start of their reading direction. */
#content #textmenu{direction:rtl!important;text-align:right!important}
#content #textmenu a,#content .treasury-tabs a{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
#mtop a:focus-visible,#textmenu a:focus-visible,.treasury-tabs a:focus-visible{outline:2px solid #6f8d36;outline-offset:2px}

/* Compact wonder rankings with complete, wrapping Arabic names. */
#content table#ww-ranking{display:table!important;width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed;border-collapse:collapse;direction:rtl;font-size:13px!important}
#content #ww-ranking caption{font-weight:bold;background:#e8edda;padding:7px;text-align:center}
#content #ww-ranking thead{display:table-header-group!important}
#content #ww-ranking tbody{display:table-row-group!important;width:auto!important;max-width:none!important}
#content #ww-ranking tr{display:table-row!important}
#content #ww-ranking th,#content #ww-ranking td{display:table-cell!important;min-width:0!important;width:auto;white-space:normal!important;overflow-wrap:anywhere;vertical-align:middle;text-align:center;padding:6px 3px!important;line-height:1.5;border-bottom:1px solid #e1e5d8}
#content #ww-ranking a{font-size:inherit!important;white-space:normal!important}
#content #ww-ranking .ww-rank{width:7%}#content #ww-ranking .ww-player{width:23%}#content #ww-ranking .ww-name{width:32%}#content #ww-ranking .ww-alliance{width:20%}#content #ww-ranking .ww-level{width:18%}

/* A long game page must finish before its footer; never overlay live rows. */
body:has(#content) #footer{position:relative!important;inset:auto!important;clear:both!important;height:auto!important;min-height:70px;margin-top:16px!important;box-sizing:border-box}
body:has(#content.statistics) #mid{align-items:flex-start!important}
body:has(#content.statistics) #side_info{box-sizing:border-box}
#content #ww-ranking th:last-child{white-space:nowrap!important}

/* Match hit areas to the original sprite: messages left, reports right. */
body.v35 div#header div#mtop > div#n5:not(.s1) > a[data-nav="messages"]{left:0!important;right:auto!important}
body.v35 div#header div#mtop > div#n5:not(.s1) > a[data-nav="reports"]{left:auto!important;right:0!important}