/* Fetih v8 — AoH2 map + army movement */
#map-wrap {
  background: #050a12;
}
#map {
  width: 100%;
  height: 100%;
  display: block;
  background: #050a12;
}
#ocean { pointer-events: none; }

/* Province vs country */
#cells path.cell {
  stroke-linejoin: round;
}
/* Legacy troop text replaced by #army-badges */
#labels text.troop { display: none !important; }
#map.lod-far #labels text.nm { display: none !important; }

/* Empire curved labels */
#empire-labels .emp-stroke {
  fill: none;
  stroke: rgba(0, 0, 0, 0.85);
  stroke-width: 3.2px;
  stroke-linejoin: round;
  paint-order: stroke;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
}
#empire-labels .emp-fill {
  fill: #f2f2f2;
  stroke: none;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.92;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
}
#empire-labels textPath { dominant-baseline: middle; }

/* Marches — flowing dashed arrow */
#marches .march-glow {
  stroke-width: 5.5;
  opacity: 0.22;
  stroke-linecap: round;
  filter: url(#march-glow);
  pointer-events: none;
}
#marches .march-line {
  stroke-width: 1.7;
  opacity: 0.85;
  stroke-linecap: round;
  pointer-events: none;
}
#marches .march-dash {
  stroke-width: 2.4;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
  opacity: 0.95;
  pointer-events: none;
}
#marches .march-token { pointer-events: all; }
#marches .tok-shield {
  filter: drop-shadow(0 0.6px 1px rgba(0,0,0,.85));
}
#marches .tok-glyph { pointer-events: none; }
#marches .march-num {
  fill: #fff;
  font-size: 6.2px;
  font-weight: 800;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 2px;
  pointer-events: none;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
#marches g.march.kind-attack .march-dash { stroke-dasharray: 4 6; }

#army-units .au-shield, #wrap-west .au-shield, #wrap-east .au-shield {
  filter: drop-shadow(0 0.5px 0.8px rgba(0,0,0,.85));
}
#army-units .au-sword, #wrap-west .au-sword, #wrap-east .au-sword { pointer-events: none; }
#army-units .au-chip { pointer-events: none; }
#army-units .au-num {
  pointer-events: none;
  letter-spacing: 0;
  user-select: none;
}

.march-tip {
  position: absolute;
  z-index: 40;
  min-width: 140px;
  max-width: 220px;
  padding: 8px 10px;
  background: rgba(8, 8, 10, 0.92);
  border: 1px solid rgba(255,255,255,.18);
  color: #eee;
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.march-tip.hidden { display: none; }
.march-tip b { color: #fff; font-size: 12px; }

/* ── Map chrome: minimap bottom-LEFT of map (clear of rail + dock + zoom) ── */
:root {
  --fetih-rail: 68px; /* v6-rail 52 + margins */
  --fetih-dock: var(--dock-w, 400px);
}
#screen-game .minimap {
  position: absolute !important;
  left: var(--fetih-rail) !important;
  right: auto !important;
  bottom: 16px !important;
  top: auto !important;
  z-index: 15;
  width: 220px;
  height: auto;
  overflow: hidden !important;
  transform: none !important;
}
#screen-game .zoom-ctl {
  position: absolute !important;
  left: calc(var(--fetih-rail) + 228px) !important;
  right: auto !important;
  bottom: 16px !important;
  top: auto !important;
  z-index: 15;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}
/* chat-collapsed dock is narrower but still present (players); keep minimap on left */
#screen-game:has(#hud-right-dock.chat-collapsed) .minimap {
  left: var(--fetih-rail) !important;
  right: auto !important;
  bottom: 16px !important;
}
#screen-game:has(#hud-right-dock.chat-collapsed) .zoom-ctl {
  left: calc(var(--fetih-rail) + 228px) !important;
  right: auto !important;
  bottom: 16px !important;
}
canvas#minimap-marches {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#mm-view {
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

