/* Classic layout: 980px page, 130px menu, 552px content, Verdana 13px, #71D000 links, grey-grid tables. */
* { box-sizing: content-box; }
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; }
body { margin: 0; background: #fff; color: #000; font: normal 13px Verdana, Arial, Helvetica, sans-serif; }
a { color: #71d000; font-weight: bold; text-decoration: none; }
a:visited { color: #71d000; }
a:hover { color: #00bc00; }
a:active { color: #ff8000; }
img { border: 0; vertical-align: middle; }
h1 { font-size: 24px; margin: 0 0 8px; font-weight: bold; }
h1 .lvl { font-size: 24px; font-weight: normal; color: #c0c0c0; }
h2 { font-size: 13px; margin: 14px 0 6px; }
h3 { font-size: 13px; margin: 10px 0 4px; }
p { margin: 0 0 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.none, .muted { color: #c0c0c0; }
.none { font-weight: bold; }
.c1, .good { color: #71d000; }
.c2, .warn { color: #ff8000; }
.bad { color: #c00; }
.small { font-size: 11px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.desc { margin: 0 0 10px; }
:focus-visible { outline: 1px dotted #ff8000; }

/* ---------- Frame ---------- */
#wrap { width: 980px; margin: 0 auto; position: relative; display: flex; flex-direction: column; min-height: 100vh; }
#mid { flex: 1 0 auto; }
#header { height: 100px; position: relative; background: #fff url(/static/img/ui/header-scene.webp) center top / 980px 100px no-repeat; }
#logo { position: absolute; z-index: 3; left: 4px; top: 10px; display: flex; align-items: center; gap: 4px; }
#logo img { display: block; }
#logo .coin { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); }
#logo small { display: block; font: 10px Verdana, sans-serif; color: #f6e7c0; margin: 1px 0 0 3px; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.7); }
#logo:hover .coin { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)) brightness(1.08); }
#mtop { position: absolute; left: 231px; top: 6px; height: 67px; z-index: 2; }
#header::before { content: ''; position: absolute; left: 220px; right: 0; top: 24px; height: 30px; z-index: 1;
  background: linear-gradient(#fbfbfb, #dcdcdc 60%, #c9c9c9); border-top: 1px solid #fff; border-bottom: 1px solid #b5b5b5; opacity: 0.9; }
#mtop a { float: left; display: block; height: 67px; position: relative; }
#mtop a img { display: block; height: 67px; }
#mtop a.n img { width: 70px; }
#mtop a.half img { width: 35px; }
#mtop a:hover img { filter: brightness(1.06) saturate(1.3); }
#mtop a.on img { filter: drop-shadow(0 0 2px #71d000); }
#mtop a.plus { margin-left: 60px; }
#mtop .badge { position: absolute; top: 4px; right: 2px; min-width: 14px; height: 14px; line-height: 14px; padding: 0 3px; border-radius: 7px; background: #ff8000; color: #fff; font: bold 9px Arial, sans-serif; text-align: center; }
#mtop a.rep .badge { left: 2px; right: auto; }
#ltime { position: absolute; right: 10px; top: 6px; font-size: 11px; color: #f0dfb4; text-align: right; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.6); }
#ltime b { color: #fff; }

/* Resource bar */
#res { height: 20px; width: 552px; margin: 0 0 0 130px; text-align: center; font-size: 11px; white-space: nowrap; }
#res table { background: #fff; margin: 0 auto; width: auto; border-spacing: 0; }
#res td { padding: 1px; background: #fff; font-size: 11px; }
#res img { margin-left: 5px; width: 18px; height: 12px; }
#res .full { color: #c00; }
#res .neg { color: #c00; }

/* Three columns */
#mid { overflow: hidden; margin-top: 4px; }
#content { float: left; width: 552px; min-height: 450px; padding-top: 10px; position: relative; }
#footer { clear: both; position: relative; margin: 28px 0 0; padding-top: 56px; color: #f0dfb4;
  background: linear-gradient(rgba(20, 13, 6, 0) 55%, rgba(20, 13, 6, 0.55) 78%, rgba(20, 13, 6, 0.88)), url(/static/img/ui/footer-legion.webp) center 72% / cover no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 90px); mask-image: linear-gradient(transparent, #000 90px); }
#footer .fhero { height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(ellipse 34% 60% at 50% 50%, rgba(18, 11, 4, 0.5), rgba(18, 11, 4, 0) 72%); }
#footer .fbrand { display: flex; align-items: center; gap: 14px; }
#footer .fbrand img { display: block; }
#footer .fcoin { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }
#footer .fword { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.8)); }
#footer .ftag { margin: 0; font: bold 13px Georgia, 'Times New Roman', serif; letter-spacing: 3px; color: #f6e2ae; text-shadow: 0 2px 4px #000, 0 0 12px rgba(0, 0, 0, 0.8); }
#footer .flinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; padding: 9px 16px 6px; border-top: 1px solid; border-image: linear-gradient(90deg, rgba(196, 154, 78, 0), rgba(196, 154, 78, 0.6), rgba(196, 154, 78, 0)) 1; }
#footer .flinks a { padding: 2px 14px; color: #f0dfb4; font: normal 12px Verdana, Arial, sans-serif; }
#footer .flinks a + a { border-left: 1px solid rgba(196, 154, 78, 0.45); }
#footer .flinks a:hover { color: #fff; text-decoration: underline; text-decoration-color: #71d000; text-underline-offset: 3px; }
#footer .fbar { padding: 0 16px 10px; text-align: center; font-size: 11px; color: #a8966c; }
@media (max-width: 700px) {
  #footer { padding-top: 44px; }
  #footer .fhero { height: auto; padding: 4px 10px 14px; }
  #footer .fbrand { flex-direction: column; gap: 6px; }
  #footer .fcoin { width: 60px; height: 60px; }
  #footer .fword { width: 220px; height: auto; }
  #footer .flinks { gap: 6px 4px; }
  #footer .flinks a, #footer .flinks a + a { padding: 4px 10px; border: 1px solid rgba(196, 154, 78, 0.35); border-radius: 4px; }
}
button.lnk { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; color: #71d000; font: bold 13px Verdana, Arial, sans-serif; cursor: pointer; text-align: left; }
button.lnk:hover { color: #00bc00; }

/* Messages above content */
.flash { margin: 0 0 8px; padding: 4px 6px; border: 1px dashed #c0c0c0; font-weight: bold; }
.flash.ok { color: #228b22; }
.flash.error { color: #c00; }
.alert { margin: 0 0 8px; padding: 4px 6px; border: 1px dashed #c00; color: #c00; }
.note { margin: 6px 0 8px; padding: 4px 6px; border: 1px dashed #c0c0c0; }
.msgbody { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Tables (grey grid) ---------- */
table { background-color: #c0c0c0; border-collapse: separate; border-spacing: 1px; empty-cells: show; line-height: 16px; width: 100%; margin: 0 0 12px; }
td, th { padding: 2px 7px; vertical-align: middle; font-size: 13px; font-weight: normal; background: #fff; text-align: left; }
thead th, tfoot th, thead td.th { background: linear-gradient(#fbfbfb, #e6e6e6); font-weight: bold; text-align: center; }
thead td { background: #f3f3f3; text-align: center; }
tbody th { background: #f3f3f3; }
tr.hl td { background: #f0fff0; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.me td { background: #f0fff0; font-weight: bold; }
tr.unread td { font-weight: bold; }
table.plain, table.plain td, table.plain th { background: transparent; }
table.plain { border-spacing: 0; }
table.plain td, table.plain th { padding: 1px 4px 1px 0; }
.tblwrap { overflow-x: auto; }
table.units th, table.units td { text-align: center; padding: 2px; }
table.units .lbl { text-align: left; background: #f3f3f3; font-weight: bold; white-space: nowrap; width: 20%; }
table.units td.none { color: #c0c0c0; font-weight: normal; }
tr.loss td { color: #c00; }
table.report thead td { text-align: left; background: #f3f3f3; }
table.report th.att { color: #c00; }
table.report th.def { color: #71d000; }
table.report td table { margin: 0; }

/* Lists */
.list { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid #c0c0c0; }
.list li { padding: 2px 7px; border-bottom: 1px solid #c0c0c0; display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.list li:last-child { border-bottom: 0; }
.list li.unread { font-weight: bold; }
.list .grow { flex: 1; min-width: 0; }
.list .sub { display: block; font-size: 11px; color: #999; font-weight: normal; }

/* Costs line: "icon 120 | icon 100 | ..." */
.cost { font-size: 11px; white-space: normal; }
.cost span { white-space: nowrap; margin-right: 8px; }
.cost img { width: 18px; height: 12px; margin-right: 2px; }
.cost .miss { color: #c00; }

/* Forms */
form { margin: 0; display: inline; }
form.block { display: block; }
input[type=text], input[type=password], input[type=number], textarea, select {
  border: 1px solid #71d000; margin: 0; padding: 2px 3px; font: 11px Verdana, Arial, Helvetica, sans-serif; background: #fff; color: #000;
}
input[type=text], input[type=password] { width: 160px; }
input[type=number] { width: 40px; -moz-appearance: textfield; }
input.w30 { width: 30px; }
input.wide, textarea { width: 95%; }
textarea { min-height: 120px; }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
label { font-weight: normal; }
.btn, button {
  border-radius: 5px; padding: 1px 14px; border: 1px solid #71d000; background: linear-gradient(#fdfdfd, #c6c6c6); cursor: pointer;
  color: #7a7a7a; text-align: center; font: bold 11px Verdana, Arial, sans-serif; display: inline-block;
}
.btn:hover, button:hover { border-color: #a6ac9f; color: #555; }
.btn.small, button.small { padding: 0 6px; font-size: 10px; }
button.gold, .btn.gold { border-color: #e3a400; color: #8a6508; }
button.danger, .btn.danger { border-color: #c00; color: #c00; }
button.secondary, .btn.secondary { border-color: #c0c0c0; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }
button.linkbtn { background: none; border: 0; padding: 0; border-radius: 0; color: #71d000; font: bold 13px Verdana, Arial, sans-serif; cursor: pointer; }
button.linkbtn:hover { color: #00bc00; }
.block, .btn.block, button.block { display: block; }
.actions { margin: 8px 0; }
.actions > * { margin-right: 6px; }
.row > * { display: inline-block; margin-right: 8px; vertical-align: bottom; }
fieldset.plain { border: 0; padding: 0; margin: 8px 0; }
legend { font-weight: bold; padding: 0; margin-bottom: 4px; }
.choices { display: block; }
.choice { display: block; margin: 0 0 6px; padding: 4px 6px; border: 1px dashed #c0c0c0; cursor: pointer; }
.choice:has(input:checked) { border: 1px solid #71d000; background: #f0fff0; }
.choice ul { margin: 2px 0 0 18px; padding: 0; color: #999; font-size: 11px; }
.choices.inline-choices .choice { display: inline-block; width: 160px; vertical-align: top; margin-right: 6px; }

/* Text menu (tabs) */
.tabs { margin: 0 0 10px; }
.tabs a { margin-right: 4px; padding-right: 4px; border-right: 1px solid #c0c0c0; }
.tabs a:last-child { border-right: 0; }
.tabs a.on { color: #000; }

/* Cards (used by a few panels) */
.card { border: 1px dashed #c0c0c0; padding: 4px 6px; margin: 0 0 8px; }
.cardrow { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.price { font-weight: bold; color: #ff8000; }

/* Progress bars */

/* ---------- dorf1: resource fields ---------- */
#vmap1 { float: left; position: relative; width: 300px; height: 264px; margin: 0 0 15px; }
#vmap1 .bg { position: absolute; left: 0; top: 0; width: 300px; height: 264px; }
#vmap1 a.ra { position: absolute; width: 46px; height: 40px; z-index: 30; }
#vmap1 .rf { position: absolute; width: 17px; height: 17px; line-height: 15px; margin-top: -3px; z-index: 20; text-align: center; font: bold 10px Arial, Helvetica, sans-serif; color: #000;
  background: #fff; border: 1px solid #666; border-radius: 50%; box-sizing: border-box; pointer-events: none; box-shadow: 0 1px 1px rgba(0,0,0,.25); }
#vmap1 .rf.up { border-color: #71d000; }
#vmap1 .rf.busy { background: #fff3c4; border-color: #ff8000; }
#vmap1 .rf.max { background: #ffe58a; }
#vmap1 a.vlink { position: absolute; left: 125px; top: 100px; width: 75px; height: 70px; z-index: 31; }
#map_details { float: right; width: 229px; margin-top: 0; }
#map_details table { margin-bottom: 14px; }
#map_details td.ico { width: 18px; text-align: center; }
#map_details td.val { text-align: right; font-weight: bold; }
.clear { clear: both; }

/* ---------- dorf2: village centre ---------- */
#vmap2 { position: relative; width: 540px; height: 448px; margin: 0 0 6px; }
#vmap2 .bg, #vmap2 .wall { position: absolute; left: 0; top: 0; width: 540px; height: 448px; }
#vmap2 .bg { z-index: 1; }
#vmap2 .wall { z-index: 2; pointer-events: none; }
#vmap2 .bld { position: absolute; display: block; width: 75px; height: 100px; pointer-events: none; }
#vmap2 .bld img { width: 75px; height: 100px; display: block; }
#vmap2 .bld.b39 { width: 69px; height: 120px; }
#vmap2 .bld.b39 img { width: 69px; height: 120px; }
/* Click layer: one non-overlapping ellipse per spot (pictures overlap, so they ignore the pointer). */
#vmap2 .hitmap { position: absolute; left: 0; top: 0; width: 540px; height: 448px; z-index: 45; }
#vmap2 .hitmap .hit { fill: transparent; stroke: none; cursor: pointer; }
#vmap2 .hitmap .hl { fill: none; stroke: none; pointer-events: none; }
#vmap2 .hitmap a:hover .hl, #vmap2 .hitmap a:focus .hl { fill: rgba(255, 255, 255, 0.22); stroke: #71d000; stroke-width: 2.5; stroke-dasharray: 6 4; }
#vmap2 .hitmap a:focus { outline: none; }
#vmap2 h1, #vmap2 .lv { pointer-events: none; }
#vmap2 .lv { position: absolute; z-index: 50; width: 17px; height: 17px; line-height: 17px; text-align: center; font: bold 9px Arial, Helvetica, sans-serif;
  color: #000; background: #fff; border: 1px solid #777; border-radius: 50%; box-sizing: border-box; pointer-events: none; }
#vmap2 .lv.up { border-color: #71d000; }
#vmap2 .lv.busy { background: #fff3c4; border-color: #ff8000; }

/* ---------- Map (inline SVG) ---------- */
.mapsvg { display: block; width: 100%; height: auto; margin: 0 0 6px; background: #fff; }
.mapsvg .gridbg { fill: #dcebbd; stroke: #b9d18f; stroke-width: 1; }
.mapsvg .own { fill: none; stroke: #ff8000; stroke-width: 2; stroke-dasharray: 4 3; }
.mapsvg .other { fill: none; stroke: #c00; stroke-width: 1.5; stroke-dasharray: 4 3; }
.mapsvg .ctr { fill: rgba(255, 255, 255, 0.35); stroke: #fff; stroke-width: 2; }
.mapsvg .hit { fill: transparent; }
/* Only the diamond/square hit shape takes clicks: tile pictures overlap their neighbours. */
.mapsvg image, .mapsvg .own, .mapsvg .other, .mapsvg .ctr, .mapsvg text { pointer-events: none; }
.mapsvg .mvm { pointer-events: none; }
.mapsvg .mvm circle { stroke: #fff; stroke-width: 1.5; }
.mapsvg .mvm path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mapsvg .mvm.attack circle { fill: #d22; }
.mapsvg .mvm.support circle { fill: #3a9a1a; }
.mapsvg .mvm.settle circle { fill: #2a6fc9; }
.mapsvg .mvm.back circle { fill: #8a6a3a; }
.maplegend .mvk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 8px; vertical-align: -1px; }
.maplegend .mvk.attack { background: #d22; }
.maplegend .mvk.support { background: #3a9a1a; }
.maplegend .mvk.settle { background: #2a6fc9; }
.maplegend .mvk.back { background: #8a6a3a; }
.mapsvg .hit.gl { stroke: #b9d18f; stroke-width: 1; }
.mapsvg a.tile:hover .hit { fill: rgba(255, 255, 255, 0.3); stroke: #71d000; stroke-width: 1.5; }
.mapsvg text.lbl { font-family: Verdana, Arial, sans-serif; fill: #777; text-anchor: middle; }
.mapsvg a.side circle { fill: #fff; stroke: #9fcf55; stroke-width: 1.5; }
.mapsvg a.side path { fill: none; stroke: #4c8c00; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mapsvg a.side:hover circle, .mapsvg a.side:focus circle { fill: #eaf7d4; stroke: #71d000; }
.mapsvg a.side:focus { outline: none; }
.mapopts a.on { color: #000; }
.mapopts .sep { margin-left: 12px; color: #999; }
#map_coords { display: block; margin: 0 0 8px; }
#map_info { width: 100%; }
.mapsvg a.tile.hov .hit, .mapsvg a.tile:focus .hit { fill: rgba(255, 255, 255, 0.3); stroke: #71d000; stroke-width: 1.5; }
.mapctl { display: flex; gap: 16px; align-items: flex-start; margin: 4px 0 14px; }
.mapside { flex: 1; min-width: 0; }
.mappad { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); gap: 3px; padding: 6px; background: #fbfaf5; border: 1px solid #dcd6c3; border-radius: 8px; box-shadow: 0 1px 2px rgba(60, 50, 20, 0.08); flex: none; }
.mappad a { display: flex; align-items: center; justify-content: center; position: relative; border-radius: 6px; background: linear-gradient(#ffffff, #eef0e6); border: 1px solid #cfd6bd; color: #4c8c00; }
.mappad a:hover, .mappad a:focus { background: linear-gradient(#f3fbe4, #dff0c2); border-color: #71d000; }
.mappad a:active { background: #d4ebaf; }
.mappad svg path { fill: none; stroke: #4c8c00; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mappad .mp-l { position: absolute; right: 3px; bottom: 1px; font-size: 8px; color: #9a9277; font-weight: normal; }
.mappad .mp-home img { opacity: 0.8; }
#map_info td, #map_info th { font-size: 11px; padding: 1px 4px; }

/* ---------- Building pages ---------- */
#build table#build_value { background: #fff; width: auto; line-height: 19px; border-spacing: 0; }
#build table#build_value th { padding: 0 35px 0 0; background: #fff; font-weight: normal; }
#build table#build_value td { padding: 0; background: #fff; font-weight: bold; }
#build .contract { margin: 10px 0; }
#build table.build_details td { padding: 2px 7px; }
#build table.build_details td.desc .details { font-size: 11px; padding-left: 20px; }
#build table.build_details td.val, #build table.build_details td.max { text-align: center; width: 12%; }
#build table.build_details td.max { font-size: 10px; }
#build table.new_building { background: #fff; margin-bottom: 25px; border-spacing: 0; }
#build table.new_building td { background: #fff; padding: 0; vertical-align: top; }
#build table.new_building td.bimg { width: 85px; padding-right: 10px; }
#build table.new_building td.bimg img { width: 75px; height: 100px; }
#build table.new_building .requ { font-weight: bold; }

/* Chat */
.chatlog { list-style: none; margin: 6px 0; padding: 0; border: 1px solid #c0c0c0; max-height: 400px; overflow-y: auto; }
.chatlog li { padding: 2px 6px; border-bottom: 1px solid #eee; overflow-wrap: anywhere; font-size: 12px; }
.chatlog .who { font-weight: bold; }
.chatlog .when { color: #999; font-size: 10px; margin: 0 4px; }
.chatlog .admin .who { color: #c00; }

/* News ticker: a strip inside the page under the resource bar */
.ticker { display: flex; align-items: stretch; height: 24px; margin: 2px 0 8px; background: #fbfaf5; border: 1px solid #dcd6c3; border-radius: 5px; overflow: hidden; font-size: 11px; line-height: 22px; color: #444; }
.tk-label { flex: none; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: linear-gradient(#f4f1e4, #ebe6d2); border-right: 1px solid #dcd6c3; font-weight: bold; color: #5a5233; }
.tk-label img { width: 14px; height: 14px; }
.tk-view { flex: 1; min-width: 0; overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.tk-track { display: inline-flex; white-space: nowrap; animation: tk-scroll 40s linear infinite; padding-left: 12px; }
.tk-set { display: inline-flex; }
.tk-item { padding-right: 18px; margin-right: 18px; border-right: 1px solid #e3ddc8; }
.ticker:hover .tk-track { animation-play-state: paused; }
.tk-item b { color: #b35c00; }
.tk-sys { color: #2b6a00; font-weight: bold; }
.tk-buy { flex: none; padding: 0 10px; border-left: 1px solid #dcd6c3; background: #fff; color: #4b7d00; font-weight: bold; text-decoration: none; }
.tk-buy:hover { background: #f2f9e4; }
@keyframes tk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { height: auto; }
  .tk-track { animation: none; display: block; white-space: normal; }
  .tk-set { display: block; }
  .tk-dup { display: none; }
}

/* Ticker booking grid */

/* Landing / statistics boxes */
.hero h1 { font-size: 24px; }
.hero h1.brand { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.hero h1.brand img { max-width: 100%; height: auto; }
.hero h1.brand img:first-child { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.3)); }
.stats { margin: 8px 0; }
.stats div { display: inline-block; margin-right: 18px; color: #999; }
.stats b { color: #000; }

/* ---------- Narrow screens (phones): single column, scenes scaled ---------- */
@media (max-width: 1000px) {
  #wrap { width: auto; max-width: 980px; }
  #header { background-size: cover; }
  #mtop { left: auto; right: 6px; }
  #res { margin-left: 0; width: auto; height: auto; padding: 0 6px; white-space: normal; }
}
@media (max-width: 700px) {
  #header { height: 112px; }
  #logo { top: 4px; }
  #logo .coin { width: 34px; height: 34px; }
  #logo span img { width: 104px; height: 33px; }
  #logo small { display: none; }
  #header::before { left: 0; top: 52px; }
  #mtop { left: 4px; right: 4px; top: 40px; height: 67px; display: flex; justify-content: center; }
  #mtop a.plus { margin-left: 8px; }
  #ltime { display: none; }
  #mid { padding: 0 6px; }
  #content { float: none; width: auto; min-height: 0; }
  #mtop a.n img, #mtop a.n { width: 52px; height: 50px; }
  #mtop a.half img, #mtop a.half { width: 26px; height: 50px; }
  #mtop a img { height: 50px; }
  #vmap1, #map_details { float: none; margin: 0 auto 10px; }
  #map_details { width: auto; margin-top: 0; }
  #vmap2 { transform: scale(0.66); transform-origin: top left; margin-bottom: -150px; }
}
/* dorf1 level markers (top-left of 17x12 badge) and click areas */
#vmap1 .rf1 { left: 93px; top: 27px; }
#vmap1 .ra1 { left: 79px; top: 3px; }
#vmap1 .rf2 { left: 156px; top: 26px; }
#vmap1 .ra2 { left: 142px; top: 2px; }
#vmap1 .rf3 { left: 216px; top: 41px; }
#vmap1 .ra3 { left: 202px; top: 17px; }
#vmap1 .rf4 { left: 38px; top: 59px; }
#vmap1 .ra4 { left: 24px; top: 35px; }
#vmap1 .rf5 { left: 130px; top: 67px; }
#vmap1 .ra5 { left: 116px; top: 43px; }
#vmap1 .rf6 { left: 195px; top: 87px; }
#vmap1 .ra6 { left: 181px; top: 63px; }
#vmap1 .rf7 { left: 253px; top: 81px; }
#vmap1 .ra7 { left: 239px; top: 57px; }
#vmap1 .rf8 { left: 23px; top: 111px; }
#vmap1 .ra8 { left: 9px; top: 87px; }
#vmap1 .rf9 { left: 74px; top: 104px; }
#vmap1 .ra9 { left: 60px; top: 80px; }
#vmap1 .rf10 { left: 205px; top: 136px; }
#vmap1 .ra10 { left: 191px; top: 112px; }
#vmap1 .rf11 { left: 260px; top: 139px; }
#vmap1 .ra11 { left: 246px; top: 115px; }
#vmap1 .rf12 { left: 33px; top: 165px; }
#vmap1 .ra12 { left: 19px; top: 141px; }
#vmap1 .rf13 { left: 84px; top: 158px; }
#vmap1 .ra13 { left: 70px; top: 134px; }
#vmap1 .rf14 { left: 151px; top: 178px; }
#vmap1 .ra14 { left: 137px; top: 154px; }
#vmap1 .rf15 { left: 230px; top: 192px; }
#vmap1 .ra15 { left: 216px; top: 168px; }
#vmap1 .rf16 { left: 79px; top: 211px; }
#vmap1 .ra16 { left: 65px; top: 187px; }
#vmap1 .rf17 { left: 132px; top: 223px; }
#vmap1 .ra17 { left: 118px; top: 199px; }
#vmap1 .rf18 { left: 182px; top: 227px; }
#vmap1 .ra18 { left: 168px; top: 203px; }
/* dorf2 building spots: slot = 18 + d (top-left of 75x100 image); z-index increases downwards */
#vmap2 .b19 { left: 115px; top: 52px; z-index: 6; }
#vmap2 .l19 { left: 144px; top: 126px; }
#vmap2 .b20 { left: 198px; top: 27px; z-index: 7; }
#vmap2 .l20 { left: 227px; top: 101px; }
#vmap2 .b21 { left: 258px; top: 17px; z-index: 8; }
#vmap2 .l21 { left: 287px; top: 91px; }
#vmap2 .b22 { left: 332px; top: 32px; z-index: 9; }
#vmap2 .l22 { left: 361px; top: 106px; }
#vmap2 .b23 { left: 388px; top: 81px; z-index: 10; }
#vmap2 .l23 { left: 417px; top: 155px; }
#vmap2 .b24 { left: 80px; top: 91px; z-index: 11; }
#vmap2 .l24 { left: 109px; top: 165px; }
#vmap2 .b25 { left: 161px; top: 98px; z-index: 12; }
#vmap2 .l25 { left: 190px; top: 172px; }
#vmap2 .b26 { left: 247px; top: 81px; z-index: 13; }
#vmap2 .l26 { left: 276px; top: 155px; }
#vmap2 .b27 { left: 395px; top: 122px; z-index: 14; }
#vmap2 .l27 { left: 424px; top: 196px; }
#vmap2 .b28 { left: 66px; top: 161px; z-index: 15; }
#vmap2 .l28 { left: 95px; top: 235px; }
#vmap2 .b29 { left: 192px; top: 126px; z-index: 16; }
#vmap2 .l29 { left: 221px; top: 200px; }
#vmap2 .b30 { left: 155px; top: 152px; z-index: 17; }
#vmap2 .l30 { left: 184px; top: 226px; }
#vmap2 .b31 { left: 402px; top: 180px; z-index: 18; }
#vmap2 .l31 { left: 431px; top: 254px; }
#vmap2 .b32 { left: 84px; top: 200px; z-index: 19; }
#vmap2 .l32 { left: 113px; top: 274px; }
#vmap2 .b33 { left: 227px; top: 196px; z-index: 20; }
#vmap2 .l33 { left: 256px; top: 270px; }
#vmap2 .b34 { left: 354px; top: 213px; z-index: 21; }
#vmap2 .l34 { left: 383px; top: 287px; }
#vmap2 .b35 { left: 158px; top: 236px; z-index: 22; }
#vmap2 .l35 { left: 187px; top: 310px; }
#vmap2 .b36 { left: 286px; top: 247px; z-index: 23; }
#vmap2 .l36 { left: 315px; top: 321px; }
#vmap2 .b37 { left: 144px; top: 267px; z-index: 24; }
#vmap2 .l37 { left: 173px; top: 341px; }
#vmap2 .b38 { left: 262px; top: 276px; z-index: 25; }
#vmap2 .l38 { left: 291px; top: 350px; }
#vmap2 .b39 { left: 316px; top: 161px; z-index: 30; }
#vmap2 .l39 { left: 342px; top: 262px; }
#vmap2 .l40 { left: 240px; top: 350px; }
table.a2b { background: #fff; border: 1px dashed #c0c0c0; border-spacing: 0; width: 100%; }
table.a2b td { padding: 3px 8px; font-size: 11px; background: #fff; }
label.block { display: block; line-height: 20px; }
table.npc { width: auto; min-width: 360px; }
table.npc input { width: 70px; }

/* ---------- Comfortable scaling: the classic 980px design is enlarged on bigger screens ---------- */
@media (min-width: 1001px) {
  html { background: #e9e0c8 url(/static/img/ui/parchment.svg) 0 0 / 220px 220px repeat; }
  body { background: transparent; }
  #wrap { background: #fff; box-shadow: 0 0 0 1px #d6cdb0, 0 0 24px rgba(80, 60, 20, 0.18); }
  #mid { padding: 0 10px; }
}
@media (min-width: 1200px) { #wrap { zoom: 1.15; min-height: calc(100vh / 1.15); } }
@media (min-width: 1400px) { #wrap { zoom: 1.3; min-height: calc(100vh / 1.3); } }
@media (min-width: 1650px) { #wrap { zoom: 1.45; min-height: calc(100vh / 1.45); } }
@media (min-width: 1900px) { #wrap { zoom: 1.6; min-height: calc(100vh / 1.6); } }
@media (min-width: 2400px) { #wrap { zoom: 2; min-height: calc(100vh / 2); } }
@media (max-width: 700px) {
  #res table, #res tbody, #res tr { display: flex; flex-wrap: wrap; justify-content: center; }
  #res { white-space: normal; }
  body { font-size: 14px; }
}

img.avatar { border-radius: 50%; vertical-align: middle; background: #f3ead1; }
img.avatar.sm { margin-right: 4px; }
img.avatar.big { display: block; margin: 0 auto 6px; border: 3px solid #e3d6b0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.profile { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.pcard { width: 150px; text-align: center; background: url(/static/img/ui/panel.svg) top / 100% auto repeat-y; padding: 12px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgba(80, 60, 20, 0.2); }
.pname { font-weight: bold; font-size: 15px; }
.ptribe { font-size: 11px; color: #666; margin-top: 2px; }
.pedit { flex: 1; min-width: 240px; }
.pedit h2 { margin-top: 0; }
ul.list li img.avatar.sm { margin-right: 8px; }
@media (max-width: 700px) {
}

/* ---------- Side panels: clean cards ---------- */
#side_navi { float: left; width: 140px; margin: 12px 10px 0 0; font-size: 12px; }
#side_info { float: left; width: 236px; margin: 12px 0 0 16px; font-size: 12px; }
.sp { background: #fbfaf5; border: 1px solid #dcd6c3; border-radius: 6px; box-shadow: 0 1px 2px rgba(60, 50, 20, 0.08); overflow: hidden; margin-bottom: 12px; }
.sp-body { padding: 4px 0 6px; }
.sp a, .sp button.lnk { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 5px 10px; color: #33401c; font: normal 12px/16px Verdana, Arial, sans-serif; text-decoration: none; border-left: 3px solid transparent; text-align: left; }
.sp a img, .sp button.lnk img { flex: none; opacity: 0.85; }
.sp a:hover, .sp button.lnk:hover { background: #eef4e0; color: #2b6a00; }
.sp a.on { background: #e8f2d4; border-left-color: #71d000; color: #1f4d00; font-weight: bold; }
.sp-label { padding: 8px 13px 3px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9277; }
.sp-badge { display: inline-block; min-width: 14px; height: 14px; line-height: 14px; border-radius: 7px; background: #ff8000; color: #fff; font-size: 10px; font-weight: bold; text-align: center; }
.sp-user.sp-user { gap: 8px; padding: 10px; background: linear-gradient(#f4f1e4, #ebe6d2); border-bottom: 1px solid #dcd6c3; border-left: 0; }
.sp-user span { display: flex; flex-direction: column; min-width: 0; }
.sp-user b { color: #2f2a17; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-user small { color: #8a8266; font-size: 10px; }
.sp-head { margin: 0; padding: 8px 12px; font-size: 12px; font-weight: bold; color: #2f2a17; background: linear-gradient(#f4f1e4, #ebe6d2); border-bottom: 1px solid #dcd6c3; display: flex; justify-content: space-between; }
.sp-head span { color: #8a8266; font-weight: normal; }
/* "?" help bubbles (help() in views/tips.ts; edge placement + tap in app.js) */
span.qh.qh.qh { position: relative; display: inline-block; padding: 0; min-width: 0; letter-spacing: 0; width: 14px; height: 14px; margin: 0 3px; vertical-align: -2px; border: 1px solid #a8955c; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffaf0, #efe2bd); color: #6b5520; font: bold 10px/14px Verdana, Arial, sans-serif; text-align: center; text-shadow: none; cursor: help; user-select: none; box-sizing: border-box; line-height: 12px; }
span.qh.qh.qh:hover, span.qh.qh.qh:focus-visible, span.qh.qh.qh.open { border-color: #71d000; box-shadow: 0 0 0 2px rgba(113, 208, 0, 0.3); outline: none; }
.qh::after { content: attr(data-help); position: absolute; z-index: 60; bottom: calc(100% + 9px); left: 50%; width: max-content; max-width: 240px; padding: 7px 10px; border-radius: 6px; background: rgba(35, 25, 12, 0.9); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); color: #f6e7c0; font: normal 11px/1.45 Verdana, Arial, sans-serif; text-align: left; white-space: normal; transform: translateX(-50%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s; }
.qh::before { content: ''; position: absolute; z-index: 61; bottom: calc(100% + 3px); left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(35, 25, 12, 0.9); border-bottom: 0; opacity: 0; visibility: hidden; transition: opacity 0.12s; }
.qh:hover::after, .qh:hover::before, .qh:focus-visible::after, .qh:focus-visible::before, .qh.open::after, .qh.open::before { opacity: 1; visibility: visible; }
html.js .qh::after, html.js .qh::before { display: none; }

/* with JS one floating bubble is used instead (never clipped by panels) */
.qhpop { position: fixed; z-index: 1000; max-width: 240px; padding: 7px 10px; border-radius: 6px; background: rgba(35, 25, 12, 0.9); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); color: #f6e7c0; font: normal 11px/1.45 Verdana, Arial, sans-serif; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
.qhpop.on { opacity: 1; }
.qhpop::after { content: ''; position: absolute; left: var(--qa, 50%); margin-left: -6px; border: 6px solid transparent; }
.qhpop.up::after { top: 100%; border-top-color: rgba(35, 25, 12, 0.9); border-bottom: 0; }
.qhpop.down::after { bottom: 100%; border-bottom-color: rgba(35, 25, 12, 0.9); border-top: 0; }
.sp-villages { list-style: none; margin: 0; padding: 4px 0; }
.sp-villages button.lnk { justify-content: space-between; }
.sp-villages .vn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-villages .vc { color: #9a9277; font-size: 11px; flex: none; }
.sp-villages li.on button.lnk { background: #e8f2d4; border-left-color: #71d000; color: #1f4d00; font-weight: bold; }
.sp form { margin: 0; }
@media (min-width: 701px) and (max-width: 1000px) {
  /* tablets / phones held sideways: content fills everything right of the menu (no empty strip) */
  #mid { padding: 0 8px; }
  #content { width: calc(100% - 150px); min-height: 0; }
  #side_info { float: none; clear: both; width: auto; margin: 10px 0 0 150px; display: flex; gap: 12px; }
  #side_info .sp { flex: 1; }
}
@media (max-width: 700px) {
  #side_navi { float: none; width: auto; margin: 6px 0; }
  #side_navi .sp-user, #side_navi .sp-label { display: none; }
  #side_navi .sp-body { display: flex; flex-wrap: wrap; padding: 4px; }
  #side_navi .sp-body a, #side_navi .sp-body form, #side_navi .sp-body button.lnk { width: auto; border-left: 0; padding: 4px 8px; }
  #side_info { float: none; clear: both; width: auto; margin: 10px 0 0; }
}
.train-total { margin: 6px 0 4px; padding: 6px 8px; background: #f6f6f6; border: 1px solid #ddd; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12px; }
.train-total span { white-space: nowrap; }
.train-total img { vertical-align: middle; margin-right: 3px; }
.train-total .miss { color: #c00; font-weight: bold; }
/* Village centre with JS: pixel-exact picking; the hovered building itself glows. */
#vmap2.js .hitmap .hit { cursor: inherit; }
#vmap2.js .hitmap a:hover .hl, #vmap2.js .hitmap a:focus .hl { fill: none; stroke: none; }
/* Keyboard users still see which spot is focused. */
#vmap2.js .hitmap a:focus-visible .hl { fill: rgba(255, 255, 255, 0.22); stroke: #71d000; stroke-width: 2.5; stroke-dasharray: 6 4; }
#vmap2.js.pt { cursor: pointer; }
#vmap2 .bld.hov img { filter: drop-shadow(0 0 1.5px #71d000) drop-shadow(0 0 3px #71d000) brightness(1.06); }
#vmap2.wallhov .wall { filter: drop-shadow(0 0 2px #71d000) brightness(1.05); }
.carryline { margin: 4px 0 8px; font-size: 12px; } .carryline img { vertical-align: middle; }
/* Troop info */
a.uico { display: inline-block; line-height: 0; vertical-align: middle; }
a.uico:hover img { filter: drop-shadow(0 0 1.5px #71d000); }
.unitinfo { display: grid; grid-template-columns: 122px minmax(0, 1fr); grid-template-areas: "name name" "pic stats"; gap: 8px 16px; align-items: start; margin-bottom: 10px; }
.unitinfo .unitname { grid-area: name; padding-bottom: 6px; border-bottom: 1px solid #e3dcc6; }
.unitbig { grid-area: pic; display: block; background: radial-gradient(ellipse at 50% 70%, #f1ecd8, #fbfaf5 70%); border: 1px solid #e3dcc6; border-radius: 6px; }
.unitstats { grid-area: stats; min-width: 0; }
.unitstats > p:first-child { margin-top: 0; }
.unitstats table { width: 100%; }
@media (max-width: 600px) { .unitinfo { grid-template-columns: 1fr; grid-template-areas: "name" "pic" "stats"; } .unitbig { justify-self: center; } }
.unitstats table th, .unitinfo + h2 + table th { text-align: left; font-weight: normal; color: #555; width: 45%; }
.unittabs a { padding: 2px 4px; }
/* An unbuilt wall: a faint outline around the village that can be clicked to build it. */
#vmap2 .wall.ghost { opacity: 0.5; filter: grayscale(0.3) drop-shadow(0 0 1px rgba(80, 60, 20, 0.6)); }
#vmap2.wallhov .wall.ghost { opacity: 0.85; }
.w120 { width: 120px; }
.places a.place { margin-right: 6px; }

/* Resource bar icons open the production breakdown. */
#res a.resl { display: inline-block; border-radius: 3px; }
#res a.resl:hover, #res a.resl:focus-visible { background: rgba(113, 208, 0, 0.2); outline: 1px solid #71d000; }
.prodtb th { text-align: left; background: #f3f3f3; }
.prodtb tr.sum td { border-top: 2px solid #ccc; }
.carry { white-space: nowrap; margin-left: 6px; color: #555; }
/* Troop movements: scrollable list with tabs (Rally Point), compact summary (village). */
.mvbox .mvtabs { margin: 0 0 4px; }
.mvbox .mvtabs a.empty { color: #aaa; }
.mvscroll { max-height: 340px; overflow-y: auto; border: 1px solid #ccc; }
.mvscroll table.tb { margin: 0; border: 0; }
.mvscroll td { padding: 3px 6px; vertical-align: middle; }
.mvscroll td .small { line-height: 1.5; }
.mvsum td { padding: 2px 6px; }
.mvscroll .mvx { margin-left: 8px; color: #555; }
.mvscroll td { white-space: normal; }
.mvscroll td.num { white-space: nowrap; width: 1%; }
.mvscroll td:first-child { width: 1%; }
.bulk th.chk, .bulk td.chk { width: 1%; text-align: center; }
.bulkbar { margin: 6px 0; }
.bulkbar .sep { display: inline-block; width: 12px; }
.build_details .avail { font-size: 11px; color: #333; white-space: nowrap; }
input.w60 { width: 60px; }
/* Oasis Raider */
.raider { border: 1px solid #c9d9a8; background: #fbfdf6; padding: 8px 10px; margin: 8px 0 14px; border-radius: 4px; }
.raider.on { border-color: #71d000; box-shadow: 0 0 0 1px rgba(113, 208, 0, 0.25); }
.raider-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.raider-head .grow { flex: 1; }
.raider-title { font-size: 15px; }
.pill { display: inline-block; padding: 1px 7px; border-radius: 9px; background: #ddd; color: #555; font-size: 11px; font-weight: bold; }
.pill.on { background: #71d000; color: #fff; }
.raider h3 { font-size: 13px; margin: 8px 0 4px; }
.raider details { margin: 6px 0; }
.raider summary { cursor: pointer; padding: 3px 0; }
.raider-form th { text-align: left; padding-right: 8px; white-space: nowrap; vertical-align: top; font-weight: normal; color: #555; }
.raider-form td { padding: 3px 0; }
.mvscroll.short { max-height: 220px; }
.raider-loglist { margin: 4px 0; padding-left: 18px; }
.sp-villages .vn { flex: 1; min-width: 0; }
.sp .sp-villages button.lnk img.vcapm { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.sp-villages .vp { flex: none; font-size: 11px; color: #555; margin: 0 6px 0 4px; padding-left: 15px; background: url(/static/img/res/pop.svg) no-repeat left center / 12px 12px; }
.sp-total { margin: 0; padding: 4px 12px 8px; color: #555; }
.raider td.oname { white-space: nowrap; }
.raider .mvscroll td { padding: 3px 5px; }
a.plain { color: inherit; font-weight: inherit; text-decoration: none; }
a.plain:hover { text-decoration: underline; }
#production tr.prodrow:hover td { background: #f3f9e6; }
#production th a { color: inherit; }
/* ---------- Statistics (game style: folder tabs, plaques, beige panels) ---------- */
.spanel { background: #fbfaf5; border: 1px solid #dcd6c3; border-radius: 6px; box-shadow: 0 1px 2px rgba(60, 50, 20, 0.08); overflow: hidden; margin-bottom: 12px; }
.fame { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 0 0 12px; }
.plaque { flex: 0 1 160px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 18px 8px 10px; background: #fbfaf5; border: 1px solid #dcd6c3; border-radius: 6px; box-shadow: 0 1px 2px rgba(60, 50, 20, 0.1); color: #333; text-align: center; }
.plaque:hover { border-color: #b9d18f; background: #fdfdf8; }
.plaque.r1 { padding-top: 22px; padding-bottom: 16px; background: #fffbea; border-color: #e3d39a; }
.plaque .medal { position: absolute; top: -12px; }
.plaque .av { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #dcd6c3; margin-bottom: 4px; }
.plaque .nm { color: #2b6a00; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plaque .sb { font-size: 11px; color: #8a8266; }
.plaque .vl { font-size: 11px; color: #555; margin-top: 3px; }
.plaque .vl b { font-size: 13px; color: #222; }
.fame + .mebar, .mebar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 0 0 10px; font-size: 12px; }
.mebar .av { border-radius: 50%; }
.mebar a { margin-left: auto; }
table.ranks thead td { font-weight: bold; color: #333; }
table.ranks td { vertical-align: middle; }
table.ranks td.ra { width: 1%; text-align: right; white-space: nowrap; color: #666; }
table.ranks td.ra.top { text-align: center; padding: 1px 4px; }
table.ranks td.ra img { vertical-align: middle; }
table.ranks td.pla { white-space: nowrap; }
table.ranks td.pla .av { border-radius: 50%; vertical-align: middle; margin-right: 2px; }
table.ranks td.al { width: 14%; text-align: center; }
table.ranks td.val { text-align: right; white-space: nowrap; line-height: 1.1; padding-bottom: 3px; }
table.ranks td .co { color: #999; font-size: 11px; }
table.ranks tr.hl td { background: #f2f9e4; font-weight: bold; }
table.ranks tr.found td { background: #fff7d6; }
table.ranks tbody tr:hover td { background: #f8fbf1; }
table.ranks tr.hl:hover td { background: #eaf5d8; }
.vbar { display: block; width: 100%; height: 3px; margin-top: 3px; }
.vbar .bg { fill: #ece8da; }
.vbar .fg { fill: #9ccc5a; }
.tmark { vertical-align: -2px; opacity: 0.8; }
.atag { font-size: 11px; font-weight: bold; color: #8a6d1d; }
.rankfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: -6px 0 12px; padding: 6px 8px; background: #fbfaf5; border: 1px solid #dcd6c3; border-top: 0; font-size: 12px; }
.rankfoot:empty { display: none; }
.ranksearch label { margin-right: 6px; }
.weekbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 7px 10px; font-size: 12px; }
.weekbar img { vertical-align: -3px; }
.topgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 10px; }
.topbox { margin-bottom: 10px; }
.toplist { list-style: none; margin: 0; padding: 4px 0; }
.toplist li { display: flex; align-items: center; gap: 6px; padding: 3px 10px; font-size: 12px; }
.toplist li:nth-child(even) { background: #f7f5ec; }
.toplist li.me { background: #e8f2d4; font-weight: bold; }
.toplist .rk { width: 20px; text-align: right; color: #777; }
.toplist .rk img { vertical-align: middle; }
.toplist .av { border-radius: 50%; }
.toplist a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lastweek table { margin: 4px 0; }
.lastweek th { text-align: left; padding: 3px 10px; font-weight: normal; color: #555; white-space: nowrap; width: 40%; }
.lastweek td { padding: 3px 10px; }
.toplist + p, .topbox p.none { margin: 8px 10px; font-weight: normal; }
/* Combat simulator */
.simmode label { margin-right: 10px; }
.simmode .sep { color: #aaa; margin: 0 8px 0 0; }
table.simarmy { table-layout: fixed; margin-bottom: 4px; }
table.simarmy th .simtribe { margin-left: 8px; font-weight: normal; }
table.simarmy td { padding: 2px; text-align: center; }
table.simarmy tr:not(.herorow) td input { width: 100%; box-sizing: border-box; padding: 2px; text-align: right; }
table.simarmy tr.herorow input { width: 44px; }
table.simarmy tr.herorow select { max-width: 190px; }
table.simarmy .lbl { width: 78px; text-align: left; background: #f3f3f3; font-weight: bold; font-size: 12px; }
table.simarmy tr.lvl input { font-size: 11px; color: #555; background: #fafafa; }
table.simarmy tr.herorow td { text-align: left; font-size: 12px; }
table.simarmy tr.herorow label { margin-left: 8px; }
.simside.att { color: #c00; }
.simside.def { color: #3a8a00; }
.simrow { font-size: 12px; margin: 0 0 12px; }
.simrow label { margin-right: 10px; white-space: nowrap; }
.simreinf { margin: 0 0 8px; }
.simreinf summary { cursor: pointer; font-size: 12px; color: #4b7d00; }
#simresult { transition: opacity 0.15s; }
#simresult.busy { opacity: 0.55; }
.simhead { padding: 6px 8px; border: 1px solid #c0c0c0; background: #fafafa; }
.simhead.att b { color: #c00; }
.simhead.def b { color: #3a8a00; }
table.simres td { text-align: center; }
table.simfacts th { text-align: left; width: 35%; background: #f3f3f3; }
input.w60 { width: 60px; }
table.simres tr.trap td.trapc { color: #8a5a00; font-weight: bold; }
table.upgtb td, table.upgtb th { padding: 2px 6px; }
table.upgtb tr.base td { background: #f3f3f3; }
table.upgtb tr:hover td { background: #f2f9e4; }
table.upgtb { width: 100%; }
table.upgtb td.cost { font-size: 11px; }
table.upgtb td.cost .cost { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 8px; }
table.upgtb td.cost .cost span { margin: 0; }
table.upgtb td .good { font-size: 10px; }
table.upgtb td.cost img { width: 14px; height: 10px; }
/* Wallet holder tiers */
.tiercard { padding: 6px 10px 8px; }
.tiercard .tiername { font-size: 13px; }
ul.perks { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 5px 0 0; padding: 0; }
ul.perks li { font-size: 11px; padding: 1px 7px; border: 1px solid #dcd6c3; border-radius: 3px; background: #fbfaf5; white-space: nowrap; }
ul.perks li b { color: #2b6a00; }
/* ---------- Hero ---------- */
.herocard { display: flex; gap: 14px; padding: 12px; align-items: stretch; }
.herocard .portrait { position: relative; flex: none; width: 120px; height: 150px; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 85%, #e4edcf 0, #f4f1e4 60%, #fbfaf5 100%); border: 1px solid #dcd6c3; border-radius: 6px; }
.herocard .lvlbadge { position: absolute; top: -8px; left: -8px; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: #c9a227; color: #fff; font-weight: bold; border: 2px solid #fff; box-shadow: 0 0 0 1px #b08a1c; }
.herocard .hinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.herocard .hname { font-size: 18px; }
.herocard .hsub { font-size: 12px; color: #6a6450; }
.herocard .hsub img { vertical-align: -3px; }
.hstatus { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.hstatus .dot { width: 8px; height: 8px; border-radius: 50%; background: #aaa; }
.hstatus.st-home .dot { background: #71d000; }
.hstatus.st-away .dot, .hstatus.st-moving .dot { background: #e0a000; }
.hstatus.st-dead .dot { background: #c00; }
.hstatus.st-reviving .dot { background: #3a7bd5; }
.hrow { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.hrow .k { width: 74px; color: #6a6450; }
.hrow .v { width: 96px; text-align: right; white-space: nowrap; }
svg.meter { flex: 1; height: 8px; min-width: 60px; }
svg.meter .bg { fill: #ece8da; }
svg.meter.hp.good .fg { fill: #71d000; }
svg.meter.hp.mid .fg { fill: #e0a000; }
svg.meter.hp.low .fg { fill: #d33; }
svg.meter.xp .fg { fill: #c9a227; }
svg.meter.pts .fg { fill: #9ccc5a; }
.hfoot { margin-top: auto; }
.hstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.hstats .tile { margin: 0; padding: 7px 8px; text-align: center; }
.hstats .tile .lbl { display: block; font-size: 11px; color: #8a8266; }
.hstats .tile b { font-size: 15px; color: #2f2a17; }
.heroactions { margin: 0 0 12px; }
.skills .skill { display: grid; grid-template-columns: 1fr 120px 52px; gap: 10px; align-items: center; padding: 6px 12px; border-bottom: 1px solid #ece8da; }
.skills .skill label { display: flex; flex-direction: column; }
.skills .skill svg.meter { width: 120px; }
.skills .skillfoot { padding: 8px 12px; }
.freept { color: #2b6a00; }
.herohelp summary { cursor: pointer; list-style: none; }
.herohelp p { margin: 8px 12px; }
.heroact .pad { padding: 8px 12px; }
.renamebar { font-size: 12px; margin: 0 0 12px; }
@media (max-width: 600px) {
  .herocard { flex-direction: column; align-items: center; }
  .herocard .hinfo { width: 100%; }
  .hstats { grid-template-columns: repeat(2, 1fr); }
  .skills .skill { grid-template-columns: 1fr 52px; }
  .skills .skill svg.meter { display: none; }
}
form.spanel, details.spanel { display: block; }
.herohelp summary.sp-head { display: list-item; list-style: none; }
.herohelp summary.sp-head::-webkit-details-marker { display: none; }
details.autotrain > summary.sp-head { cursor: pointer; list-style: none; padding: 9px 34px 9px 26px; align-items: center; gap: 10px; justify-content: flex-start; }
details.autotrain > summary.sp-head::-webkit-details-marker { display: none; }
details.autotrain > summary .at-title { flex: 1; color: #2f2a17; }
details.autotrain > summary .at-title small { display: block; margin-top: 2px; font: normal 11px Verdana, Arial, sans-serif; color: #8a8266; }
details.autotrain[open] > summary .at-title small { display: none; }
details.autotrain > summary .at-state { flex: none; font-size: 11px; color: #8a8266; }
details.autotrain > summary .at-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #6fa62a; border-radius: 4px; background: linear-gradient(#a6dd5c, #6fb52a); color: #fff; font: bold 11px Verdana, Arial, sans-serif; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
details.autotrain > summary .at-toggle::after { content: ''; border: 5px solid transparent; border-top: 6px solid #fff; border-bottom: 0; transition: transform 0.15s; }
details.autotrain[open] > summary .at-toggle { background: linear-gradient(#f4f1e4, #ddd6bd); border-color: #c9bf9c; color: #6b5a2e; text-shadow: none; }
details.autotrain[open] > summary .at-toggle::after { border-top-color: #6b5a2e; transform: rotate(180deg); }
details.autotrain > summary .at-toggle span { color: inherit; font-weight: bold; }
details.autotrain > summary .at-toggle .c, details.autotrain[open] > summary .at-toggle .o { display: none; }
details.autotrain[open] > summary .at-toggle .c { display: inline; }
details.autotrain > summary:hover .at-toggle { filter: brightness(1.06); }
details.autotrain:not([open]) { border-color: #9ccc65; box-shadow: 0 0 0 1px rgba(113, 208, 0, 0.25), 0 1px 3px rgba(60, 50, 20, 0.15); }
details.autotrain:not([open]) > summary.sp-head { border-bottom: 0; }
details.autotrain:not([open]) { padding-bottom: 0; }
/* Village name plaque (village overview and centre) */
.vtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; padding: 0 0 6px; border-bottom: 1px solid #e3ddc8; }
.vtitle h1 { margin: 0; font: bold 24px/1.15 Georgia, 'Times New Roman', serif; color: #2f2a17; letter-spacing: 0.2px; }
.vtitle .vmeta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #8a8266; }
.vtitle .vmeta a { color: #8a8266; }
.vtitle .vmeta a:hover { color: #2b6a00; }
.vtitle .vpop { padding-left: 16px; background: url(/static/img/res/pop.svg) no-repeat left center / 13px 13px; }
.vtitle .vcap { padding: 0 6px; border: 1px solid #e3cf7a; border-radius: 3px; background: #fff8dc; color: #8a6d1d; font-size: 11px; }
/* Player profile */
.pcardx { display: flex; align-items: center; gap: 14px; padding: 12px; }
.pcardx .pav { border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #dcd6c3, 0 2px 4px rgba(60, 50, 20, 0.15); flex: none; }
.pcardx .pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pcardx .pnm { font: bold 22px/1.1 Georgia, 'Times New Roman', serif; color: #2f2a17; }
.pcardx .pyou { font: bold 10px Verdana, sans-serif; color: #fff; background: #71d000; border-radius: 3px; padding: 1px 5px; vertical-align: 4px; }
.pcardx .psub { font-size: 12px; color: #6a6450; }
.pcardx .psub img { vertical-align: -3px; }
.pchips { display: flex; flex-wrap: wrap; gap: 5px; }
.pchips .chip { font-size: 11px; padding: 1px 7px; border: 1px solid #dcd6c3; border-radius: 3px; background: #fff; color: #555; }
.pchips .chip img { vertical-align: -3px; }
.pchips .chip.prot { border-color: #b9d18f; background: #f2f9e4; color: #2b6a00; }
.pcardx .pacts { display: flex; flex-direction: column; gap: 5px; flex: none; }
.pstats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0 0 12px; }
.pstats .tile, .hstats .tile { margin: 0; padding: 7px 6px; text-align: center; }
.pstats .tile .lbl { display: block; font-size: 10px; color: #8a8266; }
.pstats .tile b { font-size: 14px; color: #2f2a17; }
.pabout .msgbody { padding: 8px 12px; }
.medalgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 8px; }
.medalgrid .medal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px 6px; background: #fff; border: 1px solid #ece8da; border-radius: 5px; font-size: 12px; }
.medalgrid .medal.r1 { background: #fffbea; border-color: #e3d39a; }
.vcap { padding: 0 5px; border: 1px solid #e3cf7a; border-radius: 3px; background: #fff8dc; color: #8a6d1d; font-size: 10px; font-weight: normal; }
@media (max-width: 600px) {
  .pcardx { flex-wrap: wrap; }
  .pcardx .pacts { flex-direction: row; width: 100%; }
  .pstats { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- Building pages ---------- */
.bhead { display: flex; gap: 14px; padding: 12px; align-items: flex-start; }
.bhead .bpic { position: relative; flex: none; width: 96px; height: 116px; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 88%, #e4edcf 0, #f4f1e4 62%, #fbfaf5 100%); border: 1px solid #dcd6c3; border-radius: 6px; }
.bhead .bpic img, .bhead .bpic svg { width: 75px; height: 100px; object-fit: contain; }
.bhead .bimg { flex: none; width: 96px; height: 116px; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 88%, #e4edcf 0, #f4f1e4 62%, #fbfaf5 100%); border: 1px solid #dcd6c3; border-radius: 6px; }
.bhead .bimg img, .bhead .bimg svg { width: 75px; height: 100px; object-fit: contain; }
.bhead .bdesc:last-child { flex: 1; margin: 0; align-self: center; }
.bhead .lvlbadge, .herocard .lvlbadge { position: absolute; top: -8px; left: -8px; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #c9a227; color: #fff; font-weight: bold; font-size: 12px; border: 2px solid #fff; box-shadow: 0 0 0 1px #b08a1c; }
.bhead .binfo { flex: 1; min-width: 0; }
.bhead .btitle { margin: 0 0 4px; font: bold 22px/1.15 Georgia, 'Times New Roman', serif; color: #2f2a17; }
.bhead .btitle .lvl { font: normal 15px Verdana, sans-serif; color: #b0a888; }
.bhead .bdesc { margin: 0 0 8px; font-size: 12px; color: #444; }
.beff { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.beff .tile { padding: 5px 10px; background: #fff; border: 1px solid #e3ddc8; border-radius: 5px; font-size: 12px; }
.beff .tile .lbl { display: block; font-size: 10px; color: #8a8266; }
.beff .tile.next { border-color: #b9d18f; background: #f6fbec; }
.beff .arrow { color: #9ccc5a; font-size: 18px; }
.bup .pad, .bcard .pad { padding: 8px 12px; }
.bup .cost { font-size: 12px; }
.bact { margin-top: 8px; }
.bwait { color: #8a8266; font-size: 12px; }
.bmax { color: #8a8266; font-style: italic; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.bcard { margin: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.bcard .bctop { display: flex; gap: 10px; }
.bcard .bcimg { flex: none; width: 60px; height: 80px; display: flex; align-items: flex-end; justify-content: center; background: #f4f1e4; border-radius: 5px; }
.bcard .bcimg img, .bcard .bcimg svg { width: 56px; height: 75px; object-fit: contain; }
.bcard .bcname { font: bold 15px Georgia, 'Times New Roman', serif; color: #2f2a17; }
.bcard p { margin: 3px 0 0; color: #555; }
.bcard .bact { margin-top: auto; }
.bcard.soon { opacity: 0.72; }
.bcard .requ { color: #a05a00; margin: 0; }
.bsoon { margin-top: 16px; color: #8a8266; }
@media (max-width: 600px) { .bhead { flex-direction: column; align-items: center; text-align: center; } .beff { justify-content: center; } }
.vtitle .vname { cursor: text; border-radius: 3px; }
.vtitle .vname:hover { background: #f6f3e8; box-shadow: 0 0 0 4px #f6f3e8; }
.vtitle .vedit { align-self: center; opacity: 0.5; }
.vtitle .vedit:hover { opacity: 1; }
.vtitle .vrename { display: flex; align-items: center; gap: 6px; }
.vtitle .vrename[hidden] { display: none !important; }
.vtitle .vrename input { font: bold 18px Georgia, 'Times New Roman', serif; padding: 2px 6px; width: 260px; max-width: 60vw; }
/* ---------- Game guide ---------- */
.fsearch { display: flex; gap: 6px; margin: 4px 0 6px; }
.fsearch input { flex: 1; font-size: 15px; padding: 8px 10px; border: 2px solid #b9d18f; border-radius: 6px; }
.fsearch input:focus { border-color: #71d000; outline: none; }
.flive { position: relative; z-index: 50; margin: -2px 0 10px; background: #fff; border: 1px solid #dcd6c3; border-radius: 6px; box-shadow: 0 4px 12px rgba(60, 50, 20, 0.15); overflow: hidden; }
.flive a { display: block; padding: 6px 10px; border-bottom: 1px solid #f0ece0; color: #333; text-decoration: none; }
.flive a:hover, .flive a:focus { background: #f2f9e4; }
.flive a b { display: block; color: #2b6a00; }
.flive a span { display: block; font-size: 11px; color: #777; }
.flive p { margin: 8px 10px; }
.fchips { margin: 0 0 12px; }
.fchip { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; border: 1px solid #dcd6c3; border-radius: 3px; background: #fbfaf5; font-size: 11px; color: #4b7d00; }
.fchip:hover { border-color: #71d000; }
.fcats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 10px; }
.fcatbox .sp-head a { color: #2f2a17; }
.fcatbox .sp-head img { vertical-align: -3px; }
.spanel .pad { padding: 6px 12px; margin: 0; }
.flist { list-style: none; margin: 0; padding: 4px 0; }
.flist li { padding: 5px 12px; border-bottom: 1px solid #f0ece0; }
.flist li:last-child { border-bottom: 0; }
.flist li a { font-weight: bold; }
.flist .fsum { display: block; font-size: 11px; color: #777; }
.flist .fcat { font-size: 10px; color: #8a8266; border: 1px solid #e3ddc8; border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.flist.short li { padding: 3px 12px; border: 0; }
.flist.short li a { font-weight: normal; }
.flist .more { color: #8a8266; font-size: 11px; }
.fcrumb { font-size: 12px; color: #8a8266; margin: 0 0 6px; }
.ftopic { padding: 12px 16px; }
.ftitle { margin: 0 0 8px; font: bold 22px/1.2 Georgia, 'Times New Roman', serif; color: #2f2a17; }
.fanswer { padding: 8px 12px; margin: 0 0 12px; background: #f2f9e4; border-left: 3px solid #71d000; border-radius: 3px; font-size: 13px; }
.fbody p { margin: 0 0 10px; line-height: 1.55; }
.fsteps { margin: 0 0 10px 18px; padding: 0; line-height: 1.55; }
.fsteps li { margin-bottom: 4px; }
.ftips { margin: 0 0 10px; padding: 8px 12px; background: #fffbea; border: 1px solid #ecdca0; border-radius: 5px; }
.ftips ul { margin: 4px 0 0 18px; padding: 0; line-height: 1.5; }
.fnote { margin: 0 0 10px; padding: 6px 10px; background: #f6f6f6; border-left: 3px solid #c0c0c0; font-size: 12px; color: #555; }
.ftable th { text-align: left; }
.flinks { margin: 8px 0 0; }
.fnav { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
input.tickerin { width: 100%; box-sizing: border-box; font-size: 14px; padding: 6px 8px; }
#vmap1 img.fo { position: absolute; width: 46px; height: 40px; z-index: 10; pointer-events: none; }
/* Side panels: player card, section titles, link tiles */
.sp-user.sp-user { padding: 10px 12px; }
.sp-user .avatar { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #d2cab0; }
.sp-user b { font: bold 14px Georgia, 'Times New Roman', serif; }
.sp-user small.sp-gold { color: #8a6d1d; }
.sp-user small.sp-gold img { vertical-align: -1px; }
.sp-label { text-transform: none; letter-spacing: 0; font: bold 11px Georgia, 'Times New Roman', serif; color: #8a8266; padding: 9px 13px 3px; display: flex; align-items: center; gap: 6px; }
.sp-label::after { content: ''; flex: 1; height: 1px; background: #e8e2cd; }
.sp a img, .sp button.lnk img { width: 18px; height: 18px; opacity: 1; }
.sp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
.sp .sp-tiles a.sp-tile { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 4px; border: 1px solid #ece6d2; border-left: 1px solid #ece6d2; border-radius: 5px; background: #fff; text-align: center; font-size: 11px; line-height: 13px; }
.sp .sp-tiles a.sp-tile:hover { border-color: #b9d18f; background: #f6fbec; }
.sp .sp-tiles a.sp-tile img { width: 22px; height: 22px; }
.sp .sp-user.sp-card { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 8px 10px; }
.sp-card b { max-width: 100%; }
.sp-card .sp-chips { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.sp-card .sp-chips span { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border: 1px solid #dcd6c3; border-radius: 3px; background: #fff; font-size: 10px; color: #5a5233; }
.sp .sp-card img.avatar { width: 44px; height: 44px; }
.sp-card .sp-chips, .sp-card .sp-chips span { flex-direction: row; }
.sp .sp-card .sp-chips img { width: auto; height: 12px; }
/* ---------- Battle reports ---------- */
.rephead { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.rephead .ricon img { width: 28px; height: 28px; }
.rephead .rtitle { flex: 1; min-width: 0; }
.rephead h1 { margin: 0; font: bold 18px/1.2 Georgia, 'Times New Roman', serif; color: #2f2a17; }
.rephead .racts { display: flex; gap: 6px; flex: none; }
.rbanner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 14px; margin: 0 0 12px; border-radius: 6px; border: 1px solid; }
.rbanner b { font: bold 18px Georgia, 'Times New Roman', serif; }
.rbanner.win { background: #f2f9e4; border-color: #b9d18f; color: #2b6a00; }
.rbanner.loss { background: #fdf0ee; border-color: #e7b7ae; color: #a01d10; }
.rbanner .rpow { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; color: #555; }
.rbar { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; }
.rbar .att { fill: #d65a4a; }
.rbar .def { fill: #6aa84f; }
.rbar .fg { fill: #c9a227; }
.rbar .bg { fill: #ece8da; }
.ca { color: #b03a2e; }
.cd { color: #3a7a1a; }
.rside { border-left-width: 4px; }
.rside.att { border-left-color: #d65a4a; }
.rside.def { border-left-color: #6aa84f; }
.rside .sp-head { flex-wrap: wrap; gap: 4px 10px; justify-content: flex-start; }
.rside .rrole { color: #2f2a17; font-weight: bold; }
.rside.att .rrole { color: #b03a2e; }
.rside.def .rrole { color: #3a7a1a; }
.rside .rwho { color: #5a5233; font-weight: normal; }
.rside .rwho .co { color: #999; font-size: 11px; }
.rside .pad { padding: 8px 10px; }
.rside table.units { margin-bottom: 4px; }
.rloss { margin: 2px 0 4px; color: #6a6450; }
.rbounty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; padding-top: 6px; border-top: 1px solid #ece8da; }
.rbounty .cost { font-size: 12px; }
.rbounty .rcarry { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.revents { list-style: none; margin: 0; padding: 6px 12px; }
.revents li { padding: 3px 0 3px 14px; position: relative; }
.revents li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #c9a227; }
@media (max-width: 600px) { .rephead { flex-wrap: wrap; } .rephead .racts { width: 100%; } }
/* Menu items stay on one line; the active one is marked by colour and the bar, not bold text. */
#side_navi .sp-body a, #side_navi .sp-body button.lnk { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#side_navi .sp-body a.on { font-weight: normal; text-shadow: 0 0 0.01px #1f4d00; }
/* Profile stat tiles: three per row so big numbers fit */
.pstats { grid-template-columns: repeat(3, 1fr); }
.pstats .tile .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstats .tile b { font-size: 15px; white-space: nowrap; }
/* ---------- Custom farm lists ---------- */
.fl-table td { vertical-align: middle; }
.fl-new { display: flex; gap: 6px; align-items: center; }
.fl-new input { flex: 1; max-width: 260px; }
.fl-empty { color: #555; }
.fl-empty p { margin: 0 0 8px; }
.fl-open .pad { padding: 10px 12px; }
.fl-step { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font: bold 14px Georgia, 'Times New Roman', serif; color: #2f2a17; }
.fl-step:first-child { margin-top: 0; }
.fl-step span { width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: #71d000; color: #fff; font: bold 12px Verdana, sans-serif; }
.fl-actions { margin: 6px 0 0; }
.fl-troops { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; margin: 0 0 8px; background: #fff; border: 1px solid #ece6d2; border-radius: 5px; }
.fl-troops .lbl { font-size: 11px; color: #8a8266; width: 100%; }
.fl-unit { display: inline-flex; align-items: center; gap: 2px; }
.fl-unit input { width: 46px; }
.fl-carry { margin-left: auto; color: #555; }
.fl-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fl-way { padding: 8px 10px; background: #fff; border: 1px solid #ece6d2; border-radius: 5px; }
.fl-way p { margin: 4px 0; }
.fl-settings { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.fl-settings .fl-del { align-self: flex-start; margin-top: 4px; }
@media (max-width: 600px) { .fl-ways { grid-template-columns: 1fr; } }
.fl-open td.small .muted { white-space: nowrap; }
/* Top buttons: grey, colourful on hover and for the open page */
#mtop a img.c { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.15s; }
#mtop a:hover img.c, #mtop a:focus-visible img.c, #mtop a.on img.c { opacity: 1; }
#mtop a:hover img.g { filter: none; }
.routc { margin: -4px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: #8a8266; }
.routc a { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border: 1px solid #dcd6c3; border-radius: 3px; background: #fbfaf5; }
.routc a.on { background: #71d000; border-color: #5fb300; color: #fff; }
.routc a img { width: 14px; height: 14px; }
/* Hero portrait: backdrop and frame grow grander every 5 levels */
.herocard .portrait { background: none; border: 0; border-radius: 1px; width: 120px; height: 150px; padding: 0; }
.herocard .portrait img { position: absolute; left: 0; }
.herocard .portrait img.bd, .herocard .portrait img.fr { top: 0; width: 120px; height: 150px; }
.herocard .portrait img.fig { top: 10px; width: 120px; height: 140px; }
.herocard .portrait img.fr { pointer-events: none; }
.herocard .lvlbadge { z-index: 2; }
/* ---------- Beginner tasks ---------- */
@keyframes hintpulse { 0% { box-shadow: 0 0 0 0 rgba(255, 160, 0, 0.75); } 70% { box-shadow: 0 0 0 10px rgba(255, 160, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 160, 0, 0); } }
#vmap1 .rf.hint { border-color: #ff9800; background: #fff3c4; animation: hintpulse 1.6s infinite; }
.hintring { position: absolute; z-index: 49; width: 17px; height: 17px; border-radius: 50%; border: 2px solid #ff9800; animation: hintpulse 1.6s infinite; pointer-events: none; margin: -2px 0 0 -2px; }
.hintbub { position: absolute; z-index: 60; width: 120px; margin: -46px 0 0 -52px; padding: 4px 6px; background: #2f2a17; color: #fff; font: 11px/1.3 Verdana, sans-serif; text-align: center; border-radius: 5px; pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.hintbub::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #2f2a17; }
.taskbox .sp-head a { color: #2f2a17; }
.tk-body { display: flex; gap: 8px; padding: 8px 10px 4px; }
.tk-adv { position: relative; flex: none; width: 64px; }
.tk-adv img { display: block; }
.tk-adv .tk-alert { position: absolute; top: -4px; right: -8px; animation: hintpulse 1.6s infinite; border-radius: 50%; }
.tk-text { flex: 1; min-width: 0; font-size: 12px; }
.tk-text b { display: block; font: bold 13px Georgia, 'Times New Roman', serif; color: #2f2a17; }
.tk-text p { margin: 4px 0; }
.trew { display: inline-flex; flex-wrap: wrap; gap: 2px 6px; font-size: 11px; color: #444; }
.trew img { width: 14px; height: 10px; }
.trew .tgold { color: #8a6d1d; font-weight: bold; }
.tprog { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.tprog svg { flex: 1; height: 6px; min-width: 50px; }
.tprog .bg { fill: #ece8da; }
.tprog .fg { fill: #71d000; }
.tk-more { margin: 0; padding: 2px 10px 8px; text-align: right; }
.tk-intro { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.tk-intro p { flex: 1; margin: 0; }
.tk-chapter summary { cursor: pointer; list-style: none; }
.tk-list { list-style: none; margin: 0; padding: 0; }
.tk-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #ece8da; }
.tk-list li:last-child { border-bottom: 0; }
.tk-list li.claimed { opacity: 0.6; }
.tk-list li.ready { background: #fffbea; }
.tk-state { flex: none; width: 18px; padding-top: 2px; }
.tk-dot { display: block; width: 12px; height: 12px; margin: 3px; border-radius: 50%; border: 2px solid #c9c2a8; }
.tk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-main b { font: bold 13px Georgia, 'Times New Roman', serif; }
.tk-act { flex: none; text-align: right; }
/* Info box under the menu */
#side_left { float: left; width: 140px; margin: 12px 10px 0 0; }
#side_left #side_navi { float: none; width: auto; margin: 0 0 12px; }
@media (max-width: 760px) { #side_left { float: none; width: auto; margin: 0 0 10px; } #content { float: none; width: auto; min-height: 0; } #side_info { margin-left: 0; } }
.infobox ul { list-style: none; margin: 0; padding: 4px 0; }
.infobox li { padding: 4px 10px 4px 22px; font-size: 11px; line-height: 1.35; position: relative; border-bottom: 1px solid #f0ece0; }
.infobox li:last-child { border-bottom: 0; }
.infobox li::before { content: ''; position: absolute; left: 9px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #9aa; }
.infobox li.good::before { background: #71d000; }
.infobox li.warn::before { background: #e0a000; }
.infobox li.bad::before { background: #d33; }
.infobox li.bad { font-weight: bold; color: #a01d10; }
.infobox li a { color: inherit; display: block; padding: 0; }
.infobox li a:hover { color: #2b6a00; background: none; }
.sp.taskbox a { display: inline; width: auto; padding: 0; border-left: 0; }
.sp.taskbox .sp-head a { color: #2f2a17; font-weight: bold; }
.sp.taskbox a.btn { display: inline-block; padding: 2px 10px; }
.sp.taskbox .tk-more a { color: #4b7d00; }
.sp.infobox li a { display: block; width: auto; padding: 0; border-left: 0; font-size: 11px; }
/* ---------- Ornate panels (Legends-inspired details on the classic layout) ---------- */
.sp, .spanel { position: relative; background: #fbf8ef url(/static/img/ui/parchment.svg) 0 0 / 160px 160px repeat; border-color: #d6cdb0; }
.sp::before, .spanel::before, .sp::after, .spanel::after { content: ''; position: absolute; width: 28px; height: 28px; pointer-events: none; z-index: 2; background: 0 0 / 28px 28px no-repeat; }
.sp::before, .spanel::before { top: -1px; left: -1px; background-image: url(/static/img/ui/corner-tl.svg); }
.sp::after, .spanel::after { bottom: -1px; right: -1px; background-image: url(/static/img/ui/corner-br.svg); }
.sp-head { padding-left: 26px; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; letter-spacing: 0.2px; background: linear-gradient(rgba(244, 238, 216, 0.95), rgba(232, 224, 196, 0.95)); border-bottom-color: #d6cdb0; }
.sp > :last-child, .spanel > :last-child { margin-bottom: 0; }
.sp, .spanel { padding-bottom: 6px; }
.tile.spanel::before, .tile.spanel::after { width: 18px; height: 18px; background-size: 18px 18px; }
.tile.spanel { padding-bottom: 0; }
#header::before { background: url(/static/img/ui/header-strip.svg) 0 0 / auto 30px repeat-x; border: 0; opacity: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
/* ---------- Wooden tabs (shop, reports, statistics) ---------- */
.woodtabs { display: flex; flex-wrap: wrap; margin: 8px 0 0; padding: 3px 3px 0; background: #5b4129 url(/static/img/ui/header-strip.svg) 0 0 / auto 100% repeat-x; border: 1px solid #3f2c1a; border-radius: 6px 6px 0 0; box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.25); }
.woodtabs a { flex: 1 1 auto; text-align: center; padding: 7px 12px; margin: 0 1px; color: #f3dca8; font: bold 13px Verdana, sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); border-radius: 4px 4px 0 0; background: rgba(40, 25, 12, 0.35); border: 1px solid rgba(0, 0, 0, 0.25); border-bottom: 0; }
.woodtabs a:hover { color: #fff; background: rgba(255, 220, 160, 0.18); }
.woodtabs a.on { background: linear-gradient(#f6dfa6, #e2bd72); color: #3a2a12; text-shadow: none; border-color: #c49a4e; }
.woodbody { border: 1px solid #c9b88f; border-top: 0; border-radius: 0 0 6px 6px; padding: 12px; margin-bottom: 14px; background: #fbf8ef url(/static/img/ui/parchment.svg) 0 0 / 160px 160px repeat; }
.woodbody > .spanel:last-child, .woodbody > p:last-child { margin-bottom: 0; }
/* Shop */
.shophead { display: flex; align-items: center; justify-content: space-between; }
.shophead h1 { margin-bottom: 0; }
.shopbal { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; font: bold 16px Georgia, serif; color: #6b4e10; background: #fff8e0; border: 1px solid #e3c878; border-radius: 14px; }
.steps { display: flex; list-style: none; margin: 0 0 12px; padding: 0; counter-reset: st; font-size: 12px; color: #8a8270; }
.steps li { flex: 1; display: flex; align-items: center; gap: 6px; counter-increment: st; }
.steps li::before { content: counter(st); flex: none; width: 20px; height: 20px; border-radius: 50%; background: #ddd6c0; color: #fff; font-weight: bold; text-align: center; line-height: 20px; }
.steps li:not(:last-child)::after { content: ''; flex: 1; height: 1px; background: #d6cdb0; margin: 0 6px; }
.steps li.on { color: #2f2a17; font-weight: bold; }
.steps li.on::before { background: #4f9a1c; }
.gpacks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; margin: 18px 0 12px; }
.gpin { position: absolute; opacity: 0; pointer-events: none; }
.gpack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 0 0; cursor: pointer; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, #3c9c9a 0, #126866 45%, #0b4a4a 100%); border: 2px solid #b28a3e; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 0 2px rgba(0, 0, 0, 0.25); transition: transform 0.12s; }
.gpack.hot { background: radial-gradient(circle at 50% 55%, #f5c95a 0, #d0921e 50%, #9c6510 100%); }
.gpack:hover { transform: translateY(-2px); }
.gpin:checked + .gpack { border-color: #ffd96a; box-shadow: 0 0 0 3px #71d000, 0 4px 10px rgba(0, 0, 0, 0.35); }
.gpin:focus-visible + .gpack { outline: 2px dotted #ff8000; outline-offset: 3px; }
.gamt { display: flex; align-items: center; gap: 5px; color: #fff; font: bold 20px Georgia, serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.gpack img { margin: 2px 0; }
.gpimg { display: block; width: 120px; height: 90px; }
.gprice { align-self: stretch; display: flex; flex-direction: column; align-items: center; padding: 5px 0 6px; background: rgba(0, 0, 0, 0.35); color: #fff; }
.gprice b { font-size: 15px; }
.gprice span { font-size: 11px; color: #d8efe9; }
.gpack.hot .gprice span { color: #fff1cc; }
.gtag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 2px 10px 3px; background: #b3261e; color: #ffe9a8; font: bold 10px Verdana, sans-serif; text-transform: uppercase; border-radius: 0 0 6px 6px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.gtag.val { background: #3f7d1c; }
.gpack.hot { padding-top: 22px; }
.paybox .pad { padding: 10px 12px; }
.paysum { margin: 0 0 8px; font-size: 13px; }
.paybtn { min-width: 220px; font-size: 14px; padding: 7px 16px; }
.paybox details summary { cursor: pointer; color: #4b7d00; margin-top: 6px; }
.advgrid { display: grid; gap: 10px; margin-bottom: 12px; }
.advgrid.two { grid-template-columns: 1fr 1fr; }
.advgrid.four { grid-template-columns: repeat(4, 1fr); }
.advh { margin: 4px 0 8px; font: bold 14px Georgia, serif; color: #4a3b1f; border-bottom: 0; }
.advcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 8px 10px; margin: 0; }
.advcard.wide { display: grid; grid-template-columns: 64px 1fr; align-items: start; text-align: left; column-gap: 10px; }
.advcard.wide .advfoot { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
.advcard.active { border-color: #9cc66a; box-shadow: 0 0 0 1px #c8e3a5; }
.advtxt { display: flex; flex-direction: column; gap: 2px; }
.advtxt b { font: bold 13px Georgia, serif; color: #3b2f16; }
.advtxt .small { line-height: 1.35; }
.advfoot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 4px; }
.advfoot form { margin: 0; }
.gbtn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: linear-gradient(#ffe27a, #f0b92b); border: 1px solid #b58712; color: #3a2a06; font-weight: bold; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.gbtn:hover { background: linear-gradient(#fff0a8, #f5c440); }
.gbtn.secondary { background: linear-gradient(#f2eee2, #ddd6c0); border-color: #b9b29a; color: #6b6450; }
.gcoin { display: inline-flex; align-items: center; gap: 3px; }
.special .sph { display: inline-flex; align-items: center; gap: 8px; }
.special .sph .sart { width: 32px; height: 24px; }
.special .sp-head { align-items: center; }
.ghist td { padding: 5px 8px; }
@media (max-width: 760px) {
  .gpacks { grid-template-columns: repeat(2, 1fr); }
  .advgrid.two, .advgrid.four { grid-template-columns: 1fr 1fr; }
  .steps li span, .steps li:not(.on) { font-size: 0; }
}
.advcard::before, .advcard::after { width: 18px; height: 18px; background-size: 18px 18px; }
.paybox::after { display: none; }
.sp-head .sph { color: #2f2a17; font-weight: bold; font-size: 13px; }
/* Reports (Legends-style folder) */
.gbtn.green { background: linear-gradient(#8fcf3c, #4f8f17); border-color: #2f5e0b; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); font-size: 12px; }
.gbtn.green:hover { background: linear-gradient(#a2dc52, #5ea21f); }
.rtop, .rbottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rbtns { display: flex; gap: 8px; }
.rtop .routc { margin: 0; }
.rsel { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; font-size: 13px; }
.rsel label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rselact button { margin-left: 4px; }
.rlist { width: 100%; background: #fff; }
.rlist th { text-align: left; }
.rlist .chk { width: 22px; text-align: center; }
.rlist .rico { width: 20px; }
.rlist .rrecv { width: 110px; text-align: right; }
.rlist th.rrecv a { color: #4b7d00; }
.rlist tr.unread td a { font-weight: bold; }
.rlist .rnone { text-align: center; color: #888; padding: 12px; }
.rnew { display: inline-block; padding: 0 5px; font-size: 10px; line-height: 15px; color: #fff; background: #d9534f; border-radius: 7px; vertical-align: 1px; }
.rnote { margin: 10px 0 0; }
.pager { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.pager a, .pager b, .pager span { min-width: 22px; padding: 2px 5px; text-align: center; border-radius: 3px; }
.pager a { color: #4b7d00; font-weight: bold; }
.pager a:hover { background: #eef6dc; }
.pager b { background: #4b7d00; color: #fff; }
.pager .off { color: #ccc; }
.pager .pgap { color: #999; min-width: 0; }
/* Statistics (Legends-style: wooden tabs, green sub tabs, airy rows, helmets) */
.pilltabs { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 10px; border-bottom: 1px solid #d6cdb0; }
.pilltabs a { padding: 4px 12px; font-size: 13px; color: #555; background: #ece8dc; border: 1px solid #d6cdb0; border-bottom: 0; border-radius: 4px 4px 0 0; }
.pilltabs a:hover { background: #f6f3ea; color: #2b6a00; }
.pilltabs a.on { background: #8cc63f; color: #fff; border-color: #6fa62a; }
.woodbody.statbody table.ranks { width: 100%; background: #fff; border-collapse: collapse; border: 1px solid #ddd6c0; margin-bottom: 10px; }
.woodbody.statbody table.ranks thead tr:first-child th { text-align: left; padding: 6px 12px; font-size: 14px; color: #2f3a22; background: #dde8d6; border: 0; border-bottom: 6px solid #fff; border-radius: 0; }
.woodbody.statbody table.ranks thead td { padding: 6px 8px; background: #fff; border: 0; border-bottom: 1px solid #ddd6c0; }
.woodbody.statbody table.ranks tbody td { padding: 9px 8px; border: 0; border-bottom: 1px solid #ebe6d6; }
.woodbody.statbody table.ranks tbody tr:last-child td { border-bottom: 0; }
.woodbody.statbody table.ranks td.pla a { font-weight: bold; }
.woodbody.statbody table.ranks tr.hl td { background: #e4f0d2; }
img.helm { vertical-align: middle; margin: -3px 4px -3px 0; }
.woodbody.statbody .rankfoot { margin: 0; background: #ece8dc; border: 1px solid #ddd6c0; border-radius: 4px; padding: 6px 10px; }
.woodbody.statbody .fame { margin-top: 4px; }
.ranksearch { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ranksearch .gbtn { padding: 3px 14px; }
.weekbar::before, .weekbar::after, .mebar::before, .mebar::after { width: 16px; height: 16px; background-size: 16px 16px; }
.weekbar { padding-left: 18px; padding-right: 18px; }
.lastweek table.plain { margin: 6px 12px 4px; width: calc(100% - 24px); }
/* Simulator: village bar and resource losses */
.simvil .pad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px; }
.simvil .pad .muted { flex-basis: 100%; }
.simvil button img { vertical-align: -2px; }
.simh { margin: 12px 0 4px; font: bold 14px Georgia, serif; }
.simcost th:first-child { text-align: left; white-space: nowrap; }
.simcost tr.att th:first-child { color: #a01d10; }
.simcost tr.def th:first-child { color: #2b6a00; }
/* ---------- Live map ---------- */
.livemap { margin: 0 0 12px; }
.lm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 6px; background: #5b4129 url(/static/img/ui/header-strip.svg) 0 0 / auto 100% repeat-x; border: 1px solid #3f2c1a; border-radius: 6px 6px 0 0; color: #f3dca8; }
.lm-btn { min-width: 28px; height: 26px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(#f6e7c1, #dcc08a); border: 1px solid #7a5a2c; border-radius: 4px; color: #3a2a12; font: bold 14px Verdana, sans-serif; cursor: pointer; }
.lm-btn:hover { background: linear-gradient(#fff3d6, #e8cf9c); }
.lm-btn[aria-pressed='false'] { opacity: 0.6; }
.lm-btn img { width: 16px; height: 16px; }
.lm-zoom { min-width: 42px; text-align: center; font-weight: bold; font-size: 12px; }
.lm-go { display: inline-flex; align-items: center; gap: 3px; margin: 0 0 0 6px; font-size: 12px; font-weight: bold; }
.lm-go input { width: 38px; height: 22px; padding: 1px 3px; }
.lm-sp { flex: 1; }
.lm-view { position: relative; height: 470px; overflow: hidden; background: #cfe3a6; border: 1px solid #3f2c1a; border-top: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.lm-view:focus-visible { box-shadow: inset 0 0 0 2px #ff8000; }
.lm-view.drag { cursor: grabbing; }
.lm-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.lt { position: absolute; display: block; width: 60px; height: 60px; }
.lt img { display: block; width: 60px; height: 60px; pointer-events: none; }
.lt::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.lt.rel-m::after { box-shadow: inset 0 0 0 2px #ff8000; border-radius: 6px; }
.lt.rel-a::after { box-shadow: inset 0 0 0 2px #286edc; border-radius: 6px; }
.lt.rel-n::after { box-shadow: inset 0 0 0 2px #8032a0; border-radius: 6px; }
.lt.rel-o::after { box-shadow: inset 0 0 0 1.5px rgba(200, 40, 30, 0.8); border-radius: 6px; }
.lt.hov::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 2px #fff; z-index: 1; pointer-events: none; }
.lt-m { position: absolute; right: 2px; top: 2px; display: flex; gap: 2px; z-index: 2; }
.lt-m .mvk { margin: 0; }
.lm-axis { position: absolute; pointer-events: none; font: bold 10px Verdana, sans-serif; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.lm-ax { left: 0; right: 0; bottom: 2px; height: 14px; }
.lm-ax span { position: absolute; transform: translateX(-50%); }
.lm-ay { top: 0; bottom: 0; left: 3px; width: 26px; }
.lm-ay span { position: absolute; transform: translateY(-50%); }
.lm-mini { position: absolute; right: 8px; top: 8px; padding: 3px; background: rgba(40, 28, 14, 0.85); border: 1px solid #c49a4e; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); cursor: crosshair; z-index: 3; }
.lm-mini canvas { display: block; width: 152px; height: 152px; image-rendering: pixelated; }
.lm-load { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 2px 10px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; border-radius: 10px; pointer-events: none; }
.lm-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 8px; background: #fbf8ef; border: 1px solid #c9b88f; border-top: 0; border-radius: 0 0 6px 6px; }
.lm-info { flex: 1 1 260px; min-width: 0; }
.lm-info th { text-align: left; white-space: nowrap; }
.lm-legend { flex: 1 1 200px; line-height: 1.9; }
.lmk { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin: 0 2px 0 6px; }
.lmk.m { background: #ff8000; }
.lmk.a { background: #286edc; }
.lmk.o { background: #c8281e; }
.lmk.n { background: #8032a0; }
.lmk.oa { background: #3e8034; }
.livemap.full { position: fixed; inset: 0; z-index: 1000; margin: 0; display: flex; flex-direction: column; background: rgba(20, 14, 6, 0.85); padding: 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
.livemap.full .lm-view { flex: 1; height: auto; }
.livemap.full .lm-foot { max-height: 30vh; overflow: auto; }
body.lm-noscroll { overflow: hidden; }
@media (max-width: 760px) { .lm-view { height: 380px; } .lm-mini canvas { width: 110px; height: 110px; } }

/* ---------- Design pass: helpers and page bits ---------- */
.rowbtn { align-self: flex-end; }
.gbtn.big { font-size: 15px; padding: 8px 22px; }
a.gbtn { display: inline-flex; text-decoration: none; }
.howto li img { margin-right: 8px; }
.unitname { margin: 0; font: bold 18px Georgia, serif; }
.unittabs a { padding: 3px 6px; }
.queue table.tb { width: 100%; border: 0; }
.protnote { margin: 4px 0 8px; }
.buildline { margin: 6px 0; }
.spanel.pad, .spanel .pad { padding: 8px 12px; }
.spanel > .pad { padding-top: 8px; }
.spanel .actions { margin: 4px 0 0; }
.spanel table.tb { width: 100%; border-left: 0; border-right: 0; }
.spanel > ul.list, .spanel > table { margin-bottom: 0; }
.spanel ul.list li { padding: 6px 12px; border-bottom: 1px solid #ece8da; }
.spanel ul.list li:last-child { border-bottom: 0; }
.evade .pad { margin: 0; }
.chatlog.spanel { padding: 6px 12px 10px; }
.troopshome .actions { padding: 6px 12px 8px; }
.pvill { margin-top: 10px; border-radius: 6px; border-top: 1px solid #c9b88f; }
.pilltabs.mapopts { margin-bottom: 8px; }
.pilltabs img { vertical-align: -2px; }
.train-total.sticky { position: sticky; bottom: 0; z-index: 5; background: #fbf8ef; box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08); }
.sp-sep { height: 1px; margin: 6px 10px; background: #e2dcc6; }
.tiercard { padding: 8px 10px; border: 1px solid #e3dcc4; border-radius: 6px; background: rgba(255, 255, 255, 0.5); }
.tiername { font: bold 13px Georgia, serif; color: #3b2f16; }
.shophead + .woodtabs { margin-top: 6px; }
.choice.tribepick { display: block; padding: 8px 10px; margin: 6px 0; border: 1px solid #e3dcc4; border-radius: 6px; background: rgba(255, 255, 255, 0.5); }
.choice.tribepick label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.choice.tribepick ul { margin: 4px 0 0 70px; }
.msgbody { white-space: pre-wrap; }
.stack label { display: block; margin: 8px 0 3px; font-weight: bold; }
.stack input[type=text], .stack input[type=password] { width: 60%; max-width: 320px; }
.stack .actions { margin-top: 10px; }
/* Building level tables */
.lvtable { font-size: 11px; }
.lvtable th, .lvtable td { padding: 3px 4px; }
.lvtable th { white-space: nowrap; }
.lvtable tr.cur td { background: #e4f0d2; font-weight: bold; }
.lvtable tr.done td { color: #888; }
.lvtable td.eff { white-space: nowrap; }
.lvdetails summary { cursor: pointer; list-style: none; }
.lvdetails summary::-webkit-details-marker { display: none; }
.lvdetails[open] summary { border-bottom: 1px solid #d6cdb0; }
.bguide { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 10px; }
.bgcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border: 1px solid #e3dcc4; border-radius: 6px; background: rgba(255, 255, 255, 0.5); text-align: center; color: #3b2f16; }
.bgcard:hover { border-color: #9cc66a; background: #f6fbec; }
.bgcard img, .bgcard svg.bart { width: 56px; height: 75px; }
.mbpick { margin: 0 0 10px; }
.ragain { width: 1%; white-space: nowrap; text-align: right; }
.advleft { display: block; line-height: 1.3; text-align: center; }
.advleft b { display: block; }
.advcard.wide .advleft { text-align: left; }
.advcard.wide .advleft b { display: inline; }
a.binfo { display: inline-block; border-radius: 6px; cursor: help; }
a.binfo:hover img, a.binfo:hover svg { filter: drop-shadow(0 0 3px #9cc66a); }
.ftlv { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.ftlv img, .ftlv svg.bart { width: 48px; height: 64px; flex: none; }
.qfinish { display: flex; align-items: center; gap: 10px; margin: 0; }
.mvk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 8px; vertical-align: -1px; background: #888; }
.mvk.attack { background: #d22; }
.mvk.support { background: #3a9a1a; }
.mvk.settle { background: #2a6fc9; }
.mvk.back { background: #8a6a3a; }
.lt-m .mvk { position: relative; width: 16px; height: 16px; margin: 0; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.lt-m .mvk::after { content: '›'; position: absolute; inset: 0; color: #fff; font: bold 14px/12px Verdana, sans-serif; text-align: center; }
.lt-m .mvk.back::after { content: '‹'; }

/* ---------- Phones ---------- */
#mobbar { display: none; }
@media (max-width: 760px) {
  #mobbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 8px; }
  .mobmenu { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font: bold 14px Verdana, sans-serif; color: #3a2a12; background: linear-gradient(#f6e7c1, #dcc08a); border: 1px solid #7a5a2c; border-radius: 6px; }
  .mobcount { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #d9534f; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
  .mobalert { flex: 1 1 auto; padding: 6px 10px; border-radius: 6px; background: #fbe3e1; border: 1px solid #e4a19b; color: #a01d10; font-weight: bold; font-size: 12px; }
  .js #side_left:not(.open) { display: none; }
  #side_left.open { margin-bottom: 12px; }
  /* tab rows become one swipeable row */
  .woodtabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .woodtabs::-webkit-scrollbar { display: none; }
  .woodtabs a { flex: 0 0 auto; padding: 7px 10px; font-size: 12px; }
  .pilltabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pilltabs a { flex: 0 0 auto; }
  .woodbody { padding: 8px; }
  .simwrap .simarmy { min-width: 520px; }
  .simarmy input[type=number] { width: 34px; }
  .row { flex-wrap: wrap; }
}

/* ---------- Auto training ---------- */
.autotrain .at-status { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #d8cfae; border-radius: 6px; background: #fffaf0; }
.autotrain .at-status.on { border-color: #9ccc65; background: #f4fae8; }
.autotrain .at-status p { margin: 0 0 6px; }
.autotrain .ok { color: #3f8f00; }
.autotrain .bad { color: #c62828; font-weight: bold; }
.at-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 10px; }
.at-goals { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.at-hours { display: flex; flex-wrap: wrap; gap: 4px; border: 0; padding: 0; margin: 0 0 10px; align-items: center; }
.at-hours legend { float: left; font-weight: bold; margin-right: 8px; padding: 0; }
.at-hours label { position: relative; }
.at-hours input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.at-hours label span { display: inline-block; min-width: 34px; padding: 4px 8px; text-align: center; border: 1px solid #b9a77a; border-radius: 4px; background: #f6efd9; font-weight: bold; color: #5a4a22; }
.at-hours input:checked + span { background: linear-gradient(#ffe27a, #f0b92b); border-color: #b58712; color: #3a2a06; }
.at-hours input:focus-visible + span { outline: 2px solid #71d000; outline-offset: 1px; }
.at-load { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-weight: normal; font-size: 11px; color: #6b5b33; }
.at-load svg { width: 90px; height: 6px; }
.at-sum { margin: 10px 0; }
.at-facts { margin: 8px 0 0; padding-left: 18px; }
.at-facts li { margin: 3px 0; }
.at-progress { margin-bottom: 8px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
svg.meter.atok .fg { fill: #71d000; }
svg.meter.atbad .fg { fill: #e06030; }

.at-list { border: 1px solid #d8cfae; border-radius: 6px; overflow: hidden; background: #fff; }
.at-bhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 10px; background: #efe6c9; border-top: 1px solid #d8cfae; }
.at-bhead:first-child { border-top: 0; }
.at-unit { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-top: 1px solid #eee5cc; }
.at-unit.na { opacity: 0.55; }
.at-uinfo { min-width: 0; }
.at-uinfo > img { vertical-align: -3px; }
.at-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-size: 11px; color: #555; }
.at-meta span { white-space: nowrap; }
.at-meta img { vertical-align: middle; margin-right: 2px; }
.at-uin { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.at-uin .at-in { width: 64px; padding: 3px 5px; text-align: right; }
.at-max { padding: 2px 8px; font-size: 11px; font-weight: bold; color: #3f6f00; background: #eef7dd; border: 1px solid #9ccc65; border-radius: 4px; cursor: pointer; }
.at-max:hover { background: #dff0c2; }
.at-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.at-card { padding: 7px 8px; border: 1px solid #d8cfae; border-radius: 6px; background: #fffaf0; font-size: 12px; }
.at-chead { font-weight: bold; margin-bottom: 4px; }
.at-chead img { vertical-align: middle; }
.at-line { display: flex; justify-content: space-between; gap: 6px; font-variant-numeric: tabular-nums; }
.at-line .bad, .at-card .bad { color: #c62828; }
.at-cover { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 11px; }
.at-cover svg { flex: 1; height: 6px; }
@media (max-width: 600px) { .at-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.at-fc { margin-top: 2px; color: #3f6f00; }
.at-fc:empty { display: none; }
.at-uin .at-in { width: 52px; }
.at-pct { font-weight: bold; color: #6b5b33; }
.at-assigned { margin: 8px 0; font-size: 13px; }

/* Headless panels: keep the first line clear of the gold corner ornament (its curl reaches ~10px in). */
.spanel.pad, .simvil > .pad, .spanel > .pad:first-child { padding-top: 12px; padding-left: 16px; }
.tk-intro, .rephead { padding: 12px 12px 10px 16px; }
.bhead .lvlbadge { top: 4px; left: 4px; }
svg.bart { display: block; overflow: hidden; }
.bhead .bpic, .bhead .bimg, .bcard .bcimg { align-items: center; background: radial-gradient(ellipse at 50% 72%, #e4edcf 0, #f4f1e4 60%, #fbfaf5 100%); }
.unittabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 3px; }
.unittabs a { display: flex; align-items: center; justify-content: center; padding: 4px 0; }
.unittabs a img { width: 24px; height: 24px; }