@CHARSET "UTF-8";

/* Placeholders mobile.js leaves behind to remember where #res, .mtop-coins and #hero_widget came
   from, so it can put them back on desktop. They are markers, never content: left visible they still
   take a slot in #mtop's `space-around` flex row, so the bottom nav's icons sat 8px off on dorf1 and
   dorf2 (where the hero is moved out) versus every other page — a visible jump when navigating. */
#m-res-home, #m-coins-home, #m-hero-home { display: none; }

/* Resource bar (both desktop and mobile): each resource as icon + amount + a green storage-fill bar.
   The legacy #resWrap table is hidden — its #l1..#l4 cells still exist and drive mres.js — and #m-res
   (inside #res) shows the new look. mobile.css tightens the spacing on phones. */
#res #resWrap { display: none; }
/* Sit exactly where the old resource table did (so nothing around it shifts), centred in that column. */
/* Three equal columns plus a wider fixed crop column (its stored/capacity pair is the longest
   figure), with crop consumption on a second row under the crop column — the layout the legacy
   table had. Width is capped so the block stays inside the fixed 980px layout's content column
   (552px + a little slack) and never bleeds over #side_info.
   Centred on the content column below it, not on the page: `left: 50%` resolves against #res, which
   spans the full width, and the content column's centre sits a fixed 59px left of that. Hence
   margin-left = -(width / 2 + 59) = -(285 + 59). */
#m-res { position: relative; left: 50%; margin-left: -344px; width: 570px; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 1fr) 150px; gap: 4px 12px; padding-top: 8px; }
#m-res .mres-consum { grid-column: 4; grid-row: 2; }
#m-res .mres-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#m-res .mres-head { display: flex; align-items: center; justify-content: center; gap: 4px; line-height: 1; }
#m-res .mres-head img { width: 18px; height: 12px; flex-shrink: 0; }
#m-res .mres-num { font-size: 13px; font-weight: normal; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Warehouse/granary capacity ("/600,000") after the amount. Desktop only — mobile.css hides it.
   Negative margin cancels most of the flex gap so it hugs the amount like "488,261/600,000". */
#m-res .mres-cap { font-size: 10px; color: #666; white-space: nowrap; margin-left: -4px; }
/* Same chrome as the market's #merBar (travian.css, div#build.gid17): 7px tall, flat #f5f5f5 bed,
   1px #bbb border, square corners, solid fill. */
#m-res .mres-bar { height: 7px; width: 85%; align-self: center; box-sizing: border-box; border: 1px solid #bbb; background: #f5f5f5; overflow: hidden; }
#m-res .mres-fill { display: block; height: 100%; width: 0; background: #64bc10; transition: width 0.5s linear; }
/* Crop consumption: upkeep over total output. No bar — nothing is filling up — so it reads as plain
   "used/produced" text, and turns red once upkeep passes output. */
#m-res .mres-over .mres-num { color: #c00; }
/* Same signal in the side production panel: a negative (crop) production per hour reads red. */
table#production td.num.prod-neg { color: #c00; }

/* Every game page drops the legacy <br> spacers before #side_info; nudge the sidebar's
   top down so it lines up with the left nav's first link (Homepage), not the resource bar. */
div#side_info { margin-top: 25px; }

#vlist thead td a { cursor: pointer; text-decoration: underline; }

.hdr-short { display:none; }
#vlist thead td a:hover { color: #00BC00; text-decoration: underline; }

table.oases_nearby { margin-top: 10px; }

#msfilter { filter: chroma(); }

div#build.gid37 table#distribution thead th { position: relative; }
div#build.gid37 a.dp-toggle { position: absolute; right: 8px; top: 50%; margin-top: -8px; height: 16px; box-sizing: border-box; font-weight: bold; color: #fff; background: #228B22; border-radius: 9px; padding: 0 8px; text-decoration: none; font-size: 11px; line-height: 16px; cursor: pointer; }
div#build.gid37 a.dp-toggle:hover { background: #1c7a1c; }
div#build.gid37 table#distribution input.dp { width: 36px; text-align: right; }
div#build.gid37 table#distribution .po-prev { color: #228B22; font-weight: bold; }
div#build.gid37 table#distribution .ib-bonus { color: #0000D7; font-weight: bold; font-size: 9px; }
div#build.gid37 table#distribution tbody th { width: 16%; white-space: nowrap; }
div#build.gid37 table#distribution td.val { white-space: nowrap; }
.dp-save { margin: 6px 0 0; }
div#build.gid37 table#distribution .hptrack { display: inline-block; width: 200px; height: 12px; background: #e0e0e0; border: 1px solid #bbb; vertical-align: middle; line-height: 0; box-sizing: border-box; }
div#build.gid37 table#distribution .hpfill { display: block; height: 100%; background: #228B22; }
div#build.gid37 table#distribution .po-prev.hp-ok { color: #228B22; } div#build.gid37 table#distribution .po-prev.hp-warn { color: #d99000; } div#build.gid37 table#distribution .po-prev.hp-low { color: #c00; }
div#build.gid37 table#distribution .hpfill.hp-ok { background: #228B22; } div#build.gid37 table#distribution .hpfill.hp-warn { background: #d99000; } div#build.gid37 table#distribution .hpfill.hp-low { background: #c00; }
.hpfill.w0 { width: 0; } .hpfill.w10 { width: 10%; } .hpfill.w20 { width: 20%; } .hpfill.w30 { width: 30%; } .hpfill.w40 { width: 40%; } .hpfill.w50 { width: 50%; } .hpfill.w60 { width: 60%; } .hpfill.w70 { width: 70%; } .hpfill.w80 { width: 80%; } .hpfill.w90 { width: 90%; } .hpfill.w100 { width: 100%; }

#heroInventory { margin-top: 12px; clear: both; }
#heroInventory .heroPanels { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
#heroInventory table.heroEquip { flex: 0 0 270px; width: 270px; }
#heroInventory table.heroBag { flex: 1 1 190px; min-width: 190px; }
#heroInventory th .count { float: right; font-weight: normal; color: #444; }
#heroInventory td.box { width: 44px; text-align: center; }
#heroInventory td.name.empty { color: #999; font-style: italic; }
#heroInventory td.name .name-in { display: inline-block; width: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
#heroInventory td.act { width: 60px; text-align: right; white-space: nowrap; font-size: 10px; }
#heroInventory td.act .act-in { display: inline-block; width: 48px; text-align: right; }
#heroInventory [data-tip], #heroInventory .itemBox { cursor: pointer; }
#heroInventory .itemBox { display: inline-block; width: 38px; height: 38px; background: #fff url(img/x.gif) no-repeat center; border: 1px solid #c0c0c0; vertical-align: middle; position: relative; }
#heroInventory .itemBox.empty { background: #fafafa; border-style: dashed; border-color: #c0c0c0; }
#heroInventory .itemBox .ico { display: block; width: 38px; height: 38px; }
#heroInventory td.empty { padding: 8px; color: #555; text-align: left; }
#heroInventory .grid { display: grid; grid-template-columns: repeat(4, 40px); gap: 5px; padding: 5px; }
#heroInventory .invItem .cell { display: inline-block; position: relative; }
#heroInventory .itemNum { position: absolute; right: 0; bottom: 0; font-size: 9px; font-weight: bold; color: #fff; background: rgba(0,0,0,.6); padding: 0 2px; line-height: 1.1; }
#heroInventory .heroBonus { font-size: 11px; margin: 8px 0; }
#heroInventory .adv-block { margin: 8px 0; padding: 6px 10px; background: #fdecec; border: 1px solid #e0a3a3; border-radius: 3px; color: #c00; font-weight: bold; max-width: 460px; }
#heroInventory .inv-msg { margin: 0 0 8px; padding: 5px; border: 1px solid #ddd; background: #f3f3f3; border-radius: 3px; max-width: 460px; }
#heroInventory .inv-msg.err { color: #c00; border-color: #c00; }
#heroInventory .inv-msg.ok { color: #2a7d2a; }

#respawn.respawn-panel .respawn-cost { font-weight: bold; color: #333; }
#respawn.respawn-panel .respawn-quadrant label { display: inline-block; margin-right: 10px; }
.respawn-gold-ico, .qst-gold { vertical-align: middle; }