/* Province grid — empty + owned (AoH2-ish) */
#cells path.cell {
  stroke-linejoin: round;
}
#cells path.cell.empty,
#cells path.cell.neutral {
  stroke: rgba(220, 230, 240, 0.45) !important;
  stroke-width: 0.75px !important;
}
#cells path.cell:not(.empty):not(.neutral) {
  stroke: rgba(0, 0, 0, 0.75) !important;
  stroke-width: 0.9px !important;
}
#cells path.cell.settling {
  stroke: #fff !important;
  stroke-dasharray: 4 3;
  stroke-width: 1.5px !important;
}
#cells path.cell.mine {
  stroke: rgba(0, 0, 0, 0.82) !important;
  stroke-width: 1.35px !important;
  filter: drop-shadow(0 0 1.2px rgba(255,255,255,.4));
}
#wrap-west path.cell-wrap,
#wrap-east path.cell-wrap {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 0.4px;
  stroke-linejoin: round;
}

/* HUD: single readable bar on all sizes */
#screen-game .hud-top {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 60 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px 12px;
  min-height: 48px;
  height: 48px !important;
  max-height: 48px !important;
  padding: 0 12px !important;
  background: #000 !important;
  border-bottom: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  box-sizing: border-box;
}
#screen-game .hud-top .hud-brand {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: #fff !important;
}
#screen-game .hud-top .res-chips {
  flex: 1 1 auto;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 !important;
  min-width: 0;
  overflow: hidden;
  color: #fff !important;
}
#screen-game .hud-top .hud-actions {
  flex: 0 0 auto;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 4px;
  color: #fff !important;
}
#screen-game .hud-top .hud-actions .icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
}
#screen-game .hud-top .res {
  color: #fff !important;
  flex: 0 0 auto;
}
#screen-game .hud-top .res small,
#screen-game .hud-top .res b {
  color: #fff !important;
  font-size: 12px !important;
}

/* Always hide secondary v6 chips under 1500 / short height — keeps single bar */
@media (max-width: 1499px), (max-height: 700px) {
  #screen-game .hud-top .res.food,
  #screen-game .hud-top .res.iron,
  #screen-game .hud-top .res.pop,
  #screen-game .hud-top .res.stab,
  #screen-game .hud-top .res.rep {
    display: none !important;
  }
}
@media (max-width: 1100px) {
  #screen-game .hud-top .hud-actions .icon-btn:not(#btn-leave-game):not(#btn-overview):not(#btn-focus-mine):not(#btn-notif):not(#btn-sound):not(#btn-fullscreen):not(#btn-game-settings) {
    display: none !important;
  }
  #screen-game .hud-top .res-chips { gap: 10px; }
  #screen-game .hud-top .res small { font-size: 11px !important; }
}

/* Short / small game viewports (Opera windowed ~450–600 tall, 900–1400 wide) */
@media (max-height: 620px) {
  :root { --dock-w: 320px; }
  #screen-game .hud-right,
  #screen-game #hud-right-dock {
    top: 48px !important;
    width: var(--dock-w) !important;
    max-width: min(340px, 38vw) !important;
    display: flex !important;
  }
  #screen-game #panel-players {
    max-height: 34%;
    margin: 6px 8px 0;
  }
  #screen-game #panel-players .hp-body { max-height: 140px; }
  #screen-game #panel-chat {
    min-height: 140px;
    margin: 6px 8px 8px;
  }
  #screen-game .minimap {
    width: 180px;
    left: var(--fetih-rail) !important;
    bottom: 10px !important;
  }
  #screen-game .minimap canvas,
  #screen-game #minimap {
    width: 180px !important;
    height: 100px !important;
  }
  #screen-game .zoom-ctl {
    left: calc(var(--fetih-rail) + 188px) !important;
    bottom: 10px !important;
  }
  #kbd-hint { display: none !important; }
  #screen-game .hud-top {
    height: 44px !important;
    max-height: 44px !important;
    min-height: 44px;
  }
}
@media (max-height: 520px) {
  :root { --dock-w: 280px; }
  #screen-game #panel-players .hp-body { max-height: 110px; }
  #screen-game #panel-chat { min-height: 110px; }
  #screen-game .minimap { width: 160px; }
  #screen-game .minimap canvas,
  #screen-game #minimap { width: 160px !important; height: 90px !important; }
  #screen-game .zoom-ctl { left: calc(var(--fetih-rail) + 168px) !important; }
}

