/* Local dialog corrections. Loaded after gpack/css_rtl/general/dialog.css,
 * which is the RTL build (no css_ltr tree exists in this repo).
 */

/* 1. That RTL file anchors the dialog close button with `left`, mirroring it
 *    to the wrong side on this LTR layout. On the payment wizard it landed
 *    underneath the tab bar <ul>, which swallowed every click.
 */
.dialog.white .dialog-contents .cancel {
    left: auto;
    right: -8px;
}

.dialog.brown .dialog-contents .cancel {
    left: auto;
    right: 0;
}

/* 2. Dialog info ("i") button removed on request. It is injected by crypt.js,
 *    which also sets an inline `display: block`, so this needs !important
 *    rather than a markup edit. The close button is untouched.
 */
.dialog .dialog-contents .iconButton.small.info {
    display: none !important;
}

/* 3. Village edit (pencil) button moved to the box's top-right corner, on
 *    request. Upstream renders it in a `div.innerBox.footer` at the bottom
 *    left of #sidebarBoxActiveVillage (application/views/rightsideinfor.php).
 *    Negative offsets make it straddle the frame's top-right corner rather
 *    than sit inside it. Checked: this adds nothing to the document's scroll
 *    width, so no horizontal scrollbar appears.
 *    Taking it out of the flow also drops the 40px of empty space the footer
 *    left behind, so the box is shorter. Scoped to that one box.
 */
#sidebarBoxActiveVillage > .content {
    position: relative;
}

#sidebarBoxActiveVillage .innerBox.footer {
    position: absolute;
    top: -12px;
    right: -12px;
    width: auto;
    height: auto;
    margin: 0;
    z-index: 5;
}

#sidebarBoxActiveVillage .innerBox.footer button {
    margin: 0;
}

/* Worker dorf1 uses the bundled unit portrait until dynamic hero compositing
 * is ported. Keep it inside the original circular HUD instead of showing a
 * broken dynamic-image request. */
body.village1 #topBarHero #heroImageButton {
    background: url('/travian_default/img/u/hero.gif') center 24px / 48px 48px no-repeat;
}

body.village1 #topBarHero #heroImageButton .heroImage {
    display: none;
}

/* The legacy page draws #logo as an inline SVG that scales itself to the
 * 128x40 box the pack reserves. The Worker serves the bitmap logo instead,
 * and at its natural 238x86 it overflowed the box and sat under the hero
 * HUD. Scale it to the box the pack already sized. */
#logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Worker map: the pack's lowRes tile surface.
 *
 * The map is rendered with the pack's own low-resolution markup (.tileRow of
 * .tile cells from img_ltr/map/lowRes/tiles.png), so the tiles themselves need
 * no rules of ours. Two things the pack leaves to its client JS still do:
 *
 * - The y ruler's .coordinate is 34px tall because upstream offsets the whole
 *   rulerContainer as it drags the map. The server-rendered map draws one
 *   label per row, so the label has to be as tall as the row it names.
 * - .tile is a link here, so the tile has to keep its box and lose the
 *   underline that #content a carries.
 */
#mapContainer.lowRes .ruler.y .coordinate {
    height: 60px;
    line-height: 60px;
    text-align: center;
}

#mapContainer.lowRes .ruler.x .coordinate {
    line-height: 16px;
}

#mapContainer.lowRes a.tile {
    display: block;
    text-decoration: none;
}

/* Drag to pan.
 *
 * #mapViewport clips the tile surface, which is rendered a few tiles wider
 * than the window on every side so a drag has real tiles to reveal. The
 * surface and the two ruler strips are moved together with a transform while
 * the pointer is down; the server is only asked for a new surface once the
 * drag ends. None of this exists in the pack, which drags a single map image
 * with client JS that is not ported.
 */
#mapContainer.lowRes #mapViewport {
    position: relative;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

#mapContainer.lowRes #mapViewport:active {
    cursor: grabbing;
}

#mapContainer.lowRes #mapViewport.loading {
    cursor: progress;
}

#mapContainer.lowRes #tileSurface {
    position: absolute;
}

/* A pan arrow at the world edge keeps its sprite and loses its link. The pack
 * has no rule for that state on these arrows, so it is dimmed here. */
#mapContainer.lowRes > a.disabled {
    opacity: .35;
    cursor: default;
}

/* #tileDetails .detailImage reserves room for the tile artwork with a 218px
 * padding-top, which upstream's image pipeline fills. The Worker has no
 * artwork to put there, so drop the reserved strip rather than leave a tall
 * empty panel above the links. */
#tileDetails .detailImage {
    padding-top: 8px;
    background-image: none;
}