/* Rivalgrid v5 · retro strategy sprites in the carved wood and stone War Hall.
   The v3 oak, stone, parchment and gilt frames stay. This file places the pixel art at integer
   scales with nearest neighbour rendering, swaps soft painted effects for stepped ones, and adds
   the old school touches: sword pointer, pixel counters, sprite loops at 6 to 8 frames a second,
   a loading screen and stepped hover states. */

:root {
  --cur-sword: url(assets/retro/ui/sword@2x.png) 0 0;
  --cur-hand: url(assets/retro/ui/sword@2x.png) 0 0;
  --px-ink: #1b130d;
}

/* ---------- crisp pixels everywhere ---------- */
img.px, .px-layer, .map-fx, .map-paint, .clash-cv, .spr, .pxi, .pxcoin, .pxtext, .bld-px, .counsel-px, .u-px image, .realm image, .minimap image {
  image-rendering: crisp-edges; image-rendering: pixelated;
}
.u-px .u-fb { display: none; }
.u-noart .u-fb { display: inline; }
.u-noart .u-img { display: none; }
.realm .plaque path, .realm .node-flag path, .realm .map-flag, .fog-px rect { shape-rendering: crispEdges; }

/* ---------- loading screen ---------- */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--tex-oak) 0 0 / 640px 288px, #120b05; }
.loader.done { animation: ldOut .24s steps(3) forwards; pointer-events: none; }
@keyframes ldOut { to { opacity: 0; visibility: hidden; } }
.ld-box { text-align: center; padding: 26px 30px 20px; background: #1f140a; border: 4px solid #0d0804; box-shadow: inset 0 0 0 2px #6e4b14, inset 0 0 0 4px #1f140a, inset 0 0 0 6px #b8862c, 0 10px 0 rgba(0, 0, 0, .45); }
.ld-mark { display: block; margin: 0 auto 16px; }
.ld-bar { display: flex; gap: 4px; padding: 6px; background: #0d0804; border: 2px solid #6e4b14; }
.ld-seg { display: block; width: 16px; height: 18px; background: #3a2a22; box-shadow: inset 0 -4px 0 #2b1d16; }
.ld-seg.on { background: #d9a53b; box-shadow: inset 0 -4px 0 #b08127, inset 0 4px 0 #f0d27a; }
.ld-status { margin-top: 10px; font: italic 16px var(--serif); color: var(--gold-text); }
body.rm .loader { display: none; }

/* ---------- pixel counters in the resource bar ---------- */
.pxnum { display: inline-flex; align-items: center; min-width: 2.6ch; justify-content: flex-end; }
.pxnum canvas { display: block; }
.res-item .pxi { width: 24px; height: 24px; display: block; }
.res-day .pxnum { min-width: 0; margin-right: 6px; }
.res-day b { display: inline-flex; align-items: center; white-space: nowrap; }
.res-item.bump .pxnum { animation: pxBump .48s steps(3); }
.res-item.spend .pxnum { animation: pxSpend .48s steps(3); }
@keyframes pxBump { 33% { transform: translateY(-4px); } 66% { transform: translateY(-2px); } }
@keyframes pxSpend { 33% { transform: translateY(2px); filter: brightness(.7); } }
.ico.pxi { width: 24px; height: 24px; vertical-align: -6px; }
.cost .pxi { width: 24px; height: 24px; }
.pxcoin { display: inline-block; vertical-align: -7px; margin-right: 6px; }
.codex-links .coin-link { display: inline-flex; align-items: center; }

/* ---------- stepped buttons and hover states ---------- */
.btn-seal, .btn-plain, .btn-iron, .btn-stone, .opt, .pick, .chip, .tabs button, .town-tab, .stepper button { transition: none !important; }
.btn-stone:hover, .btn-seal:hover:not([disabled]), .btn-plain:hover, .pick:hover, .town-tab:hover { outline: 2px solid #f0d27a; outline-offset: 2px; }
.btn-stone:hover span, .btn-seal:hover:not([disabled]) { text-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.btn-stone:active, .btn-seal:active:not([disabled]), .btn-plain:active { transform: translateY(2px); }
.btn-stone-main:hover { animation: btnBlink .6s steps(2) infinite; }
@keyframes btnBlink { 50% { background-color: #d9a53b; } }
.opt:hover:not([aria-disabled="true"]) { box-shadow: inset 0 0 0 2px #b8862c, 0 2px 0 rgba(43, 29, 16, .5); }
#sound-toggle[aria-pressed="true"] { background-color: #2f4035; color: #e4f0d8; }

/* ---------- title screen: the retro castle hero ---------- */
.slot-hero .slot-art { position: absolute; inset: 0; overflow: hidden; background: #1b130d; }
.px-fit { position: absolute; left: 0; top: 0; max-width: none; }
.px-layer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
.slot-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; box-shadow: inset 0 0 0 4px #0d0804; }
@media (min-width: 1101px) {
  .slot-hero { height: 536px; min-height: 0; aspect-ratio: auto; }
  .ts-menu { width: 300px; left: 2.2%; padding: 10px 14px 14px; z-index: 4; }
  .ts-menu .ts-buttons .btn-stone { font-size: 16px; min-height: 38px; }
  .ts-menu { padding: 8px 14px 12px; border-width: 18px; border-image-width: 18px; }
  .ts-title, .ts-title img { width: 104px; margin-top: 4px; margin-bottom: 2px; }
  .ts-lede { font-size: 15px; line-height: 1.45; }
  .ts-buttons { gap: 6px; margin-top: 10px; }
  .ts-eyebrow { font-size: 14px; }
}
.ts-eyebrow::after { content: ""; display: block; width: 100%; height: 4px; margin-top: 8px; background: repeating-linear-gradient(90deg, #b8862c 0 8px, transparent 8px 12px); }

/* ---------- the game map: 600 x 380 pixels at exactly 2x ---------- */
.map-scroll { height: 620px; cursor: var(--cur-sword), grab; }
.map-scroll.dragging { cursor: grabbing; }
.realm-wrap { width: 1200px; height: 760px; overflow: hidden; background: #2a2418; }
.realm-wrap::after { display: none; }
.map-paint { position: absolute; left: 0; top: 0; width: 1200px; height: 760px; display: block; }
.map-fx { position: absolute; left: 0; top: 0; width: 1200px; height: 760px; pointer-events: none; z-index: 1; }
.realm-wrap .realm { position: relative; z-index: 2; display: block; width: 1200px; height: 760px; }
.realm-wrap.painted .terrain { display: none; }
.realm-wrap:not(.painted) .seat-std { display: none; }
.realm-wrap.painted .map-region { fill: #fbf6e8; stroke: #1b130d; }
.realm-wrap.painted .terr { fill-opacity: 0; stroke-opacity: .55; stroke-dasharray: 4 8; stroke-linecap: butt; }
.realm-wrap.painted .terr.mine { fill-opacity: .1; stroke-opacity: .9; }
.realm-wrap.painted .roads { opacity: .42; }
.realm .plaque path { fill: #efe0bc; stroke-width: 2.5; }
.realm .plaque text { font-size: 19px; }
.realm .node .fog { transition: opacity .6s steps(4), transform .6s steps(4); }
.fog-px { opacity: .86; }
.fog-px rect { fill: #1b130d; }
.fog-px rect:nth-child(3n) { fill: #2b1d16; }
.fog-px rect:nth-child(5n) { fill: #3a2a22; }
.realm .node.target .node-ring { stroke-dasharray: 6 6; animation: spin 4s steps(12) infinite; }
.realm .map-flag, .realm .amb-flag { animation-timing-function: steps(2) !important; }
.realm .float { pointer-events: none; }
@keyframes pxFloat { 0% { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-36px); opacity: 0; } }
.dust-px { transform-box: fill-box; transform-origin: center; animation: dustPx .6s steps(4) both; }
@keyframes dustPx { from { transform: scale(1); opacity: .9; } to { transform: scale(2.5) translateY(-3px); opacity: 0; } }
.new-bld { animation: bldIn .5s steps(4) both; }
@keyframes bldIn { from { transform: translateY(8px); opacity: 0; } }
.minimap .mm-paint { opacity: 1; }
body.rm .realm .ambient { display: none; }

/* ---------- the report scroll: pixel clash, woodcut map print behind the parchment ---------- */
.battle-scene { height: auto; background: #1b130d; display: flex; justify-content: center; }
.clash-cv { display: block; }
.battle-body { position: relative; }
.battle-body::before { content: ""; position: absolute; inset: 0; background: url(assets/retro/print/map-print.png) 50% 30% / cover; opacity: .1; mix-blend-mode: multiply; pointer-events: none; }
.battle-body > * { position: relative; }

/* ---------- side panels: tokens at 2x ---------- */
.army .art { height: 76px; }
.army .art svg { height: auto; width: auto; }
.queue li { grid-template-columns: 84px 1fr; }
.queue .q-art { display: flex; justify-content: center; align-items: end; min-height: 56px; }
.queue .q-art svg, .queue .q-art img { width: auto; height: auto; max-height: 72px; }
.queue .q-art img.bld-px { width: 80px; height: 70px; }
.opt .o-art { display: flex; justify-content: center; align-items: end; }
.opt .o-art svg, .opt .o-art .unit-svg { width: auto; height: auto; max-height: none; }
.opt .o-art img.bld-px { width: 80px; height: 70px; }
.counsel { grid-template-columns: 88px 1fr; }
.counsel-face { width: 86px; height: 86px; }
.counsel-face img { display: block; width: 80px; height: 80px; }

/* ---------- houses: one town screen per house ---------- */
.houses { display: block; margin-top: 40px; }
.town-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.town-tab { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; font: 700 19px var(--serif); font-variant: small-caps; letter-spacing: .05em; color: #f1e6cb; background: var(--tex-oak) 0 0 / 320px, #3d2814; border: 2px solid #0d0804; box-shadow: var(--bevel-out), 0 3px 0 #0a0603; cursor: var(--cur-hand), pointer; }
.town-tab .crest { width: 34px; height: 36px; }
.town-tab[aria-selected="true"] { color: #1b130d; background: #d9a53b; box-shadow: inset 2px 2px 0 #f0d27a, inset -2px -2px 0 #7e5718, 0 3px 0 #0a0603; }
.town-tab-forge[aria-selected="true"] { background: #a3342a; color: #fff4d6; box-shadow: inset 2px 2px 0 #e38a6a, inset -2px -2px 0 #5a1a10, 0 3px 0 #0a0603; }
.town-tab-ghost[aria-selected="true"] { background: #4f6b55; color: #fff4d6; box-shadow: inset 2px 2px 0 #8fb09a, inset -2px -2px 0 #232b31, 0 3px 0 #0a0603; }
.town-tab-tide[aria-selected="true"] { background: #156a73; color: #fff4d6; box-shadow: inset 2px 2px 0 #4fa3a8, inset -2px -2px 0 #0b3540, 0 3px 0 #0a0603; }
.town-tab:focus-visible { outline: 3px solid #fff1b8; outline-offset: 2px; }
.house.town { display: grid; grid-template-columns: 376px minmax(0, 1fr); gap: 22px; padding: 22px; }
.house.town[hidden] { display: none; }
.town .slot-portrait { width: 376px; height: 500px; aspect-ratio: auto; background: #1b130d; }
.town .slot-portrait .slot-art { position: absolute; inset: 0; display: block; overflow: hidden; }
.town-main { min-width: 0; display: flex; flex-direction: column; }
.town .slot-seat { width: 100%; max-width: 640px; height: 358px; aspect-ratio: auto; background: #1b130d; box-shadow: 0 0 0 4px #b8862c, 0 0 0 6px var(--ink); }
.town .slot-seat .slot-art { position: absolute; inset: 0; overflow: hidden; }
.town .house-banner { top: -14px; right: 14px; width: 70px; }
.town .house-banner svg { width: 70px; }
.town .house-head { margin-top: 16px; border: 2px solid #0d0804; max-width: 640px; }
.town .house-body { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; padding: 0; gap: 22px; }
.town .commander { display: block; }
.town .commander > div { display: block; }
.town .lineup { grid-column: 1 / -1; gap: 18px; background: linear-gradient(transparent 0 70%, #4a3a2b 70% 74%, #3a2a22 74%); padding-top: 12px; }
.town .lineup .spr, .town .lineup img { margin: 0 4px; }
.lore { overflow: hidden; }
.lore::before { content: ""; position: absolute; inset: 0; background-position: 60% 40%; background-size: cover; opacity: .16; mix-blend-mode: multiply; pointer-events: none; }
.house-forge .lore::before { background-image: url(assets/retro/print/seat-forge-print.png); }
.house-ghost .lore::before { background-image: url(assets/retro/print/seat-ghost-print.png); }
.house-tide .lore::before { background-image: url(assets/retro/print/seat-tide-print.png); }
.lore > * { position: relative; }
.lore .ability-seal { position: absolute; }

/* ---------- units: animated sprites on stepped bands ---------- */
.ucard .u-art { aspect-ratio: auto; height: 240px; position: relative; }
.ucard-forge .u-art { background: linear-gradient(#3a2a22 0 14%, #5a3a2a 14% 30%, #8e4a2e 30% 46%, #c26a3a 46% 62%, #6a6a3a 62% 66%, #4a5a2a 66%); }
.ucard-ghost .u-art { background: linear-gradient(#232b31 0 14%, #2f4035 14% 30%, #3f4a52 30% 46%, #5d6b72 46% 62%, #4a6230 62% 66%, #34482a 66%); }
.ucard-tide .u-art { background: linear-gradient(#a8e0d4 0 14%, #bfe0dc 14% 30%, #d9e9e2 30% 46%, #ece6d4 46% 62%, #c2ad80 62% 66%, #a39168 66%); }
.ucard .u-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 4px, transparent 4px 10px), repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 8px); pointer-events: none; }
.ucard .u-art .slot-art { position: relative; z-index: 1; padding-bottom: 14px; }
.u-shadow { position: absolute; left: 50%; bottom: 10px; width: 64px; height: 6px; margin-left: -32px; background: rgba(27, 19, 13, .4); z-index: 0; }
.spr { display: block; width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px); background-repeat: no-repeat;
  background-size: calc(var(--w) * var(--n) * var(--k) * 1px) calc(var(--h) * var(--k) * 1px);
  animation: sprStep calc(var(--n) / var(--fps) * 1s) steps(var(--n)) infinite; animation-play-state: paused; }
@keyframes sprStep { from { background-position: 0 0; } to { background-position: calc(var(--w) * var(--n) * var(--k) * -1px) 0; } }
.live .spr { animation-play-state: running; }
.spr-still { display: block; animation: pxBob 1.4s steps(2) infinite; animation-delay: var(--bob, 0s); animation-play-state: paused; }
.live .spr-still { animation-play-state: running; }
@keyframes pxBob { 50% { transform: translateY(-2px); } }
.ucard:hover .spr, .ucard:hover .spr-still { transform: translateY(-4px); }
.ucard:hover .u-shadow { width: 48px; margin-left: -24px; }
.triangle svg image { image-rendering: pixelated; }
.ws-skins svg { height: auto; width: auto; max-height: 200px; }
.vill svg { height: auto !important; width: auto !important; }
.bcard .bld-px { width: 80px; height: 70px; }
.lineup svg { height: auto; width: auto; }

/* ---------- seasons: the siege in pixels, legend on a woodcut map print ---------- */
.slot-siege .slot-art { position: relative; }
.track-legend { position: relative; padding: 12px 14px; color: var(--parch-ink); background: var(--parch); border: 2px solid var(--ink); }
.track-legend::before { content: ""; position: absolute; inset: 0; background: url(assets/retro/print/map-print.png) 50% 50% / cover; opacity: .2; mix-blend-mode: multiply; pointer-events: none; }
.track-legend span { position: relative; }

/* ---------- small screens ---------- */
@media (max-width: 1100px) {
  .house.town { grid-template-columns: minmax(0, 1fr); }
  .town-main, .town .slot-seat { max-width: 100%; min-width: 0; }
  .town .slot-portrait { width: 376px; max-width: 100%; justify-self: center; }
  .town .house-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .town-main { align-items: center; }
}
@media (max-width: 860px) {
  .map-scroll { height: 380px; }
}
@media (max-width: 700px) {
  .town .slot-portrait { width: 192px; height: 254px; }
  .town .slot-seat { height: 187px; }
  .town .house-body { grid-template-columns: minmax(0, 1fr); }
  .town .lineup { flex-wrap: wrap; gap: 8px; }
  .house.town { padding: 14px; }
  .town-tab { font-size: 16px; padding: 6px 12px 6px 8px; }
  .town-tab .crest { width: 26px; height: 28px; }
}
@media (max-width: 480px) {
  .map-scroll { height: 340px; }
  .counsel { grid-template-columns: 56px 1fr; }
  .counsel-face { width: 46px; height: 46px; }
  .counsel-face img { width: 40px; height: 40px; }
  .ucard .u-art { height: 230px; }
}

/* ---------- reduce motion: stepped loops stop too ---------- */
body.rm .spr { animation: none; }
body.rm .px-layer, body.rm .map-fx { visibility: hidden; }

/* ---------- the sound toggle: a small square speaker at every width (the label stays for screen readers);
   it is as tall as the iron buttons beside it (42 px), and an invisible ring makes the target 44 px ---------- */
#sound-toggle { position: relative; justify-content: center; width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0; gap: 0; flex: none; }
#sound-toggle svg { width: 18px; height: 18px; }
#sound-toggle .snd-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#sound-toggle::after { content: ""; position: absolute; inset: -1px; }
.top-actions { align-items: center; }

/* ---------- X follow link: an iron button like its neighbours ---------- */
.x-btn { text-decoration: none; color: var(--text); white-space: nowrap; }
.x-btn:hover, .x-btn:focus-visible { color: #fff6dc; }
.x-btn svg { width: 16px; height: 16px; }
.fight-scene { display: flex; justify-content: center; background: #1b130d; }
.coin-big { display: block; margin: 0 auto; }
.units-layout > *, .roster > * { min-width: 0; }
.ucard .u-art { overflow: hidden; }
.fight-scene { overflow: hidden; }

/* ================= v6: pixel plaques, iso pixel buildings, fog of war, unit drills ================= */
.map-lm, .map-fog { position: absolute; left: 0; top: 0; width: 1200px; height: 760px; pointer-events: none; z-index: 1; image-rendering: pixelated; }
.realm-wrap.painted .seat-std { display: none; }
.realm .plq { image-rendering: pixelated; }
.realm .plq-alt { display: none; }
.realm .node.picked .plq-alt, .realm .seat.mine .plq-alt, .realm .plaque-seat.mine .plq-alt { display: inline; }
.realm .node.target .plq-base { filter: brightness(1.12); }
.realm .node.target:hover .plq-base, .realm .node.target:focus-visible .plq-base { filter: brightness(1.22); }
.realm .plaque text.plq-text { fill: transparent; stroke: none; font: 700 18px var(--serif); pointer-events: none; }
.realm .map-region-px text.plq-text { font-size: 16px; }
/* buildings: two frame ambient loops (smoke, flags, glow), whole pixels at an integer scale */
.bld-spr { display: block; width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px); background-repeat: no-repeat; image-rendering: pixelated;
  background-size: calc(var(--w) * var(--n) * var(--k) * 1px) calc(var(--h) * var(--k) * 1px);
  animation: sprStep calc(var(--n) / var(--fps) * 1s) steps(var(--n)) infinite; animation-play-state: paused; }
.live .bld-spr, .cmd .bld-spr, .queue .bld-spr { animation-play-state: running; }
.bcard { grid-template-columns: 112px 1fr; }
.bcard .b-art { display: flex; justify-content: center; align-items: center; min-height: 72px; }
.opt .o-art .bld-spr, .queue .q-art .bld-spr { --k: 1 !important; }
.opt .o-art .bld-spr { transform: none; }
.realm .bld-anim { animation: bldShift 1s steps(2) infinite; animation-play-state: paused; }
.live .realm .bld-anim { animation-play-state: running; }
@keyframes bldShift { to { transform: translateX(var(--sx)); } }
.realm .dust-spr { animation: dustStep .4s steps(4) both; }
@keyframes dustStep { to { transform: translateX(-36px); } }
/* unit animations that play once (the fall) hold their last frame */
.spr.spr-once { animation: sprOnce calc(var(--n) / var(--fps) * 1s) steps(var(--n1)) 1 forwards; animation-play-state: paused; }
.live .spr.spr-once { animation-play-state: running; }
@keyframes sprOnce { from { background-position: 0 0; } to { background-position: calc(var(--w) * var(--n1) * var(--k) * -1px) 0; } }
body.rm .spr.spr-once { animation: none; background-position: calc(var(--w) * var(--n1) * var(--k) * -1px) 0; }
.drill { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px 8px 0; }
.drill-b { flex: 1 1 0; min-width: 0; padding: 4px 2px; font: 700 12px/1.2 var(--serif); letter-spacing: .02em; color: #efe0bc; background: #3a2a1e; border: 2px solid #1b130d; box-shadow: inset 0 2px 0 #5a4430, inset 0 -2px 0 #24180f; cursor: var(--cur-hand), pointer; }
.drill-b[aria-pressed="true"] { color: #1b130d; background: #d9a53b; box-shadow: inset 0 2px 0 #f2cc63, inset 0 -2px 0 #8a6420; }
.drill-b:focus-visible { outline: 3px solid #fff1b8; outline-offset: 1px; }
body.rm .bld-spr, body.rm .realm .bld-anim, body.rm .realm .dust-spr { animation: none; }
/* commander blink: a layer of closed lids shown for a moment every few seconds */
.blink-px { position: absolute; pointer-events: none; opacity: 0; animation: blink 5.2s steps(1) infinite; animation-play-state: paused; }
.live .blink-px { animation-play-state: running; }
@keyframes blink { 0%, 95% { opacity: 0; } 96%, 98% { opacity: 1; } }
body.rm .blink-px { animation: none; opacity: 0; }
@media (max-width: 700px) {
  .bcard { grid-template-columns: 76px 1fr; }
  .bcard .bld-spr { --k: 1 !important; }
}
.rescard .vill { overflow: hidden; display: flex; justify-content: center; align-items: flex-end; min-width: 0; }
.ucard .u-art .slot-art { overflow: hidden; display: flex; justify-content: center; }
/* centre a unit on where it stands (its anchor), not on its frame box, which also holds the fall pose */
.vill .spr, .ucard .spr, .lineup .spr { flex: none; margin-left: calc((var(--w) / 2 - var(--ax, 0)) * var(--k) * 2px); }
.town .lineup { flex-wrap: nowrap; justify-content: center; overflow: hidden; max-width: 100%; }
@media (max-width: 1100px) { .town .lineup .spr { --k: 1 !important; } }

/* ================= v7: pixel roads, pixel borders, pixel rings, pixel minimap ================= */
.map-terr, .map-roads, .map-route { position: absolute; left: 0; top: 0; width: 1200px; height: 760px; pointer-events: none; z-index: 1; image-rendering: pixelated; }
.realm .roads-guide { visibility: hidden; }
/* selection ring: 8 frame marching dashes; a quiet still ring on places you can march to */
.realm .node-ring-px { display: none; pointer-events: none; }
.realm .node-ring-px.target, .realm .node-ring-px.picked { display: inline; }
.realm .node-ring-px image { image-rendering: pixelated; }
.realm .ring-picked, .realm .ring-focus { display: none; }
.realm .node-ring-px.picked .ring-target { display: none; }
.realm .node-ring-px.picked .ring-picked { display: inline; animation: pxShift .8s steps(8) infinite; animation-play-state: paused; }
.realm .node-ring-px.focus .ring-target, .realm .node-ring-px.focus .ring-picked { display: none; }
.realm .node-ring-px.focus .ring-focus { display: inline; animation: pxShift .8s steps(8) infinite; animation-play-state: paused; }
.realm .node-ring-px.hover .ring-target { filter: brightness(1.15) saturate(1.4); }
.live .realm .ring-picked, .live .realm .ring-focus, .live .realm .march-banner image { animation-play-state: running; }
.realm .march-banner image { animation-play-state: running; }
.realm .march-banner image { image-rendering: pixelated; animation: pxShift .5s steps(2) infinite; animation-play-state: paused; }
@keyframes pxShift { to { transform: translateX(var(--sx)); } }
body.rm .realm .ring-picked, body.rm .realm .ring-focus, body.rm .realm .march-banner image { animation: none; }
/* the minimap: a whole number scale of 128 x 72, centred in the stone frame */
.minimap { border-width: 10px; border-image-width: 10px; background: #1b130d; display: flex; justify-content: center; align-items: center; min-height: 92px; cursor: var(--cur-hand), pointer; outline: none; }
.minimap .mm-cv { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.minimap:focus-visible { box-shadow: 0 0 0 3px #fff1b8, 0 0 0 5px #1b130d; }
.panel-mini { padding-left: 6px; padding-right: 6px; }
.hud-bottom { grid-template-columns: 336px minmax(0, 1fr) 300px; }
@media (max-width: 1380px) { .hud-bottom { grid-template-columns: minmax(0, 336px) minmax(0, 1fr); } }
@media (max-width: 860px) { .hud-bottom { grid-template-columns: minmax(0, 336px) minmax(0, 1fr); } }
@media (max-width: 640px) { .hud-bottom { grid-template-columns: 1fr; } .panel-mini .minimap { max-width: none; } }