/* Ensure dock never vanishes on mid widths */
@media (max-width: 900px) {
  #screen-game .hud-right,
  #screen-game #hud-right-dock {
    display: flex !important;
    width: min(300px, 40vw) !important;
  }
}

#borders .cborder { pointer-events: none; }
#march-fx { pointer-events: none; }

/* Empire labels always on (curved); hide legacy capital names */
#empire-labels { opacity: 1 !important; pointer-events: none; }
#empire-labels text { opacity: 1; }
#labels text.nm.emp-label { display: none !important; }
#labels text.nm { display: none !important; }


/* cursors moved to /cursors.css (loaded last) */

#wrap-west path.cell-wrap,
#wrap-east path.cell-wrap {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 0.4px;
  stroke-linejoin: round;
}

/* HUD: single readable bar on all sizes */
#screen-game .hud-top {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 60 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px 12px;
  min-height: 48px;
  height: 48px !important;
  max-height: 48px !important;
  padding: 0 12px !important;
  background: #000 !important;
  border-bottom: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  box-sizing: border-box;
}
#screen-game .hud-top .hud-brand {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: #fff !important;
}
#screen-game .hud-top .res-chips {
  flex: 1 1 auto;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 !important;
  min-width: 0;
  overflow: hidden;
  color: #fff !important;
}
#screen-game .hud-top .hud-actions {
  flex: 0 0 auto;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 4px;
  color: #fff !important;
}
#screen-game .hud-top .hud-actions .icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
}
#screen-game .hud-top .res {
  color: #fff !important;
  flex: 0 0 auto;
}
#screen-game .hud-top .res small,
#screen-game .hud-top .res b {
  color: #fff !important;
  font-size: 12px !important;
}

/* Always hide secondary v6 chips under 1500 / short height — keeps single bar */
@media (max-width: 1499px), (max-height: 700px) {
  #screen-game .hud-top .res.food,
  #screen-game .hud-top .res.iron,
  #screen-game .hud-top .res.pop,
  #screen-game .hud-top .res.stab,
  #screen-game .hud-top .res.rep {
    display: none !important;
  }
}
@media (max-width: 1100px) {
  #screen-game .hud-top .hud-actions .icon-btn:not(#btn-leave-game):not(#btn-overview):not(#btn-focus-mine):not(#btn-notif):not(#btn-sound):not(#btn-fullscreen):not(#btn-game-settings) {
    display: none !important;
  }
  #screen-game .hud-top .res-chips { gap: 10px; }
  #screen-game .hud-top .res small { font-size: 11px !important; }
}

/* Short / small game viewports (Opera windowed ~450–600 tall, 900–1400 wide) */
@media (max-height: 620px) {
  :root { --dock-w: 320px; }
  #screen-game .hud-right,
  #screen-game #hud-right-dock {
    top: 48px !important;
    width: var(--dock-w) !important;
    max-width: min(340px, 38vw) !important;
    display: flex !important;
  }
  #screen-game #panel-players {
    max-height: 34%;
    margin: 6px 8px 0;
  }
  #screen-game #panel-players .hp-body { max-height: 140px; }
  #screen-game #panel-chat {
    min-height: 140px;
    margin: 6px 8px 8px;
  }
  #screen-game .minimap {
    width: 180px;
    left: var(--fetih-rail) !important;
    bottom: 10px !important;
  }
  #screen-game .minimap canvas,
  #screen-game #minimap {
    width: 180px !important;
    height: 100px !important;
  }
  #screen-game .zoom-ctl {
    left: calc(var(--fetih-rail) + 188px) !important;
    bottom: 10px !important;
  }
  #kbd-hint { display: none !important; }
  #screen-game .hud-top {
    height: 44px !important;
    max-height: 44px !important;
    min-height: 44px;
  }
}
@media (max-height: 520px) {
  :root { --dock-w: 280px; }
  #screen-game #panel-players .hp-body { max-height: 110px; }
  #screen-game #panel-chat { min-height: 110px; }
  #screen-game .minimap { width: 160px; }
  #screen-game .minimap canvas,
  #screen-game #minimap { width: 160px !important; height: 90px !important; }
  #screen-game .zoom-ctl { left: calc(var(--fetih-rail) + 168px) !important; }
}