table#adventures { margin-top: 8px; }
table#adventures td.nam a { font-weight: bold; }
table#adventures td.dif, table#adventures td.dur, table#adventures td.go { text-align: center; }
a.adv-send { font-weight: bold; }
.adv-send-away { font-weight: bold; color: #999; cursor: help; }
.adv-result { margin: 8px 0; padding: 6px 10px; background: #eef7e6; border: 1px solid #aacb8a; border-radius: 4px; }
.adv-result.dead { background: #f7e6e6; border-color: #cb8a8a; }
.adv-result .adv-dead { color: #a12; font-weight: bold; margin: 0; }
.adv-busy { color: #000; }
.adv-busy span { color: #228B22; font-weight: bold; }
.adv-empty { font-size: 11px; color: #777; font-style: italic; }
.hero-status { margin: 8px 0; padding: 6px 10px; background: #f5f5f5; border: 1px solid #ddd; color: #333; }
.hero-status span { color: #228B22; font-weight: bold; }

img.adv-mov { background-image: url("img/a/adventure.png"); background-repeat: no-repeat; background-size: 16px 16px; height: 16px; width: 16px; }
div.village1 table#movements .a-adv { color: #0000D7; }

#mtop a.mtop-pill { float: left; display: flex; align-items: center; gap: 4px; height: 24px; margin-top: 18px; margin-left: 15px; padding: 0 9px; box-sizing: border-box; background: #e6e6e6; border: 1px solid #b3b3b3; border-radius: 12px; text-decoration: none; }
#mtop a.mtop-pill .adv-icon { display: block; width: 16px; height: 16px; }
#mtop a.mtop-pill .adv-num { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box; background: #5cb800; border-radius: 8px; color: #fff; font-weight: bold; font-size: 11px; line-height: 1; }
#mtop a.mtop-pill .adv-num.pill-gold { background: none; color: #b8860b; border-radius: 0; }
#mtop a.mtop-pill .adv-num.pill-silver { background: none; color: #6a7280; border-radius: 0; }
#mtop .mtop-coins { float: left; display: inline-flex; flex-direction: column; align-items: stretch; gap: 1px; margin: 13px 0 0 30px; }
#mtop .mtop-coins a.mtop-pill { float: none; height: 16px; box-sizing: border-box; align-items: center; overflow: hidden; margin: 0; padding: 0 8px; }
#mtop .mtop-coins a.mtop-pill .adv-icon { width: 14px; height: 14px; }
#mtop .mtop-coins a.mtop-pill .trader-coin { flex: 0 0 auto; width: 10px; height: 10px; }
#mtop .mtop-coins a.mtop-pill .adv-icon { width: 14px; height: 14px; }
#mtop .mtop-coins a.mtop-pill .adv-num { height: auto; min-width: 0; padding: 0; margin-left: auto; }

/* Top-bar hero widget: circular avatar with health/XP rings + satellite badges
   (home / adventures / trade offers / hero-trader countdown). Rings are inline
   SVG in header.tpl using pathLength=100, so stroke-dashoffset = 100 - percent. */
/* Plate + four corner lobes share the same white material with NO per-element
   borders/shadows. Side-only shading (like the nav sprites' baked crescents):
   underlay pseudo-circles behind the children carry horizontal box-shadows
   with negative spread (no vertical bleed, unlike drop-shadow's Gaussian);
   the white material covers everything inside the silhouette. */
/* The nav-button gifs bake the grey bar strip behind the button, so their opaque box is
   70x72 while the drawn disc is 67.1px wide, centred at (34.5, 33.06) inside it. The hero
   plate is a 67px circle, so `top` puts its centre on the same baseline as theirs.
   `left` would be -82px for an exact 70px pitch, but the action badges overhang the plate
   asymmetrically (10px left, 13px right), so the cluster is nudged 3px left to sit optically
   centred against the button row. */
#mtop #hero_widget { position: absolute; left: -85px; top: -8.5px; width: 96px; height: 88px; z-index: 5; }
#hero_widget::before, #hero_widget::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
#hero_widget::before { left: 13px; top: 8px; width: 67px; height: 67px; box-shadow: -5px 0 4px -3px rgba(0, 0, 0, 0.3), 5px 0 4px -3px rgba(0, 0, 0, 0.3); }
/* One pseudo shades all four 28px lobes: base = top-left; the other three are
   the same pair of side crescents offset by the lobe grid (x/y gap 62px). */
#hero_widget::after { left: 3px; top: -2px; width: 28px; height: 28px; box-shadow: -3px 0 3px -2px rgba(0, 0, 0, 0.3), 3px 0 3px -2px rgba(0, 0, 0, 0.3), 59px 0 3px -2px rgba(0, 0, 0, 0.3), 65px 0 3px -2px rgba(0, 0, 0, 0.3), -3px 62px 3px -2px rgba(0, 0, 0, 0.3), 3px 62px 3px -2px rgba(0, 0, 0, 0.3), 59px 62px 3px -2px rgba(0, 0, 0, 0.3), 65px 62px 3px -2px rgba(0, 0, 0, 0.3); }
/* Sprite-like bevel material: white top, gray waist (~56%), bright white
   bottom "return"; darker side edges via inset shadows (they paint on the
   ring only — the svg covers the middle), thin outline, small under-shadow. */
#hero_widget .hw-avatar { position: absolute; left: 13px; top: 8px; width: 67px; height: 67px; display: block; text-decoration: none; border-radius: 50%; background: linear-gradient(to bottom, #fcfcfc 0%, #dadada 55%, #c6c6c6 100%); box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 0 0 1.5px rgba(255, 255, 255, 0.55), inset 0 0 7px rgba(0, 0, 0, 0.1); }
/* Only the centred link (.hw-face-link) navigates to the hero — the surrounding metal ring/frame is
   inert. The tribe portrait is always in full colour (grey is reserved for the dead/reviving/no-hero
   states below); hovering lifts it and adds a soft warm glow around the bust. */
#hero_widget .hw-face-link { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; z-index: 3; display: block; cursor: pointer; }
#hero_widget .hw-avatar image { transition: filter 0.35s ease; }
#hero_widget .hw-avatar:hover image { filter: saturate(1.3) brightness(1.12) drop-shadow(0 0 2px rgba(255, 248, 214, 0.95)) drop-shadow(0 0 4px rgba(255, 226, 130, 0.7)); }
/* Nudge the interior up so the border ring reads thicker at the bottom — the
   3D "lip" the nav sprites have. */
#hero_widget .hw-avatar svg { display: block; margin-top: -1px; width: 67px; height: 67px; }
/* (The inner portrait disc is flat — no shadow — per design; the ::after overlay is disabled.) */
#hero_widget .hw-avatar::after { display: none; }
/* Portrait shading: dark at the bottom-right fading toward the top-left,
   sized to the face disc (r23 of the 64-unit viewBox at 67px = 48px). */
#hero_widget .hw-avatar::before { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin-top: -1px; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(to top left, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0) 65%); pointer-events: none; }
/* The split ring is built from stacked strokes on the same arc paths so it reads as a coloured channel
   carved into the metal plate: hw-groove = the dark cut, hw-track = the light channel bed (the empty
   part of the bar), hw-arc = the coloured fill (gradient), hw-gloss = a thin highlight along the fill. */
#hero_widget .hw-groove { fill: none; stroke: rgba(0, 0, 0, 0.36); stroke-width: 4.5; stroke-linecap: round; }
#hero_widget .hw-track { fill: none; stroke: #bcbcbc; stroke-width: 3.5; stroke-linecap: round; }
#hero_widget .hw-face-bg { fill: #cccccc; stroke: none; }
/* Coin lip: the dark line where the recessed face meets the rim, mirroring the
   1px dark ring the nav sprites draw around their inner circle. */
#hero_widget .hw-face-rim { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
#hero_widget .hw-arc { fill: none; stroke-linecap: round; stroke-width: 3.5; }
#hero_widget .hw-gloss { display: none; }
#hero_widget .hw-xp { stroke: #4f91bd; }
#hero_widget .hw-hp { stroke: #5cb800; }
#hero_widget.hw-dead .hw-hp, #hero_widget.hw-reviving .hw-hp { stroke: #c00; }
#hero_widget.hw-dead .hw-avatar image, #hero_widget.hw-reviving .hw-avatar image { opacity: 0.45; filter: grayscale(1); }
#hero_widget.hw-attack .hw-hp, #hero_widget.hw-raid .hw-hp { stroke: #d99000; }
/* No-hero placeholder: greyed dead coin, kept inert (no hover brighten, no pointer). */
#hero_widget.hw-none .hw-hp { stroke: #c00; }
#hero_widget.hw-none .hw-avatar image, #hero_widget.hw-none .hw-avatar:hover image { opacity: 0.45; filter: grayscale(1); }
#hero_widget.hw-none a { cursor: default; }
/* Badges are little raised buttons (mini versions of the medallion): white→grey gradient, a thin white
   inner border + dark outline, and a drop shadow so they sit clearly ON the ring instead of floating.
   The adventures badge keeps its green fill (set below). */
#hero_widget .hw-badge { position: absolute; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; background: linear-gradient(to bottom, #fbfbfb 0%, #d2d2d2 100%); color: #7d7d7d; text-align: center; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.33), 0 0 0 1px rgba(0, 0, 0, 0.12), inset 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
#hero_widget .hw-badge:hover { filter: brightness(1.05); }
#hero_widget .hw-badge img { width: 18px; height: 18px; margin-top: 5px; vertical-align: top; filter: grayscale(1); opacity: 0.8; }
#hero_widget .hw-glyph { display: block; font-size: 15px; font-weight: bold; line-height: 28px; }
#hero_widget .hw-num { position: absolute; top: -6px; right: -7px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; background: #5cb800; color: #fff; font-size: 10px; line-height: 15px; font-weight: bold; text-align: center; box-shadow: 0 0 0 1px #fff; }
/* Four lobes merged into the plate at the diagonals: home top-left, adventures
   top-right, trade bottom-left, shop bottom-right. */
#hero_widget .hw-home { left: 3px; top: -2px; }
#hero_widget .hw-adv { right: 3px; top: -2px; }
#hero_widget .hw-adv.hw-adv-open { background: linear-gradient(#7ed321, #4c9c12); }
#hero_widget .hw-adv-count { display: block; color: #fff; font-size: 13px; font-weight: bold; line-height: 28px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
#hero_widget .hw-trade { left: 3px; bottom: 0; display: flex; align-items: center; justify-content: center; }
#hero_widget .hw-trade .hw-glyph { line-height: 1; }
#hero_widget .hw-shop { right: 3px; bottom: 0; }
#hero_widget .hw-shop svg { position: absolute; left: 0; top: 0; width: 28px; height: 28px; }
#hero_widget .hw-seg { fill: none; stroke: #d9d9d9; stroke-width: 2.5; stroke-linecap: round; }
#hero_widget .hw-seg-on { stroke: #5cb800; }
/* Guaranteed equipment piece is in the shop: light-green button. */
#hero_widget .hw-shop-equip { background: linear-gradient(to bottom, #f3fbe8 0%, #e2f3cc 24%, #c4e39e 56%, #dcefc4 76%, #eef8de 100%); }
/* The gif frame is 10x14 but the coin pixels only fill the top 10x9 — size to
   the visible art so centering is true. */
#hero_widget .hw-shop .trader-coin { position: absolute; left: 50%; top: 50%; width: 10px; height: 9px; transform: translate(-50%, -50%); margin: 0; }

/* Left-align the load/server/local-time block with the content column (frees
   space right of it for the hero widget). Desktop only — mobile.css has its
   own #ltimeWrap layout and must not be out-specified. */
@media (min-width: 769px) {
    body div#ltime div#ltimeWrap { width: 980px; }
}

.medal-reset-timer { text-align: center; padding: 4px 8px; margin-bottom: 8px; background: #f5f5f5; border: 1px solid #ddd; }
.medal-reset-timer .medal-week { margin-right: 15px; }
.medal-reward-info { text-align: center; margin: -8px 0 8px; padding: 5px 8px 6px; background: #f5f5f5; border: 1px solid #ddd; border-top: 1px solid #e6e6e6; color: #777; font-size: 11px; line-height: 1.7; }
.medal-reward-info .medal-reward-caption { color: #555; }
.medal-reward-info .medal-reward-tiers { color: #333; }
.medal-reward-info strong { color: #000; }
.medal-gold-ico { width: 12px; height: 12px; vertical-align: -2px; margin-left: 1px; }

img.bld_sm { width: 15px; height: 20px; background-size: contain; background-repeat: no-repeat; vertical-align: middle; }
#g-tip { position: absolute; z-index: 999; background: #333; border: 0; border-radius: 3px; padding: 3px 8px; font-size: 11px; color: #fff; line-height: 15px;white-space: nowrap; }
#g-tip b { color: #fff; }

/* Trade Office merchant-speed saving shown next to the send DURATION. */
.to_boost_tag { color: #2e6fdb; font-size: 11px; cursor: help; }

/* Cloudflare Turnstile captcha (login + register) — centered; login gets a little top margin. */
.cf-turnstile { display: flex; justify-content: center; margin: 12px 0; }
#content.login .cf-turnstile { margin-top: 18px; }

.battle-details { margin: 10px 0; padding: 6px 10px; border: 1px solid #ddd; background: #f5f5f5; font-size: 11px; color: #333; }
.battle-details summary { cursor: pointer; font-weight: bold; color: #000; }
.battle-details .detail-section { margin-top: 8px; }
.battle-details .detail-section strong { display: block; border-bottom: 1px solid #ddd; margin-bottom: 4px; color: #000; }
.battle-details .detail-row { display: flex; justify-content: space-between; }
.battle-details .detail-row.total { font-weight: bold; border-top: 1px solid #ddd; margin-top: 2px; color: #000; }
.battle-details .combat-result { text-align: center; }

#fl-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); z-index: 10000; }
#fl-overlay.fl-open { display: block; }
#fl-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-height: 90%; overflow: auto; background: #fff; border: 1px solid #bbb; border-radius: 4px; box-shadow: 0 4px 18px rgba(0,0,0,0.55); padding: 10px 14px 14px; min-width: 340px; color: #333; }
#fl-close { position: absolute; top: 3px; right: 9px; font-size: 20px; font-weight: bold; color: #666; text-decoration: none; line-height: 1; }
#fl-close:hover { color: #a12; }
#fl-box #raidListSlot h4 { margin: -10px -14px 10px; padding: 6px 14px; border-bottom: 1px solid #ddd; background: linear-gradient(#ededed, #dcdcdc); color: #333; font-size: 13px; border-radius: 4px 4px 0 0; }
#fl-box .fl-error { color: #c00; font-weight: bold; min-height: 14px; margin-bottom: 4px; }
#fl-box .fl-loading { padding: 24px; text-align: center; color: #666; }
#fl-box .trav_buttons { margin-top: 8px; }
#fl-box .fl-confirm-msg { max-width: 320px; margin: 14px 0 4px; }
#fl-box .fl-confirm-btns { text-align: center; }
#fl-box .fl-confirm-btns .trav_buttons { margin: 8px 6px 0; }
.fl-note { font-size: 10px; color: #777; font-style: italic; }
@keyframes rt-spin { to { transform: rotate(360deg); } }
.fl-rows-loading td, .fl-rows-error td { text-align: center; padding: 18px; color: #666; }
.fl-spin { display: inline-block; width: 18px; height: 18px; border: 3px solid #ddd; border-top-color: #888; border-radius: 50%; animation: rt-spin 0.7s linear infinite; vertical-align: middle; }
.adv-tile::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(img/a/adv.png) no-repeat center; pointer-events: none; z-index: 5; }

#fl-box .fl-body { padding: 2px 0 8px; }
#fl-box table.transparent { width: auto; border-collapse: collapse; background: transparent; margin: 0 0 6px; }
#fl-box table.transparent th, #fl-box table.transparent td { border: 0; background: transparent; padding: 4px 8px; text-align: left; vertical-align: middle; }
#fl-box #raidListSlot th { color: #333; font-weight: normal; white-space: nowrap; }
#fl-box select { max-width: 220px; }
#fl-box .coordinatesInput .coordinates { width: 60px; }
#fl-box .coordinatesInput .xCoord, #fl-box .coordinatesInput .yCoord { margin-bottom: 4px; }
#fl-box #raidList td > input.text { width: 46px; text-align: center; }
#fl-box #bulkpopup_troops td > input.text { width: 46px; text-align: center; }
#fl-box .fl-field { margin-bottom: 10px; }
#fl-box .fl-field label { display: inline-block; min-width: 90px; }
#fl-box .fl-warn { color: #c00; font-size: 11px; margin: 0 0 10px; }

div#build.gid16 .flHeader { display: flex; align-items: stretch; margin-top: 12px; padding: 0; line-height: 20px; background: #ededed url(img/a/c2.gif) repeat-x left bottom; background-size: auto 100%; border: 1px solid #bbb; color: #000; font-size: 13px; font-weight: bold; cursor: pointer; user-select: none; }
div#build.gid16 .flHeader .flArrow { display: flex; align-items: center; width: 13px; padding: 0 7px; border-right: 1px solid #bbb; background: url(img/a/opened.gif) no-repeat center; mix-blend-mode: multiply; }
div#build.gid16 .flHeader.fl-collapsed .flArrow { background-image: url(img/a/closed.gif); }
/* In-flight marker sits at the START of the cell with the village name flowing
   beside it — floated, so a name that wraps doesn't push the icon onto its own line. */
div#build.gid16 table.farmlist td.village img.flMoveMark,
div#build.gid16 table.farmlist td.village img.att2 { float: left; margin: 1px 3px 0 0; }
div#build.gid16 .flHeader .flSendWrap { display: flex; align-items: center; border-right: 1px solid #bbb; }
div#build.gid16 .flHeader .flSendWrap .flAct { display: flex; align-items: center; min-width: 20px; justify-content: center; padding: 0 6px; text-decoration: none; }
div#build.gid16 .flHeader .flSendWrap .flAct img { display: block; filter: grayscale(1); }
div#build.gid16 .flHeader .flSendWrap .flAct:hover img { filter: grayscale(0); }
div#build.gid16 .flHeader .flSendWrap .flAct.is-sending img { opacity: 0.4; }
div#build.gid16 .flHeader .flTitle { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 20px; padding: 0 8px; color: #000; }
div#build.gid16 .flHeader .flTitle .flListName { white-space: nowrap; }
div#build.gid16 .flHeader .fl_target_count { display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; color: #888; font-weight: normal; font-size: 11px; }
div#build.gid16 .flLastSent { padding: 2px 8px; border: 1px solid #bbb; border-top: 0; background: #f5f5f5; color: #888; font-size: 11px; }
div#build.gid16 .flHeader .flDeactivatedBadge { display: flex; align-items: center; padding: 0 4px; color: #c00; font-weight: normal; font-size: 11px; }
div#build.gid16 .flHeader.fl-list-deactivated .flTitle { color: #888; }
div#build.gid16 .flHeader .flHeaderActions { margin-left: auto; display: flex; align-items: center; border-left: 1px solid #bbb; }
div#build.gid16 .flHeader .flHeaderActions .flAct { display: flex; align-items: center; min-width: 20px; justify-content: center; padding: 0 4px; color: #555; font-size: 16px; text-decoration: none; }
div#build.gid16 .flHeader .flHeaderActions .flAct:hover { color: #000; }
div#build.gid16 .flHeader .flHeaderActions a:last-child { padding-right: 7px; }
div#build.gid16 .flHeader .flHeaderActions img.del { vertical-align: middle; }
div#build.gid16 .flHeader .flSelectWrap { display: flex; align-items: center; padding: 0 6px; border-right: 1px solid #bbb; cursor: default; }
div#build.gid16 .fl-alert-banner { margin: 0 0 10px; padding: 6px 8px; background: #fdecea; border: 1px solid #c99; color: #733; font-size: 11px; }
div#build.gid16 .fl-alert-banner-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
div#build.gid16 .fl-alert-banner-icon { font-size: 14px; }
div#build.gid16 .fl-alert-banner-remove { margin-left: auto; display: flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; }
div#build.gid16 .fl-alert-banner-remove input { margin: 0; cursor: pointer; }
div#build.gid16 .fl-alert-banner-dismiss { margin-left: 0; }
div#build.gid16 .fl-alert-banner-sub { margin: 3px 0 0 20px; color: #966; }
div#build.gid16 .fl-alert-banner-list { margin: 6px 0 0; padding-left: 18px; }
div#build.gid16 .fl-alert-banner-age { color: #966; }
div#build.gid16 .flHeader .fl-list-select { margin: 0; cursor: pointer; }
div#build.gid16 .flHeader.fl-selected { border-color: #888; background-image: url(img/a/c2.gif), linear-gradient(#dcdcdc, #cfcfcf); box-shadow: inset 4px 0 0 #888; }
div#build.gid16 .flHeader.fl-selected .flArrow { padding-left: 3px; }
div#build.gid16 .flHeader .flHeaderActions .flAct.is-sending { color: #888; }

div#build.gid16 .listContent { border: 1px solid #bbb; border-top: 0; }
div#build.gid16 table.farmlist { width: 100%; border-collapse: collapse; margin: 0; }
div#build.gid16 table.farmlist thead th { background: #e6e6e6; border: 1px solid #ddd; padding: 3px 5px; text-align: center; font-weight: bold; color: #333; white-space: nowrap; }
div#build.gid16 table.farmlist thead th.fl_sortable { cursor: pointer; user-select: none; }
div#build.gid16 table.farmlist thead th .fl_sort_arrow { font-size: 9px; margin-left: 3px; color: #888; }
div#build.gid16 table.farmlist thead th .fl_sort_arrow.fl_sort_active { color: #000; }
div#build.gid16 table.farmlist tbody td { border: 1px solid #eee; padding: 3px 5px; text-align: center; vertical-align: middle; font-size: 11px; }
div#build.gid16 table.farmlist tbody td.village { text-align: left; max-width: 120px; font-size: 11px; line-height: 1.35; }
div#build.gid16 table.farmlist tbody td.village a.fl-target-link,
div#build.gid16 table.farmlist tbody td.village a.fl-target-link span { text-decoration: none; color: #00BC00; }
div#build.gid16 table.farmlist tbody td.village a.fl-target-link:hover,
div#build.gid16 table.farmlist tbody td.village a.fl-target-link:hover span { text-decoration: underline; }
div#build.gid16 table.farmlist tbody td.village .coordinates,
div#build.gid16 table.farmlist tbody td.village .coordText { white-space: normal; word-break: normal; overflow-wrap: break-word; }
div#build.gid16 table.farmlist tbody td.village .coordinatesWrapper { white-space: nowrap; }
div#build.gid16 table.farmlist tbody td.lastRaid { font-size: 11px; }
div#build.gid16 table.farmlist tbody td.lastRaid a { font-size: 10px; }
div#build.gid16 table.farmlist tbody td.troops { white-space: nowrap; }
div#build.gid16 table.farmlist tbody tr:nth-child(odd) td { background: #fff; }
div#build.gid16 table.farmlist tbody tr:nth-child(even) td { background: #f7f7f7; }
div#build.gid16 table.farmlist tbody tr:hover td { background: #f0f0f0; }
div#build.gid16 table.farmlist tbody tr.fl-deactivated td { opacity: .5; }
div#build.gid16 table.farmlist tbody tr.fl-row-excluded td { opacity: .45; text-decoration: line-through; }
div#build.gid16 table.farmlist tbody tr.fl-row-excluded td.checkbox { text-decoration: none; }
div#build.gid16 table.farmlist td.fl-col-check { width: 1%; }
div#build.gid16 table.farmlist td.fl-col-actions { width: 1%; white-space: nowrap; }
div#build.gid16 table.farmlist td.action a { text-decoration: none; color: #555; padding: 0 2px; }
div#build.gid16 table.farmlist td.action a:hover { color: #000; }
div#build.gid16 table.farmlist .troopIcon { display: inline-block; margin: 0 3px; }
div#build.gid16 table.farmlist .troopIcon img.unit { width: 18px; height: 18px; vertical-align: middle; }
div#build.gid16 table.farmlist .troopIcon .troopIconAmount { margin-left: 1px; vertical-align: middle; }
div#build.gid16 table.farmlist img.carry.carryFull { outline: 1px solid #5b0; }
/* Loot sack states (reports list + farm list): base car.gif is the full sack;
   half/empty swap in the desaturated variants generated from it. */
img.carry.carryHalf { background-image: url("img/a/car_half.gif"); }
img.carry.carryEmpty { background-image: url("img/a/car_empty.gif"); }

div#build.gid16 .fl_send_controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 8px 2px; }
div#build.gid16 .fl_send_controls .fl_action_group { display: flex; flex-direction: column; gap: 6px; align-items: center; flex: 1 1 100%; }
div#build.gid16 .fl_send_controls .fl_action_row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
div#build.gid16 #fl_send_btn { display: inline-flex; align-items: center; }
div#build.gid16 #fl_send_btn[disabled] { opacity: 0.6; cursor: default; }
div#build.gid16 #fl_send_btn.is-sending { opacity: 1; cursor: progress; }
div#build.gid16 #fl_send_btn .fl-btn-spin { display: none; width: 12px; height: 12px; margin-left: 6px; border: 2px solid #ccc; border-top-color: #555; border-radius: 50%; vertical-align: middle; }
div#build.gid16 #fl_send_btn.is-sending .fl-btn-spin { display: inline-block; animation: rt-spin 0.7s linear infinite; }
div#build.gid16 .fl_send_controls .fl_mode_group { display: flex; align-items: center; gap: 10px; }
div#build.gid16 .fl_send_controls .fl_mode_group label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
div#build.gid16 .flListName { cursor: text; border-bottom: 1px dashed transparent; }
div#build.gid16 .flListName:hover { border-bottom-color: #bbb; }
div#build.gid16 .flRenameInput { font: inherit; padding: 0 2px; border: 1px solid #bbb; border-radius: 2px; }

#tpop-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55); z-index: 10001; }
#tpop-overlay.tpop-open { display: block; }
#tpop-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-height: 90%; max-width: 500px; overflow: auto; min-width: 300px; background: #fff; border: 1px solid #bbb; border-radius: 4px; box-shadow: 0 4px 18px rgba(0,0,0,0.55); padding: 0 0 14px; color: #333; }
#tpop-title { margin: 0 0 10px; padding: 6px 32px 6px 14px; border-bottom: 1px solid #ddd; background: linear-gradient(#ededed, #dcdcdc); color: #333; font-size: 13px; font-weight: bold; border-radius: 4px 4px 0 0; }
#tpop-content { padding: 0 14px; }
#tpop-close { position: absolute; top: 4px; right: 10px; font-size: 20px; font-weight: bold; color: #666; text-decoration: none; line-height: 1; }
#tpop-close:hover { color: #a12; }
#tpop-box .tpop-loading { padding: 24px; text-align: center; color: #666; }
#tpop-box .tpop-error { color: #c00; font-weight: bold; padding: 8px 0; }
.tpop-prompt { padding: 6px 0; }
.tpop-prompt .tpop-label { display: block; margin-bottom: 6px; color: #333; }
.tpop-prompt .tpop-input { width: 90px; text-align: center; }
.tpop-prompt .tpop-hint { margin-top: 6px; color: #333; font-size: 12px; }
.tpop-prompt .tpop-actions { margin-top: 12px; text-align: right; }
.tpop-prompt .tpop-actions .trav_buttons { margin-left: 6px; }

ul.hero-pick { list-style: none; margin: 0; padding: 4px 0; }
ul.hero-pick li { margin: 0; }
ul.hero-pick li a { display: block; padding: 8px 10px; border: 1px solid #ddd; border-radius: 3px; margin-bottom: 6px; color: #333; text-decoration: none; background: #f5f5f5; }
ul.hero-pick li a:hover { background: #e6e6e6; border-color: #bbb; }
ul.hero-pick li a .sub { color: #666; font-size: 11px; }

.vac-wrap { position: relative; display: inline-block; }
.vac-list, .vac-item { float: none !important; }
.vac-list { display: none; list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; z-index: 999; width: 100%; box-sizing: border-box; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #bbb; border-top: 0; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.vac-list.vac-open { display: block; }
.vac-item { display: block; margin: 0; padding: 4px 8px; font-size: 12px; font-weight: normal; line-height: 1.4; text-align: left; color: #333; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #eee; }
.vac-item:last-child { border-bottom: 0; }
.vac-item:hover, .vac-item.vac-active { background: #f5f5f5; }

#m-menu-toggle, #m-backdrop { display: none; }
.m-tab { display: none; }

#troops td.un { display: none; }
#map_details #troops { display: block; width: auto; }
#map_details #troops thead, #map_details #troops tbody { display: block; }
#map_details #troops tbody tr { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
#map_details #troops td { padding: 0 !important; border: none; }
#map_details #troops td.un { display: none !important; }
#map_details #troops td.ico { display: flex; align-items: center; }
#map_details #troops td.num { font-weight: bold; white-space: nowrap; }

#map_details #oasis_storage td.res { white-space: nowrap; line-height: 18px; }

button.push-btn {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid #bbb;
  border-radius: 3px;
  background: linear-gradient(#ededed, #dcdcdc);
  color: #333;
  font-weight: bold;
  cursor: pointer;
}
button.push-btn:hover { background: linear-gradient(#f5f5f5, #e6e6e6); }
button.push-btn[disabled] { color: #999; cursor: default; opacity: 0.7; }
span.push-status { color: #333; font-size: 0.9em; }
span.push-status.push-on { color: #2a7d2a; font-weight: bold; }
#push_types { margin-bottom: 25px; }

#push-toast { position: fixed; top: 12px; right: 12px; z-index: 10050; max-width: 320px; background: #fff; border: 1px solid #bbb; border-radius: 4px; box-shadow: 0 4px 18px rgba(0,0,0,0.4); padding: 8px 26px 9px 12px; color: #333; cursor: pointer; opacity: 0; transform: translateY(-8px); transition: opacity .18s, transform .18s; }
#push-toast.show { opacity: 1; transform: translateY(0); }
#push-toast .push-toast-title { font-weight: bold; color: #000; font-size: 12px; margin-bottom: 2px; }
#push-toast .push-toast-body { font-size: 12px; line-height: 16px; }
#push-toast .push-toast-close { position: absolute; top: 3px; right: 8px; font-size: 16px; font-weight: bold; color: #666; line-height: 1; }
#push-toast .push-toast-close:hover { color: #a12; }

#push-devices { margin-top: 2px; }
#push-devices .push-dev { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid #ddd; font-size: 0.9em; }
#push-devices .push-dev:first-child { border-top: 0; }
#push-devices .push-dev-name { flex: 1; color: #333; }
#push-devices .push-dev-name .push-dev-this { color: #2a7d2a; font-weight: bold; }
#push-devices .push-dev-meta { color: #888; font-size: 0.85em; }
#push-devices .push-dev-off .push-dev-name { color: #999; }
#push-devices .push-dev button { font: inherit; color: #333; background: linear-gradient(#fbfbfb, #ededed); border: 1px solid #bbb; border-radius: 3px; padding: 1px 8px; cursor: pointer; }
#push-devices .push-dev button:hover { background: linear-gradient(#f5f5f5, #e6e6e6); }
#push-devices .push-dev button.push-dev-del:hover { color: #c00; border-color: #c99; }
#push-devices .push-dev-empty { color: #888; font-size: 0.9em; padding: 4px 0; }
#push-devices .push-dev-add .push-dev-name { color: #888; }
#push-devices .push-dev button.push-dev-add { color: #2a7d2a; border-color: #9c9; font-weight: bold; }
#push-help { display: block; margin-top: 4px; }
#push-help .push-help-link { font: inherit; color: #2a5db0; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
#push-help .push-help-tips { display: none; margin-top: 4px; padding: 6px 8px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 3px; color: #333; font-size: 0.9em; }
#push-help .push-help-tips.open { display: block; }
#push-help .push-help-tips ul { margin: 4px 0 0 16px; padding: 0; }
#push-hint { margin-top: 4px; padding: 6px 8px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 3px; color: #333; font-size: 0.9em; }
#push-retry { margin-left: 8px; font: inherit; color: #2a5db0; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

.pwa-hidden { display: none !important; }

.ap-intro { color: #333; margin: 6px 0 10px; }
.ap-ok { color: #2e7d32; }
.ap-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-card {
    flex: 1 1 300px;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 3px;
    padding: 0 10px 10px;
}
.ap-card h3 {
    display: flex;
    align-items: stretch;
    margin: 0 -10px 8px;
    padding: 0;
    line-height: 20px;         background: #ededed url("img/a/c2.gif") repeat-x left bottom;
    background-size: auto 100%;
    border-bottom: 1px solid #bbb;
    color: #000;
    font-size: 13px;
}
.ap-card h3 .ap-q { display: flex; align-items: center; padding: 0 8px; border-right: 1px solid #bbb; cursor: help; }
.ap-card h3 .ap-q img.help { display: block; }
.ap-card h3 .ap-name { flex: 1; text-align: center; padding: 0 8px; font-weight: bold; }
.ap-card h3 .ap-lvl { padding: 0 8px; color: #333; font-weight: normal; }
.ap-card h3 .ap-toggle { display: flex; align-items: center; padding: 0 7px; border-right: 1px solid #bbb; cursor: pointer; }
.ap-card h3 .ap-toggle .ap-tgl-ico { display: block; width: 13px; height: 13px; background: url("img/a/closed.gif") no-repeat 0 0; mix-blend-mode: multiply; }
.ap-card h3 .ap-toggle.open .ap-tgl-ico { background-image: url("img/a/opened.gif"); }
.ap-eff { color: #333; margin: 4px 0; }
.ap-max { color: #2e7d32; }
.ap-progress { margin: 6px 0; position: relative; height: 30px; }
.ap-bar { width: 100%; height: 30px; vertical-align: middle; }
.ap-bar::-webkit-progress-bar { background: #e6e6e6; border: 1px solid #ddd; }
.ap-bar::-webkit-progress-value { background: #8a8a8a; }
.ap-bar::-moz-progress-bar { background: #8a8a8a; }
.ap-prog-txt { position: absolute; top: 0; left: 0; right: 0; line-height: 30px; text-align: center; font-size: 13px; color: #333; }
.ap-upgrading { color: #333; font-style: italic; }
.ap-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.ap-res { display: flex; align-items: center; flex: 1 1 56px; min-width: 0; }
.ap-res img { flex: 0 0 auto; margin-right: 2px; }
.ap-res input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #71D000; -moz-appearance: textfield; appearance: textfield; }
.ap-res input::-webkit-outer-spin-button, .ap-res input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ap-res input:focus { outline: none; border-color: #71D000; box-shadow: 0 0 2px #71D000; }
.ap-form .trav_buttons { flex: 1 1 100%; margin-top: 4px; min-height: 30px; padding-top: 5px; padding-bottom: 5px; }
.ap-bonus { color: #2e7d32; }
.ap-time { color: #2e6fdb; cursor: help; white-space: nowrap; }
.ap-time .clock { vertical-align: middle; }
.ap-remain { color: #333; margin: 4px 0; font-size: 11px; }
.ap-ramp { margin: 4px 0 10px; padding: 6px 10px; background: #f5f5f5; border: 1px solid #ddd; color: #333; font-size: 12px; text-align: center; }
.ap-daily { margin: 4px 0 12px; text-align: center; }
.ap-daily-lbl { color: #666; font-size: 12px; margin: 0 0 4px; }
.ap-daily-bar { position: relative; height: 30px; }
.ap-daily-bar .ap-bar { height: 30px; }
.ap-daily-txt { position: absolute; top: 0; left: 0; right: 0; line-height: 30px; font-size: 13px; color: #333; text-align: center; }
.ap-boards { display: none; }
.ap-boards.open { display: flex; gap: 8px; margin-top: 8px; }
.ap-board { flex: 1 1 0; min-width: 0; }
.ap-ctbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #bbb; font-size: 11px; }
.ap-ctbl td, .ap-ctbl th { border: 1px solid #ccc; padding: 1px 5px; }
.ap-ctbl thead th { line-height: 16px; text-align: center; color: #000; font-size: 12px; background: #ededed url("img/a/c2.gif") repeat-x left bottom; background-size: auto 100%; }
.ap-ctbl thead td.ap-c-h { color: #333; background: #f3f3f3; font-size: 10px; text-align: center; }
.ap-ctbl thead td.ap-c-h:last-child { text-align: right; }
.ap-ctbl .ap-c-no, .ap-ctbl .ap-c-hno { width: 1%; white-space: nowrap; text-align: right; color: #333; }
.ap-ctbl td.ap-c-name { color: #333; width: 100%; max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-ctbl td.ap-c-name .ap-pl { color: #71D000; font-weight: bold; }
.ap-ctbl td.ap-c-amt { color: #000; font-weight: normal; text-align: right; white-space: nowrap; }
.ap-ctbl td.ap-c-none { color: #888; font-style: italic; text-align: center; }
.ap-evfilter { margin: 6px 0; color: #333; }
.ap-pager { margin: 8px 0; text-align: center; color: #333; }
.ap-pager a { padding: 1px 6px; border: 1px solid #bbb; background: #f5f5f5; text-decoration: none; margin: 0 2px; }
.ap-pager span { margin: 0 6px; }

.sa-intro { color: #333; margin: 4px 0 10px; }
.sa-group { margin-bottom: 14px; }
.sa-qhead { position: relative; padding-left: 29px; }
.sa-help-box { position: absolute; left: 0; top: 0; bottom: 0; width: 25px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #bbb; cursor: pointer; }
.sa-help-list { margin: 8px 0; padding-left: 22px; list-style: disc; }
.sa-help-list li { margin: 0 0 7px; padding: 0; line-height: 1.45; color: #333; }
.sa-name { font-weight: bold; color: #000; white-space: nowrap; }
td.sa-prog { width: 220px; }
.sa-bar { width: 100%; height: 14px; vertical-align: middle; }
.sa-bar::-webkit-progress-bar { background: #e6e6e6; border: 1px solid #ddd; }
.sa-bar::-webkit-progress-value { background: #8a8a8a; }
.sa-bar::-moz-progress-bar { background: #8a8a8a; }
.sa-prog-txt { display: block; font-size: 11px; color: #333; margin-top: 2px; }
.sa-done td { background: #f3faf3; }
.sa-done .sa-name { color: #2e7d32; }
body.manual { overflow-y: auto !important; }
@media (max-width: 480px) {
    body.manual { min-width: 0; margin: 0; padding: 4px 6px; box-sizing: border-box; }
    body.manual table#examples,
    body.manual table#troop_info,
    body.manual table#troop_details { width: 100%; max-width: 100%; }
    body.manual table { max-width: 100%; }
        body.manual img.navi { position: static; left: auto; top: auto; display: block; margin: 10px auto 4px; width: 116px; height: 18px; max-width: 100%; }
    body.manual ul { padding-left: 18px; }
}

.u-was { color: #888; text-decoration: line-through; }
.u-now { color: #178a17; font-weight: bold; }
tr.u-row-was td { color: #888; text-decoration: line-through; }
tr.u-row-now td { color: #178a17; font-weight: bold; }

.trader-shop { padding: 0 0 10px; width: 100%; margin: 0; color: #333; }
.trader-msg { text-align: center; padding: 5px; margin: 0 0 8px; border: 1px solid #ddd; background: #f3f3f3; border-radius: 3px; }
.trader-msg.err { color: #c00; border-color: #c00; }
.trader-msg.ok { color: #000; }
.trader-coin { display: inline-block; width: 10px; height: 14px; overflow: hidden; background-image: url(img/a/silver-ltr.gif); background-position: 0 0; vertical-align: middle; margin-right: 2px; }
.trader-goldico { width: 12px; height: 12px; vertical-align: middle; }
.trader-exchange-table { width: 100%; margin-bottom: 12px; }
.trader-exchange-table thead th { position: relative; padding: 5px 10px; }
.trader-exch-balances { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 14px; }
.trader-shop-balance { display: inline-flex; align-items: center; gap: 4px; font-weight: bold; font-size: 14px; }
.trader-exchange-table thead td { white-space: nowrap; padding: 3px 8px; }
.trader-exchange-table tbody td { padding: 5px 8px; vertical-align: middle; }
.trader-exch-dir { text-align: center; white-space: nowrap; }
.trader-exch-action { text-align: left; padding-left: 18px; }
.trader-exch-rate { text-align: center; white-space: nowrap; color: #666; font-size: 11px; }
.trader-exchange-group { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.trader-exchange-input { width: 50px; height: 22px; border: 1px solid #bbb; border-radius: 2px; text-align: center; font-size: 11px; background: #fff; }
.trader-exchange-input::-webkit-outer-spin-button, .trader-exchange-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.trader-shop .trader-exchange-btn { display: inline-flex; align-items: center; gap: 3px; padding: 5px 12px; font-size: 11px; }
.trader-exchange-btn img { vertical-align: middle; }
.trader-exch-get { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; white-space: nowrap; color: #333; font-size: 11px; }
.trader-exch-get img { vertical-align: middle; }
.trader-exch-get-num { font-weight: bold; }
.trader-shop-cards { margin-bottom: 16px; }
.trader-wares-table { width: 100%; }
.trader-wares-table thead th { padding: 4px 10px; background-repeat: repeat-x; background-size: auto 100%; }
.trader-wares-head { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.trader-wares-head .trader-exch-title { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.trader-help-wrap { align-self: stretch; display: flex; align-items: center; padding-right: 8px; border-right: 1px solid #bbb; }
.trader-help { cursor: pointer; }
.trader-wares-head .trader-exch-balances { position: static; transform: none; }
.trader-wares-table thead td { white-space: nowrap; padding: 3px 8px; }
.trader-wares-table tbody td { padding: 8px; vertical-align: middle; border-bottom: 1px solid #eee; }
.trader-ware-row.card-equipment td { background: #eef7e0; }
.trader-ware-row.card-sold { opacity: .5; filter: grayscale(40%); }
.trader-wares-table td.trader-ware-item { position: relative; padding-left: 30px; }
.trader-ware-icon { position: relative; display: inline-block; vertical-align: middle; margin-left: 21px; }
.trader-ware-img { display: block; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.25)); }
.trader-ware-count { position: absolute; right: -2px; bottom: -2px; min-width: 14px; font-size: 10px; font-weight: bold; color: #fff; background: rgba(0,0,0,.65); border-radius: 2px; padding: 0 3px; text-align: center; line-height: 1.3; }
.trader-ware-text { display: inline-flex; flex-direction: column; vertical-align: middle; gap: 2px; margin-left: 10px; }
.trader-ware-name { font-weight: bold; font-size: 12px; color: #333; }
.discord-ico { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }
.trader-ware-timer { font-size: 11px; font-style: italic; color: #888; }
.trader-ware-price { text-align: center; white-space: nowrap; width: 1%; }
.trader-card-price { font-size: 12px; font-weight: bold; color: #555; }
.trader-card-price-per { font-size: 11px; font-weight: normal; color: #888; }
.trader-ware-buy { text-align: center; white-space: nowrap; width: 1%; }
.trader-card-sold-stamp { font-weight: bold; color: #c00; letter-spacing: 1px; }
.trader-card-buy-section { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0; }
.trader-qty-selector { display: inline-flex; align-items: stretch; margin-bottom: 0; border: 1px solid #bbb; border-radius: 3px; overflow: hidden; }
.trader-qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: #e8e8e8; cursor: pointer; padding: 0; }
.trader-qty-btn:hover { background: #d8d8d8; }
.trader-qty-btn:active { background: #c8c8c8; }
.trader-qty-ico { width: 13px; height: 13px; background-repeat: no-repeat; background-position: 0 0; mix-blend-mode: multiply; }
.trader-qty-ico.ico-minus { background-image: url("img/a/minus.gif"); }
.trader-qty-ico.ico-plus { background-image: url("img/a/plus.gif"); }
.trader-qty-input { box-sizing: border-box; width: 44px; padding: 0; margin: 0; border: none; border-left: 1px solid #c5b899; border-right: 1px solid #c5b899; text-align: center; font-size: 13px; font-weight: bold; background: #fff; }
.trader-qty-input::-webkit-outer-spin-button, .trader-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.trader-shop .trader-buy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 5px 16px; font-size: 12px; }
.trader-buy-btn img, .trader-buy-btn .trader-coin { vertical-align: middle; }
.market-ok { padding: 6px 28px; font-size: 13px; cursor: pointer; }
.market-ok[disabled] { opacity: .5; cursor: default; }
div#build.gid17 p.carry_info { margin-bottom: 5px; }
div#build.gid17 table.send_res td.max, div#build.gid17 table.send_res td.maxone { padding-left: 4px; }
div#build.gid17 .res_btn { padding-left: 7px; padding-right: 7px; min-width: 22px; line-height: 15px; font-size: 12px; }
div#build.gid17 .res_btn[disabled] { opacity: .45; cursor: default; border-color: #bbb; }
.trader-reroll-form { margin: 0; }
.trader-shop .trader-reroll-btn { display: inline-flex; align-items: center; gap: 3px; padding: 3px 12px; font-size: 11px; }
.trader-reroll-btn img { vertical-align: middle; }
.trader-pity-col { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; display: flex; flex-direction: column; gap: 0; cursor: help; }
.trader-shop-pity-dot { flex: 1 1 0; display: block; width: 16px; min-height: 12px; border: 1px solid #5aa800; border-top-width: 0; background: #ddd; }
.trader-pity-col .trader-shop-pity-dot:first-child { border-top-width: 1px; }
.trader-shop-pity-dot.filled { background: #71D000; }
.trader-reroll-cell { text-align: center; padding: 8px; border-top: 1px solid #bbb; background: #f5f5f5; }
.trader-reroll-form { margin: 0; }

.trader-tabs { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; padding: 3px 10px; background: #ededed url(img/a/c2.gif) repeat-x left bottom; background-size: auto 100%; border: 1px solid #bbb; }
.trader-tabs .trader-help-wrap { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px; border-right: 1px solid #bbb; }
.trader-shop .trader-tab { padding: 2px 16px; font-size: 12px; line-height: 16px; }
.trader-shop .trader-tab.active { background: #fff; border-color: #71d000; color: #000; }
.trader-tab-sep { width: 2px; height: 14px; background: #888; border-radius: 1px; font-size: 0; color: transparent; }
.trader-pane { margin-top: 0; border: 1px solid #bbb; border-top: none; }

.hero-item-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid #bbb; border-radius: 4px; background: #f5f5f5; }
.hero-item-icon img { width: 44px; height: 44px; object-fit: contain; }
.hero-item-t1 { background-color: #e2f5d8; border-color: #b3d99a; }
.hero-item-t2 { background-color: #d9ecfb; border-color: #9ec7e8; }
.hero-item-t3 { background-color: #ece0f7; border-color: #c4a9e0; }
#heroInventory .itemBox.hero-item-t1 { background-color: #e2f5d8; border-color: #b3d99a; }
#heroInventory .itemBox.hero-item-t2 { background-color: #d9ecfb; border-color: #9ec7e8; }
#heroInventory .itemBox.hero-item-t3 { background-color: #ece0f7; border-color: #c4a9e0; }
.hero-item-count { position: absolute; right: -2px; bottom: -2px; min-width: 14px; font-size: 10px; font-weight: bold; color: #fff; background: rgba(0,0,0,.65); border-radius: 2px; padding: 0 3px; text-align: center; line-height: 1.3; }
.hero-item-flag { position: absolute; top: -3px; left: -3px; width: 12px; height: 12px; background: #c00; border: 1px solid #fff; border-radius: 2px; box-shadow: 0 0 2px rgba(0,0,0,.4); }

.trade-panel { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.trade-col-head { display: block; width: 100%; box-sizing: border-box; font-weight: bold; color: #333; text-align: center; padding: 4px 8px; background: #f3f3f3; border: none; border-bottom: 1px solid #ddd; margin: 0; }
.trade-inv { border: 1px solid #ddd; background: #fff; max-height: 320px; overflow-y: auto; }
.trade-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); justify-items: center; align-content: start; gap: 6px; padding: 8px; }
.trade-inv-grid .trader-trade-empty { grid-column: 1 / -1; }
.trade-inv-item { padding: 2px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; line-height: 0; }
.trade-inv-item:hover { border-color: #b3d99a; }
.trade-inv-item.selected { border-color: #5aa800; box-shadow: 0 0 0 1px #5aa800 inset; }
.trade-inv-item.flagged { cursor: default; opacity: .55; }
.trade-inv-item.flagged:hover { border-color: transparent; }
.trade-inv-item.maxed .hero-item-icon { filter: grayscale(1); }
.trade-stage { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 6px 0; }
.trade-slot { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 2px dashed #bbb; border-radius: 6px; background: #fafafa; }
.trade-slot[data-empty="0"] { border-style: solid; border-color: #5aa800; background: #fff; }
.trade-slot .hero-item-icon { border: none; width: 56px; height: 56px; }
.trade-slot-placeholder { font-size: 10px; color: #999; text-align: center; padding: 2px; line-height: 1.2; }
.trade-arrow { font-size: 22px; color: #888; line-height: 1; }
.trade-do-form { margin: 0; }
.trader-shop .trade-do-btn { display: inline-block; padding: 6px 16px; font-size: 12px; white-space: nowrap; }
.trade-do-btn[disabled] { opacity: .5; cursor: default; }
.trade-do-btn img { vertical-align: middle; margin-left: 2px; }
.trade-preview { min-width: 0; border: 1px solid #ddd; background: #fff; }
.trade-preview-strip { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.trade-preview-strip.trade-won { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; min-height: 120px; padding: 12px; }
.trade-preview-strip.trade-won .trade-cand { width: 80px; }
.trade-preview-strip.trade-won .hero-item-icon { width: 56px; height: 56px; }
.trade-preview-strip.trade-won .hero-item-icon img { width: 48px; height: 48px; }
.trade-preview-hint { color: #888; font-style: italic; font-size: 12px; }
.trade-pgroup { border-bottom: 1px solid #eee; padding-bottom: 6px; }
.trade-pgroup-label { font-size: 11px; font-weight: bold; color: #555; margin-bottom: 4px; }
.trade-pgroup-items { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.trade-pgroup.locked .trade-pgroup-label { color: #999; }
.trade-pgroup.locked .trade-pgroup-items { opacity: .45; filter: grayscale(1); }
.trade-pgroup-locknote { font-size: 10px; color: #888; margin-bottom: 4px; }
.trade-cand { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; width: 64px; }
.trade-cand-name { font-size: 10px; color: #333; text-align: center; line-height: 1.2; margin-top: 2px; }
.trade-cand .hero-item-icon { width: 44px; height: 44px; }
.trade-cand .hero-item-icon img { width: 38px; height: 38px; }
.trader-trade-empty { text-align: center; color: #888; font-style: italic; padding: 10px; }
.tpop-confirm-text { margin: 0 0 12px; color: #333; }
@media (max-width: 520px) {
  .trader-shop { max-width: 100%; }
  .trader-shop-balance { font-size: 12px; }
  .trader-exch-balances { gap: 8px; }
  .trader-exch-rate { font-size: 10px; }
  .trader-exchange-input { width: 42px; height: 20px; font-size: 11px; }
  .trader-shop .trader-exchange-btn { padding: 4px 6px; font-size: 10px; }
  .trader-wares-table tbody td { padding: 5px 4px; }
  .trader-wares-table td.trader-ware-item { text-align: center; padding-left: 4px; }
  .trader-ware-icon { margin-left: 0; }
  .trader-wares-table thead th { padding-top: 6px; padding-bottom: 6px; }
  .trader-wares-head { min-height: 32px; }
  .trader-ware-img { width: 34px; height: 34px; }
  .trader-ware-text { display: none; }
  .trader-card-price { font-size: 11px; }
  .trader-card-price-per { font-size: 9px; }
  .trader-qty-btn { width: 22px; height: 22px; font-size: 13px; line-height: 22px; }
  .trader-qty-input { width: 30px; font-size: 11px; }
  .trader-shop .trader-buy-btn { padding: 8px; font-size: 10px; }
}

#content.tools { padding: 43px 25px 0; width: 502px; }
#content.tools h1 { margin-bottom: 6px; }
.tools-intro { color: #555; margin: 0 0 14px; }
.tools-back { margin: 0 0 12px; }
.tools-hidden { display: none !important; }

.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tools-card {
	display: block; padding: 12px 14px; text-decoration: none;
	background: #fff; border: 1px solid #bbb; border-radius: 4px; color: #333;
}
.tools-card:hover { border-color: #888; background: #fafafa; }
.tools-card h3 {
	margin: 0 0 6px; padding: 4px 8px; color: #000; font-size: 13px;
	background: linear-gradient(#ededed, #dcdcdc); border: 1px solid #ddd; border-radius: 3px;
}
.tools-card span { display: block; color: #555; font-size: 11px; line-height: 1.4; }
.tools-locked { opacity: .55; cursor: pointer; }
.tools-locked h3 { color: #555; }
.premium-locked { opacity: .55; cursor: pointer; }

/* Rally point > Evasion (capital-only). Native game table, styled like the top-10
   tables: the header bar is the shared `table thead th` c2.gif from compact.css
   (don't restyle it), the 1px grid comes from the global table background +
   cellspacing="1", and cells need their own padding because the global rule is
   `table td, table th { padding: 0 }`. */
table.evasion-table { max-width: 520px; margin: 8px 0 14px; }
table.evasion-table td, table.evasion-table th { padding: 3px 6px; }
/* Label column shrinks to its longest label (same trick as the top-10 "No."
   column), so the value sits right beside it instead of across a half-empty row. */
table.evasion-table th.evasion-lbl { width: 1%; white-space: nowrap; color: #333; font-weight: normal; text-align: left; }
/* Village identity + its two counters read as one line, not three label rows. */
table.evasion-table td.evasion-vill .evasion-vname { color: #000; font-weight: bold; margin-right: 12px; }
table.evasion-table td.evasion-vill .evasion-vstat { color: #555; font-size: 11px; margin-right: 12px; }
table.evasion-table td.note { color: #666; font-size: 11px; line-height: 1.4; }
table.evasion-table td.note img { vertical-align: middle; }
table.evasion-table td.evasion-submit { text-align: center; }
.evasion-sub { color: #666; font-weight: normal; font-size: 11px; }
.evasion-max { width: 50px; text-align: center; }
.adminEnter { color: #c00; font-size: 11px; text-decoration: none; vertical-align: middle; }
.adminEnter:hover { color: #f00; }
.premium-table { width: 100%; max-width: 720px; border-collapse: collapse; margin: 6px 0 14px; }
.premium-table thead th {
	color: #000; text-align: center; font-size: 12px; line-height: 14px; padding: 2px 5px;
	background: #ededed url("img/a/c2.gif") repeat-x left bottom; background-size: auto 100%;
	border: 1px solid #bbb;
}
.premium-table td.premium-status { background: #f5f5f5; color: #333; padding: 6px 8px; border: 1px solid #ddd; }
.premium-table td.premium-col {
	width: 33%; vertical-align: top; text-align: center; padding: 12px 14px;
	background: #fff; border: 1px solid #ddd;
}
.premium-table .pp-badge {
	display: block; margin: -12px -14px 8px; padding: 3px 0;
	font-weight: bold; font-size: 11px; color: #fff; text-transform: uppercase; letter-spacing: 1px;
}
.premium-table .pp-badge-seller { background: #a32222; }
.premium-table .pp-badge-value { background: #3f7d1e; }
.premium-table .pp-base-gold { border-bottom: 1px dotted #666; cursor: help; }
.premium-table .pp-badge-spacer { background: transparent; }
.premium-table .pp-days { font-weight: bold; color: #000; font-size: 15px; }
.premium-table .pp-price {
	display: inline-block; padding: 2px 12px; margin: 6px 0; color: #000; font-weight: bold;
	background: linear-gradient(#ededed, #dcdcdc); border: 1px solid #ccc; border-radius: 3px;
}
.premium-table ul.pp-feats {
	list-style: none; margin: 8px 0; padding: 0; text-align: left; color: #333; font-size: 11px;
}
.premium-table ul.pp-feats li { padding: 2px 0 2px 14px; position: relative; line-height: 1.35; }
.premium-table ul.pp-feats li:before { content: "✓"; color: #71D000; position: absolute; left: 0; font-weight: bold; }
.premium-table .pp-bonus { margin: 8px 0; color: #333; font-weight: bold; font-size: 12px; white-space: nowrap; }
.premium-table .pp-bonus img { vertical-align: middle; }
.premium-table .premium-buy { width: 100%; box-sizing: border-box; cursor: pointer; }
.premium-msg { color: #c00; margin-top: 8px; }
.premium-back-wrap { display: none; margin: 8px 0; }
.premium-back { color: #333; text-decoration: none; font-weight: bold; }
#premium-checkout { margin-top: 8px; max-width: 720px; }
.premium-until,
.is-mobile #side_navi a.premium-until { color: #71D000 !important; font-weight: bold !important; }

/* Sidebar "Free gold" link while a vote is available — soft yellow, no border,
   gently pulsing so it draws the eye without flashing. The background must NOT be
   !important: an !important declaration outranks the keyframes and kills the pulse.
   The highlight sits on an inner span, so the link keeps its block layout and the
   hover arrow stays aligned with the other menu links. */
div#side_navi p a span.vote-ready,
.is-mobile #side_navi a span.vote-ready {
	display: inline-block;
	padding: 0 5px;
	margin-left: -5px;
	border: 0;
	border-radius: 3px;
	background-color: #fff4c6;
	color: #6b4e00;
	font-weight: bold;
	animation: voteReadyPulse 2.4s ease-in-out infinite;
}
/* The vote nudge only exists for the mobile top bar (mobile.js moves .side_events
   there); on desktop the sidebar link already carries the highlight. */
body:not(.is-mobile) p.side_events .vote-note { display: none; }
body:not(.is-mobile) p.side_events.only-vote { display: none; }
@keyframes voteReadyPulse {
	0%, 100% { background-color: #fffae6; }
	50%      { background-color: #ffe9a3; }
}
@media (prefers-reduced-motion: reduce) {
	div#side_navi p a span.vote-ready,
	.is-mobile #side_navi a span.vote-ready { animation: none; }
}

/* Invite-a-friend form (plus.php?id=5&mail) */
.invite-form { max-width: 380px; }
.invite-form .invite-email { width: 100%; box-sizing: border-box; }
.invite-form .invite-text { width: 100%; box-sizing: border-box; resize: vertical; }
.invite-form .invite-captcha { margin: 8px 0; }
.invite-form .invite-submit { text-align: center; }
@media (max-width: 640px) {
	.premium-table { max-width: 100%; }
	.premium-table, .premium-table thead, .premium-table tbody, .premium-table tr { display: block; width: 100%; }
	.premium-table thead th, .premium-table td.premium-status { display: block; width: 100%; box-sizing: border-box; }
	.premium-table td.premium-col { display: block; width: 100%; box-sizing: border-box; border-top: none; }
	.premium-table td.premium-col:first-child { border-top: 1px solid #ddd; }
	.premium-table .pp-bonus { white-space: normal; }
	#premium-checkout { max-width: 100%; }
}

.tools-form {
	background: #fff; border: 1px solid #bbb; border-radius: 4px;
	padding: 10px 14px; max-width: 460px;
}
.tools-form fieldset { border: 1px solid #ddd; border-radius: 3px; margin: 0 0 10px; padding: 8px 10px; }
.tools-form legend { color: #000; font-weight: bold; padding: 0 4px; }
.tools-form label { display: inline-block; margin: 2px 10px 2px 0; color: #000; }
.tools-form input[type="number"] { width: 60px; -moz-appearance: textfield; appearance: textfield; }
.tools-form input[type="number"]::-webkit-outer-spin-button,
.tools-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tools-form select { max-width: 220px; }
.tools-form .btn { margin: 4px 0 0; }
.tools-btn {
	background: linear-gradient(#ededed, #dcdcdc); border: 1px solid #bbb; border-radius: 3px;
	color: #333; padding: 4px 16px; cursor: pointer; font-weight: bold;
}
.tools-btn:hover { border-color: #888; }

.tools-result {
	margin: 12px 0 0; max-width: 460px; background: #fff;
	border: 1px solid #bbb; border-radius: 4px; padding: 8px 12px;
}
.tools-result-tbl { width: 100%; border-collapse: collapse; }
.tools-result-tbl th { text-align: left; color: #000; font-weight: normal; padding: 3px 8px 3px 0; width: 120px; }
.tools-result-tbl td { color: #000; font-weight: bold; padding: 3px 0; }
.tools-err { color: #c00; margin: 0; }

.tools-tabs { margin: 14px 0; }
.tools-tabs a { text-decoration: none; }
.tools-tabs a.active { font-weight: bold; border-bottom: 1px dashed #c0c0c0; }
.tools-prod h3 { margin: 12px 0 4px; color: #333; font-size: 12px; }
.tools-prod-tbl { border-collapse: collapse; max-width: 460px; width: 100%; margin: 0 0 6px; }
.tools-prod-tbl th { text-align: left; color: #000; font-weight: normal; background: linear-gradient(#ededed,#dcdcdc); border: 1px solid #ddd; padding: 3px 8px; }
.tools-prod-tbl td { border: 1px solid #eee; padding: 3px 8px; color: #000; }
.tools-prod-tbl thead th { color: #000; }
.tools-prod-tbl td:last-child, .tools-prod-tbl th:last-child { text-align: right; }
.tools-prod-sum td, .tools-prod-total td, .tools-prod-total th { font-weight: bold; color: #000; background: #f5f5f5; }
.tools-muted { color: #999; }
.tools-ov-tbl thead th.tools-ov-title { text-align: center; background: #fff url("img/a/c2.gif") repeat-x; color: #000; font-weight: bold; border: 1px solid #c0c0c0; }
.tools-ov-tbl thead tr.tools-ov-cols th { background: #f3f3f3; color: #000; font-weight: normal; }
.tools-ov-tbl td, .tools-ov-tbl th { border-color: #c0c0c0; }
.tools-ov-tbl tr.tools-prod-sum td, .tools-ov-tbl tr.tools-prod-total td { background: #f0fff0; border-top: 1px solid #71d000; border-bottom: 1px solid #71d000; }
.tools-ov-tbl tr.tools-prod-sum td:first-child, .tools-ov-tbl tr.tools-prod-total td:first-child { border-left: 1px solid #71d000; }
.tools-ov-tbl tr.tools-prod-sum td:last-child, .tools-ov-tbl tr.tools-prod-total td:last-child { border-right: 1px solid #71d000; }

.prod-overview-link:link, .prod-overview-link:visited { color: inherit; text-decoration: underline; }
.prod-overview-link:hover { color: #00BC00; }

#train-result { overflow-x: auto; }
.tools-train-bld { margin: 0 0 12px; }
.tools-form.tools-train, #train-result.tools-result { border: none; border-radius: 0; background: transparent; padding: 0; max-width: none; }
.tools-train fieldset { border: none; border-bottom: 1px dashed #C0C0C0; border-radius: 0; margin: 0 0 12px; padding: 0 0 12px; }
.tools-train fieldset:last-of-type { border-bottom: none; }
.tools-train legend { margin: 0 0 4px; padding: 0; }
.tools-train table, #train-result table { border-collapse: separate; border-spacing: 1px; background: #C0C0C0; max-width: 460px; }
.tools-train table th, #train-result table th { background: #ededed url("img/a/c2.gif") repeat-x left bottom; background-size: auto 100%; border: 0; color: #000; padding: 2px 7px; text-align: center; }
.tools-train table td, #train-result table td { background: #fff; border: 0; color: #000; padding: 3px 6px; white-space: nowrap; }
.tools-train table tr.hl td, #train-result table tr.hl td { background: #f0fff0; border-top: 1px solid #71d000; border-bottom: 1px solid #71d000; }

#dist-form.tools-form, #dist-result.tools-result { border: none; border-radius: 0; background: transparent; padding: 0; max-width: none; }
#dist-form fieldset { border: none; border-bottom: 1px dashed #C0C0C0; border-radius: 0; margin: 0 0 12px; padding: 0 0 12px; }
#dist-form fieldset:last-of-type { border-bottom: none; }
#dist-form .tools-cols { border-bottom: 1px dashed #C0C0C0; margin: 0 0 12px; padding: 0 0 12px; }
#dist-form .tools-cols fieldset { border-bottom: none; margin: 0; padding: 0; }
#dist-form legend { margin: 0 0 4px; padding: 0; }
#dist-result table { border-collapse: separate; border-spacing: 1px; background: #C0C0C0; max-width: 300px; }
#dist-result table th { background: #fff; border: 0; color: #000; text-align: left; padding: 3px 6px; }
#dist-result table td { background: #fff; border: 0; color: #000; font-weight: normal; padding: 3px 6px; }

/* Every tool selector button takes the trav_buttons look: green-bordered gradient, white when picked. */
#train-tribe-strip .ws-tribe,
#dist-form .tools-pick,
#dist-form .tools-item {
	background: linear-gradient(to bottom, #fdfdfd, #c6c6c6);
	border: 1px solid #71d000; border-radius: 5px; color: #7a7a7a;
}
#train-tribe-strip .ws-tribe:hover,
#dist-form .tools-pick:hover,
#dist-form .tools-item:hover { border-color: #a6ac9f; }
#train-tribe-strip .ws-tribe.sel,
#dist-form .tools-pick.sel,
#dist-form .tools-item.sel {
	background: #fff; border-color: #71d000; color: #333; font-weight: bold;
}
#dist-form .tools-item.sel { box-shadow: 0 0 0 2px #71d000 inset; }
#dist-form .tools-pick.sel .spd { color: #689f38; }
#dist-form .tools-pick img.tribe-emblem { width: 22px; height: 22px; object-fit: cover; object-position: top; filter: grayscale(1); opacity: .55; }
#dist-form .tools-pick.sel img.tribe-emblem { filter: none; opacity: 1; }
#dist-boots { min-width: 260px; max-width: none; }
@media (max-width: 620px) {
	#content.tools .tools-form label { white-space: normal; }
	#content.tools .tools-form select, #content.tools #dist-boots { max-width: 100%; min-width: 0; box-sizing: border-box; }
}

.vgroup-add { display: inline-block; vertical-align: middle; margin-left: 6px; text-decoration: none; line-height: 1; }
.vgroup-add-ico { display: inline-block; width: 13px; height: 13px; vertical-align: middle; background: url("img/a/plus.gif") no-repeat 0 0; mix-blend-mode: multiply; }

tr.vgroup-head td { background: #ededed; color: #333; font-weight: bold; padding: 2px 4px; border-top: 1px solid #ddd; }
tr.vgroup-head.vgroup-red td { background: #f6d9d5; }
tr.vgroup-head.vgroup-blue td { background: #d6e6f2; }
tr.vgroup-head.vgroup-green td { background: #d4f0e0; }
tr.vgroup-head.vgroup-orange td { background: #fbe5d2; }
tr.vgroup-head.vgroup-purple td { background: #e8dcf1; }
tr.vgroup-head.vgroup-teal td { background: #d2efe9; }
tr.vgroup-head.vgroup-gray td { background: #e2e5e5; }

.vgroup-head-main { display: flex; align-items: center; gap: 3px; }
.vgroup-handle { flex: 0 0 auto; cursor: move; color: #999; letter-spacing: -2px; }
.vgroup-tgl { flex: 0 0 auto; cursor: pointer; display: inline-block; }
.vgroup-tgl-ico { display: inline-block; width: 13px; height: 13px; vertical-align: middle; background: url("img/a/closed.gif") no-repeat 0 0; mix-blend-mode: multiply; }
tr.vgroup-head.open .vgroup-tgl-ico { background-image: url("img/a/opened.gif"); }
.vgroup-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgroup-pencil { flex: 0 0 auto; cursor: pointer; color: #666; padding: 0 2px; }
.vgroup-pencil:hover { color: #000; }

.vgroup-edit { display: none; }
tr.vgroup-head.editing .vgroup-head-main { display: none; }
tr.vgroup-head.editing .vgroup-edit { display: block; margin: 2px 0; }
.vgroup-edit-line { display: flex; align-items: center; gap: 5px; padding-right: 8px; }
.vgroup-name-input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; }
.vgroup-pick { flex: 0 0 auto; cursor: pointer; border: 1px solid #bbb; background: #fff; border-radius: 3px; padding: 2px; line-height: 0; }
.vgroup-pick .vgroup-sw { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.vgroup-save { flex: 0 0 auto; cursor: pointer; border: 1px solid #bbb; background: #f5f5f5; color: #2a7d2a; border-radius: 3px; line-height: 1; padding: 2px 6px; font-weight: bold; }
.vgroup-save:hover { background: #eaeaea; }
.vgroup-del { flex: 0 0 auto; cursor: pointer; text-decoration: none; line-height: 1; padding: 0 2px; }
.vgroup-del-ico { display: inline-block; width: 12px; height: 12px; vertical-align: middle; background: url("img/a/del.gif") no-repeat center; }

.vgroup-palette { display: none; }
.vgroup-palette.open { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 5px 0 2px; padding: 5px; background: #fff; border: 1px solid #bbb; border-radius: 3px; }
.vgroup-sw { display: inline-block; width: 100%; height: 20px; box-sizing: border-box; border: 1px solid #bbb; background: #fff; cursor: pointer; }
.vgroup-sw.sel { outline: 2px solid #333; outline-offset: -2px; }
.vgroup-sw.vgroup-red { background: #c0392b; } .vgroup-sw.vgroup-blue { background: #2980b9; }
.vgroup-sw.vgroup-green { background: #27ae60; } .vgroup-sw.vgroup-orange { background: #e67e22; }
.vgroup-sw.vgroup-purple { background: #8e44ad; } .vgroup-sw.vgroup-teal { background: #16a085; }
.vgroup-sw.vgroup-gray { background: #7f8c8d; }

tr.vgroup-vill { cursor: move; }
tr.vgroup-vill:has(td.dot.hl) td { background: #eef7e0; }
#vlist td.link a.vgroup-att { display: inline-block; line-height: 0; }
#vlist td.link img.att1 { vertical-align: middle; }
/* Name cell absorbs the row's slack so the coords + shortcut icons stay pinned
   to the right edge of the panel instead of floating in the middle. compact.css
   floats the three coord divs, and a floated cell's minimum width is its text,
   not the 38/8/38px it asks for — squeezed by the 100% name cell they stacked
   onto three lines. inline-block keeps the same widths/alignment but makes them
   count toward the cell's minimum, so "(x|y)" always stays on one line. */
#vlist td.link { width: 100%; }
#vlist td.aligned_coords div { float: none; display: inline-block; vertical-align: top; }
/* Drop the fixed 84px cell / 38px y-column: their trailing slack is what pushed
   the icons away from the coordinates. x keeps its width so the "(" stays in a
   column; y shrinks to its digits. */
#vlist td.aligned_coords { width: auto; }
#vlist td.aligned_coords div.coy { width: auto; padding-right: 2px; }
#vlist td.vgroup-ico { width: 1%; white-space: nowrap; text-align: right; padding: 0 3px 0 1px; }
#vlist td.vgroup-ico a.vgroup-send { display: inline-block; line-height: 0; vertical-align: middle; opacity: 0.75; }
#vlist td.vgroup-ico a.vgroup-send:hover { opacity: 1; }
#vlist td.vgroup-ico a.vgroup-res { margin-left: 5px; }
/* Same blade sprite the alliance-attacks filter uses; its own rule is scoped to
   .filterWrapper, so repeat the background here for the sidebar. */
#vlist td.vgroup-ico img.filterNews { display: inline-block; width: 16px; height: 16px; background: url("img/a/hideUnimportant.png") no-repeat center; }
#vlist td.vgroup-ico a.vgroup-res img { width: 21px; height: 18px; }
#vlist td.vgroup-ico img { vertical-align: middle; }
#vlist td.link .vgroup-cap { color: #e0a800; font-size: 11px; vertical-align: middle; cursor: help; }
tr.vgroup-collapsed { display: none; }
.vgroup-dragging { opacity: 0.4; }
.vgroup-drag-over td { box-shadow: inset 0 0 0 2px #f90; }
tr.vgroup-dropzone td { height: 0; padding: 0; border: 0; line-height: 0; }
#vgroup-widget.vg-dragging tr.vgroup-dropzone td { height: 16px; background: #f0f0f0; border-top: 1px dashed #bbb; }

.tools-cols { display: flex; gap: 10px; flex-wrap: wrap; }
.tools-cols fieldset { flex: 1; min-width: 180px; }
.tools-subhead { font-weight: bold; color: #000; margin: 8px 0 4px; font-size: 11px; }
.tools-pickrow { display: flex; flex-wrap: wrap; gap: 5px; }
.tools-pick {
	display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; cursor: pointer;
	background: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; color: #333; font-size: 11px;
}
.tools-pick:hover { border-color: #999; }
.tools-pick.sel { background: linear-gradient(#8bc34a, #7cb342); border-color: #689f38; color: #fff; }
.tools-pick.sel .spd { color: #eaffea; }
.tools-pick b { font-weight: bold; }
.tools-pick .spd { color: #999; }
.tools-pick img.unit { width: 18px; height: 18px; }
.tools-items .tools-item {
	width: 40px; height: 40px; padding: 0; cursor: pointer; background: #fff;
	border: 1px solid #ccc; border-radius: 4px; color: #999; font-size: 16px; line-height: 38px; text-align: center;
}
.tools-items .tools-item:hover { border-color: #999; }
.tools-items .tools-item.sel { border-color: #689f38; box-shadow: 0 0 0 2px #8bc34a inset; }
.tools-items .tools-item img { width: 36px; height: 36px; vertical-align: middle; }

.tools-item.tools-disabled { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.tools-hint { color: #c00; font-size: 10px; margin-left: 6px; }

.fl_filter_note { color: #666; font-size: 11px; font-style: italic; }

#content.warsim2 { width: 502px; }
.ws-form fieldset { margin: 0; border: 0; padding: 0; }

.ws-card, .ws-group { background: #fff; border: 1px solid #bbb; border-radius: 4px; margin: 0 0 12px; overflow: hidden; }
.ws-att { background: #eef6e6; }
.ws-group { background: #fbece9; }
.ws-cardhead, .ws-grphead { display: flex; align-items: center; gap: 8px; padding: 5px 10px; color: #333; font-weight: bold; background: #ededed url(img/a/c2.gif) repeat; border-bottom: 1px solid #bbb; }
.ws-cardhead { font-size: 13px; }
.ws-grptitle { font-weight: bold; font-size: 12px; }
.ws-headico { width: 18px; height: 18px; object-fit: cover; object-position: top; vertical-align: middle; }
.ws-cardbody, .ws-grpbody { padding: 8px 10px; }
.ws-del { margin-left: auto; border: 1px solid #bbb; background: #fff; color: #555; cursor: pointer; border-radius: 3px; line-height: 1; padding: 1px 7px; }
#ws-groups > .ws-group:only-child .ws-del { display: none; }

.ws-form .ws-loadvil { display: flex; align-items: center; margin: 0 0 0 auto; padding: 0; background: none; border: 0; font-weight: normal; }
.ws-form .ws-loadvil-sel { max-width: 160px; font-size: 11px; }
.ws-grphead .ws-del { margin-left: 6px; }

.ws-tribestrip { display: flex; gap: 5px; margin: 0 0 8px; }
.ws-tribe { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; width: 52px; padding: 3px 2px; background: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; color: #888; font-size: 10px; }
/* s/*.gif are 30x63 two-figure sprites — crop to the top figure (object-position: top) */
.ws-tribe img { width: 26px; height: 26px; object-fit: cover; object-position: top; filter: grayscale(1); opacity: .5; }
.ws-tribe:hover { border-color: #999; }
.ws-tribe.sel { background: #eef6e6; border-color: #689f38; color: #333; font-weight: bold; }
.ws-tribe.sel img { filter: none; opacity: 1; }

/* Option / village field icons (attacker = offense, defender = defence; building icons where they apply) */
.ws-opts label, .ws-village label { display: inline-flex; align-items: center; gap: 3px; }
.ws-oico { width: 14px; height: 15px; object-fit: cover; object-position: top; vertical-align: middle; } /* off/def: top figure only */
.ws-uico { width: 16px; height: 16px; vertical-align: middle; }
.ws-bico { height: 20px; width: auto; max-width: 16px; object-fit: contain; vertical-align: middle; }

/* Troop matrix: three aligned rows (icons / counts / smithy) */
.ws-troops { margin: 4px 0; }
.ws-trow { display: flex; align-items: center; gap: 3px; margin: 2px 0; }
.ws-rlabel { flex: 0 0 18px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.ws-rlabel img { max-width: 16px; max-height: 16px; }
/* Row-label help marker: a "?" instead of an icon — hover shows the tooltip
   (troop count / armoury-smithy upgrade level). */
.ws-rhelp { font-size: 11px; font-weight: bold; color: #888; cursor: help; }
.ws-tcell { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
/* Chief/Settler columns (off 9-10): fixed-narrow so the other 8 units get the slack. */
.ws-tcell-sm { flex: 0 0 24px; }
.ws-tcell img.unit { width: 18px; height: 18px; }
.ws-tcell input { width: 100%; min-width: 0; box-sizing: border-box; padding: 2px 1px; text-align: center; }
.ws-smy { background: #f6f6f6; color: #555; }
.ws-smy-empty { display: block; }

/* Options + hero rows */
.ws-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 0; padding-top: 6px; border-top: 1px solid #eee; }
.ws-opts label { color: #333; font-size: 11px; }
.ws-opts input { width: 48px; }
.ws-hero { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid #eee; }
.ws-herochk { font-weight: bold; color: #555; }
.ws-herobody { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; padding: 6px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 3px; }
.ws-herobody label { color: #333; font-size: 11px; }
.ws-herobody input { width: 46px; }
.ws-herobody select { font-size: 11px; }

/* Shared defending-village panel */
.ws-village { background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; padding: 6px 10px; margin: 0 0 12px; }
.ws-vlbl { display: inline-flex; align-items: center; gap: 4px; font-weight: bold; color: #555; font-size: 11px; }
.ws-village label { color: #333; font-size: 11px; margin: 3px 10px 3px 0; }
.ws-village input { width: 46px; }
.ws-note { background: #f5f5f5; border: 1px solid #ddd; border-left: 3px solid #bbb; border-radius: 3px; padding: 5px 10px; margin: 0 0 12px; color: #333; font-size: 11px; }
.ws-hpfull { margin-left: 3px; padding: 0 3px; background: #fff; border: 1px solid #ccc; border-radius: 2px; color: #555; font-size: 10px; line-height: 14px; cursor: pointer; }
.ws-hpfull:hover { border-color: #689f38; color: #333; }
.ws-warn { background: #fff; border: 1px solid #ddd; border-left: 3px solid #c00; border-radius: 3px; padding: 5px 10px; margin: 0 0 10px; color: #c00; font-size: 11px; }

/* Add-reinforcement tribe strip (small tribe-emblem chips) */
.ws-addstrip { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 10px; background: #f5f5f5; border: 1px dashed #bbb; border-radius: 4px; }
.ws-addlbl { font-size: 11px; color: #555; font-weight: bold; }
.ws-addtribe { width: 32px; height: 32px; padding: 1px; background: #fff; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; overflow: hidden; }
.ws-addtribe img { width: 28px; height: 28px; object-fit: cover; object-position: top; } /* v*.gif top figure only */
.ws-addtribe:hover { border-color: #689f38; box-shadow: 0 0 0 2px #cfe6b8; }
.ws-calc { font-size: 14px; padding: 6px 24px; }
.ws-res-head { padding: 8px 12px; border-radius: 4px; margin: 0 0 10px; color: #fff; }
.ws-res-head span { display: block; font-size: 11px; margin-top: 2px; }
.ws-win-att { background: linear-gradient(#c0392b,#a5342a); }
.ws-win-def { background: linear-gradient(#2980b9,#236aa0); }
.ws-res-tbl td:not(:first-child), .ws-res-tbl th:not(:first-child) { text-align: right; }
.ws-res-tbl img.unit { width: 16px; height: 16px; vertical-align: middle; }
.ws-lost { color: #c00; }
.ws-res-tbl tfoot .ws-total td { font-weight: bold; color: #000; border-top: 2px solid #bbb; background: #f0f0f0; }

/* Result casualty matrix — fixed-layout table: all unit columns (zeros included), equal
   width, with icons + Qty / Lost(red) / Left(green) rows that align vertically per column. */
.ws-castbl { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ws-castbl td { text-align: center; font-size: 10px; color: #333; padding: 1px 1px; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.ws-castbl .ws-cast-lbl { width: 28px; text-align: right; font-size: 9px; color: #888; padding-right: 5px; }
.ws-castbl .ws-cast-icons td { height: 20px; }
.ws-castbl img.unit { width: 18px; height: 18px; vertical-align: middle; }
.ws-castbl tr.lost td { color: #c00; }
.ws-castbl tr.surv td { color: #2a7d2a; }
.ws-castbl td.ws-cast-heroc { background: #fdf6e3; border-left: 1px solid #e0cda0; }
.ws-castbl tr.lost td.ws-cast-heroc, .ws-castbl tr.surv td.ws-cast-heroc { background: #fdf6e3; }
.ws-herohp { margin: 4px 0 0; font-size: 11px; color: #555; }
.ws-herohp .ws-herohp-lost { color: #c00; }
.ws-herohp.dead { color: #c00; font-weight: bold; }

/* Retrain-estimate bar (play-as toggle + village dropdown) + result note */
.ws-rtbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 10px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; font-size: 11px; color: #555; }
.ws-rt-lbl { font-weight: bold; }
.ws-rt-toggle { display: inline-flex; border: 1px solid #bbb; border-radius: 3px; overflow: hidden; }
.ws-rt-opt { border: 0; background: #fff; color: #555; cursor: pointer; padding: 3px 10px; font-size: 11px; }
.ws-rt-opt + .ws-rt-opt { border-left: 1px solid #bbb; }
.ws-rt-opt.sel { background: #689f38; color: #fff; font-weight: bold; }
.ws-rt-vil select { font-size: 11px; }
.ws-rt-time { margin: 0; color: #333; font-size: 12px; }
.ws-rt-note { margin: 4px 0 0; color: #888; font-size: 11px; font-style: italic; }

/* Result army/stats cards (T4-style banners in our palette) */
.ws-rescard { margin: 0 0 10px; }
.ws-rescard .ws-cardhead { font-size: 13px; }
.ws-rescard-ico { width: 18px; height: 18px; object-fit: cover; object-position: top; vertical-align: middle; }
.ws-cardhead .ws-cas-sub { color: #666; font-weight: normal; font-size: 11px; margin-left: 4px; }
.ws-cardhead.ws-head-stat { background: linear-gradient(#ededed,#dcdcdc); color: #333; }
.ws-stat-tbl { width: 100%; border-collapse: collapse; font-size: 11px; margin: 0 0 6px; }
.ws-stat-tbl th, .ws-stat-tbl td { padding: 3px 8px; border-bottom: 1px solid #eee; text-align: right; }
.ws-stat-tbl th:first-child, .ws-stat-tbl td:first-child { text-align: left; color: #555; }
.ws-stat-tbl thead th { background: #f5f5f5; font-weight: bold; color: #333; }
.ws-stat-extra { margin: 0; }

/* Combat Simulator — hero equipment slots + picker */
.ws-eq { display: flex; align-items: center; gap: 4px; margin: 2px 0; }
.ws-eq .ws-lbl { color: #888; font-size: 10px; margin-right: 4px; }
.ws-eqslot { width: 34px; height: 34px; padding: 0; cursor: pointer; background: #fff; border: 1px solid #bbb; border-radius: 4px; }
.ws-eqslot:hover { border-color: #888; }
.ws-eqslot.equipped { border-color: #689f38; box-shadow: 0 0 0 1px #8bc34a inset; }
.ws-eqthumb { display: block; width: 100%; height: 100%; }
.ws-eqthumb img { width: 30px; height: 30px; vertical-align: top; }
.ws-eqpicker { position: absolute; z-index: 9999; max-height: 280px; overflow-y: auto; min-width: 300px; max-width: 360px; background: #fff; border: 1px solid #888; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.25); font-size: 11px; }
.ws-eqopt { display: flex; align-items: center; gap: 6px; padding: 3px 8px; cursor: pointer; color: #333; }
.ws-eqopt:hover { background: #eef6e6; }
.ws-eqopt img { width: 22px; height: 22px; }
.ws-eqpow { margin-left: auto; color: #689f38; font-weight: bold; }
.ws-eqnone { color: #c00; }

/* equipment picker rows: name + full effects */
.ws-eqopt .ws-eqname { font-weight: bold; }
.ws-eqopt .ws-eqeff { margin-left: auto; color: #689f38; font-size: 10px; white-space: nowrap; }

.wave-builder-addwave { display: inline-block; text-decoration: none; }
.a2b p.btn.wave-builder-okrow { display: flex; align-items: center; gap: 10px; }
#wave-builder-toggle { margin-left: auto; }
#wave-builder-toggle .wave-builder-cost img { vertical-align: middle; margin-left: 2px; }
#wave-builder-toggle[disabled] { cursor: not-allowed; opacity: .55; }
#wave-builder-toggle .wave-builder-lock { display: none; }
.wave-builder-js-only { display: none; }
#waveBuilderWrap.wave-builder-collapsed .waveBuilderPanel { display: none; }
#waveBuilderWrap .waveBuilderPanel { margin-top: 8px; background: #fff; }
#waveBuilderWrap .waveBuilderHeader { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 12px; background: url(img/a/c2.gif) repeat; border: 1px solid #c0c0c0; padding: 2px 7px; }
#waveBuilderWrap .waveBuilderHeader b { font-size: 13px; color: #000; }
#waveBuilderWrap .waveBuilderHName { letter-spacing: .2px; }
#waveBuilderWrap .waveBuilderHStat { white-space: nowrap; color: #444; }
#waveBuilderWrap .waveBuilderHPush { margin-left: auto; }
#waveBuilderWrap .waveBuilderCard { border: 1px solid #c0c0c0; background: #fff; padding: 5px 7px; margin-bottom: 5px; }
#waveBuilderWrap .waveBuilderCardHead { display: flex; align-items: center; gap: 6px; font-size: 12px; background: #f3f3f3; border-bottom: 1px solid #c0c0c0; padding: 4px 7px; margin: -5px -7px 6px -7px; }
#waveBuilderWrap .waveBuilderCardHead strong { color: #000; }
#waveBuilderWrap .waveBuilderCardWarn { color: #c00; font-size: 11px; font-weight: bold; }
#waveBuilderWrap .waveBuilderCardWarn:not(:empty) { padding: 3px 0 1px; }
#waveBuilderWrap .waveBuilderHeadActions { margin-left: auto; display: flex; gap: 6px; }
#waveBuilderWrap .waveBuilderHeadActions a { text-decoration: none; font-size: 13px; color: #555; }
#waveBuilderWrap .waveBuilderHeadActions a.wave-builder-x { color: #b00; }
#waveBuilderWrap .waveBuilderHeadActions a.wave-builder-apply { font-size: 14px; line-height: 1; color: #4d7a00; }
.wave-builder-apply-pop .wave-builder-apply-list { color: #555; font-weight: bold; margin-top: 4px; }
.wave-builder-apply-pop .tpop-actions { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; }
#waveBuilderWrap .wave-builder-act .vgroup-tgl-ico { background-image: url("img/a/opened.gif"); }
#waveBuilderWrap .wave-builder-arr-up .vgroup-tgl-ico { transform: rotate(180deg); }
#waveBuilderWrap .wave-builder-type { font-size: 11px; }
#waveBuilderWrap .waveBuilderTroopTable { width: 100%; border-collapse: collapse; background: transparent; margin: 2px 0; }
#waveBuilderWrap .waveBuilderTroopTable td { background: transparent; border: 0; padding: 1px 2px; white-space: nowrap; vertical-align: middle; font-size: 11px; }
#waveBuilderWrap .waveBuilderTroopTable input.text { width: 40px; font-size: 11px; padding: 1px 2px; }
#waveBuilderWrap .waveBuilderTroopTable input.wave-builder-over { background: #ffe0e0; border-color: #c00; color: #c00; }
#waveBuilderWrap .wave-builder-have { font-size: 11px; color: #999; cursor: pointer; }
#waveBuilderWrap .wave-builder-hero-chk { vertical-align: middle; margin: 0 0 0 1px; }
#waveBuilderWrap .wave-builder-have.wave-builder-have-ok { color: #71D000; font-weight: bold; }
#waveBuilderWrap .wave-builder-have.wave-builder-have-ok:hover { color: #00BC00; }
#waveBuilderWrap .wave-builder-cata { font-size: 11px; display: flex; align-items: center; gap: 6px; margin: 6px -7px -5px; padding: 5px 7px; border-top: 1px solid #c0c0c0; background: #f5f5f5; }
#waveBuilderWrap .wave-builder-cata-lbl { color: #444; }
#waveBuilderWrap .waveBuilderActions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #f3f3f3; border-top: 1px solid #c0c0c0; padding: 8px; margin: 8px 0 0 0; }
#waveBuilderWrap .wave-builder-actions-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
#waveBuilderWrap .waveBuilderWarn { color: #a00; font-size: 11px; }
#waveBuilderWrap .wave-builder-msg { font-size: 11px; color: #444; }
#waveBuilderWrap .wave-builder-msg.wave-builder-err { color: #c00; }
#waveBuilderWrap .wave-builder-msg.wave-builder-ok { color: #080; }
#wave-builder-toggle, .wave-builder-addwave, .wave-builder-send { font-family: inherit; }
.wave-builder-addwave.trav_buttons:hover, .wave-builder-send:hover { border-color: #71d000; }
#waveBuilderWrap .wave-builder-send[disabled] { cursor: not-allowed; opacity: .55; }
#waveBuilderWrap .waveBuilderActionsTop { border-top: 0; border-left: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0; margin: 0 0 8px 0; background: #F5F5F5; }
@media (max-width: 640px) { #waveBuilderWrap .waveBuilderTroopTable input.text { width: 34px; } }
.is-mobile #waveBuilderWrap .waveBuilderTroopTable input.text { width: 26px; padding: 0 1px; font-size: 10px; }
.is-mobile #waveBuilderWrap .waveBuilderTroopTable input.text:focus { width: 64px; font-size: 13px; }
.is-mobile #waveBuilderWrap .wave-builder-have { font-size: 9px; }
.is-mobile #waveBuilderWrap .wave-builder-cata { flex-wrap: wrap; gap: 0; }
.is-mobile #waveBuilderWrap .wave-builder-cata-lbl { flex: 1 1 100%; text-align: center; margin-bottom: 4px; }
.is-mobile #waveBuilderWrap .wave-builder-ctar { flex: 1 1 0; min-width: 0; }
.is-mobile #waveBuilderWrap .waveBuilderHeadActions { gap: 14px; }

/* ---- Rally Point: movement filters & pagination (rally_filter.js) ---- */
#build.gid16 #rpFilterBox { border:1px solid #bbb; background:#f5f5f5; margin:8px 0; font-family:Verdana,Arial,sans-serif; }
/* Filter-panel header — matches the farm-list header bar (.flHeader): c2.gif
   texture strip, bordered arrow cell on the left (closed.gif collapsed /
   opened.gif expanded), title, freeze toggle on the right. */
#build.gid16 .rpHeader { display:flex; align-items:stretch; line-height:24px; cursor:pointer; font-size:13px; font-weight:bold; color:#000; background:#ededed url(img/a/c2.gif) repeat-x left bottom; background-size:auto 100%; border-bottom:1px solid #bbb; }
#build.gid16 .rpArrow { display:flex; align-items:center; width:13px; padding:0 7px; border-right:1px solid #bbb; background:url(img/a/closed.gif) no-repeat center; mix-blend-mode:multiply; }
#build.gid16 .rpArrow.rpOpen { background-image:url(img/a/opened.gif); }
#build.gid16 .rpTitle { display:flex; align-items:center; padding:0 8px; color:#000; }
#build.gid16 .rpFreeze { display:flex; align-items:center; margin-left:auto; padding:0 7px; border-left:1px solid #bbb; cursor:pointer; opacity:.55; }
#build.gid16 .rpFreeze:hover { opacity:.85; }
#build.gid16 .rpFreeze.rpFrozen { opacity:1; }
#build.gid16 .rpFreezeIcon { display:inline-block; width:18px; height:18px; line-height:18px; text-align:center; }
#build.gid16 .rpFreezeIcon::before { content:"\275A\275A"; font-size:13px; color:#888; }
#build.gid16 .rpFreezeIcon.active::before { content:"\2744"; color:#4a90d9; font-size:16px; }
#build.gid16 .rpBody { background:#fff; }
#build.gid16 table.rpTabs { width:100%; table-layout:fixed; border-collapse:collapse; }
#build.gid16 table.rpTabs td.rpTab { padding:5px 0; text-align:center; font-size:11px; color:#888; background:#e6e6e6; border-bottom:3px solid #bbb; cursor:pointer; }
#build.gid16 table.rpTabs td.rpTabActive { background:#fff; border-bottom-color:#71d000; font-weight:bold; color:#000; }
#build.gid16 .rpPane { padding:5px 8px 4px; }
#build.gid16 table.rpGrid { width:100%; table-layout:fixed; border-collapse:collapse; }
#build.gid16 table.rpGrid td { padding:2px 0; vertical-align:middle; }
#build.gid16 label.rpFlt { display:block; padding:2px 4px; cursor:pointer; font-size:11px; white-space:nowrap; }
#build.gid16 label.rpFlt:hover { background:#f0f0f0; }
#build.gid16 label.rpFlt input[type=checkbox] { vertical-align:middle; margin:0 3px 0 0; }
#build.gid16 label.rpFlt img { vertical-align:middle; margin:0 2px 0 0; width:14px; height:14px; }
#build.gid16 label.rpFlt .rpL { vertical-align:middle; color:#333; }
#build.gid16 label.rpFlt .rpC { vertical-align:middle; font-size:9px; font-weight:bold; color:#689f38; margin-left:2px; }
#build.gid16 label.rpFlt.off .rpL { color:#aaa; text-decoration:line-through; }
#build.gid16 label.rpFlt.off img { opacity:.4; }
#build.gid16 .rpTroop { display:flex; align-items:center; gap:6px; padding:4px 4px; border-top:1px solid #eee; font-size:11px; }
#build.gid16 .rpTroop .rpTroopApply { display:flex; align-items:center; cursor:pointer; white-space:nowrap; }
#build.gid16 .rpTroop .rpTroopApply input { margin:0 3px 0 0; vertical-align:middle; }
#build.gid16 .rpTroop .rpTroopApply img { width:14px; height:14px; margin:0 4px 0 0; vertical-align:middle; }
#build.gid16 .rpTroop .rpL { color:#333; }
#build.gid16 .rpTroop .rpTroopOp { font-size:11px; border:1px solid #bbb; background:#fff; padding:1px; }
#build.gid16 .rpEmptyMsg { padding:8px; text-align:center; color:#888; font-size:11px; font-style:italic; }
#build.gid16 .rpPageActions { display:flex; gap:6px; margin:4px 0 10px; }
#build.gid16 .rpLoadMore { flex:1 1 auto; text-align:center; padding:8px 6px; cursor:pointer; color:#444; background:#f3f3f3; border:1px solid #b9b9b9; font-size:11px; user-select:none; }
#build.gid16 .rpLoadMore:hover { background:#e8e8e8; color:#000; }
#build.gid16 .rpJumpLast { flex:0 0 auto; text-align:center; padding:8px 12px; cursor:pointer; color:#444; background:#f3f3f3; border:1px solid #b9b9b9; font-size:11px; user-select:none; white-space:nowrap; }
#build.gid16 .rpJumpLast:hover { background:#e8e8e8; color:#000; }
#build.gid16 .rpShowingBanner { text-align:center; font-size:11px; color:#555; padding:4px 0; }
#build.gid16 .rpLoadMoreError { margin:4px 0; padding:6px 8px; background:#fdecea; border:1px solid #c99; color:#733; font-size:11px; text-align:center; }

/* Rally Point section header — plain title + pager on the right. */
#build.gid16 .rpSecHead { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:10px; margin-bottom: 10px; }
#build.gid16 .rpSecHead h4 { margin:0 0 4px; }
#build.gid16 .rpPager { display:flex; gap:2px; flex-wrap:wrap; align-items:center; }
#build.gid16 .rpPagerBottom { margin:6px 0 14px; justify-content:flex-end; }
#build.gid16 a.rpPg { display:inline-block; min-width:14px; padding:2px 6px; border:1px solid #bbb; background:#f5f5f5; color:#333; text-decoration:none; font-size:11px; text-align:center; }
#build.gid16 a.rpPg:hover { background:#e8e8e8; color:#000; }
#build.gid16 a.rpPg.rpPgCur { background:#689f38; color:#fff; border-color:#689f38; font-weight:bold; cursor:default; }
#build.gid16 a.rpPg.rpPgDis { color:#bbb; background:#f0f0f0; cursor:default; }

/* Report-list reward icon (adventure won-item, new village). Sized to match the
   iReport sprite cell so rows stay aligned. See Templates/Notice/all.tpl. */
img.iReportImg { width:18px; height:18px; vertical-align:middle; object-fit:contain; }

/* Fast build ("build by clicking the field") Gold Club toggle — dorf1/dorf2.
   Icon-only, floated to the left of the village name. cone.gif is a 40x20 sprite
   (colored cone = on | gray cone = off); show one 20px half via background-position.
   See Templates/fastbuild_toggle.tpl. */
a.fastbuild-toggle {
    display:inline-block; vertical-align:middle; width:20px; height:20px;
    margin:0 10px 0 0; text-indent:-9999px; overflow:hidden;
    background:url("img/a/cone.gif") no-repeat -20px 0; /* off: gray (right half) */
    position:relative; z-index:1;
}
/* dorf2's village name <h1> is z-index:30 but the building maps are z-index:98/99,
   so they intercept clicks on the cone. Lift the <h1> above the maps. */
div.village2 h1 { z-index:120; }
a.fastbuild-toggle:hover { opacity:0.8; }
a.fastbuild-toggle.on { background-position:0 0; } /* on: colored (left half) */

#reorder-dim {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    z-index:9990; pointer-events:none;
}

#reorder-tools { display:none; }
#reorder-tools.editing { display:block; }
#reorder-top {
    position:fixed; top:14px; left:0; right:0; z-index:100001;
    text-align:center; pointer-events:none; text-shadow:0 1px 3px rgba(0,0,0,0.9);
}
#reorder-top .reorder-top-box { display:inline-block; }
#reorder-top .reorder-title { color:#fff; font-size:19px; font-weight:bold; }
#reorder-top .reorder-sub { color:#eee; font-size:13px; margin-top:2px; }
#reorder-top .reorder-name { color:#ff9a3c; font-weight:bold; }
#reorder-bottom {
    position:fixed; bottom:18px; left:0; right:0; z-index:100001;
    text-align:center;
}
#reorder-bottom .trav_buttons { margin:0 5px; padding-top:5px; padding-bottom:5px; font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,0.45); }

.build_rearrange { margin:12px 0; }
a.reorder-enter,
a.reorder-enter:link,
a.reorder-enter:visited,
a.reorder-enter:hover {
    display:inline-block; padding-top:4px; padding-bottom:4px; text-decoration:none; color:#7a7a7a;
}
a.reorder-enter:hover { opacity:0.9; }

#village_map.rearrange .map1,
#village_map.rearrange .map2 { pointer-events:none; }
#village_map.rearrange #levels { display:none; }
#village_map.rearrange .building[data-slot] { pointer-events:none; }

#village_map.rearrange .building[data-slot] { transition:left .35s ease, top .35s ease; }
#village_map.rearrange .building[data-slot].iso { transition:none; }

#village_map.rearrange .building[data-slot].bld-selected {
    filter:
        drop-shadow(1.5px 0 0 #ff7a3c) drop-shadow(-1.5px 0 0 #ff7a3c)
        drop-shadow(0 1.5px 0 #ff7a3c) drop-shadow(0 -1.5px 0 #ff7a3c)
        drop-shadow(1.5px 1.5px 0 #ff7a3c) drop-shadow(-1.5px -1.5px 0 #ff7a3c);
}
#village_map.rearrange .building[data-slot].bld-selected { z-index:90; }

#village_map.rearrange.selecting .building[data-slot]:not(.bld-selected):not(.iso) { opacity:0.4; }

div.village2 div#village_map .reorder-dot {
    display:none; position:absolute; width:64px; height:28px; margin:68px 0 0 5px;
    box-sizing:border-box; border-radius:50%; pointer-events:none; z-index:95;
    background:rgba(125,225,125,0.26); border:2px dashed rgba(90,185,90,0.75);
    transition:background .12s, border-color .12s;
}
div.village2 div#village_map .reorder-dot.dot-occupied { background:transparent; border-color:rgba(90,185,90,0.12); }
div.village2 div#village_map.rearrange .reorder-dot { display:block; pointer-events:auto; cursor:pointer; }
div.village2 div#village_map .reorder-dot.dot-blocked { display:none; }
#village_map.rearrange .building.iso { background:none; }
div.village2 div#village_map .reorder-dot.dot-hover { background:rgba(95,235,95,0.80); border-color:rgba(25,135,25,1); }
div.village2 div#village_map .reorder-dot.dot-own { background:transparent; border-color:transparent; }
#village_map.rearrange .building.bld-hover {
    filter:drop-shadow(1px 0 0 #ffd27a) drop-shadow(-1px 0 0 #ffd27a)
           drop-shadow(0 1px 0 #ffd27a) drop-shadow(0 -1px 0 #ffd27a);
}

.reorder-msg {
    position:fixed; top:14px; left:50%; transform:translateX(-50%);
    display:none; z-index:9999; max-width:320px;
    background:#fff; border:1px solid #bbb; border-radius:4px;
    color:#333; font-size:11px; line-height:15px; padding:6px 12px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
}

/* Fast-build hover tip (icon cost row) — matches the in-game #g-tip dark tooltip. */
.fastbuild-tip {
    position:absolute; z-index:9999; display:none;
    background:#333; border:0; border-radius:3px;
    color:#fff; font-size:10px; line-height:14px;
    padding:2px 7px; white-space:nowrap; pointer-events:none;
}
.fastbuild-tip b { color:#fff; }
.fastbuild-tip img { vertical-align:middle; margin-right:1px; }
.fastbuild-tip .fb-low { color:#ff6b6b; } /* resources the village can't afford */
/* "All resources" total that follows the crop cost (building screen + fast-build tip).
   A real PNG, not a sprite class like r1-r4, so it needs its own baseline alignment. */
img.res_all { vertical-align:middle; margin-right:1px; }

/* Keep the build-queue box (and its fast-build message) below the floated
   Production/Troops boxes on dorf1, instead of tucked into the right column. */
#buildqueue { clear:both; }

/* Fast-build inline message shown inside #buildqueue — plain text, no box,
   left-aligned with the "Building:" header. */
#buildqueue .fb-msg {
    margin:0; padding:4px 0 1px 2px; background:none; border:0;
    font-size:11px; font-weight:bold; color:#333; text-align:left;
}
#buildqueue .fb-msg-err { color:#c00; }
#buildqueue .fb-msg-ok  { color:#3f6d24; }

/* ------------------------------------------------------------------ *
 * Top-down world map (karte.php + map.js). Gray Travian palette.
 * ------------------------------------------------------------------ */
#tdmapView { float:left; width:552px; position:relative; }
html:not(.is-mobile) #tdmapView { margin-top:43px; }
#tdmapView .tdmapForm { position:absolute; top:8px; right:8px; z-index:20; box-sizing:border-box; display:flex; align-items:center; gap:6px; padding:0; background:none; border:none; text-align:left; font-size:12px; color:#333; text-shadow:0 1px 1px rgba(255,255,255,0.85); }
#tdmapView .tdmap-coords { display:flex; align-items:center; gap:6px; }
html:not(.is-mobile) #tdmapView .tdmapForm { background:rgba(237,237,237,0.96); border:1px solid #bbb; border-radius:3px; padding:4px 7px; text-shadow:none; }
html:not(.is-mobile) #tdmap-zoom { background:rgba(237,237,237,0.96); border:1px solid #bbb; border-radius:3px; padding:4px 7px; }
html:not(.is-mobile) #tdmapView #tdmap-coordtoggle { display:none !important; }
#tdmapView .tdmapForm .trav_buttons, #tdmap-zoom .trav_buttons, #tdmapView .tdmapForm input[type=text] {
	box-sizing:border-box !important; height:24px !important; min-height:24px !important; max-height:24px !important; margin:0; vertical-align:top;
}
.is-mobile #tdmapView .tdmapForm .trav_buttons, .is-mobile #tdmap-zoom .trav_buttons, .is-mobile #tdmapView .tdmapForm input[type=text] {
	height:32px !important; min-height:32px !important; max-height:32px !important;
}
#tdmapView .tdmapForm button.trav_buttons, #tdmap-zoom button.trav_buttons { display:inline-flex; align-items:center; justify-content:center; padding-top:0; padding-bottom:0; line-height:1; }
#tdmapView .tdmapForm .trav_buttons, #tdmap-zoom .trav_buttons { min-width:40px !important; padding-left:10px !important; padding-right:10px !important; }
#tdmapView .tdmapForm input[type=text] { width:46px; padding-top:0; padding-bottom:0; text-align:center; border:1px solid #71d000; }
#tdmapView .tdmapForm .td-cropfinder, #tdmapView .tdmapForm .tdmap-iconbtn { padding-left:7px; padding-right:7px; line-height:0; }
#tdmapView .tdmapForm .td-cropfinder img { display:block; width:20px; height:20px; }
#tdmapView .tdmapForm .tdmap-iconbtn { line-height:1; font-size:15px; }
#tdmap-coordtoggle { display:none; }
#tdmap { position:relative; box-sizing:border-box; width:552px; height:540px; margin:0 auto; overflow:hidden; border:1px solid #bbb; background:#e6e6e6; cursor:pointer; touch-action:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; }
#tdmap.td-dragging { cursor:pointer; }
#tdmap.td-large { width:660px; height:660px; }
#tdmap-surface { position:absolute; left:0; top:0; width:100%; height:100%; will-change:transform; }
#tdmap-blocks { position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; }
#tdmap .td-block { position:absolute; width:600px; height:600px; z-index:0; pointer-events:none; }
#tdmap .td-tile { position:absolute; width:60px; height:60px; box-shadow:inset 0 0 0 1px rgba(80,80,80,0.18); }
#tdmap .td-tile.td-tile-hover { background:rgba(125,225,110,0.20); z-index:2; }
#tdmap .td-tile.td-tile-active { animation:td-blink 1.6s ease-in-out infinite; z-index:2; }
@keyframes td-blink { 0%,100% { background:rgba(125,225,110,0.14); } 50% { background:rgba(125,225,110,0.42); } }
#tdmap .td-tile, #tdmap-surface img { image-rendering:-webkit-optimize-contrast; image-rendering:crisp-edges; image-rendering:pixelated; }
#tdmap .td-feat { position:absolute; left:0; top:0; width:60px; height:60px; pointer-events:none; }
#tdmap .td-border { position:absolute; left:0; top:0; width:60px; height:60px; box-sizing:border-box; border:2px dashed transparent; pointer-events:none; z-index:3; }
#overview td.sub { position:relative; }
.rptLoot { position:absolute; right:6px; top:50%; transform:translateY(-50%); line-height:0; }
/* Map tile-detail report rows: type icon + date, then the loot sack. The date
   link gets a fixed min-width (a full "dd.mm.yy hh:mm" plus a little), so the
   sacks line up in a column right after it instead of at the popup's far edge. */
table.rep tbody td { white-space:nowrap; }
table.rep tbody td img { vertical-align:middle; }
table.rep tbody td a { display:inline-block; min-width:15ch; }
table.rep .rptLootMap { display:inline-block; margin-left:4px; line-height:0; vertical-align:middle; }
.plusFunctions .gcBenefits { margin:4px 0 2px 0; padding-left:18px; text-align:left; font-size:11px; color:#333; }
.plusFunctions .gcBenefits li { margin:1px 0; list-style:disc; }
#tdmap .td-rel1 { border-color:#f1c40f; }
#tdmap .td-rel2 { border-color:#1e63d0; }
#tdmap .td-rel3 { border-color:#3a8fd0; }
#tdmap .td-rel4 { border-color:#e22020; }
#tdmap .td-rel5 { border-color:#999; }
/* Movement markers sit along the bottom edge of the tile, left to right, one slot per
   in-flight movement kind (attack, then reinforcement, then return, then scout). */
#tdmap .td-mark { position:absolute; bottom:1px; width:18px; height:18px; pointer-events:auto; cursor:pointer; z-index:4; }
#tdmap .td-mark-s0 { left:1px; }
#tdmap .td-mark-s1 { left:19px; }
#tdmap .td-mark-s2 { left:37px; }
#tdmap .td-adv { position:absolute; left:1px; top:1px; width:18px; height:18px; pointer-events:auto; cursor:pointer; z-index:4; }
#tdmap .td-adv-x { left:22px; }
/* Source PNG is exactly 20x22, so it paints 1:1 with no browser rescale (any other
   size here re-introduces the blur). Slightly taller than the 18px marker icons —
   that is the art's native 20:22 aspect. */
#tdmap .td-farm { position:absolute; left:1px; top:1px; width:20px; height:22px; pointer-events:auto; cursor:default; z-index:4; }
/* every list holding this tile is paused -> greyed out */
#tdmap .td-farm-off { filter:grayscale(100%); opacity:0.55; }
/* The sizes above are full-zoom pixels; the tile shrinks with the zoom level, so the
   overlays have to shrink with it or a badge swallows the whole tile at 50%.
   Downscaled art needs the smooth filter back (the pixelated default turns it to mush). */
#tdmap.td-z75 .td-mark, #tdmap.td-z50 .td-mark,
#tdmap.td-z75 .td-adv, #tdmap.td-z50 .td-adv,
#tdmap.td-z75 .td-farm, #tdmap.td-z50 .td-farm { image-rendering:auto; }
#tdmap.td-z75 .td-mark { width:14px; height:14px; }
#tdmap.td-z75 .td-mark-s1 { left:15px; }
#tdmap.td-z75 .td-mark-s2 { left:29px; }
#tdmap.td-z75 .td-adv { width:14px; height:14px; }
#tdmap.td-z75 .td-adv-x { left:17px; }
#tdmap.td-z75 .td-farm { width:15px; height:17px; }
#tdmap.td-z50 .td-mark { width:9px; height:9px; }
#tdmap.td-z50 .td-mark-s1 { left:10px; }
#tdmap.td-z50 .td-mark-s2 { left:19px; }
#tdmap.td-z50 .td-adv { width:9px; height:9px; }
#tdmap.td-z50 .td-adv-x { left:12px; }
#tdmap.td-z50 .td-farm { width:10px; height:11px; }
#tdmap-fallback { text-align:center; color:#666; font-size:11px; margin:6px 0; }
.td-fs { padding-left:8px; padding-right:8px; }
body.td-fs-lock { overflow:hidden; }
/* Full screen: both toolbars drop out of their absolute placement and share one grid row
   (zoom left, coordinates/tools right) with the map filling the row below - keeping the
   zoom absolute here would hide it underneath the coordinate bar. */
#tdmapView.td-fs-on {
	position:fixed; top:0; right:0; bottom:0; left:0; width:auto; height:auto;
	z-index:900; margin:0; padding:0; float:none;
	display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr; background:#e6e6e6;
}
#tdmapView.td-fs-on #tdmap-zoom { position:static; grid-column:1; grid-row:1; border:1px solid #bbb; border-right:none; }
#tdmapView.td-fs-on .tdmapForm { position:static; grid-column:2; grid-row:1; width:auto; border:1px solid #bbb; }
#tdmapView.td-fs-on #tdmap, #tdmapView.td-fs-on #tdmap.td-large {
	grid-column:1 / -1; grid-row:2; width:auto; height:auto; margin:0; border:none;
}
#tdmap-yl { position:absolute; left:0; top:0; bottom:0; width:24px; z-index:6; overflow:hidden; pointer-events:none; background:linear-gradient(#ededed,#dcdcdc); border-right:1px solid #bbb; font-size:10px; color:#333; }
#tdmap-xb { position:absolute; left:0; right:0; bottom:0; height:24px; z-index:5; overflow:hidden; pointer-events:none; background:linear-gradient(#ededed,#dcdcdc); border-top:1px solid #bbb; font-size:10px; color:#333; }
.td-ruler-inner { position:absolute; left:0; top:0; right:0; bottom:0; will-change:transform; }
.td-ylabel { position:absolute; left:0; right:0; box-sizing:border-box; border-bottom:1px solid #c4c4c4; display:flex; align-items:center; justify-content:center; }
.td-xlabel { position:absolute; top:0; bottom:0; box-sizing:border-box; border-left:1px solid #c4c4c4; display:flex; align-items:center; justify-content:center; }
#tdmap::after { content:''; position:absolute; left:0; bottom:0; width:24px; height:24px; z-index:7; pointer-events:none; background:linear-gradient(#ededed,#dcdcdc); border-top:1px solid #bbb; border-right:1px solid #bbb; }
#tdmap-zoom { position:absolute; left:30px; top:8px; z-index:20; display:flex; align-items:center; gap:4px; margin:0; padding:0; background:none; border:none; }
#tdmap-zoom .tdmap-zoom-btn { font-size:16px; }
#tdmap-zoom .tdmap-zoom-pct { min-width:50px; font-size:12px; }
#tdmap-zoom .tdmap-zoom-pct[disabled] { opacity:0.55; cursor:default; }
html.is-mobile:has(#tdmapView), body.is-mobile:has(#tdmapView) { overflow:hidden; }
.is-mobile #tdmapView { float:none; width:100%; padding:0; box-sizing:border-box; }
.is-mobile #tdmapView #tdmap-fs { display:none !important; }
.is-mobile #tdmap-coordtoggle { display:inline-flex; align-items:center; justify-content:center; }
.is-mobile #tdmapView .tdmap-coords { display:none; position:absolute; top:100%; right:0; margin-top:5px; gap:5px; padding:6px 8px; background:rgba(237,237,237,0.97); border:1px solid #bbb; border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,0.3); }
.is-mobile #tdmapView .tdmap-coords.open { display:flex; }
/* Full-height map: viewport minus the fixed top bar (measured by mobile.js into
   --m-topbarh; 73px is the pre-JS fallback) minus the fixed bottom nav. Without
   the nav term the map's bottom 58px — i.e. the whole #tdmap-xb x-axis ruler —
   ended up hidden behind the nav bar. */
.is-mobile #tdmap, .is-mobile #tdmap.td-large {
	width:100%; border:none;
	height:calc(100dvh - var(--m-topbarh, 73px) - var(--m-navh, 58px));
}

#td-pop { position:absolute; z-index:1000; background:#fff; border:1px solid #bbb; border-radius:3px; font-size:11px; color:#333; min-width:170px; max-width:280px; box-shadow:0 2px 8px rgba(0,0,0,0.35); pointer-events:none; }
#td-pop .td-pop-h { background:linear-gradient(#ededed,#dcdcdc); color:#000; font-weight:bold; padding:3px 6px; border-bottom:1px solid #ddd; border-radius:3px 3px 0 0; }
#td-pop .td-pop-b { padding:4px 6px; }
#td-pop table { width:100%; border-collapse:collapse; }
#td-pop th { text-align:left; font-weight:normal; color:#333; padding:1px 6px 1px 0; vertical-align:top; white-space:nowrap; }
#td-pop td { text-align:left; color:#000; padding:1px 0; }
#td-pop .td-animal { display:inline-block; margin:0 4px 2px 0; white-space:nowrap; }
.tz-pop-box { background:#fff; border:1px solid #bbb; border-radius:4px; box-shadow:0 4px 18px rgba(0,0,0,0.55); padding:10px 14px 14px; color:#333; }
.tz-pop-h { margin:-10px -14px 10px; padding:6px 14px; background:linear-gradient(#ededed,#dcdcdc); border-bottom:1px solid #ddd; border-radius:4px 4px 0 0; color:#333; font-weight:bold; font-size:13px; }
.tz-pop-close { position:absolute; top:3px; right:9px; padding:0; border:none; background:none; font-size:20px; font-weight:bold; line-height:1; color:#666; text-decoration:none; cursor:pointer; }
.tz-pop-close:hover { color:#a12; }

#td-sheet { position:fixed; inset:0; z-index:1100; display:none; background:rgba(0,0,0,0.35); }
#td-sheet .td-sheet-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:90%; max-width:340px; max-height:88%; overflow:auto; box-sizing:border-box; }
#td-sheet .tz-pop-h { padding-right:30px; }
#td-sheet .td-pop-b table { width:100%; border-collapse:collapse; font-size:13px; }
#td-sheet .td-pop-b th { text-align:left; font-weight:normal; color:#333; padding:3px 10px 3px 0; vertical-align:top; white-space:nowrap; }
#td-sheet .td-pop-b td { text-align:left; color:#000; padding:3px 0; }
#td-sheet .td-animal { display:inline-block; margin:0 6px 3px 0; white-space:nowrap; }
#td-sheet .td-sheet-actions { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
#td-sheet .td-sheet-act, #td-sheet .td-sheet-act:link, #td-sheet .td-sheet-act:visited { display:block; padding-top:7px; padding-bottom:7px; text-decoration:none; color:#7a7a7a; }
#td-sheet .td-sheet-act.mapmenu-edit, #td-sheet .td-sheet-act.mapmenu-edit:visited { color:#1f7a1f; }
#td-atk-pop { position:absolute; z-index:1001; background:#fff; border:1px solid #c00; border-radius:3px; font-size:11px; color:#333; box-shadow:0 2px 8px rgba(0,0,0,0.4); pointer-events:none; }
#td-atk-pop .td-atk-h { background:linear-gradient(#e74c3c,#c0392b); color:#fff; font-weight:bold; padding:3px 8px; border-bottom:1px solid #a5281b; border-radius:3px 3px 0 0; }
#td-atk-pop .td-atk-b { padding:4px 8px; white-space:nowrap; font-weight:bold; }
#td-atk-pop .td-atk-eta { color:#c00; margin-left:8px; font-weight:normal; }
#td-atk-pop .td-atk-cd { font-weight:bold; }
/* Popup colour follows the movement: scout grey, troops-returning green (attack and
   reinforcement keep the red above). */
#td-atk-pop.td-atk-scout { border-color:#bbb; }
#td-atk-pop.td-atk-scout .td-atk-h { background:linear-gradient(#ededed,#dcdcdc); color:#333; border-bottom-color:#bbb; }
#td-atk-pop.td-atk-scout .td-atk-eta { color:#666; }
#td-atk-pop.td-atk-ret { border-color:#2e7d32; }
#td-atk-pop.td-atk-ret .td-atk-h { background:linear-gradient(#43a047,#2e7d32); border-bottom-color:#1b5e20; }
#td-atk-pop.td-atk-ret .td-atk-eta { color:#2e7d32; }
#td-adv-pop { position:absolute; z-index:1001; background:#fff; border:1px solid #2e7d32; border-radius:3px; font-size:11px; color:#333; box-shadow:0 2px 8px rgba(0,0,0,0.4); pointer-events:none; }
#td-adv-pop .td-adv-h { background:linear-gradient(#43a047,#2e7d32); color:#fff; font-weight:bold; padding:3px 8px; border-bottom:1px solid #1b5e20; border-radius:3px 3px 0 0; }
#td-adv-pop .td-adv-b { padding:4px 8px; white-space:nowrap; font-weight:bold; }
#td-farm-pop { position:absolute; z-index:1001; background:#fff; border:1px solid #bbb; border-radius:3px; font-size:11px; color:#333; box-shadow:0 2px 8px rgba(0,0,0,0.4); pointer-events:none; }
#td-farm-pop .td-farm-h { background:linear-gradient(#ededed,#dcdcdc); color:#000; font-weight:bold; padding:3px 8px; border-bottom:1px solid #bbb; border-radius:3px 3px 0 0; }
#td-farm-pop .td-farm-b { padding:4px 8px; white-space:nowrap; }
#td-farm-pop .td-farm-l { font-weight:bold; }
#td-farm-pop .td-farm-lp { font-weight:normal; color:#888; }
#td-pop .td-animal img.unit { width:18px; height:18px; vertical-align:middle; margin-right:1px; }

#mapmenu { position:absolute; z-index:1100; background:#fff; border:1px solid #bbb; border-radius:3px; min-width:150px; padding:2px 0; font-size:12px; box-shadow:0 2px 8px rgba(0,0,0,0.35); }
#mapmenu .mapmenu-item { display:block; padding:4px 12px; color:#333; text-decoration:none; white-space:nowrap; }
#mapmenu .mapmenu-item:hover { background:#f5f5f5; color:#000; text-decoration:none; }
#mapmenu .mapmenu-edit { color:#555; font-size:11px; }
#mapmenu .mapmenu-item:not(.mapmenu-edit) + .mapmenu-edit { border-top:1px solid #eee; }

/* Admin-only performance debug footer (Layer 2 — Templates/footer.tpl). Gray palette. */
.perf-debug { clear:both; margin:8px auto; max-width:760px; padding:4px 10px; border:1px solid #bbb; background:#f5f5f5; color:#333; font-size:11px; font-family:monospace; text-align:center; border-radius:3px; }
.perf-debug b { color:#000; }
.perf-debug .perf-sql { display:block; margin-top:2px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Reports: compact category filters pinned to the start of the Subject header bar
   (berichte.php). One icon per category (attacks / spies / reinforcements /
   adventures); clicking a category opens its fine-grained outcome list. */
#overview thead th { position:relative; }
#overview thead .rptfilter-grp { position:relative; float:left; margin-right:5px; }
#overview thead .rptfilter-grp:first-child { margin-left:2px; }
#overview thead .rptfilter { display:block; opacity:.5; cursor:pointer; list-style:none; }
#overview thead .rptfilter::-webkit-details-marker { display:none; }
#overview thead .rptfilter:hover, #overview thead .rptfilter.rptfilter-on { opacity:1; }
/* An open category reads as selected while its outcome list is showing. */
#overview thead .rptfilter-grp[open] > .rptfilter { opacity:1; background:#e6e6e6; }
#overview thead .rptfilter img { display:block; }
#overview thead .rptfilter img.iReportImg, #overview thead .rptfilter img.rpScoutIcon { width:18px; height:18px; }
/* Outcome dropdown — <details>, so it opens on CLICK only (never on hover) and
   needs no JS. The margin-top drops the panel clear of the header bar instead of
   hanging off the icon itself. */
#overview thead .rptfilter-menu { position:absolute; top:100%; margin-top:6px; left:0; z-index:20; min-width:180px; padding:3px 0; background:#fff; border:1px solid #bbb; box-shadow:0 2px 4px rgba(0,0,0,.25); }
#overview thead .rptfilter-menu .iconFilter { display:flex; align-items:center; gap:5px; padding:2px 6px; opacity:.6; text-decoration:none; white-space:nowrap; }
#overview thead .rptfilter-menu .iconFilter:hover { opacity:1; background:#f5f5f5; }
#overview thead .rptfilter-menu .iconFilter.iconFilterActive { opacity:1; background:#e6e6e6; }
#overview thead .rptfilter-menu .iconFilter img { display:block; }
#overview thead .rptfilter-menu .iconFilter img.rpScoutIcon { width:18px; height:18px; }
#overview thead .rptfilter-menu .iconFilter span { font-weight:normal; color:#333; }

/* Alliance military-events filter bar (Templates/Alliance/attacks.tpl): a row of
   outcome/scout icon filters on the left, the "hide unimportant" toggle on the right.
   NB: deliberately NOT inside #submenu — div.alliance #submenu img forces a 30x30
   alliance-menu sprite that would clobber the iReport icons. */
.filterWrapper { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin:4px 0 10px; }
.filterWrapper .reportFilter { display:flex; align-items:center; gap:4px; flex-wrap:wrap; background:#f5f5f5; border:1px solid #bbb; border-radius:3px; padding:3px 6px; height:35px; box-sizing:border-box; }
.filterWrapper .iconFilter { display:inline-block; opacity:.45; line-height:0; padding:0; border:0; background:none; cursor:pointer; }
.filterWrapper .iconFilter:hover, .filterWrapper .iconFilter.iconFilterActive { opacity:1; }
.filterWrapper .iconFilter img.iReport { display:block; }
/* Scout icons use transparent PNGs (scouts/tNN.png) generated from the white-bg
   JPEGs, so they match the transparent iReport sprites in the panel. */
.filterWrapper .iconFilter img.rpScoutIcon { display:block; width:18px; height:18px; }
.filterWrapper .reportFilter.unimportant .iconFilter { opacity:.85; padding:4px 6px; border:1px solid transparent; border-radius:3px; }
.filterWrapper .reportFilter.unimportant .iconFilter:hover { opacity:1; }
.filterWrapper .reportFilter.unimportant .iconFilter.iconFilterActive { opacity:1; border-color:#5b0; background:#eaf5e0; }
.filterWrapper img.filterNews { display:block; width:16px; height:16px; background:url("img/a/hideUnimportant.png") no-repeat center; }
/* Alliance reports pager: right-aligned «» like the reports list th.navi. */
table#offs tfoot td.navi { text-align:right; color:#C0C0C0; font-weight:bold; }
table#offs tfoot td.navi a { margin-left:4px; }

/* "Mark as unread" button under an opened report (berichte.php). */
.rpt_unread_form { text-align:center; margin-top:12px; }

/* Loss Calculator + Simulate + Mark-as-unread under battle reports
   (Templates/Notice/loss_calc.tpl, KAL-33). One button row; the details/form
   use display:contents so all three buttons are flex items on the same line,
   while the opened calculator table wraps to its own full-width row (order:1). */
.rpt-lc { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:12px 0 0; text-align:center; }
.rpt-lc .rpt-lc-btn { display:inline-block; text-decoration:none; margin:0 0 8px; cursor:pointer; font:700 13px/16px system-ui, -apple-system, Arial, sans-serif; color:#7a7a7a; padding:2px 20px; }
/* The details holds only its summary (the toggle button); the calculator table is a
   sibling flex item shown via details[open] ~, so `order` keeps it below the row. */
.rpt-lc-details { display:contents; }
.rpt-lc form { margin:0; }
.rpt-lc-details summary { list-style:none; }
.rpt-lc-details summary::-webkit-details-marker { display:none; }
.rpt-lc-tbl { display:none; order:1; width:100%; text-align:left; }
.rpt-lc-details[open] ~ .rpt-lc-tbl { display:table; }
/* Beat compact.css's `td.report_content table { margin-bottom:15px }` so the verdict
   row sits flush at the table bottom. */
div.reports table#report_surround td.report_content table.rpt-lc-tbl { margin-bottom:0; }
@media (max-width:640px) {
	.rpt-lc { flex-direction:column; align-items:stretch; }
	.rpt-lc .rpt-lc-btn, .rpt-lc form { width:100%; box-sizing:border-box; }
}
.rpt-lc-tbl thead th { font-weight:bold; }
.rpt-lc-tbl td.rpt-lc-role { width:50%; background:#F3F3F3; text-align:center; font-weight:bold; }
.rpt-lc-tbl td.rpt-lc-role-att { color:#FF8000; }
.rpt-lc-tbl td.rpt-lc-role-def { color:#71D000; }
.rpt-lc-tbl td.rpt-lc-cell { vertical-align:top; padding:5px 8px; }
.rpt-lc-unit { margin-bottom:5px; color:#333; }
.rpt-lc-uname { display:block; font-weight:bold; }
.rpt-lc-uname img.unit { vertical-align:middle; }
.rpt-lc-uval { display:block; padding-left:22px; }
.rpt-lc-utime { color:#7a7a7a; }
.rpt-lc-none { color:#7a7a7a; margin:0; }
.rpt-lc-total { border-top:1px solid #ddd; margin-top:6px; padding-top:5px; color:#333; }
.rpt-lc-time { display:block; color:#7a7a7a; }
.rpt-lc-loot { border-top:1px solid #ddd; margin-top:6px; padding-top:5px; color:#333; }
.rpt-lc-net { display:block; font-weight:bold; }
.rpt-lc-net-pos { color:#71D000; }
.rpt-lc-net-neg { color:#c00; }
.rpt-lc-pays { display:block; color:#7a7a7a; }
.rpt-lc-twrap { display:inline-block; vertical-align:top; }
.rpt-lc-eff { display:table; color:#7a7a7a; font-weight:bold; font-size:0.85em; cursor:help; border-bottom:1px dotted #999; }
.rpt-lc-tbl td.rpt-lc-verdict { background:#F3F3F3; padding:4px 8px; text-align:center; font-weight:bold; color:#333; }

/* Vote-for-gold page (vote.php / Templates/vote.tpl). Gray-palette cards. */
.vote-page { margin-top:14px; }
.vote-page .vote-intro { color:#333; margin:4px 0 12px; }
.vote-page .vote-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.vote-page .vote-card { border:1px solid #bbb; border-radius:3px; background:#f5f5f5; text-align:center; padding:10px; }
.vote-page .vote-card-name { font-weight:bold; color:#000; border-bottom:1px solid #ddd; padding-bottom:6px; margin-bottom:6px; }
.vote-page .vote-card-reward { color:#333; margin-bottom:8px; }
/* Look comes from the shared .trav_buttons (lang.css); this only adapts it to an <a>. */
.vote-page a.vote-btn { display:inline-block; padding-top:4px; padding-bottom:4px; text-decoration:none; }
.vote-page .vote-wait { color:#c00; font-size:11px; }
img.menu-gold-ico { vertical-align:middle; margin-right:2px; }
.vote-page .discord-card { margin:14px 0; }
.vote-page .discord-text { color:#333; font-size:11px; margin:6px 0 8px; }
.vote-page .discord-card a.vote-btn { margin-top:4px; }
.vote-page .discord-claimed { color:#5a0; font-weight:bold; font-size:12px; }
.vote-page table.vote-rank { width:246px; margin:18px auto 0; border-collapse:collapse; border:1px solid #bbb; }
.vote-page table.vote-rank td, .vote-page table.vote-rank th { padding:2px 7px; text-align:center; border:1px solid #ddd; }
.vote-page table.vote-rank td.pla { text-align:left; width:auto; }
.vote-page table.vote-rank td.ra { text-align:right; }
.vote-page table.vote-rank td.val { width:10%; }
.vote-page table.vote-rank th.vote-help { width:1%; cursor:pointer; border-right:1px solid #bbb; }
.vote-page table.vote-rank .vote-reset td { color:#333; font-size:11px; }
.vote-page table.vote-rank .vote-tiers td { color:#666; font-size:10px; }
.vote-page table.vote-rank .vote-reward { color:#b8860b; font-weight:bold; white-space:nowrap; }
.vote-page table.vote-rank tr.none td { color:#c0c0c0; background:#efefef; }
.vote-page table.vote-rank tr.none td.pla { color:#c0c0c0; }

/* Sidebar poll widget (Templates/poll.tpl + poll_box.tpl). Styled to match the
   Alliance Projects contributor tables (allianz.php?s=7, .ap-ctbl): a full-grid
   bordered table with the c2.gif thead header and native <progress> bars in the
   game green (#71D000). Sized for the 186px sidebar. */
#poll-widget { width:186px; margin:0 0 25px 0; }
#poll-widget .poll-ctbl { width:100%; border-collapse:collapse; background:#fff; border:1px solid #bbb; font-size:11px; table-layout:fixed; }
#poll-widget .poll-ctbl td, #poll-widget .poll-ctbl th { border:1px solid #ccc; padding:2px 5px; white-space:normal; line-height:normal; vertical-align:middle; }
/* Title bar — same c2.gif header texture as the Top 10 / projects tables. */
#poll-widget .poll-ctbl thead th { line-height:16px; text-align:center; color:#000; font-size:12px; background:#ededed url("img/a/c2.gif") repeat-x left bottom; background-size:auto 100%; border-bottom:1px solid #bbb; }
/* Question — light-gray subheader, like the projects' column-label row. */
#poll-widget .poll-q { color:#000; font-weight:bold; background:#f3f3f3; }
/* Voting rows: a narrow radio column + the option label. */
#poll-widget .poll-radio { width:1%; white-space:nowrap; text-align:center; padding:2px 4px; }
#poll-widget .poll-optname { color:#333; }
#poll-widget .poll-optname label { cursor:pointer; display:block; }
/* Footer (Vote button / totals) — light gray strip. */
#poll-widget .poll-foot td { background:#f3f3f3; color:#333; }
#poll-widget .poll-vote-btn.trav_buttons { min-height:24px; padding:2px 12px; }
#poll-widget .poll-reward { color:#b8860b; font-weight:bold; white-space:nowrap; margin-left:6px; }
#poll-widget .poll-gold-ico { display:inline-block; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,#ffd700,#ffb700); vertical-align:middle; }
#poll-widget .poll-expires { display:block; color:#666; font-size:10px; margin-top:3px; }
/* Result rows: option label, the native progress bar, then the % under the bar
   (mirrors the projects' ap-progress > ap-prog-txt). */
#poll-widget .poll-resname { color:#333; }
#poll-widget .poll-lbl { display:block; }
#poll-widget .poll-bar { display:block; width:100%; height:10px; margin-top:2px; -webkit-appearance:none; -moz-appearance:none; appearance:none; border:0; }
#poll-widget .poll-bar::-webkit-progress-bar { background:#e6e6e6; border:1px solid #ddd; }
#poll-widget .poll-bar::-webkit-progress-value { background:#71D000; }
#poll-widget .poll-bar::-moz-progress-bar { background:#71D000; }
#poll-widget .poll-pct { display:block; text-align:right; white-space:nowrap; color:#000; font-weight:bold; margin-top:1px; }
#poll-widget .poll-cnt { color:#888; font-weight:normal; }
/* The player's own choice — green hl row, like the Top 10 / projects own row. */
#poll-widget tr.poll-res.mine td { background:#f0fff0; border-color:#71D000; }
#poll-widget .poll-thanks { color:#71D000; font-weight:bold; }

/* Alliance status panel (KAL-14) — sidebar card above the village list.
   Mirrors the poll-widget/classic gray palette (c2.gif header, #bbb/#ccc borders). */
/* Width is not fixed (unlike #poll-widget): the block fills #side_info so it
   lines up with the village-groups table below it. */
#ally-widget { width:auto; margin:0 0 25px 0; }
/* compact.css has a generic `table { width:100% }` that `div#side_info table
   { width:auto }` overrides, leaving #vlist content-sized while #ally-widget
   fills the sidebar — so the two never lined up. Restore the full width for the
   village list only (other sidebar tables, e.g. #llist, stay content-sized).
   The 1px #bbb frame matches the alliance panel's outer border; border-spacing:0
   kills the table's cellspacing="1" gap so the rows sit flush inside that frame. */
#side_info #vlist { width:100%; border:1px solid #bbb; border-spacing:0; }
/* Village-groups title bar: same c2.gif strip as the alliance panel above it, so
   the two sidebar cards read as one system. Its header cell is a <td> (kept that
   way — village_groups.js and #vlist thead td rules target it), which compact.css
   would otherwise paint flat #F3F3F3. */
#side_info #vlist thead td {
    background:#ededed url("img/a/c2.gif") repeat-x left bottom;
    background-size:auto 100%;
    border-bottom:1px solid #bbb;
    line-height:16px; text-align:center; color:#000; font-size:12px;
}
#ally-widget .ally-ctbl { width:100%; border-collapse:collapse; background:#fff; border:1px solid #bbb; font-size:11px; table-layout:fixed; }
#ally-widget .ally-ctbl td, #ally-widget .ally-ctbl th { border:1px solid #ccc; padding:2px 5px; white-space:normal; line-height:normal; vertical-align:middle; }
#ally-widget .ally-ctbl thead th { line-height:16px; text-align:center; color:#000; font-size:12px; background:#ededed url("img/a/c2.gif") repeat-x left bottom; background-size:auto 100%; border-bottom:1px solid #bbb; }
/* Alliance id row: tag chip + name, prominent, one line, ellipsis if too long. */
#ally-widget .ally-id { background:#f3f3f3; }
#ally-widget .ally-id a { color:#000; font-weight:bold; font-size:12px; text-decoration:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ally-widget .ally-id a:hover { text-decoration:underline; }
#ally-widget .ally-tag { display:inline-block; padding:0 3px; background:#ededed; border:1px solid #bbb; border-radius:2px; color:#333; font-weight:bold; }
#ally-widget .ally-none { color:#666; font-style:italic; }
/* Status rows: next project upgrade / active supply pushes / open defense calls. */
#ally-widget .ally-row a { display:flex; justify-content:space-between; align-items:center; gap:4px; color:#3a3a3a; text-decoration:none; }
#ally-widget .ally-row a:hover { text-decoration:underline; color:#000; }
#ally-widget .ally-row-lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ally-widget .ally-eta { color:#689f38; font-weight:bold; white-space:nowrap; }
#ally-widget .ally-count { display:inline-block; min-width:15px; padding:0 4px; background:#ededed; border:1px solid #bbb; border-radius:8px; text-align:center; color:#333; font-weight:bold; }
#ally-widget .ally-count.ally-alert { background:#c00; border-color:#900; color:#fff; }
#ally-widget .ally-empty { color:#999; font-style:italic; }
/* Shortcut buttons row — pixel-art green enamel circular buttons (the PNG is the
   whole button, chrome included), one per action. */
#ally-widget .ally-btns { text-align:center; padding:5px 2px; }
#ally-widget .ally-btn {
    display:inline-block; width:28px; height:28px; margin:0 4px;
    text-decoration:none; vertical-align:middle;
    background-repeat:no-repeat; background-position:center; background-size:contain;
}
#ally-widget .ally-btn:hover { filter:brightness(1.1); }
#ally-widget .ally-btn:active { transform:translateY(1px); }
#ally-widget .ally-btn .ally-btn-lbl { display:none; }
#ally-widget .ally-chat { background-image:url("img/a/ally-chat.png"); }
#ally-widget .ally-forum { background-image:url("img/a/ally-forum.png"); }
#ally-widget .ally-projects { background-image:url("img/a/ally-projects.png"); }
#ally-widget .ally-supply { background-image:url("img/a/ally-supply.png"); }
#ally-widget .ally-defense { background-image:url("img/a/ally-defense.png"); }
/* Locked (non-premium) state: the buttons stay visible but greyed and inert, so
   the player sees what the subscription unlocks instead of an absent panel. */
#ally-widget .ally-btns-locked .ally-btn { filter:grayscale(1); opacity:.45; cursor:default; }
#ally-widget .ally-btns-locked .ally-btn:hover { filter:grayscale(1); }
#ally-widget .ally-btns-locked .ally-btn:active { transform:none; }
#ally-widget .ally-teaser { color:#333; text-align:center; line-height:14px; padding:4px 6px; }
#ally-widget .ally-cta { text-align:center; padding:4px 2px 5px; }
#ally-widget .ally-cta a { font-weight:bold; color:#333; text-decoration:none; }
#ally-widget .ally-cta a:hover { text-decoration:underline; }
/* CTA row (no-alliance): compact text links that wrap on narrow widths. */
#ally-widget .ally-links { text-align:center; }
#ally-widget .ally-links a { color:#3a3a3a; text-decoration:none; white-space:nowrap; }
#ally-widget .ally-links a:hover { text-decoration:underline; color:#000; }
#ally-widget .ally-links .none { color:#aaa; white-space:nowrap; cursor:default; }
#ally-widget .ally-sep { color:#bbb; padding:0 2px; }

/* "Expiring soon" sidebar card (Templates/expiring_soon.tpl) — the player's
   time-limited perks lapsing within 24h. Same card shell as #ally-widget above it
   (white body, c2.gif gray header strip, #bbb/#ccc borders) so the sidebar reads
   as one system; only the countdown colour differs, since these are warnings and
   not progress. Collapse state is owned by inbox.js via the .gi-closed class. */
#g-inbox { width:auto; margin:0 0 25px 0; }
#g-inbox .gi-tbl { width:100%; border-collapse:collapse; background:#fff; border:1px solid #bbb; font-size:11px; table-layout:fixed; }
#g-inbox .gi-tbl td, #g-inbox .gi-tbl th { border:1px solid #ccc; padding:2px 5px; white-space:normal; line-height:normal; vertical-align:middle; }
#g-inbox .gi-head { line-height:16px; color:#000; font-size:12px; background:#ededed url("img/a/c2.gif") repeat-x left bottom; background-size:auto 100%; border-bottom:1px solid #bbb; cursor:pointer; text-align:left; }
#g-inbox .gi-head:hover .gi-title { text-decoration:underline; }
/* The arrow is the affordance the player clicks on the card's left edge; it points
   down while open and right while collapsed. */
#g-inbox .gi-arrow { display:inline-block; width:0; height:0; margin-right:4px; vertical-align:middle; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #555; }
#g-inbox.gi-closed .gi-arrow { border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:5px solid #555; border-right:0; }
#g-inbox .gi-title { font-weight:bold; }
#g-inbox .gi-count { float:right; display:inline-block; min-width:15px; padding:0 4px; background:#ededed; border:1px solid #bbb; border-radius:8px; text-align:center; color:#333; font-weight:bold; }
#g-inbox .gi-count.gi-alert { background:#c00; border-color:#900; color:#fff; }
#g-inbox.gi-closed .gi-body { display:none; }
#g-inbox .gi-row a { display:flex; justify-content:space-between; align-items:center; gap:4px; color:#3a3a3a; text-decoration:none; }
#g-inbox .gi-row a:hover { text-decoration:underline; color:#000; }
#g-inbox .gi-lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#g-inbox .gi-lbl img { vertical-align:middle; margin-right:3px; }
#g-inbox .gi-eta { color:#c00; font-weight:bold; white-space:nowrap; }

/* Per-sitter (dual) permission checkboxes in the account page. */
.sitperm { margin:2px 0 8px 18px; }
.sitperm label { display:block; color:#333; font-size:11px; line-height:16px; }

.under_progress td.desc img.del { vertical-align:middle; position:relative; top:-3px; margin-right:4px; cursor:pointer; }

/* Smithy instant-finish clock: centered on the "Upgrading" header text. */
.under_progress thead td { vertical-align:middle; }
.ups-finish { display:inline-block; vertical-align:middle; margin-left:4px; line-height:0; }
.ups-finish img.clock { vertical-align:middle; }

/* Forgotten-password errors + the "open a ticket on Discord" escape hatch. */
#content.activate p.error { color:#c00; }
.discord-ticket { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:#5865F2; color:#fff; border-radius:4px; text-decoration:none; font-weight:bold; }
.discord-ticket:hover { background:#4752c4; }
.discord-ticket img { vertical-align:middle; }

/* Main Building instant-demolish (gold + daily cap). */
.demolish-error { color:#c00; }
.demolish-ok { color:#008000; }
.instant-demo { margin:0 10px; }
.instant-demo-gold { vertical-align:middle; }
.instant-demo-left { color:#666; margin-left:4px; }

/* Residence/Palace "Next Villages" premium CP-forecast tab. Header matches the
   standard in-game table bar (c2.gif), like the alliance contribution table. */
.nv-premium { color:#c00; font-weight:bold; }
.nv-table { border-collapse:collapse; }
.nv-table td, .nv-table th { border:1px solid #ccc; padding:1px 5px; }
/* Two-tier header like the Expansion table: gif title bar + light sub-header row. */
.nv-table thead .nv-title { text-align:center; font-weight:bold; color:#000; font-size:12px; background:#ededed url("img/a/c2.gif") repeat-x left bottom; background-size:auto 100%; }
.nv-table thead .nv-subhead th { text-align:center; font-weight:normal; color:#000; font-size:12px; background:#f3f3f3; }
.nv-table tbody td { text-align:center; }
/* Beat compact.css's id-level `#build_value th { padding-right:35px }`, which is meant
   for the other residence tables and would bloat/overflow this one. */
div#build table#build_value.nv-table th { padding:1px 8px; }

/* Trade-route resources icon + paused-row state */
/* Keep header labels on one line so the narrow "Time left" column doesn't wrap and double the header height. */
div#build.gid17 table#trading_routes thead th { white-space:nowrap; text-align:left; }
/* Shrink the Description column to its content; let long names ("To X (paused)") wrap
   instead of forcing the whole table wider than the narrow content column. */
div#build.gid17 table#trading_routes td.desc { width:1%; white-space:normal; max-width:90px; }
.route_resall { vertical-align:middle; }
/* Desktop shows the full resource breakdown; the icon-only span is for mobile (see mobile.css). */
div#build.gid17 table#trading_routes td.rss .rss-mobile { display:none; }
/* Lay the four resources out as a tidy 2x2 grid so the cell stays narrow enough for the whole
   table to fit the content column (no horizontal scroll) instead of one wide line. */
div#build.gid17 table#trading_routes td.rss .rss-full { display:inline-grid; grid-template-columns:auto auto; gap:1px 8px; text-align:left; }
div#build.gid17 table#trading_routes td.rss .rss-full .ri { white-space:nowrap; }
/* Backstop: if amounts ever get wide enough to still overflow, scroll rather than break the page. */
div#build.gid17 .route_scroll { overflow-x:auto; }
div#build.gid17 table#trading_routes tr.route_paused td { color:#999; }
.route_paused_tag { color:#c00; font-style:italic; }
/* Market overview (dorf3?s=6) — cross-village trade routes + shipments in transit.
   Gray Travian palette; self-contained because the .village3 dorf3 tables are styled by id elsewhere.
   table-layout:fixed + width:100% keeps every table inside the 502px overflow:hidden content column. */
table.mkov { table-layout:fixed; width:100%; border-collapse:collapse; margin:0 0 12px; background:#fff; font-size:11px; }
/* c2.gif has a light highlight line baked into its top row — offset it under the border so the header doesn't read as double-bordered */
table.mkov thead th { background:url("img/a/c2.gif") repeat 0 -3px; border:1px solid #bbb; color:#000; text-align:center; padding:3px 6px; }
table.mkov thead td { background:#f5f5f5; border:1px solid #ddd; color:#333; padding:2px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.mkov tbody td { border:1px solid #ddd; color:#333; padding:2px 4px; vertical-align:middle; overflow:hidden; background:#fff; }
table.mkov td.none { text-align:center; color:#999; font-style:italic; }
table.mkov td.ctr { text-align:center; white-space:nowrap; }
table.mkov td.dur { white-space:nowrap; text-align:right; }
table.mkov tr.route_paused td { color:#999; }
/* From » To column: let long village names wrap instead of forcing the table wider. */
table.mkov td.rt { white-space:normal; word-break:break-word; line-height:1.25; }
/* Resources as a tidy 2x2 grid — two equal columns so wide numbers (1,000) never collide. */
table.mkov td.res .rgrid { display:grid; grid-template-columns:1fr 1fr; gap:1px 8px; }
table.mkov td.res .rgrid .ri { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
table.mkov td.res img { vertical-align:middle; margin-right:1px; }
/* Direction glyph (full label on hover via data-tip). */
table.mkov .dglyph { display:inline-block; font-weight:bold; font-size:13px; line-height:1; cursor:help; }
table.mkov .dglyph.d-out { color:#188a18; }
table.mkov .dglyph.d-in  { color:#1b62c4; }
table.mkov .dglyph.d-ret { color:#888; }
/* Fixed column widths (px sum < 502 so the flexible "route" column absorbs the rest). */
table.mkov col.c-start { width:42px; }
table.mkov col.c-merc  { width:50px; }
table.mkov col.c-res   { width:130px; }
table.mkov col.c-next  { width:56px; }
table.mkov col.c-left  { width:54px; }
table.mkov col.c-dir   { width:30px; }
table.mkov col.c-eta   { width:62px; }
table#production img.plusbonus { vertical-align:middle; cursor:help; display:inline-block; }
.q-over { color:#c00; }

#qstd .qtask-back { position:absolute; left:0; top:-19px; display:inline-block; line-height:17px; color:#333; font-size:11px; font-weight:bold; text-decoration:underline; white-space:nowrap; }
#qstd .qtask-back:hover { color:#000; }

.popup3.quest:has(#qstd.qtasklog) { height:462px; background-size:100% 100%; }
#qstd.qtasklog { display:flex; flex-direction:column; height:438px; overflow:hidden; }
#qstd.qtasklog h1 { flex:0 0 auto; margin-bottom:6px; }
.qtask-list { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; list-style:none; margin:0; padding:0; }
.qtask-row { display:flex; align-items:stretch; gap:6px; margin:0 0 3px; padding:2px 5px; background:#fff; border:1px solid #ddd; border-radius:3px; }
.qtask-row:hover { background:#f5f5f5; border-color:#bbb; }
.qtask-main { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:7px; text-decoration:none; color:#333; }
.qtask-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.qtask-thumb { flex:0 0 auto; width:52px; height:36px; border:1px solid #bbb; border-radius:3px; background:#f5f5f5 no-repeat center center; background-size:cover; }
.qtask-name { font-weight:bold; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qtask-reward { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#333; font-size:11px; }
.qtask-reward img { vertical-align:middle; }
.qtask-side { flex:0 0 84px; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:2px; }
.qtask-stat { text-align:right; font-size:11px; color:#888; line-height:1.2; }
.qtask-prog { display:block; width:84px; }
.qtask-bar { display:block; width:100%; height:9px; -webkit-appearance:none; -moz-appearance:none; appearance:none; border:0; border-radius:0; background:#e6e6e6; }
.qtask-bar::-webkit-progress-bar { background:#e6e6e6; border:1px solid #ddd; border-radius:0; }
.qtask-bar::-webkit-progress-value { background:#71D000; border-radius:0; }
.qtask-bar::-moz-progress-bar { background:#71D000; border-radius:0; }
.qtask-prog-txt { display:block; text-align:right; font-size:10px; color:#333; }
.qtask-side .qtask-btn { display:inline-block; width:100%; box-sizing:border-box; margin:0; padding:4px 6px; font-size:11px; line-height:1.2; text-decoration:none; }
.qtask-side button.qtask-btn[disabled] { border-color:#ccc; background-image:linear-gradient(to bottom,#f7f7f7,#e2e2e2); color:#aaa; cursor:default; }
.qtask-side button.qtask-btn[disabled]:hover { border-color:#ccc; }
.qtask-row.done { background:#f3faf3; border-color:#cfe4cf; }
.qtask-row.done .qtask-name, .qtask-row.done .qtask-stat { color:#2e7d32; }
.qtask-row.current { border-color:#bbb; background:#f5f5f5; }
.qtask-row.current .qtask-stat { color:#333; font-weight:bold; }
.qtask-row.ready { border-color:#5aa800; background:#f3faf3; }
.qtask-row.ready .qtask-name { color:#2e7d32; }
.qtask-row.locked .qtask-name { color:#888; }
.qtask-row.locked .qtask-thumb { opacity:.55; filter:grayscale(60%); }

.qtask-pager { flex:0 0 auto; margin:5px 0 0; line-height:normal; }
.qtask-pager a, .qtask-pager span { display:inline-block; vertical-align:middle; }
.qtask-pager .qtask-pg-on { margin:0 2px; padding:1px 6px; border:1px solid #bbb; background:#e6e6e6; font-weight:bold; color:#000; }
.qtask-pager .qtask-pg-off { margin:0 2px; padding:1px 6px; border:1px solid #ddd; background:#f5f5f5; color:#bbb; }

#qstd.qtaskview .qtask-rew { margin-top:6px; }
#qstd.qtaskview .qtask-stat { display:inline-block; margin-top:8px; padding:1px 8px; border:1px solid #ddd; border-radius:3px; background:#f5f5f5; font-size:11px; color:#888; }
#qstd.qtaskview .qtask-stat.done { border-color:#cfe4cf; background:#f3faf3; color:#2e7d32; }
#qstd.qtaskview .qtask-stat.current { color:#333; font-weight:bold; }

.qtask-thumb.q-allres { background-image:url("img/q/allres.jpg"); }
.qtask-thumb.q-alliance { background-image:url("img/q/alliance.jpg"); }
.qtask-thumb.q-army { background-image:url("img/q/army.jpg"); }
.qtask-thumb.q-barracks { background-image:url("img/q/barracks.jpg"); }
.qtask-thumb.q-clay_iron { background-image:url("img/q/clay_iron.jpg"); }
.qtask-thumb.q-cost { background-image:url("img/q/cost.jpg"); }
.qtask-thumb.q-embassy { background-image:url("img/q/embassy.jpg"); }
.qtask-thumb.q-farm { background-image:url("img/q/farm.jpg"); }
.qtask-thumb.q-generic { background-image:url("img/q/generic.jpg"); }
.qtask-thumb.q-granary { background-image:url("img/q/granary.jpg"); }
.qtask-thumb.q-hide { background-image:url("img/q/hide.jpg"); }
.qtask-thumb.q-main { background-image:url("img/q/main.jpg"); }
.qtask-thumb.q-market { background-image:url("img/q/market.jpg"); }
.qtask-thumb.q-medal { background-image:url("img/q/medal.jpg"); }
.qtask-thumb.q-msg { background-image:url("img/q/msg.jpg"); }
.qtask-thumb.q-new_village { background-image:url("img/q/new_village.jpg"); }
.qtask-thumb.q-rally { background-image:url("img/q/rally.jpg"); }
.qtask-thumb.q-rank { background-image:url("img/q/rank.jpg"); }
.qtask-thumb.q-report { background-image:url("img/q/report.jpg"); }
.qtask-thumb.q-village_name { background-image:url("img/q/village_name.jpg"); }
.qtask-thumb.q-warehouse { background-image:url("img/q/warehouse.jpg"); }
.qtask-thumb.q-wood { background-image:url("img/q/wood.jpg"); }

/* Market send tab: merchants-used bar (used = already on the road, pending = current form input) */
div#build.gid17 #merBar { width:140px; height:7px; border:1px solid #bbb; background:#f5f5f5; overflow:hidden; margin-top:2px; }
div#build.gid17 #merBar .merBar-used { float:left; height:100%; background:#777; }
div#build.gid17 #merBar .merBar-pending { float:left; height:100%; background:#e3b04b; }

/* Left-sidebar spawn countdowns: align with the menu links above (which get padding-left:12px on their <a>) */
div#side_navi p.side_events > span { display:block; padding-left:12px; }

/* Alliance defense board (allianz.php?s=8) */
.aldef-scroll { overflow-x:auto; }
#def_board td, #def_history td { text-align:center; }
#def_board td[class^="def-prio-"] { border-left:4px solid transparent; }
.def-prio-0, .def-prio-1 { border-left-color:#bbb !important; }
.def-prio-2 { border-left-color:#7aa4d6 !important; }
.def-prio-3 { border-left-color:#e08b2e !important; }
.def-prio-4 { border-left-color:#c00 !important; }
.aldef-inline { display:inline; }
.aldef-linkbtn { background:none; border:none; padding:0; color:#c00; cursor:pointer; text-decoration:underline; font-size:inherit; font-family:inherit; }
.aldef-ok { color:#390; }
.aldef-miss { color:#c00; font-weight:bold; }
.aldef-sub { color:#666; }
.aldef-flash { color:#390; font-weight:bold; }
#movements td.aldef-share { text-align:right; font-size:11px; }

/* Alliance operations (allianz.php?s=9) */
#ops_waves td, #ops_mine td, #ops_list td, #ops_targets td { text-align:center; }
.ops-tag { display:inline-block; padding:0 4px; border:1px solid #bbb; background:#f5f5f5; color:#333; font-size:11px; border-radius:2px; }

/* Alliance activity heatmap (allianz.php?s=10) */
#act_ladder { border-collapse:collapse; background:#fff; border:1px solid #bbb; margin-bottom:8px; }
#act_ladder th, #act_ladder td { border:1px solid #ccc; padding:3px 8px; }
#act_ladder thead th { line-height:16px; color:#000; background:#ededed url("img/a/c2.gif") repeat-x left bottom; background-size:auto 100%; }
#act_ladder td { text-align:center; }
#act_ladder td:nth-child(2) { text-align:left; }
#act_heatmap { border-collapse:collapse; background:#fff; border:1px solid #bbb; }
#act_heatmap th { font-size:9px; color:#333; padding:1px 2px; border:1px solid #ccc; background:#ededed url("img/a/c2.gif") repeat-x left bottom; background-size:auto 100%; }
#act_heatmap td { width:14px; height:14px; border:1px solid #ddd; }
#act_heatmap td.act-name { width:auto; border:1px solid #ccc; text-align:right; padding-right:6px; white-space:nowrap; color:#333; }
#act_heatmap td.hm0 { background:#f5f5f5; }
#act_heatmap td.hm1 { background:#d4e6c3; }
#act_heatmap td.hm2 { background:#a9cc8a; }
#act_heatmap td.hm3 { background:#7eb251; }
#act_heatmap td.hm4 { background:#539818; }
.act-online { display:inline-block; width:8px; height:8px; border-radius:50%; background:#390; margin-left:3px; }
/* Profile > Sitter tab: the heatmap rows live in the account-style panel itself */
#sit_activity tr.sit-hours th { font-size:9px; color:#333; padding:1px 2px; width:14px; }
#sit_activity td.hm0, #sit_activity td.hm1, #sit_activity td.hm2, #sit_activity td.hm3, #sit_activity td.hm4 { width:14px; height:14px; border:1px solid #ddd; padding:0; }
#sit_activity td.hm0 { background:#f5f5f5; }
#sit_activity td.hm1 { background:#d4e6c3; }
#sit_activity td.hm2 { background:#a9cc8a; }
#sit_activity td.hm3 { background:#7eb251; }
#sit_activity td.hm4 { background:#539818; }
#sit_activity td.act-name { text-align:right; padding-right:6px; white-space:nowrap; color:#333; }
#sit_activity td.act-total { text-align:center; color:#333; }
#sit_activity tr.sit-hidden { display:none; }

/* Alliance defense under-menu (game buttons) + incoming radar (allianz.php?s=8) */
#defense_subnav { margin:4px 0 8px; }
#defense_subnav a.trav_buttons { display:inline-block; text-decoration:none; color:#7a7a7a; padding:2px 12px; line-height:16px; margin:0 4px 4px 0; }
#defense_subnav a.trav_buttons.sel { background:#fff; border-color:#71d000; color:#333; font-weight:bold; }
/* "What this does" help: plain white table, no header, no gray fill */
table.ali-help-tbl { margin:0 0 10px; border-collapse:collapse; }
table.ali-help-tbl td { background:#e6e6e6; border:1px solid #ddd; padding:6px 8px; font-size:11px; color:#333; }
#def_counters { background:#f5f5f5; border:1px solid #ddd; padding:5px 8px; margin-bottom:8px; }
#def_counters span { display:inline-block; margin-right:14px; font-size:12px; color:#333; }
#def_viewtoggle { margin-bottom:6px; }
#def_viewtoggle a { padding:2px 8px; border:1px solid #bbb; background:#ededed; color:#333; text-decoration:none; }
#def_viewtoggle a.sel { background:#539818; color:#fff; border-color:#539818; }
#def_chips { margin-bottom:8px; }
.chip { display:inline-block; padding:0 6px; border:1px solid #bbb; border-radius:3px; font-size:11px; color:#333; background:#f5f5f5; text-decoration:none; line-height:16px; }
.chip.on.chip-real, .chip.chip-real.on { background:#c0392b; color:#fff; border-color:#c0392b; }
.chip.on.chip-fake, .chip.chip-fake.on { background:#27ae60; color:#fff; border-color:#27ae60; }
.chip.on.chip-cata, .chip.chip-cata.on { background:#e3b04b; color:#000; border-color:#d89a2a; }
.chip.on.chip-ram, .chip.chip-ram.on { background:#8a6d3b; color:#fff; border-color:#8a6d3b; }
.chip.on.chip-hero, .chip.chip-hero.on { background:#16a2b8; color:#fff; border-color:#16a2b8; }
.chip.on.chip-conquer, .chip.chip-conquer.on { background:#6c5499; color:#fff; border-color:#6c5499; }
#def_incoming td, #def_attackers td { text-align:center; }
.def-called { cursor:help; }
table.def-waves { width:100%; }
table.def-waves td { text-align:left; padding:1px 8px; font-size:11px; color:#555; border-top:1px dotted #eee; }
tr.def-waverows > td { background:#fafafa; }
#def_filterform { margin:6px 0 8px; font-size:11px; color:#333; }
#def_filterform input[type=text] { font-size:11px; }
.aldef-accept { color:#390; }
#def_requested td { text-align:center; }
#def_requested { border:1px solid #e3b04b; }
.chip.chip-nohero.on, label.chip-nohero { background:#d63384; color:#fff; border-color:#d63384; }
label.chip-check { cursor:pointer; margin:1px 2px 1px 0; }
label.chip-check input { vertical-align:middle; margin:0 2px 0 0; }
label.chip-check.chip-real { background:#c0392b; color:#fff; border-color:#c0392b; }
label.chip-check.chip-fake { background:#27ae60; color:#fff; border-color:#27ae60; }
label.chip-check.chip-cata { background:#e3b04b; color:#000; border-color:#d89a2a; }
label.chip-check.chip-ram { background:#8a6d3b; color:#fff; border-color:#8a6d3b; }
label.chip-check.chip-hero { background:#16a2b8; color:#fff; border-color:#16a2b8; }
label.chip-check.chip-conquer { background:#8a8a8a; color:#fff; border-color:#8a8a8a; }
.def-tagwave { margin-bottom:5px; padding-bottom:4px; border-bottom:1px dotted #ddd; }

/* Request defense form: green-bordered inputs matching the game's trav_buttons theme */
#def_call_form input[type=text],
#def_call_form input[type=datetime-local],
#def_call_form select {
	border: 1px solid #71d000;
	border-radius: 4px;
	padding: 1px 3px;
	background: #fff;
	color: #333;
}
#def_call_form input[type=text]:focus,
#def_call_form input[type=datetime-local]:focus,
#def_call_form select:focus {
	outline: none;
	border-color: #5aa800;
	box-shadow: 0 0 0 1px #a6e05a;
}

/* Alliance artifact planner (allianz.php?s=11) */
.art-card { border:1px solid #ddd; border-radius:4px; margin:8px 0; padding:6px 8px; background:#fff; }
.art-head { padding:2px 0; }
.art-note { margin:2px 0 4px; }
.art-roles td, .art-roles th { text-align:center; }
.art-meta { margin-top:5px; font-size:11px; color:#333; }
.art-meta input[type=text] { border:1px solid #71d000; }
#art_filter { margin:6px 0 8px; font-size:12px; }
.art-add { margin:4px 0 10px; font-size:12px; }
.art-add input[type=text] { border:1px solid #71d000; }
/* Stacked create forms: one field per row, label above its input. */
.art-add .art-row { margin:0 0 7px; }
.art-add .art-row label { display:block; margin-bottom:2px; color:#333; }
.art-del { float:right; }

/* Alliance Supply (allianz.php?s=12) */
.sup-prog { cursor:help; white-space:nowrap; color:#333; }
#sup_pushes td, #sup_croppers td { text-align:center; }
.art-add input[type=text], .art-add input[type=datetime-local] { border:1px solid #71d000; }
#sup_pushes td.sup-sentby { text-align:left; font-size:11px; }
/* One-line feature help under each alliance coordination tab */
.ali-help { background:#f5f5f5; border-left:3px solid #71d000; padding:4px 8px; margin:4px 0 10px; font-size:11px; color:#555; }


/* Town Hall: the queued (Plus) celebration line under the running one */
#building_contract tr.cel_queued td { color:#666; }
#building_contract tr.cel_queued a.train_cancel { margin-left:6px; }
#building_contract tr.cel_queued img.del { vertical-align:middle; }