/* GermGrounds — a parchment-and-gold frame in the manner of the 2009 browser strategy games: a black bar with the
   three big tabs on top, the painted view, round buttons and the chat along the bottom, the lord and the city on
   the right. A desktop browser game: the frame keeps its size and the page scrolls if the window is smaller. */
:root {
  --parch: #f4e4c1; --parch2: #ead3a3; --parch3: #dcc08a; --gold: #c9a24a; --gold2: #a5781e; --goldhi: #f2d58a;
  --ink: #3a2410; --quiet: #7d6545; --line: #c8aa72; --bar: #15120f; --bad: #b3261e; --good: #2e7d32;
  --accent: #7a4a1c; --accent-ink: #fff4dc; --card: #fbf2dc; --locked: #d9c9a4;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* a display rule below must never beat the hidden attribute */
html { background: #8a6a3a; }
body { margin: 0; min-width: 1280px; color: var(--ink); font: 14px/1.35 Georgia, 'Times New Roman', serif;
  background: radial-gradient(ellipse at top, #b38a4e, #6e4f26 70%); }
h1, h3, h4 { font-family: Georgia, serif; }
h3 { margin: 0 0 6px; font-size: 18px; color: #4a2a0c; }
h4 { margin: 14px 0 4px; font-size: 14px; color: #5a3410; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.quiet { color: var(--quiet); }
.small-text { font-size: 12px; margin: 6px 0 0; }
.bad { color: var(--bad); }
.good { color: var(--good); }

/* ---- buttons: raised parchment with a gold rim; the main ones dark brown */
button { padding: 6px 14px; border: 1px solid var(--gold2); border-radius: 5px; font: 600 13px Georgia, serif; cursor: pointer;
  color: var(--accent-ink); background: linear-gradient(#9a6630, #6e4318); box-shadow: inset 0 1px 0 rgba(255,230,170,.45), 0 1px 2px rgba(0,0,0,.35); }
button:hover:not(:disabled) { filter: brightness(1.12); }
button.secondary { color: var(--ink); background: linear-gradient(#fbf0d6, #e6cf9c); }
button.small { padding: 3px 9px; font-size: 12px; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; background: #fffaf0; color: var(--ink); font: 13px Georgia, serif; }
label { display: block; margin: 8px 0; }
label input { width: 100%; }
label.inline { display: inline-flex; align-items: center; gap: 4px; }
label.inline input { width: auto; }
.row { display: flex; gap: 8px; margin-top: 12px; }
.row.tight { margin: 4px 0 0; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg { min-height: 1.2em; color: var(--bad); margin: 0; }

/* ---- the login scroll */
.parch { background: linear-gradient(var(--parch), var(--parch2)); border: 3px solid var(--gold); border-radius: 10px;
  box-shadow: 0 0 0 2px #5a3a14, 0 10px 40px rgba(0,0,0,.5); padding: 20px 26px; }
.logo { font: 700 30px Georgia, serif; letter-spacing: 1px; color: #e9c46a; margin: 0;
  text-shadow: 0 2px 0 #6e4318, 0 0 6px rgba(0,0,0,.6), 1px 1px 0 #3a2410; }

/* ---- the frame */
.frame { width: 100%; min-width: 1280px; height: max(760px, 100vh); margin: 0; display: grid; grid-template-columns: 1fr 340px; gap: 0;
  padding: 0 20px; background: var(--pillar) left top / 20px 100% no-repeat, var(--pillar) right top / 20px 100% no-repeat, var(--parch2); }
/* gold pillars down the sides and between the view and the right column, fluted (our own: gradients) */
:root { --pillar: linear-gradient(90deg, #5e4216, #b88e3c 12%, #f6e2a4 26%, #c9a24a 40%, #7a5a22 50%, #c9a24a 60%, #f6e2a4 74%, #b88e3c 88%, #5e4216); }
.left { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 14px solid; border-image: var(--pillar) 1; }
.right { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(var(--parch), var(--parch2)); }

.topbar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px; background: linear-gradient(#26211b, var(--bar));
  border-bottom: 3px solid var(--gold); color: #f3e7cc; }
.ticker { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker .bad { color: #ff8a80; font-weight: 700; }
.tabs.big { display: flex; gap: 6px; margin: 0; }
.tabs.big button { display: flex; align-items: center; gap: 6px; padding: 3px 18px 3px 8px; font: 700 15px Georgia, serif; letter-spacing: 1px;
  color: #3a2410; background: linear-gradient(#fdf3d8, #d9b977); border: 2px solid #8a6a2a; border-radius: 6px; text-transform: uppercase; }
.tabs.big button.on { color: #fff2d0; background: linear-gradient(#c0563a, #7a2416); border-color: #f2d58a; }
.tabs.big button * { pointer-events: none; }

.view { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #76a443; }
.scene { width: 100%; height: 100%; display: block; }
/* the town and the city each keep their own layer (app.js showLayer): the one not shown stays drawn underneath, ready,
   and going between them fades one over the other. A layer's SVG paints past its edges (overflow) so a drag can move
   it as it is, a transform on its own composited layer, until the viewBox is set when the drag stops */
.scene > .layer { position: absolute; inset: 0; overflow: hidden; visibility: hidden; opacity: 0; }
.scene > .layer.on, .scene > .layer.leaving { visibility: visible; opacity: 1; }
.scene > .layer.on { z-index: 1; }
.scene > .layer > svg { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: 0 0; will-change: transform; }
.scene.dragging svg { pointer-events: none; }   /* nothing lights up under the mouse while the view is dragged */
.scene [data-plot] { cursor: pointer; }
.scene [data-plot][data-locked] { cursor: default; }
.scene .slot:hover .hl { opacity: 1; }
.scene .slot:hover { filter: brightness(1.12) drop-shadow(0 0 4px #ffe08a); }   /* the building under the mouse glows */
.scene .slot ellipse[opacity=".18"] { pointer-events: none; }   /* a shadow is not part of the plot */
.ov-sec { display: none; }   /* a clock's second hand shows only when the scene is zoomed in (Art.CLOCK.secondsZoom) */
#plots.show-seconds .ov-sec { display: inline; }
.scene .hl { opacity: 0; transition: opacity .12s; }
.scene .sel .hl { opacity: 1; }
.scene [data-goto] { cursor: pointer; }
/* the town's and the city's ground (ground.js): a canvas under the scene's SVG, moved with it by a transform (and in
   the city the river's canvas over it, drawn for the view as it is); the SVG's own plain ground shows only until it is
   drawn */
#plots { position: relative; overflow: hidden; }
#plots .layer > svg { position: relative; }
#plots .layer > canvas.ground { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
#plots .layer > canvas.water { position: absolute; left: 0; top: 0; pointer-events: none; }
#plots .layer.ground-ready > svg.town .fallback, #plots .layer.ground-ready > svg.field .fallback { display: none; }
/* an empty plot's "+" shows on hover, on the picked plot, and in build mode (an empty plot picked, or a move) */
.scene svg.town .plus, .scene svg.field .plus { opacity: 0; transition: opacity .12s; pointer-events: none; }
.scene svg.town .slot:hover .plus, .scene svg.town .hitg:hover .plus, .scene svg.town .sel .plus, #plots.build-mode svg.town .plus, #plots.moving svg.town .plus,
.scene svg.field .slot:hover .plus, .scene svg.field .sel .plus, #plots.build-mode svg.field .plus, #plots.moving svg.field .plus { opacity: 1; }
/* the city's plots: no lines on the ground; every plot's outline in build mode only (a locked one fainter), and a
   locked plot does not light up under the mouse */
.scene .ol { opacity: 0; transition: opacity .12s; pointer-events: none; }
#plots.build-mode .ol, #plots.moving .ol { opacity: 1; }
.scene .slot[data-locked]:hover { filter: none; }
/* the town's left edge: pulled on past it, a hint that the city lies that way (app.js showPull) */
.edge-hint { position: absolute; left: 0; top: 0; bottom: 0; width: 120px; display: flex; align-items: center; padding-left: 14px;
  font: 700 17px Georgia, serif; letter-spacing: 1px; color: #fff3d0; text-shadow: 0 1px 3px rgba(0,0,0,.8); pointer-events: none;
  background: linear-gradient(90deg, rgba(20,14,6,.55), rgba(20,14,6,0)); opacity: 0; z-index: 2; }
.edge-hint.ready { color: #ffe08a; }
/* the town's miniature in the city: a click goes inside the walls; it lights up a little under the mouse */
.scene .town-mini { cursor: pointer; }
.scene .town-mini .hit { fill: rgba(0,0,0,0); }
.scene .town-mini image { transition: filter .12s; }
.scene .town-mini:hover image { filter: brightness(1.08) drop-shadow(0 0 3px rgba(255,224,138,.9)); }
.scene text.label { font: 600 11px Georgia, serif; fill: #fff7dc; paint-order: stroke; stroke: rgba(30,20,8,.75); stroke-width: 3px; pointer-events: none; }

/* the window a building, a report or a view opens in: as in the original, a big window over the view with a title bar
   (brick ends, the title in the middle, a close button), tabs in a row, tables with a header row, buttons at the foot */
.win { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(940px, calc(100% - 24px)); max-height: calc(100% - 24px);
  display: flex; flex-direction: column; background: #f3e2bc; border: 2px solid #b8893c; border-radius: 4px;
  box-shadow: 0 0 0 2px #6e4f1c, 0 10px 30px rgba(0,0,0,.55); z-index: 5; }
.win-bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr 40px; align-items: center; height: 36px;
  background: linear-gradient(#fbecc6, #e9c886); border-bottom: 2px solid #b8893c; }
.bricks { height: 100%; background:   /* our own brick band: rows of light blocks with dark joints */
  repeating-linear-gradient(90deg, transparent 0 30px, #b8893c 30px 32px),
  repeating-linear-gradient(0deg, #f6dfa6 0 10px, #b8893c 10px 12px); opacity: .8; }
.win-title { padding: 0 22px; font: 700 18px Georgia, serif; color: #5a3410; white-space: nowrap; text-align: center; }
.win-title .lv { font-size: 15px; margin-left: 6px; }
.win-close { height: 100%; width: 40px; padding: 0; border: 0; border-left: 2px solid #b8893c; border-radius: 0; box-shadow: none;
  background: linear-gradient(#fbecc6, #e3bf7a); color: #5a3410; font: 700 20px system-ui, sans-serif; }
.win-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 8px; padding: 12px 14px; background: #fbf0d6;
  border: 1px solid #d4b47a; border-radius: 3px; }
.win-body > h3:first-child { display: none; }   /* the window's title is in the bar */
/* the map's tile window: small, in the middle of the map */
.win.side { top: 50%; transform: translate(-50%, -50%); width: 320px; }
.win.side .win-bar { height: 30px; grid-template-columns: 1fr auto 1fr 32px; }
.win.side .win-title { font-size: 15px; padding: 0 12px; }
.win.side .win-title .lv { font-size: 13px; }
.win.side .win-close { width: 32px; font-size: 17px; }
.win.side .win-body { margin: 6px; padding: 8px 10px; font-size: 13px; }
.win.side .win-body p { margin: 4px 0; }
.win.side .speed { margin: 6px 0; }
/* a small window over the big one (Tax Rate, Comforting, Levy, Rename) */
.pop { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); width: 470px; z-index: 7; display: flex; flex-direction: column;
  background: #f3e2bc; border: 2px solid #b8893c; border-radius: 4px; box-shadow: 0 0 0 2px #6e4f1c, 0 8px 24px rgba(0,0,0,.5); }
.pop-body { margin: 8px; padding: 10px 12px; background: #fbf0d6; border: 1px solid #d4b47a; border-radius: 3px; }
.pop-body .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* the original's building header: its picture on the left, what it does on the right */
.bhead { display: grid; grid-template-columns: 130px 1fr; gap: 12px; margin-bottom: 10px; }
.bhead .pic { height: 120px; border: 2px solid #8a6a2a; background: #8fb058; display: grid; place-items: center; overflow: hidden; }
.bhead .pic svg { width: 100%; height: 100%; }
.bhead .desc { padding: 8px 10px; background: #fffaf0; border: 1px solid #d4b47a; font-size: 14px; }

/* tabs in a window: a row of parchment tabs, the open one orange; action buttons on the right of the same row */
.win .tabs.small, .wtabs { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 0; padding: 0; border-bottom: 2px solid #c8742a; }
.win .tabs.small button, .wtabs button { padding: 7px 16px; font: 700 14px Georgia, serif; color: #5a3410; border: 1px solid #b8893c; border-bottom: 0;
  border-radius: 6px 6px 0 0; background: linear-gradient(#fff6dc, #ecd29a); box-shadow: none; }
.win .tabs.small button.on, .wtabs button.on { color: #fff; background: linear-gradient(#e0782e, #a8441a); border-color: #8a3a12; }
.wtabs .act { margin-left: auto; display: flex; gap: 4px; align-self: center; padding-bottom: 3px; }
.wtabs .act button { border-radius: 5px; border: 1px solid #b8893c; padding: 4px 12px; }
/* tables: a header row on a light band, white rows with fine lines */
.win table.rep { background: #fff; border: 1px solid #d4b47a; }
.win table.rep th { background: linear-gradient(#fff3d6, #f2dcab); color: #5a3410; font-weight: 700; text-align: center; padding: 6px 6px; border-bottom: 1px solid #d4b47a; }
.win table.rep td { padding: 6px 6px; border-bottom: 1px solid #f0e2c4; text-align: center; }
.win table.rep td:first-child, .win table.rep th:first-child { text-align: center; }
.wfoot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.wfoot .wl { margin-right: auto; }
.toast { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); max-width: 70%; padding: 6px 14px; border-radius: 6px;
  background: rgba(20,14,8,.85); color: #ffe6a8; font-size: 13px; z-index: 6; pointer-events: none; }
.toast:empty { display: none; }

/* ---- the map */
.map { position: absolute; inset: 0; }
#map-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; background: #263a1a; }
#map-canvas.dragging { cursor: grabbing; }
.map-hover { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 4px; background: rgba(20,14,8,.78); color: #ffe6a8; font-size: 12px; pointer-events: none; }
.map-hover:empty { display: none; }
.map-bar { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; align-items: center; padding: 5px 8px; z-index: 4;
  background: linear-gradient(var(--parch), var(--parch2)); border: 2px solid var(--gold); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.map-bar .xy { font-weight: 700; }
.map-bar .mstate { min-width: 92px; font: italic 700 13px Georgia, serif; color: #5a3410; text-align: center; }
.tp-state b { color: #5a3410; }
/* zoom for the town and city views: wheel, drag once zoomed in, or these buttons */
.scene-zoom { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; z-index: 4; }
.scene-zoom button { min-width: 30px; font-weight: 700; }
.scene.zoomed { cursor: grab; }
.scene.dragging, .scene.dragging * { cursor: grabbing !important; }
.map-bar input { width: 58px; padding: 2px 4px; }
.legend { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; max-width: 75%; font-size: 11px; padding: 4px 8px;
  background: rgba(244,228,193,.92); border: 1px solid var(--gold); border-radius: 5px; z-index: 3; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 3px; vertical-align: -1px; }

/* ---- the bottom: round buttons and the chat */
.bottom { display: grid; grid-template-columns: 330px 1fr; gap: 8px; height: 196px; padding: 8px; border-top: 4px solid var(--gold);
  background: linear-gradient(var(--parch2), var(--parch3)); }
.buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 4px; align-content: start; }
.round { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 2px; border: 0; box-shadow: none;
  background: none; color: var(--ink); font: 600 12px Georgia, serif; }
.round * { pointer-events: none; }
.round .disc { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fff6dc, #e2c17e 65%, #a87a34); border: 2px solid #8a6a2a; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.round:hover .disc { filter: brightness(1.1); }
/* a painted medallion (img/ui btn-*) brings its own gold ring: no drawn disc behind it */
.round .disc.painted { background: none; border: 0; box-shadow: none; }
.round .disc.painted img { width: 100%; height: 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.round .count { position: absolute; top: 0; right: 14px; min-width: 20px; padding: 0 5px; border-radius: 10px; background: #2f5aa0; color: #fff;
  font: 700 12px/20px system-ui, sans-serif; border: 2px solid #fff; }
.round .count:empty { display: none; }

.chatbox { display: flex; flex-direction: column; min-height: 0; background: #fffaf0; border: 2px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.chatbox .tabs { display: flex; gap: 4px; }
.chatbox .chat-lines { flex: 1; overflow-y: auto; font-size: 13px; margin: 4px 0; }
.chatbox .row { margin: 0; }
.chatbox .row input { flex: 1; }

/* ---- the right column */
.brand { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: linear-gradient(#5b8bbf, #a8c8e6 70%, #e8d9b0);
  border-bottom: 3px solid var(--gold); }
.clock { font: 700 26px Georgia, serif; color: #fff4c8; text-shadow: 0 2px 0 #6e4318, 1px 1px 0 #3a2410; line-height: 1; }
.server { font: 700 12px Georgia, serif; color: #fff4c8; text-shadow: 1px 1px 0 #3a2410; }
.brand .logo { font-size: 24px; }
.lord { display: flex; gap: 8px; padding: 8px; border-bottom: 3px solid var(--gold); }
.lord .face svg { display: block; border: 2px solid var(--gold); border-radius: 4px; }
.scroll { flex: 1; padding: 4px 10px; border-radius: 6px; background: linear-gradient(#fbf0d2, #ecd49c); border: 1px solid var(--line); }
.scroll strong { display: block; text-align: center; font-size: 16px; color: #4a2a0c; }
#lord-stats { list-style: none; margin: 2px 0 0; padding: 0; font-size: 13px; }
#lord-stats li { display: flex; align-items: center; gap: 6px; }
#lord-stats li span { flex: 1; }

.citybox { flex: 1; min-height: 0; display: grid; grid-template-columns: 62px 1fr; }
.city-list { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px; background: var(--parch3); border-right: 2px solid var(--gold); overflow-y: auto; }
.city-list button { padding: 2px; height: 50px; border-radius: 4px; background: linear-gradient(#fbf0d6, #e0c58c); border: 1px solid #8a6a2a; color: var(--ink);
  font: 600 10px Georgia, serif; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: none; }
.city-list button.on { border: 2px solid #b3261e; background: linear-gradient(#fff6dc, #f0d79c); }
.city-list button { position: relative; overflow: hidden; }
.city-list button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the place's number, top left, as the original's */
.city-list .slotno { position: absolute; left: 4px; top: 1px; font: 700 13px Georgia, serif; color: #5a3a1a; }
.city-list button.pic { background: #5a7a9a url(img/ui/city-slot.webp) center / cover no-repeat; justify-content: flex-end; }
.city-list button.pic .slotno { left: 0; right: 0; top: 4px; text-align: center; font-size: 22px; color: #fff; text-shadow: 0 0 3px #000, 1px 1px 2px #000; }
.city-list button.pic span { color: #fff; text-shadow: 0 0 3px #000, 1px 1px 2px #000; background: none; }
.city-list button.empty { opacity: .35; cursor: default; }
.city-list button.empty.pic { opacity: .75; }
.city-list button.empty.locked.pic { opacity: .45; filter: grayscale(.6); }
.city-list button * { pointer-events: none; }
/* more than ten cities (brought over from the old server): every place full height, the column scrolls */
.city-list.many button { flex: none; }
.city-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 6px 8px; overflow: hidden; }
.city-head { text-align: center; font-size: 15px; }
.city-head #city-xy { color: var(--quiet); }
.city-stats { margin: 4px 0; }
.stat { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 4px; padding: 2px 0; border-bottom: 1px dotted var(--line); font-size: 13px; }
.stat b { font-variant-numeric: tabular-nums; }
.stat .rate { font-size: 12px; font-weight: 700; }
.tax { font-size: 12px; margin: 2px 0 4px; }
.tax input { width: 52px; padding: 2px 4px; }
.ctabs { display: flex; gap: 3px; margin-top: 2px; }
.ctabs button { flex: 1; padding: 3px 0; border-radius: 6px 6px 0 0; background: linear-gradient(#fbf0d6, #e0c58c); border: 1px solid #8a6a2a; box-shadow: none; }
.ctabs button.on { background: linear-gradient(#fff8e4, #f6e7c2); border-bottom-color: transparent; }
.ctabs button * { pointer-events: none; }
.ctab { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 4px; background: #f6e7c2; border: 1px solid #8a6a2a; border-top: 0; font-size: 13px; }
.resources .stat { grid-template-columns: 30px 1fr; }
.resources .stat .nums { display: flex; justify-content: space-between; }
.resources .stat .sub { display: flex; justify-content: space-between; font-size: 11px; color: var(--quiet); }

/* ---- content inside windows and tabs (kept from before, in the new colours) */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 10px; margin-bottom: 10px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.opt:first-of-type { border-top: 0; }
.cost { font-size: 12px; color: var(--quiet); }
.cost .short, .short { color: var(--bad); }
.job { padding: 6px 0; border-top: 1px solid var(--line); }
.job:first-child { border-top: 0; padding-top: 0; }
.job.warn { border-left: 3px solid var(--bad); padding-left: 8px; }
.bar { height: 7px; background: #d9c39a; border-radius: 4px; overflow: hidden; margin: 5px 0; border: 1px solid #a8885a; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #c0563a, #e9a23a); }
.speed { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.list { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 4px 0; font-size: 13px; }
.troop { align-items: flex-start; flex-direction: column; }
.troop .count { display: flex; gap: 6px; align-items: center; }
.troop .count input { width: 96px; }
.hero { padding: 8px 0; border-top: 1px solid var(--line); }
.hero .face { float: left; margin: 0 8px 4px 0; }
.hero .face svg { display: block; border-radius: 3px; }
.hero::after { content: ""; display: block; clear: both; }
.tag { background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 0 6px; font-size: 12px; }
.tag.ally { background: #2f5aa0; } .tag.enemy { background: #b3261e; }
.flag { display: inline-block; padding: 0 5px; background: #8b3a3a; color: #fff; border-radius: 3px; font-size: 12px; }
.report { cursor: pointer; }
.report.unread strong { color: var(--accent); }
table.rep { border-collapse: collapse; width: 100%; font-size: 13px; margin: 6px 0; }
table.rep td, table.rep th { border-bottom: 1px solid var(--line); padding: 3px 4px; text-align: right; }
table.rep td:first-child, table.rep th:first-child { text-align: left; }
.mf-troops, .mf-cargo { margin: 6px 0; }
.mf-troops .row, .mf-cargo .row { margin: 3px 0; }
.tabs.small { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.tabs.small button { padding: 3px 8px; font-size: 12px; white-space: nowrap; color: var(--ink); background: linear-gradient(#fbf0d6, #e6cf9c); }
.tabs.small button.on { color: var(--accent-ink); background: linear-gradient(#9a6630, #6e4318); }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.book table.rep { font-size: 12px; }
a.price { color: var(--accent); font-weight: 700; text-decoration: none; }
.item { align-items: flex-start; gap: 8px; }
.item-act { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 55%; }
.item-act select, .item-act input { max-width: 150px; }
.ic { vertical-align: middle; }

/* building and research in progress: a small panel over the bottom-left of the view, above the round buttons */
.jobs { position: absolute; left: 10px; bottom: 10px; width: 340px; z-index: 4; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(var(--parch), var(--parch2)); border: 2px solid var(--gold); border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.jobrow { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 6px; align-items: center; font-size: 12px; }
.jobrow.waiting { opacity: .8; }
.jobname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jobrow .bar { margin: 2px 0 0; height: 6px; }
.jobtime { font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; }

/* the barracks window: wider, this barracks' batches in a narrow column on the left, every troop on the right */
.win:has(.bk) { width: min(860px, calc(100% - 28px)); }
.bk { display: grid; grid-template-columns: 230px 1fr; gap: 14px; align-items: start; }
.bk-line { position: sticky; top: 0; padding: 6px 8px; background: rgba(255,250,235,.6); border: 1px solid var(--line); border-radius: 6px; }
.bk-line h4 { margin-top: 0; }
.batch { padding: 5px 0; border-top: 1px dotted var(--line); font-size: 13px; }
.batch.running strong { color: #7a2416; }
.troopcard { padding: 7px 0; border-top: 1px solid var(--line); }
.troopcard .tc-head { display: flex; justify-content: space-between; align-items: baseline; }
.troopcard .tc-stats { font-size: 12px; color: var(--quiet); }
.troopcard .count { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.troopcard .count input { width: 100px; }
.troopcard.locked { opacity: .55; }
/* a troop in the barracks: its painted picture (img/troops) beside its card */
.troopcard.unit { display: flex; gap: 8px; align-items: flex-start; }
.troopcard.unit .tc-pic { flex: none; width: 76px; height: 76px; display: grid; place-items: center; background: linear-gradient(#efe0b8, #e2cb94); border: 1px solid #d4b47a; border-radius: 4px; }
.troopcard.unit .tc-body { flex: 1; min-width: 0; }
.batch strong .ic.unit { vertical-align: middle; }

.jobs { max-height: 46%; overflow-y: auto; }
.jobrow.warn { color: #b3261e; }
.jobrow.warn .jobname { color: #b3261e; }
.jobs .bar.march i { background: linear-gradient(90deg, #2f5aa0, #6aa4dc); }

/* the right column's lists: troops and walls (picture, name, number), heroes (face, name and level, what it is doing) */
.unitrow { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 6px; padding: 2px 0; border-bottom: 1px dotted var(--line); }
.unitrow b { font-variant-numeric: tabular-nums; }
.herorow { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px dotted var(--line); }
.herorow svg { display: block; border-radius: 3px; }
.herorow .hn { line-height: 1.15; }
.herorow .hs { font-size: 12px; font-weight: 700; text-align: right; }

table.rep tr.me td { background: rgba(242,213,138,.55); font-weight: 700; }

.camp { margin-top: 8px; padding: 6px; border: 1px solid #b3261e; border-radius: 5px; background: rgba(179,38,30,.06); }
.camp button { margin-top: 5px; }

/* ==== the original's layout (2026-10-13, from the user's screenshots) ==== */
/* the top bar's small icons on the left: today's gift, log out */
.topicons { display: flex; gap: 4px; }
.ticon { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 4px; background: linear-gradient(#4a3c2c, #231c14); border: 1px solid #8a6a2a; }
.ticon * { pointer-events: none; }

/* the bottom left: the Construction / Troops tabs over the eight round buttons */
.btncol { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.jobtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.jobtabs button { padding: 3px 0; font: 700 13px Georgia, serif; color: var(--ink); background: linear-gradient(#fff6dc, #e6cf9c); border: 1px solid #b8893c; border-radius: 4px; box-shadow: none; }
.jobtabs button.on { color: #fff; background: linear-gradient(#e0782e, #a8441a); }
.buttons { gap: 2px 4px; }
.round .disc { width: 46px; height: 46px; }
.round .lbl { margin-top: -6px; padding: 0 6px; font: 700 12px Georgia, serif; color: #fff4dc; background: linear-gradient(#a8722e, #6e4318); border: 1px solid #f2d58a; border-radius: 3px; white-space: nowrap; }

/* the lord: three buttons under the face */
.facecol { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.lordbtn { padding: 1px 4px; font: 700 12px Georgia, serif; color: #4a2a0c; background: linear-gradient(#fffaf0, #ecd29a); border: 1px solid #8a6a2a; border-radius: 3px; box-shadow: none; }

/* the city's numbers: a + beside each (comforting, levy, the shop), the tax per cent opens the tax window */
.stat { grid-template-columns: 28px 1fr auto auto; }
.stat.two { grid-template-columns: 28px 1fr 24px auto; }
.stat .rate { margin-left: 6px; }
.plus { width: 18px; height: 18px; padding: 0; margin-left: 6px; display: inline-grid; place-items: center; font: 700 14px/1 system-ui, sans-serif; color: #fff;
  background: linear-gradient(#7cc04a, #3f7e1e); border: 1px solid #2e5c14; border-radius: 3px; box-shadow: none; }
.taxpct { font-weight: 700; cursor: pointer; text-decoration: underline dotted; }
.stat.res { grid-template-columns: 34px 1fr auto; padding: 4px 0; }
.stat.res b { font-size: 14px; }
button.wide { width: 100%; margin-top: 6px; }

/* the chat: channel buttons down the left, the lines, the row to write in */
.chatbox { flex-direction: row; gap: 6px; padding: 4px; }
.chatside { display: flex; flex-direction: column; gap: 4px; }
.chan { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6dc, #e2c17e 65%, #a87a34); border: 1px solid #8a6a2a; box-shadow: none; }
.chan.on { box-shadow: 0 0 0 2px #e0782e; }
.chan * { pointer-events: none; }
.chatmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chatmain .chat-lines { flex: 1; overflow-y: auto; font-size: 14px; padding: 2px 4px; }
.chatmain .who { color: #b3261e; }
.chatrow { display: flex; gap: 4px; }
.chatrow input { flex: 1; }
.chanbtn { min-width: 76px; }
/* the arrow in the chat's top right corner: the chat twice as tall, over the bottom of the view (the user, 2026-10-17);
   ▼ when tall. A painted chat-up (img/ui) brings its own look; turned over, it is the down arrow */
.bottom { position: relative; }
.chatbox.tall { position: absolute; left: 346px; right: 8px; bottom: 8px; height: 360px; z-index: 8; box-shadow: 0 -6px 18px rgba(0,0,0,.45); }
.chatmain { position: relative; }
.chat-grow { position: absolute; top: 0; right: 14px; z-index: 1; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6dc, #e2c17e 65%, #a87a34); border: 1px solid #8a6a2a; box-shadow: 0 1px 2px rgba(0,0,0,.4);
  color: #5a3a12; font: 700 11px/1 system-ui, sans-serif; }
.chat-grow * { pointer-events: none; }
.chat-grow.painted { background: none; border: 0; box-shadow: none; }
.chat-grow.painted img { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.chat-grow:hover { filter: brightness(1.12); }
.chat-grow.down .glyph, .chat-grow.down img { transform: rotate(180deg); }
/* a picture in a line: a small one, the whole of it in a window when clicked; the one waiting to go beside the clip */
.chatpic { display: block; width: fit-content; margin: 2px 0 4px 44px; }
.chatpic img { display: block; max-width: min(240px, 100%); max-height: 90px; border: 1px solid #8a6a2a; border-radius: 3px; background: #fff; cursor: zoom-in; }
.chatbox.tall .chatpic img { max-width: min(420px, 100%); max-height: 200px; }
.chatclip { padding: 0 6px; display: inline-grid; place-items: center; }
.chatclip svg { pointer-events: none; }
.chatpend { position: relative; display: inline-block; flex: none; }
.chatpend img { display: block; height: 26px; max-width: 60px; object-fit: cover; border: 1px solid #8a6a2a; border-radius: 3px; }
.chatpend-x { position: absolute; top: -6px; right: -6px; width: 15px; height: 15px; padding: 0; border-radius: 50%; font: 700 9px/1 system-ui, sans-serif; background: #b3261e; color: #fff; border: 1px solid #fff; box-shadow: none; }
.chatbox.dropping { outline: 3px dashed #e0782e; outline-offset: -6px; }
.picfull { text-align: center; }
.picfull img { max-width: min(1100px, calc(100vw - 80px)); max-height: calc(100vh - 170px); border: 1px solid #8a6a2a; background: #fff; }
.picopen { margin-right: auto; align-self: center; font-size: 13px; color: #6e4318; }

/* inside windows: two lists side by side, a pager, the item grid, quests, mail */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wpane { padding-top: 6px; }
.wt { margin-top: 0 !important; }
.wt tr.blank td { border-bottom: 1px solid #f6ecd6; }
.wt tr.unread td { font-weight: 700; }
.wt td.lt { text-align: left !important; }
.wt tr.total td { background: #fff3d6; }
.wt a { color: #5a3410; }
.pager { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.pager .arrow { padding: 0 8px; font-size: 16px; color: #a8441a; background: none; border: 0; box-shadow: none; }
.igrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.icard { border: 1px solid #e0c48e; background: #fffaf0; padding: 0 0 6px; }
.icard .ih { padding: 4px; text-align: center; font-weight: 700; background: linear-gradient(#fff3d6, #f2dcab); border-bottom: 1px solid #e0c48e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icard .ib { display: grid; grid-template-columns: 62px 1fr; gap: 6px; align-items: center; padding: 6px 8px 0; }
.icard .ipic { width: 58px; height: 58px; display: grid; place-items: center; cursor: pointer; }
.icard .iown { font-size: 13px; }
.icard .iprice { display: inline-flex; align-items: center; gap: 3px; }
.icard button.wide { width: calc(100% - 16px); margin: 6px 8px 0; }
/* the Shop's Get Coins: a card a coin pack, its price, coins and items listed */
/* two rows of four (coin packs, special packs); each card one height, its item list scrolling inside it (the user, 2026-10-18) */
.prow { margin: 10px 0 0; }
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.pack { display: flex; flex-direction: column; min-width: 0; }
.pack .ptop { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.pack .pprice { font-size: 22px; font-weight: 700; }
.pack .pcoins { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; }
.pack .pcoins svg, .pack .pcoins img { align-self: center; }
.pack .pitems { height: 138px; overflow-y: auto; list-style: none; margin: 4px 2px 0; padding: 2px 2px 2px 0;
  border-top: 1px solid rgba(160,122,62,.45); border-bottom: 1px solid rgba(160,122,62,.45); }
.pack .pitems li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 4px; min-height: 21px; font-size: 12px; cursor: pointer; }
.pack .pitems li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack .pitems li.pnone { display: block; padding-top: 50px; text-align: center; cursor: default; }
.pack .pitems li:hover span { text-decoration: underline; }
.pack .pitems li svg, .pack .pitems li img { display: block; }
.pack .pgift { min-height: 32px; margin: 4px 2px 0; line-height: 1.25; }
.pack .pworth { margin: 2px 2px 0; }
.icard.pack button.wide { margin-top: auto; }
/* the Resource Pack: one wide card, the five numbers | what they give (live) | price and Buy (the user, 2026-10-18) */
.rpack { margin-top: 6px; }
.rp-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 14px; align-items: start; padding: 6px 4px 0; }
.rp-pick { display: flex; flex-direction: column; gap: 4px; }
.rp-pick p { margin: 4px 0 0; line-height: 1.3; }
.rp-in { display: grid; grid-template-columns: 60px 90px auto; align-items: center; gap: 6px; font-weight: 700; }
.rp-in input { width: 90px; text-align: right; padding: 2px 6px; }
.rpack .rp-items { height: auto; max-height: none; column-count: 2; column-gap: 14px; margin-top: 0; }
.rpack .rp-items li { break-inside: avoid; }
.rp-side { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.rp-side .pgift { min-height: 0; }
.icard.rpack .rp-side button.wide { margin: 4px 0 0; width: 100%; }
/* the Buy window's free gifts */
#pop:has(.packpop) { top: 60px; }
.pop-body:has(.packpop) { max-height: max(300px, calc(100vh - 300px)); overflow-y: auto; }
.packpop .pprice-s { font-size: 17px; }
.packpop > p { margin: 0 0 8px; }
.giftform { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.giftform label.inline { display: flex; align-items: center; gap: 6px; }
.giftform .gift-line { margin-top: 4px; }
.giftform #gift-blessing { width: 150px; margin-left: 4px; }
.giftform .gift-names { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
.giftform .gift-names input { width: 100%; min-width: 0; font-size: 12px; padding: 2px 4px; }
.ipop { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
.ipop > svg { display: block; }
.pop .foot { flex-wrap: wrap; align-items: center; }
/* the search box over the item cards, and what is in force beside it */
.iline { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.iline .isearch { width: 220px; padding: 4px 8px; border: 1px solid #b8893c; border-radius: 4px; background: #fffaf0; font: 13px Georgia, serif; }
/* a small window in front of everything, in the middle of the screen (frontPop: the Lucky Charm, what an item gave) */
.frontpop { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(20, 12, 4, .45); }
.frontpop[hidden] { display: none; }
.frontpop .pop { position: static; transform: none; width: auto; min-width: 470px; max-width: calc(100vw - 24px); }
/* what came out of an item: a picture and how many each */
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; margin-top: 6px; min-width: 420px; }
.gtile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 1px solid #e0c48e; background: #fffaf0; text-align: center; }
.gtile b { color: #a8441a; }
.gtile span { font-size: 12px; line-height: 1.2; }
.quest { display: grid; grid-template-columns: 270px 1fr; gap: 10px; min-height: 420px; }
.qleft { display: flex; flex-direction: column; min-height: 0; }
.qfams, .qlist { background: #fff; border: 1px solid #d4b47a; overflow-y: auto; }
.qfams { height: 220px; }
.qlist { flex: 1; min-height: 120px; }
.qhead { padding: 5px; text-align: center; font-weight: 700; background: linear-gradient(#fff3d6, #f2dcab); border: 1px solid #d4b47a; border-top: 0; border-bottom: 0; }
.qf { padding: 5px 8px; border-bottom: 1px solid #f0e2c4; cursor: pointer; }
.qf.on { background: #f2dcab; }
.qright { padding: 4px 12px; border-left: 1px solid #d4b47a; }
.qright h4.qt { text-align: center; border: 0; font-size: 16px; }
.qstory { font-style: italic; color: #5a4320; margin: 2px 0 8px; }
.qhow { margin: 4px 0 6px; padding-left: 22px; }
.qhow li { margin: 3px 0; }
.qtip { background: rgba(255,243,214,.75); border-left: 3px solid #d4b47a; padding: 4px 8px; margin: 4px 0 8px; }
.mailread, .mailwrite { padding: 6px 2px; }
.mailbody { min-height: 200px; padding: 10px; background: #fff; border: 1px solid #d4b47a; }
.mailwrite .mw-all { margin: -2px 0 8px; }
.mailwrite .mw-all input { width: auto; vertical-align: middle; }
.almail { color: #2f6a2c; font-weight: 700; }
.mailwrite textarea, .pop textarea { width: 100%; font: 14px Georgia, serif; padding: 6px; border: 1px solid var(--line); background: #fffaf0; }
.note { padding: 8px 10px; background: #fffaf0; border: 1px solid #d4b47a; margin-bottom: 8px; min-height: 90px; }
.note p { margin: 4px 0 0; }
.alinfo { margin-top: 8px; }
.ov { margin-bottom: 8px; }
.win:not(.side) { height: min(600px, calc(100% - 24px)); }
/* Routine and Daily side by side, sharing the column */
.qleft .wtabs { flex-wrap: nowrap; }
.qleft .wtabs button { flex: 1 1 0; min-width: 0; padding: 4px 2px; font-size: 13px; white-space: nowrap; }

/* ---- the header (2026-10-13): a painted landscape behind the clock and the gold wordmark */
.brand { position: relative; height: 92px; padding: 6px 10px; align-items: flex-start; overflow: hidden; background: #4f86c6; }
#brand-sky { position: absolute; inset: 0; }
#brand-sky svg { display: block; width: 100%; height: 100%; }
.brand-time, .brand .logo { position: relative; z-index: 1; }
.brand-time { padding: 2px 6px 3px; }
.clock { font: 700 30px Georgia, serif; letter-spacing: 1px; color: #ffe9a0;
  text-shadow: -1px -1px 0 #3a2410, 1px -1px 0 #3a2410, -1px 1px 0 #3a2410, 1px 2px 0 #3a2410, 0 3px 4px rgba(0,0,0,.5); }
.server { font: 700 13px Georgia, serif; color: #ffe9a0; margin-top: 2px;
  text-shadow: -1px -1px 0 #3a2410, 1px -1px 0 #3a2410, -1px 1px 0 #3a2410, 1px 1px 0 #3a2410; }
.brand .logo { margin-top: 2px; text-shadow: none; line-height: 0; }
/* the lord's name on a red ribbon across the top of his scroll */
.scroll strong { position: relative; margin: -2px -16px 4px; padding: 3px 18px; color: #fff4dc; font-size: 15px; text-shadow: 0 1px 0 #3a1008;
  background: linear-gradient(#c0432e, #8a2416); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
/* the gate (2026-10-16): the painted valley full screen, drifting very slowly; dusk at the edges and the foot so the
   crest and the frame read; the gallery of faces down both edges (app.js loginCrowd) */
#login-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #1a120a; }
.gate-paint { position: absolute; inset: -2%; background: url(img/logo/background.webp) center 40% / cover no-repeat;
  animation: gate-drift 70s ease-in-out infinite alternate; }
@keyframes gate-drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1%, -0.6%); } }
#login-bg::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(14,9,5,.82), rgba(14,9,5,.35) 22%, rgba(14,9,5,0) 36%, rgba(14,9,5,0) 64%, rgba(14,9,5,.35) 78%, rgba(14,9,5,.82)),
    linear-gradient(rgba(14,9,5,.45), rgba(14,9,5,0) 22%, rgba(14,9,5,0) 55%, rgba(14,9,5,.7)),
    radial-gradient(ellipse 34% 60% at 50% 62%, rgba(14,9,5,.45), rgba(14,9,5,0)); }
#login-crowd { position: absolute; inset: 0; z-index: 2; }
.crowd-face { position: absolute; width: var(--s); height: var(--s); object-fit: cover; transform: rotate(var(--r)); border-radius: 2px;
  border: 2px solid #b8913f; outline: 1px solid #2a180a; background: #2a1c10; box-shadow: 0 4px 12px rgba(0,0,0,.6);
  filter: sepia(.5) saturate(.6) brightness(.7); opacity: 0; animation: face-in 1.2s ease-out var(--d) forwards;
  transition: opacity .25s, filter .25s, transform .25s, box-shadow .25s; }
.crowd-face.c0 { --o: .34; } .crowd-face.c1 { --o: .18; } .crowd-face.c2 { --o: .08; }
@keyframes face-in { to { opacity: var(--o); } }
.crowd-face:hover { opacity: .95 !important; filter: none; transform: rotate(0) scale(1.12); z-index: 5; box-shadow: 0 0 0 1px #f2d58a, 0 8px 24px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) { .gate-paint { animation: none; } .crowd-face { animation: none; opacity: var(--o); } }

/* the crest over the frame */
/* flex, not text-align: the crest is wider than the 500px login / 520px loading box and must spill out evenly both sides */
.citavon { position: relative; z-index: 2; margin: 0; line-height: 0; display: flex; justify-content: center; pointer-events: none; }
.citavon img { flex: none; width: min(600px, 46vw); height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(255,196,110,.22));
  animation: crest-in 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes crest-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* the frame: the painted wood and iron round a parchment (img/logo/login.webp), cut nine ways so it grows with what it
   holds — corners kept, the sides repeat their carving down a long form; the crest above it */
#login { position: relative; z-index: 3; width: 500px; max-width: none; margin: 4vh auto 4vh; padding: 0; border: 0; background: none; }
.gate-frame { position: relative; padding: 50px 56px 48px; }
.gate-frame::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-image: url(img/logo/login.webp) 130 120 136 120 fill / 65px 60px 68px 60px stretch round;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.75)); }
#login .gate-frame { margin-top: -14px; animation: frame-in .8s .15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes frame-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .citavon img, #login .gate-frame { animation: none; } }
.login-sub { margin: 0 0 4px; text-align: center; color: #7a5a30; font-style: italic; font-size: 13px; letter-spacing: .3px; }
.login-sub::before, .login-sub::after { content: '❦'; margin: 0 10px; color: #a5781e; font-style: normal; }
:is(#login, #acct) h3 { margin: 4px 0 6px; text-align: center; font: 700 17px Georgia, serif; letter-spacing: 1px; color: #5a2a0c; }
:is(#login, #acct) label { margin: 10px 0; font-weight: 600; color: #4a2a0c; }
:is(#login, #acct) label .quiet { font-weight: 400; }
:is(#login, #acct) input:not([type=hidden]):not([type=file]):not([type=checkbox]) { margin-top: 3px; padding: 8px 10px; font-size: 14px; border: 1px solid #a07a3e; border-radius: 3px;
  background: rgba(255,251,240,.82); box-shadow: inset 0 1px 3px rgba(90,58,20,.3); }
:is(#login, #acct) input:focus { outline: none; border-color: #8a2416; box-shadow: inset 0 1px 3px rgba(90,58,20,.3), 0 0 0 3px rgba(192,67,46,.25); }
:is(#login, #acct) .login-face-row { margin: 14px 0 6px; padding: 8px; border: 1px solid rgba(160,122,62,.6); border-radius: 4px; background: rgba(255,250,236,.45); }
:is(#login, #acct) .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
:is(#login, #acct) .row > button:only-of-type { grid-column: 1 / -1; }
:is(#login, #acct) .row > span { grid-column: 1 / -1; text-align: center; }
/* the crest's red and gold on the main buttons */
:is(#login, #acct) .row button:not(.secondary) { padding: 10px; font: 700 15px Georgia, serif; letter-spacing: 2px; text-transform: uppercase; color: #fff4dc;
  text-shadow: 0 1px 0 #3a0a04; border: 1px solid #3a0a04; border-radius: 3px; background: linear-gradient(#c4482e, #962a18 55%, #741c0e);
  box-shadow: inset 0 1px 0 rgba(255,210,170,.45), inset 0 0 0 2px rgba(233,196,106,.55), 0 2px 4px rgba(0,0,0,.45); }
:is(#login, #acct) .row button:not(.secondary):hover { background: linear-gradient(#d35636, #a8321c 55%, #82200f); }
:is(#login, #acct) .row button:not(.secondary):active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.4), inset 0 0 0 2px rgba(233,196,106,.45); }
:is(#login, #acct) .msg { text-align: center; margin-top: 8px; }
#login .signup-link, #login .forgot-link { text-align: center; margin: 8px 0 0; }
#login .forgot-link { margin-top: 4px; }
:is(#login, #acct) form > p.small-text:last-child { text-align: center; margin-bottom: 0; }
#login label.check { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; }
#login label.check input { width: 15px; height: 15px; margin: 0; accent-color: #962a18; }
/* under the frame, on the valley (2026-10-17): the tagline, then what the game is and the About / FAQ / Contact pages,
   wider than the 500px gate so the paragraph reads as a few lines */
.gate-tagline { margin: 18px -80px 0; text-align: center; font: italic 400 19px Georgia, serif; letter-spacing: .5px; color: #f2d58a;
  text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.6); }
.gate-foot { width: 760px; margin: 34vh 0 0 -130px; padding: 22px 30px 18px; color: #e6d6b4; text-align: center;
  background: rgba(14,9,5,.72); border-top: 1px solid rgba(201,150,60,.55); border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.gate-foot h2 { margin: 0 0 8px; font: 700 16px Georgia, serif; letter-spacing: 1px; color: #f2d58a; }
.gate-foot p { margin: 0; font-size: 13.5px; line-height: 1.6; text-align: justify; }
.gate-foot nav { margin-top: 14px; font-size: 14px; color: #a5781e; }
#login .gate-foot a { color: #f2d58a; text-decoration: none; margin: 0 6px; }
.gate-foot a:hover { text-decoration: underline; }
.gate-foot .gate-copy { margin-top: 8px; text-align: center; font-size: 12px; color: #9c8a6a; }

/* the account page (app.js "account page"; the user, 2026-10-16): the same crest and frame, wider, a card for each lord */
#acct { position: relative; z-index: 3; width: 1000px; margin: 1vh auto 3vh; }
#acct .citavon img { width: min(400px, 31vw); }
#acct .gate-frame { margin-top: -12px; padding: 46px 58px 40px; animation: frame-in .6s cubic-bezier(.2,.8,.2,1) both; }
.acct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(160,122,62,.6); }
#acct .acct-head h3 { margin: 0; text-align: left; font-size: 21px; }
.acct-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#acct #acct-search { flex: 1; margin: 0; }
#acct-sort { padding: 8px; border: 1px solid #a07a3e; border-radius: 3px; background: rgba(255,251,240,.82); font-size: 13px; }
#acct-count { min-width: 90px; text-align: right; }
.acct-lords { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); align-content: start; gap: 8px;
  min-height: 140px; max-height: 50vh; overflow-y: auto; padding: 3px 6px 3px 2px; }
.acct-lord { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 9px; text-align: left; color: var(--ink);
  font: 13px Georgia, serif; border: 1px solid rgba(160,122,62,.75); border-radius: 4px; background: rgba(255,250,236,.62);
  box-shadow: 0 1px 2px rgba(90,58,20,.25); transition: background .12s, border-color .12s, transform .12s, box-shadow .12s; }
.acct-lord:hover, .acct-lord:focus-visible { outline: none; background: rgba(255,247,222,.96); border-color: #8a2416; transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(90,58,20,.35); }
.acct-lord > img, .acct-lord > svg { flex: none; width: 52px; height: 52px; border-radius: 3px; border: 1px solid #a07a3e; object-fit: cover; }
.al-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.al-text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: #4a1a08; }
.al-text span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--quiet); }
.al-on { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #3a9a3e;
  box-shadow: 0 0 0 2px rgba(255,250,236,.9), 0 0 6px #3a9a3e; }
.al-war { position: absolute; right: 6px; bottom: 5px; padding: 0 6px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #fff4dc; background: var(--bad); }
.acct-lord.attacked { border-color: var(--bad); background: rgba(255,232,220,.78); }
.acct-none { grid-column: 1 / -1; padding: 34px 0; text-align: center; }
.acct-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(160,122,62,.6); }
.acct-actions > span { display: inline-flex; align-items: center; gap: 6px; }
.acct-job { margin: 0 0 10px; padding: 7px 10px; border: 1px solid rgba(160,122,62,.6); border-radius: 4px; background: rgba(255,250,236,.5); }
.acct-job p { margin: 0 0 5px; }
.acct-bar { height: 8px; overflow: hidden; border-radius: 4px; background: rgba(58,36,16,.18); }
.acct-bar div { height: 100%; background: linear-gradient(#e9c46a, #b8862a); transition: width .4s; }
#acct form.acct-panel, #acct-settings { max-width: 580px; margin: 0 auto; }
#acct-settings > p.small-text:last-child { text-align: center; margin-bottom: 0; }
#acct h4 { display: flex; align-items: center; gap: 6px; }
/* friends and sharing (src/sharing.ts; the user, 2026-10-16) */
.acct-head nav a { white-space: nowrap; }
.acct-badge { display: inline-block; min-width: 16px; margin-left: 4px; padding: 0 4px; border-radius: 8px; font: 700 10.5px/16px sans-serif;
  text-align: center; color: #fff4dc; background: var(--bad); vertical-align: 1px; }
.acct-center { text-align: center; }
.acct-note { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid rgba(160,122,62,.7);
  border-radius: 4px; background: rgba(255,244,214,.75); font-size: 13px; }
.acct-note > span { flex: 1; }
.acct-note.offer { border-color: #b8862a; background: rgba(255,236,180,.8); }
#acct .acct-note input { width: 180px; margin: 0; padding: 6px 8px; }
.acct-note button { padding: 5px 12px; }
.acct-server { margin-bottom: 4px; }
.acct-server > header { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 6px; }
.acct-server > header h4 { margin: 0; font: 700 15px Georgia, serif; color: #5a2a0c; }
.acct-server > header button { margin-left: auto; }
.acct-lord.shared { border-style: dashed; background: rgba(236,244,255,.62); }
.al-text .al-from { color: #7a3a10; font-style: italic; }
.al-on.inline { position: static; display: inline-block; vertical-align: 1px; }
.acct-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
#acct .acct-two select { display: block; width: 100%; margin-top: 3px; padding: 8px; border: 1px solid #a07a3e; border-radius: 3px; background: rgba(255,251,240,.82); font-size: 14px; }
#acct-friends, #acct-share, #acct-history { max-width: 760px; margin: 0 auto; }
#acct #friends-find input { flex: 1; margin: 0; }
.acct-rows { margin: 4px 0 12px; padding: 0; list-style: none; }
.acct-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-bottom: 1px solid rgba(160,122,62,.35); font-size: 13px; }
.acct-rows li > span:last-child { flex: none; display: flex; gap: 6px; }
.acct-rows.history li { justify-content: flex-start; }
.acct-rows.history li > span:first-child { flex: none; width: 110px; }
.acct-rows.history li > span:last-child { flex: 1; display: block; }
.acct-rows.found { border: 1px solid rgba(160,122,62,.6); border-radius: 4px; background: rgba(255,250,236,.5); }
.share-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 8px; }
#acct #share-search { flex: 1; margin: 0; }
.share-lords { max-height: 300px; overflow-y: auto; padding: 4px 6px; border: 1px solid rgba(160,122,62,.6); border-radius: 4px; background: rgba(255,250,236,.5); }
#acct label.check { display: flex; align-items: center; gap: 7px; margin: 0; white-space: nowrap; }
#acct label.check input { flex: none; width: 15px; height: 15px; margin: 0; padding: 0; accent-color: #962a18; }
#acct .share-lords label.check { padding: 4px 2px; font-weight: 400; white-space: normal; }
#acct .share-do label select { display: block; width: 100%; margin-top: 3px; padding: 8px; border: 1px solid #a07a3e; border-radius: 3px; background: rgba(255,251,240,.82); font-size: 14px; }
.share-do details { margin-top: 14px; padding: 6px 10px; border: 1px solid rgba(160,122,62,.6); border-radius: 4px; }
.share-do summary { cursor: pointer; font-weight: 600; color: #7a3a10; }
/* (i): more about it on hover or focus, in a parchment note above */
.info { position: relative; display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: 50%; vertical-align: middle;
  font: italic 700 11px Georgia, serif; color: #fff4dc; background: #8a5a2b; box-shadow: inset 0 0 0 1px rgba(255,230,170,.5); cursor: help; }
.info::after { content: attr(data-tip); position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; width: 290px; padding: 8px 10px;
  transform: translateX(-50%); font: 400 12.5px/1.45 Georgia, serif; text-align: left; letter-spacing: 0; text-transform: none; color: var(--ink);
  background: #fbf2dc; border: 1px solid var(--gold2); border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; }
.info:hover::after, .info:focus::after { opacity: 1; visibility: visible; }

/* the loading screen (loading.js): the crest and a frame with a bar over the same painting, over the game while the town draws */
body.loading #login-bg { z-index: 1000; }
#loading { position: fixed; z-index: 1001; top: 12vh; left: 50%; transform: translateX(-50%); width: 520px; margin: 0; padding: 0; text-align: center; }
#loading .gate-frame { margin-top: -14px; padding: 46px 64px 42px; }
.loading-bar { height: 18px; margin: 6px 0 10px; border-radius: 9px; overflow: hidden; background: #3a2410;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 0 0 2px #b8913f, 0 0 0 3px #4a2e10; }
#loading-fill { width: 0; height: 100%; border-radius: 9px; transition: width .3s ease-out;
  background: linear-gradient(#fff2c0, #e9c46a 40%, #b8862a 60%, #e9c46a);
  box-shadow: inset 0 -2px 3px rgba(110,67,24,.5); }
.loading-what { margin: 0; font-weight: 600; color: #4a2a0c; }
.loading-tip { margin: 8px 0 0; min-height: 1.3em; font-size: 13px; font-style: italic; color: #7a5a30; }
body.loaded #login-bg, body.loaded #loading { opacity: 0; transition: opacity .4s; }
:is(#login, #acct) a { color: #7a3a10; }
.scene .badges { pointer-events: none; }

.ic.unit.pic { object-fit: contain; }

/* the Lucky Charm wheel: a ring of prizes, a light running round it, the prize in the middle */
.wheel { position: relative; width: 400px; height: 400px; margin: 4px auto 8px; border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0 34%, #ecd29a 35% 36%, #f6e6bf 37% 60%, #d9b56a 61% 62%, #f3e2bc 63%); }
.wcount { text-align: center; margin: 2px 0 0; font-size: 15px; }
#wwon { text-align: center; min-height: 1.2em; margin: 0 0 4px; }
.wslot { position: absolute; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: #fbf0d6; border: 2px solid #b8893c; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s; }
.wslot.on { transform: scale(1.14); box-shadow: 0 0 0 3px #ffe08a, 0 0 18px 6px rgba(255, 210, 80, .85); z-index: 2; }
.wslot.won { animation: wonpulse 1s ease-in-out infinite; }
.wcenter { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding: 10px;
  background: radial-gradient(circle, #fffaf0, #f3e2bc); border: 3px solid #b8893c; box-shadow: inset 0 0 12px rgba(120, 80, 20, .3); }
.wcenter b { font-size: 13px; line-height: 1.15; }
.wcenter .small-text { font-size: 10px; line-height: 1.2; max-height: 3.6em; overflow: hidden; }
.wcenter.won { animation: wonpop .5s ease-out; box-shadow: 0 0 0 3px #ffe08a, 0 0 26px 8px rgba(255, 210, 80, .75); }
@keyframes wonpop { 0% { transform: translate(-50%, -50%) scale(.6); } 70% { transform: translate(-50%, -50%) scale(1.08); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes wonpulse { 50% { box-shadow: 0 0 0 3px #ffe08a, 0 0 22px 8px rgba(255, 210, 80, .9); transform: scale(1.1); } }

/* the March window (attack, scout, transport, reinforce), laid out as the original's; packed tight so the whole window,
   the time and distance at the bottom too, shows without scrolling (the user, 2026-10-16) */
.mw { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mw-left, .mw-right, .mw-foot { background: #fbf0d6; border: 1px solid #d4b47a; border-radius: 3px; padding: 5px 8px; }
.mw-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 3px; }
.mw-troops { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; margin-top: 3px; }
.mw-troop { display: grid; grid-template-columns: 38px 1fr 90px; align-items: center; gap: 4px; }
.mw-troop .mw-have { text-align: center; font-weight: 600; }
.mw input, .mw select { padding-top: 3px; padding-bottom: 3px; }
.mw-troop input, .mw-res input { width: 100%; text-align: right; }
.mw-troop.off { opacity: .45; }
.mw-form { display: grid; gap: 3px; padding-bottom: 4px; border-bottom: 1px solid #e3cc96; }
.mw-form label { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0; }
.mw-form select { flex: 1; min-width: 120px; }
.mw-form #mf-cl { min-width: 0; width: 0; }   /* takes what the Target row has left */
.mw-form select.short { color: #a8321c; }
.mw-form input[type=number] { width: 52px; }
.mw-form .mw-camp { flex-wrap: nowrap; gap: 4px; white-space: nowrap; }
.mw-form .mw-camp input[type=number] { width: 44px; min-width: 0; padding-left: 4px; padding-right: 4px; }
.mw-form .mw-camp input.ms { width: 52px; }
.mw-cargo { display: grid; gap: 2px; margin-top: 4px; }
.mw-res { display: grid; grid-template-columns: 30px 110px 1fr; align-items: center; gap: 6px; }
.mw-res .mw-stock { text-align: right; padding: 2px 6px; background: #fffaf0; border: 1px solid #e3cc96; border-radius: 3px; }
.mw-res.off input { opacity: .5; }
.mw-foot .row { justify-content: space-between; margin-top: 2px; }
.mw-foot #mf-calc { margin-top: 2px; }
@media (max-width: 760px) { .mw, .mw-troops { grid-template-columns: 1fr; } }

.mw-buttons { justify-content: flex-end; }
/* the right-hand Troops tab: a square for each troop type, a window for its picture */
.troopgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 6px; }
.tsq { background: #fbf0d6; border: 1px solid #c9a35e; border-radius: 4px; padding: 3px; text-align: center; box-shadow: inset 0 0 0 1px #fff6e0; }
.tsq.none { opacity: .45; }
.tsq-pic { height: 44px; display: grid; place-items: center; background: linear-gradient(#efe0b8, #e2cb94); border: 1px solid #d4b47a; border-radius: 3px; overflow: hidden; }
.tsq-n { font-weight: 700; font-size: 12px; margin-top: 2px; }
/* Hero Attributes, as the original's */
.ha { display: grid; grid-template-columns: 2fr 3fr; gap: 10px; }
.ha-list table tr.me td { background: #f3d99a; }
.ha-right { display: grid; gap: 8px; }
.ha-top, .ha-stats { background: #fbf0d6; border: 1px solid #d4b47a; border-radius: 3px; padding: 8px; }
.ha-top { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.ha-face { display: grid; gap: 6px; justify-items: center; }
.ha-fields, .ha-col { display: grid; gap: 5px; align-content: start; }
.ha-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 6px; }
.ha-row label { font-weight: 700; text-align: right; }
.ha-val { background: #fffaf0; border: 1px solid #e3cc96; border-radius: 3px; padding: 2px 6px; min-height: 22px; }
.ha-plus { min-width: 28px; }
.ha-stats { display: grid; grid-template-columns: 1fr 130px; gap: 10px; }
.ha-btns { display: grid; gap: 6px; align-content: start; }
.ha-save { margin-top: 18px; padding: 8px; }
@media (max-width: 760px) { .ha, .ha-top, .ha-stats { grid-template-columns: 1fr; } .troopgrid { grid-template-columns: repeat(3, 1fr); } }

/* the red demolish button on a building's picture, as the original's */
.bhead .pic { position: relative; }
.demo-btn { position: absolute; right: 4px; bottom: 4px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.demo-btn:hover { transform: scale(1.12); }

/* the Move button beside Demolish, and the town while a building is being moved */
.move-btn { position: absolute; right: 34px; bottom: 4px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.move-btn:hover { transform: scale(1.12); }
#plots.moving .slot { cursor: crosshair; }
#plots.moving .slot:hover .hl { opacity: 1; }

/* the March window's buttons stay in sight at the bottom of the window, however small the screen (a player, 2026-10-13:
   "i need to scroll down to see the button"); the hint above them too */
.mw-buttons { position: sticky; bottom: -12px; z-index: 3; background: #fbf0d6; margin: 0 -14px -12px; padding: 8px 14px 12px; border-top: 1px solid #e0c890; }

/* the ground of a plot behind the Town Hall, over it so it can still be clicked */
.hit { fill: transparent; cursor: pointer; }
.hit:hover { fill: rgba(255,230,140,.35); stroke: #ffe08a; stroke-width: 1.2; }

/* the troops tab: two columns, the picture beside the name and number (the user, 2026-10-13) */
.troopgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 4px; }
.tsq { display: grid; grid-template-columns: 40px 1fr; gap: 5px; align-items: center; text-align: left; padding: 2px 4px; }
.tsq-pic { height: 36px; }
.tsq-name { font-size: 11px; color: #5a4022; line-height: 1.1; }
.tsq-n { margin-top: 0; }
/* the gate, first in the Rally Spot and the Town Hall */
.gatebar { margin: 4px 0 8px; }
/* the Rally Spot, Beacon Tower, Forge / Workshop / Stable, Relief Station and Cottage windows' tables */
.wt td .ic.unit { vertical-align: middle; margin-right: 3px; }
.wt tr.warn td { color: var(--bad); }
.wt tr.dim td { opacity: .55; }
.wt tr.me td, .wt td.me, .wt th.me { background: rgba(242,213,138,.55); font-weight: 700; }
.wt td button[data-goxy] { padding: 1px 6px; }
.bk-line p { margin: 4px 0; }
.wpane h4 { margin: 10px 0 4px; }
.wt.strip td, .wt.strip th { padding: 4px 3px; }
/* armies in the jobs list: an attack going out red, an army coming home blue (the user, 2026-10-13) */
.jobrow.attack-out .jobname { color: #b3261e; font-weight: 700; }
.jobrow.attack-out .bar i { background: linear-gradient(#e0574b, #a8231a) !important; }
.jobrow.coming-home .jobname { color: #1f5fa8; font-weight: 700; }
.jobrow.coming-home .bar i { background: linear-gradient(#5a9be0, #1f5fa8) !important; }

/* the jobs and armies list at the bottom left shows everything (players, 2026-10-13: "it does not all fit"): names wrap
   instead of being cut, the box is wider and grows to the view's full height before it scrolls */
.jobs { width: 410px; max-height: calc(100% - 20px); }
.jobname { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.15; }
.jobrow { grid-template-columns: 22px 1fr auto auto; }

/* the demolish button beside a fortification's count */
.demo-btn.inline { position: static; vertical-align: middle; margin-left: 4px; }

/* a report's two sides face to face (the original's report screen; the user, 2026-10-16): one table, so the same kind
   of troop sits on the same row on both sides; the defender's half behind a line */
.rv { width: 100%; border-collapse: collapse; border: 1px solid #d9bf87; background: #fff; margin: 6px 0 10px; font-size: 12.5px; }
.rv td, .rv th { padding: 3px 5px; text-align: right; }
.rv td.rv-d, .rv th.rv-d { border-left: 2px solid #d9bf87; }
.rv td.rv-side { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e8d4a8; vertical-align: top; }
.rv-head { display: flex; gap: 10px; align-items: center; }
.rv-head .rv-who { flex: 1; font-size: 13.5px; line-height: 1.35; }
.rv-head > svg, .rv-head > img { border: 1px solid #b8945a; border-radius: 2px; }
.rv-verdict { font: 700 13px Georgia, serif; padding: 3px 10px; border-radius: 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.rv-verdict.won { background: linear-gradient(#4f9a3a, #2e6b22); border: 1px solid #23521a; }
.rv-verdict.lost { background: linear-gradient(#b8432f, #7d2416); border: 1px solid #5e1a10; }
/* the lords small on top, the heroes with their level in the sides; an empty frame where no hero was (the user, 2026-10-18) */
.rv-lords { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; margin: 2px 0 6px; }
.rv-lord { display: inline-flex; align-items: center; gap: 5px; }
.rv-lord img.face-img, .rv-lord svg { border: 1px solid #b8945a; border-radius: 2px; }
.rv-vs { font: italic 700 12px Georgia, serif; color: var(--quiet); }
.rv-head .rv-who b { font-size: 14.5px; }
.rv-lv { font-size: 12.5px; font-weight: 600; color: #6b4a1f; }
.rv-nohero { display: block; flex: none; width: 56px; height: 56px; box-sizing: border-box; border: 2px dashed #c9ab72; border-radius: 3px; background: #f4e9cf; }
.rv th.rv-unseen { text-align: center; font-style: italic; }
.rv-cols th { font-weight: 700; border-bottom: 1px solid #e8d4a8; color: var(--quiet); font-size: 12px; }
.rv-cols th:nth-child(4n+2) { text-align: left; }
.rv td.rv-pic { width: 36px; text-align: center; padding: 2px; }
.rv td.rv-name { text-align: left; white-space: nowrap; }
.rv tr:nth-child(odd) > td:not(.rv-side) { background: #fbf4e3; }
.rv-dead.some { color: var(--bad); }
.rv-sep td { color: var(--quiet); font: 700 11.5px Georgia, serif; text-align: left !important; padding-top: 6px; border-top: 1px solid #e8d4a8; }
/* the figures under it: honor, prestige, experience, loyalty, grievance, resources */
.rv-figs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rv-fig { display: flex; flex-direction: column; gap: 2px; padding: 5px 10px; border: 1px solid #e0c894; background: #fffaf0; border-radius: 3px; min-width: 110px; }
.rv-fig > span { font-size: 11.5px; color: var(--quiet); }
.rv-fig > b { font-size: 14px; }
.rv-fig > b.up { color: var(--good); }
.rv-fig > b.down { color: var(--bad); }
.rv-chips { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-weight: 400; font-size: 12.5px; color: var(--ink); }
.rv-chip { display: inline-flex; align-items: center; gap: 4px; }
div.rv-chips { display: flex; margin-bottom: 10px; }   /* the returning list: a block of its own */
.rv-h { margin: 6px 0 4px; }
/* an (i) that shows what something does when the mouse is over it (the March window's Standard and Banner) */
.info-i { position: relative; display: inline-grid; place-items: center; width: 15px; height: 15px; margin: 0 6px 0 2px; border-radius: 50%;
  background: #8a6a3a; color: #fff; font: italic 700 11px Georgia, serif; cursor: help; vertical-align: middle; }
.info-i:hover::after, .info-i:focus::after { content: attr(data-tip); position: absolute; z-index: 50; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: 280px; padding: 8px 10px; background: #2e2216; color: #f3e3bd; border: 1px solid #b8945a; border-radius: 4px; box-shadow: 0 3px 10px rgba(0,0,0,.45);
  font: 400 12.5px/1.4 Georgia, serif; text-align: left; white-space: normal; pointer-events: none; }
/* the alliance's two notes */
.alnote { min-height: 120px; }
/* boosts in force: small squares under the top bar (the original's buff icons) */
.buffbar { position: absolute; left: 8px; top: 8px; z-index: 4; display: flex; gap: 4px; flex-wrap: wrap; max-width: 60%; pointer-events: auto; }
.buffsq { position: relative; width: 32px; height: 32px; border: 1px solid #6b4a1e; border-radius: 3px; background: #2e2216; box-shadow: 0 1px 3px rgba(0,0,0,.5); overflow: hidden; }
.buffsq svg { display: block; width: 30px; height: 30px; }
/* the lord's status, always first in the buff row: Peace, or the protection on now; its menu drops below it */
.peacechip { display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 6px 0 3px; border: 1px solid #b8894a; border-radius: 3px; cursor: pointer;
  background: linear-gradient(#4a3420, #2e2216); color: #f3e3bd; box-shadow: 0 1px 3px rgba(0,0,0,.5); font: 12px Georgia, serif; text-align: left; }
.peacechip:hover { border-color: #f2d58a; }
.peacechip svg { display: block; width: 26px; height: 26px; flex: none; }
.peacechip .pc-t { display: flex; flex-direction: column; line-height: 1.1; }
.peacechip .pc-t b { font-size: 13px; color: #ffe08a; }
.peacechip .pc-t small { font-size: 10px; color: #d9c49a; white-space: nowrap; }
.peacechip .pc-caret { font-size: 10px; color: #d9c49a; margin-left: 2px; }
.peacechip.truce .pc-t b, .peacechip.dream .pc-t b, .peacechip.beginner .pc-t b { color: #9fe0ff; }
.peacechip.holiday .pc-t b { color: #ffd36b; }
.peacemenu { position: absolute; left: 8px; top: 48px; z-index: 8; width: 380px; max-height: calc(100% - 60px); overflow-y: auto; padding: 0 8px 8px;
  background: #f3e2bc; border: 2px solid #b8893c; border-radius: 4px; box-shadow: 0 0 0 2px #6e4f1c, 0 8px 24px rgba(0,0,0,.5); font-size: 13px; }
.peacemenu .pm-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 6px; padding: 6px 10px;
  background: #6e4f1c; color: #ffe08a; font: 700 14px Georgia, serif; }
.peacemenu .pm-head .win-close { height: 24px; width: 28px; border: 1px solid #b8893c; border-radius: 3px; font-size: 14px; }
.pm-row { margin-top: 6px; padding: 6px 8px; background: #fbf0d6; border: 1px solid #d4b47a; border-radius: 3px; }
.pm-row.cur { border-color: #c8742a; box-shadow: inset 3px 0 0 #c8742a; }
.pm-row p { margin: 3px 0; }
.pm-row .row { margin: 4px 0; flex-wrap: wrap; gap: 4px; justify-content: flex-start; align-items: center; }
.pm-h { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pm-h svg { width: 22px; height: 22px; flex: none; }
.pm-now { margin-left: auto; padding: 1px 6px; border-radius: 8px; background: #c8742a; color: #fff; font-size: 11px; }
.pm-msg { margin: 6px 0 0; font-size: 12px; }
.pm-msg:empty { display: none; }
.buffend { position: absolute; left: 0; right: 0; bottom: 0; font: 700 8px/1 sans-serif; color: #fff; text-align: center; background: rgba(0,0,0,.55); padding: 1px 0; }
/* the system line: the game's news, in the middle of the view level with the buff squares */
.sysmsg { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 4; max-width: 46%; padding: 6px 14px; border: 1px solid #f2d58a; border-radius: 4px;
  background: rgba(21, 18, 15, .82); color: #ffe08a; font: 700 13px Georgia, serif; text-align: center; pointer-events: none; transition: opacity .6s; }
.sysmsg.fade { opacity: 0; }
.sysline { color: #7a2a10; font-style: italic; }
.sysnote { flex: 1; align-self: center; }
/* the Reports button while anything hostile is on its way: red, on and off */
.round.alarm .disc { animation: alarm 1s steps(1, end) infinite; }
@keyframes alarm { 50% { filter: brightness(1.15) sepia(1) saturate(6) hue-rotate(-50deg); box-shadow: 0 0 0 3px #ff3b30, 0 0 16px 4px rgba(255, 40, 30, .85); } }
/* no text cursor anywhere but where you type, even with the browser's caret browsing (F7) on (the user, 2026-10-13) */
#game { caret-color: transparent; user-select: none; }
#game input, #game textarea, #game select { caret-color: auto; user-select: text; }

/* the Lucky Charm shortcut: a round button with a little roulette wheel, bottom-left of the view above Construction;
   out of the way while the build/troop list is open there */
.charm-btn { position: absolute; left: 10px; bottom: 8px; z-index: 4; }
.charm-btn .lbl { margin-top: -6px; }
.charm-btn .count { right: -4px; }
.jobs:not([hidden]) ~ .charm-btn { display: none; }
.charm-btn .roul .spin { transform-origin: 0 0; }
.charm-btn:hover .roul .spin, .charm-btn:hover .disc img { animation: roul 1.6s linear infinite; }
@keyframes roul { to { transform: rotate(360deg); } }

/* ---- painted faces (faces.js): lords' portraits, heroes' in their stat's frame, the picker, a lord's profile ---- */
img.face-img { display: block; object-fit: cover; border-radius: 3px; background: #2a2018; }
.lord .face { position: relative; cursor: pointer; }
.lord .face img.face-img { border: 2px solid var(--gold); border-radius: 4px; box-sizing: content-box; }
.lord .face:hover img.face-img, .lord .face:hover svg { border-color: var(--goldhi); box-shadow: 0 0 6px rgba(242,213,138,.8); }
.facehint { position: absolute; left: 2px; right: 2px; bottom: 2px; padding: 2px 0; text-align: center; font: 600 9px/1.1 Georgia, serif; white-space: nowrap; overflow: hidden;
  color: #ffe6a8; background: rgba(20,14,8,.72); border-radius: 0 0 4px 4px; pointer-events: none; animation: facehint 2.4s ease-in-out 3; }
@keyframes facehint { 50% { color: #fff; background: rgba(90,58,20,.85); } }
.hface { display: inline-block; flex: none; vertical-align: middle; line-height: 0; padding: var(--hw, 2px); border-radius: 4px;
  background: var(--hf, var(--gold)); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.hface > img, .hface > svg { display: block; border-radius: 2px; }
.herorow .hface { justify-self: start; }
.hero .face .hface { display: block; }
.ha-face .hface { box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35); }
.wt td.lt .hface, .wt td.lt img.face-img, .wt td.lt svg.portrait { display: inline-block; vertical-align: middle; margin-right: 4px; }
.wt td.lt .hface > img { display: block; }
a.lordlink { color: inherit; text-decoration: none; white-space: nowrap; }
a.lordlink:hover { text-decoration: underline; }
.innopt { justify-content: flex-start; }
.innopt .innwho { flex: 1; }
.chatmain a.who { color: #b3261e; text-decoration: none; }
.chatmain a.who img.face-img, .chatmain a.who svg { display: inline-block; vertical-align: -4px; margin-right: 3px; border-radius: 2px; }
.chatmain a.who:hover strong { text-decoration: underline; }
.map-hover img.face-img, .map-hover svg { display: inline-block; vertical-align: -5px; margin-right: 4px; border-radius: 2px; }
.tp-lord img.face-img, .tp-lord svg { display: inline-block; vertical-align: middle; margin-right: 6px; border: 1px solid #b8945a; }
.tp-lord a { color: inherit; }
/* the Overview: the lord's face (click to change it) and a new name */
.ov-lord { display: flex; gap: 14px; align-items: flex-start; }
.ov-face { position: relative; flex: none; padding: 0; background: none; border: 2px solid var(--gold); border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.ov-face img.face-img, .ov-face svg { display: block; border-radius: 3px; }
.ov-change { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; font: 600 11px Georgia, serif; color: #ffe6a8; background: rgba(20,14,8,.62); opacity: .85; transition: opacity .15s; }
.ov-face:hover .ov-change, .ov-face:focus-visible .ov-change { opacity: 1; }
.ov-face:hover { border-color: var(--goldhi); }
.ov-rename { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ov-rename input { width: 150px; }
.ov-rename .small-text { flex-basis: 100%; }
/* a lord's profile */
.lp { display: flex; gap: 14px; align-items: flex-start; }
.lp-face { flex: none; padding: 2px; background: var(--gold); border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.lp-name { font: 700 18px Georgia, serif; margin: 2px 0 6px; }
.lp-title { color: var(--gold2); }
.lp-t { border-collapse: collapse; font-size: 13px; }
.lp-t th { text-align: left; padding: 2px 14px 2px 0; color: var(--quiet); font-weight: 600; }
.lp-t td { padding: 2px 0; }
/* the portrait picker (in the game and at sign-up) */
/* a shared report over the login or the game (app.js showSharedReport); a report's favourite and share buttons */
#rep-shared { position: fixed; inset: 0; z-index: 45; background: rgba(10,7,4,.55); }
#rep-shared .win { display: flex; flex-direction: column; }
.rep-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.rep-link { display: inline-flex; align-items: center; gap: 4px; }
.rep-link input { width: 340px; font-size: 12px; }
button.repstar { padding: 0 4px; border: 0; background: none; box-shadow: none; font-size: 17px; line-height: 1; color: #b39256; cursor: pointer; }
button.repstar.on { color: #d49a12; }
button.repstar:hover { color: #e0a81a; }
#face-pick { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(10,7,4,.55); }
#face-pick[hidden] { display: none; }
.fp-box { width: 700px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; background: #f3e2bc; border: 2px solid #b8893c; border-radius: 4px;
  box-shadow: 0 0 0 2px #6e4f1c, 0 12px 40px rgba(0,0,0,.6); }
.fp-body { margin: 8px; padding: 10px 12px; background: #fbf0d6; border: 1px solid #d4b47a; border-radius: 3px; }
.fp-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.fp-n { opacity: .7; font-weight: 400; }
.fp-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; max-height: 360px; overflow-y: auto; padding: 4px; background: #efdcb0; border: 1px solid #d4b47a; border-radius: 3px; }
.fp-face { position: relative; padding: 2px; background: #6e4f1c; border: 0; border-radius: 4px; box-shadow: none; line-height: 0; }
.fp-face img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 2px; }
.fp-face:hover { background: var(--gold); }
.fp-face.on { background: var(--goldhi); box-shadow: 0 0 0 2px var(--gold2), 0 0 10px rgba(242,213,138,.9); }
.fp-face.cur::after { content: '✓'; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; font: 700 11px/16px sans-serif; text-align: center;
  color: #fff; background: var(--good); border-radius: 50%; }
.fp-none { grid-column: 1 / -1; text-align: center; padding: 30px 0; }
.fp-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.fp-sel { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.fp-sel img.face-img, .fp-sel svg { border: 1px solid #b8945a; }
/* sign-up: the face picked */
.login-face-row { display: flex; gap: 10px; align-items: center; margin: 4px 0 8px; }
.login-face-row .quiet { text-align: left !important; }
.login-face { flex: none; width: 64px; height: 64px; padding: 2px; font: 600 10px/1.15 Georgia, serif; color: var(--ink); background: linear-gradient(#fbf0d6, #e6cf9c); }
.login-face.chosen { background: var(--gold); }
.login-face img.face-img { width: 56px; height: 56px; }

/* ---- the walls' defences: a card each in the Walls window (picture, what it does, numbers, needs), and the Walls tab's
   squares, which open it */
.fortcards { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.fortcard { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.fortcard .fc-pic { width: 68px; height: 68px; display: grid; place-items: center; background: linear-gradient(#efe0b8, #e2cb94); border: 1px solid #d4b47a; border-radius: 4px; }
.fortcard .fc-pic img, .fortcard .fc-pic svg { max-width: 64px; max-height: 64px; object-fit: contain; }
.fortcard .tc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.fortcard .fc-about { font-size: 12px; margin: 2px 0 3px; }
.fortcard .fc-stats { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 12px; color: var(--quiet); }
.fortcard .fc-stats b { color: var(--ink); }
.fortcard .count { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.fortcard .count input { width: 90px; }
.fortcard.locked .fc-pic { filter: grayscale(.7); opacity: .7; }
.fortcard.flash { animation: fortflash 1.4s ease-out; }
@keyframes fortflash { 0%, 30% { background: rgba(242,213,138,.75); } 100% { background: transparent; } }
.bk-troops .fortcard { grid-template-columns: 60px 1fr; }
.bk-troops .fortcard .fc-pic { width: 58px; height: 58px; }
.bk-troops .fortcard .fc-pic img, .bk-troops .fortcard .fc-pic svg { max-width: 54px; max-height: 54px; }
.fortgrid .tsq { cursor: pointer; }
.fortgrid .tsq:hover, .fortgrid .tsq:focus-visible { border-color: var(--gold2); box-shadow: inset 0 0 0 1px #fff6e0, 0 0 5px rgba(201,162,74,.8); opacity: 1; }
.fortgrid .tsq.none { opacity: .75; }
.nowrap { white-space: nowrap; }