/* Ensure dock never vanishes on mid widths */
@media (max-width: 900px) {
  #screen-game .hud-right,
  #screen-game #hud-right-dock {
    display: flex !important;
    width: min(300px, 40vw) !important;
  }
}

#borders .cborder { pointer-events: none; }
#march-fx { pointer-events: none; }

/* Empire labels always on (curved); hide legacy capital names */
#empire-labels { opacity: 1 !important; pointer-events: none; }
#empire-labels text { opacity: 1; }
#labels text.nm.emp-label { display: none !important; }
#labels text.nm { display: none !important; }


/* ── Custom B&W cursors. Site-wide rules + 2x image-set live in cursors.css (loaded last). ── */
/* Never use cursor:none. PNG only — Opera ignores SVG cursors. */
html, body, #screen-game, #screen-main, #screen-auth, #screen-landing, #screen-play, #screen-lobby {
  cursor: url("/cursors/arrow.png") 16 16, auto !important;
  cursor: -webkit-image-set(url("/cursors/arrow.png") 1x, url("/cursors/arrow-2x.png") 2x) 16 16, auto !important;
  cursor: image-set(url("/cursors/arrow.png") 1x, url("/cursors/arrow-2x.png") 2x) 16 16, auto !important;
}
a, button, [role="button"], .btn, .icon-btn, .seg-b, .room-row, .pcard,
.ctx-item, .fcx-item, .clickable, label[for], select, summary,
.land-v4 a, .land-v4 button, .v4-burger,
#screen-game a, #screen-game button, #screen-game [role="button"] {
  cursor: url("/cursors/pointer.png") 16 16, pointer !important;
  cursor: -webkit-image-set(url("/cursors/pointer.png") 1x, url("/cursors/pointer-2x.png") 2x) 16 16, pointer !important;
  cursor: image-set(url("/cursors/pointer.png") 1x, url("/cursors/pointer-2x.png") 2x) 16 16, pointer !important;
}
button:disabled, .btn:disabled, .ctx-item.disabled, .fcx-item:disabled {
  cursor: url("/cursors/not-allowed.png") 16 16, not-allowed !important;
  cursor: -webkit-image-set(url("/cursors/not-allowed.png") 1x, url("/cursors/not-allowed-2x.png") 2x) 16 16, not-allowed !important;
  cursor: image-set(url("/cursors/not-allowed.png") 1x, url("/cursors/not-allowed-2x.png") 2x) 16 16, not-allowed !important;
}
#map-wrap, #map, #screen-game #map-wrap, #screen-game #map,
#screen-game.overview-on #map-wrap {
  cursor: url("/cursors/grab.png") 16 16, grab !important;
  cursor: -webkit-image-set(url("/cursors/grab.png") 1x, url("/cursors/grab-2x.png") 2x) 16 16, grab !important;
  cursor: image-set(url("/cursors/grab.png") 1x, url("/cursors/grab-2x.png") 2x) 16 16, grab !important;
}
#map-wrap.dragging, #map-wrap.dragging #map,
#screen-game #map-wrap.dragging, #screen-game.overview-on #map-wrap.dragging {
  cursor: url("/cursors/grabbing.png") 16 16, grabbing !important;
  cursor: -webkit-image-set(url("/cursors/grabbing.png") 1x, url("/cursors/grabbing-2x.png") 2x) 16 16, grabbing !important;
  cursor: image-set(url("/cursors/grabbing.png") 1x, url("/cursors/grabbing-2x.png") 2x) 16 16, grabbing !important;
}
#map-wrap.selecting, #screen-game #map-wrap.selecting {
  cursor: url("/cursors/target.png") 16 16, crosshair !important;
  cursor: -webkit-image-set(url("/cursors/target.png") 1x, url("/cursors/target-2x.png") 2x) 16 16, crosshair !important;
  cursor: image-set(url("/cursors/target.png") 1x, url("/cursors/target-2x.png") 2x) 16 16, crosshair !important;
}
#map[data-cursor="pointer"] {
  cursor: url("/cursors/pointer.png") 16 16, pointer !important;
  cursor: image-set(url("/cursors/pointer.png") 1x, url("/cursors/pointer-2x.png") 2x) 16 16, pointer !important;
}
#map[data-cursor="target"] {
  cursor: url("/cursors/target.png") 16 16, crosshair !important;
  cursor: image-set(url("/cursors/target.png") 1x, url("/cursors/target-2x.png") 2x) 16 16, crosshair !important;
}
#map[data-cursor="grab"] {
  cursor: url("/cursors/grab.png") 16 16, grab !important;
  cursor: image-set(url("/cursors/grab.png") 1x, url("/cursors/grab-2x.png") 2x) 16 16, grab !important;
}
#map[data-cursor="grabbing"] {
  cursor: url("/cursors/grabbing.png") 16 16, grabbing !important;
  cursor: image-set(url("/cursors/grabbing.png") 1x, url("/cursors/grabbing-2x.png") 2x) 16 16, grabbing !important;
}
#map[data-cursor="not-allowed"] {
  cursor: url("/cursors/not-allowed.png") 16 16, not-allowed !important;
  cursor: image-set(url("/cursors/not-allowed.png") 1x, url("/cursors/not-allowed-2x.png") 2x) 16 16, not-allowed !important;
}
#wrap-west path.cell-wrap,
#wrap-east path.cell-wrap {
  pointer-events: fill !important;
}
#labels text.ov-label {
  font-size: 8px !important;
  stroke-width: 2.2px !important;
  letter-spacing: 0.02em;
}
#screen-game.overview-on:not(.ov-labels-far) #labels text.ov-label {
  display: none !important;
}

/* ── AoH2 army badges — inside #viewport (pan/zoom sticky + counter-scale) ── */
#army-hud { display: none !important; } /* legacy HUD container removed */
#army-badges, #army-units,
#wrap-west .army-badges-wrap, #wrap-east .army-badges-wrap,
#wrap-west .army-units-wrap, #wrap-east .army-units-wrap {
  pointer-events: none;
}
#army-badges g.ab, #army-units g.au {
  pointer-events: auto;
}
#army-badges .ab-pill {
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.85));
}
#army-badges .ab-num,
#army-units .au-num {
  /* font-size/family/fill set as SVG presentation attrs in JS (Opera-safe) */
  pointer-events: none;
  letter-spacing: 0;
  user-select: none;
}
#army-badges .ab-fort,
#army-badges .ab-cap {
  pointer-events: none;
}
#army-badges .ab.ab-flash .ab-pill {
  animation: ab-pulse 0.45s ease-out;
}
#army-badges .ab-num.ab-pop {
  animation: ab-pop 0.4s ease-out;
}
@keyframes ab-pulse {
  0% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  40% { filter: drop-shadow(0 0 4px rgba(255,255,255,.85)); }
  100% { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.85)); }
}
@keyframes ab-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

#map.lod-icons #empire-labels { opacity: 0.45; }
#map.zoomed #empire-labels { opacity: 0.72; }

/* Ghost march preview (target select) */
#march-preview .preview-glow {
  stroke-width: 6;
  opacity: 0.2;
  stroke-linecap: round;
  filter: url(#march-glow);
}
#march-preview .preview-line {
  stroke-width: 1.5;
  opacity: 0.75;
  stroke-linecap: round;
  stroke-dasharray: none;
}
#march-preview .preview-dash {
  stroke-width: 2.2;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  opacity: 0.9;
}
#march-preview .preview-eta { pointer-events: none; }

#marches .trail-dot { pointer-events: none; }
#marches .march-eta { pointer-events: none; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Map shake on attack arrive */
#map-wrap.map-shake {
  animation: fetih-map-shake 0.38s ease-out;
}
@keyframes fetih-map-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -2px); }
  80% { transform: translate(1px, 1px); }
}

/* Top bar: label over value, primary vs economy split, quieter tools */
#screen-game { --hud-h: 56px; }
#screen-game .hud-top {
  height: var(--hud-h) !important;
  min-height: var(--hud-h) !important;
  max-height: var(--hud-h) !important;
  padding: 0 8px 0 12px !important;
  gap: 10px !important;
  background: #070707 !important;
  border-bottom: 1px solid rgba(255,255,255,.16) !important;
}
#screen-game .hud-right,
#screen-game #hud-right-dock {
  top: var(--hud-h) !important;
}
#screen-game .hud-top .hud-brand {
  gap: 8px !important;
  font-size: 13px;
  letter-spacing: .14em;
}
#screen-game .hud-top .phase-badge {
  margin-left: 2px;
  padding: 2px 7px;
  font-size: 9px;
  letter-spacing: .14em;
  border-color: rgba(255,255,255,.28);
  border-radius: 999px;
}
#screen-game .hud-top .res-chips {
  gap: 4px !important;
  justify-content: flex-start !important;
  overflow: hidden;
}
#screen-game .hud-top .res {
  gap: 6px !important;
  padding: 4px 8px 3px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
#screen-game .hud-top .res svg {
  width: 15px !important;
  height: 15px !important;
  opacity: .7;
  flex: 0 0 auto;
}
#screen-game .hud-top .res > div {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 5px !important;
  row-gap: 0 !important;
  line-height: 1.05;
}
#screen-game .hud-top .res small {
  flex: 1 0 100%;
  margin: 0 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.48) !important;
}
#screen-game .hud-top .res b {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  color: #fff !important;
}
#screen-game .hud-top .income-badge {
  margin: 0 !important;
  padding: 0 4px;
  font-size: 10px;
  border-radius: 4px;
  border-color: rgba(255,255,255,.22);
}
#screen-game .hud-top .res.tick {
  min-width: 0;
}
#screen-game .hud-top .res.tick small {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
}
#screen-game .hud-top .tick-bar {
  flex: 1 0 100%;
  width: 100%;
  margin-top: 4px;
  height: 2px;
  border-radius: 2px;
}
#screen-game .hud-top .res.food,
#screen-game .hud-top .res.iron,
#screen-game .hud-top .res.pop,
#screen-game .hud-top .res.stab,
#screen-game .hud-top .res.rep {
  background: transparent !important;
  border-color: transparent !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
#screen-game .hud-top .res.food {
  margin-left: 6px;
  padding-left: 12px !important;
  border-left: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 0 !important;
}
#screen-game .hud-top .hud-actions {
  gap: 2px !important;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
#screen-game .hud-top .hud-actions .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border-color: transparent;
  background: transparent;
}
#screen-game .hud-top .hud-actions .icon-btn svg {
  width: 16px;
  height: 16px;
}
#screen-game .hud-top .hud-actions .icon-btn:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}
#screen-game .hud-top .hud-actions #btn-leave-game,
#screen-game .hud-top .hud-actions #btn-delete-room-game,
#screen-game .hud-top .hud-actions #btn-reset {
  margin-left: 2px;
}
@media (max-height: 620px) {
  #screen-game { --hud-h: 48px; }
  #screen-game .hud-top .res { padding-top: 2px !important; padding-bottom: 2px !important; }
  #screen-game .hud-top .res b { font-size: 13px !important; }
}