/* ============================================================================
   PIXEL SKIN — pixel-art "painted UI" (plan: 2026-10-12 reskin)

   Loaded last (after mobile.css). Everything below the baseline block is scoped
   under html.ui-pixel, which js/pixel-ui-boot.js sets before first paint
   (localStorage "kf-pixel-ui" = "1", or ?ui=pixel). Without the class the game
   looks exactly as before.

   Art: texturen/ui/pixel/*.png, built by scripts/build-pixel-ui-kit.py from the
   PixelLab sheets in texturen/ui/pixel/raw/. One art pixel = one CSS pixel, so
   border-image slices below match the PNG sizes exactly; re-run the script
   rather than resizing a piece by hand.
   ========================================================================= */

/* --- Baseline: cost tag markup for both looks (renderShopCostTag) --------- */
/* The tag sits in the card meta grid's 1fr price row; align-self keeps the pill from stretching. */
.shop-cost-tag {
  align-items: center;
  align-self: start;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  gap: 0.5rem;
  justify-self: start;
}

.shop-cost-tag-item {
  align-items: center;
  display: inline-flex;
  gap: 0.2rem;
  white-space: nowrap;
}

.shop-cost-tag-icon {
  height: 1rem;
  width: 1rem;
}

.shop-cost-tag-item.is-short b {
  color: var(--danger);
}

/* --- Build tray: frame + crown ribbon ------------------------------------- */
/* Every tab (shop, building detail, Move, Roads, Decoration) wears it; the shop
   gallery paints its hall over the board.
   The crown pokes 31px above the tray, so the tray starts 52px lower to clear
   the top-centre map stack (it ends at ~109px). */
html.ui-pixel .castle-docked-tray {
  backdrop-filter: none;
  background: #1c1210 url("../texturen/ui/pixel/board.png") repeat;
  background-clip: padding-box;
  border: 0;
  border-radius: 14px;
  height: min(calc(40rem - 52px), calc(100% - 14.1rem - 52px));
  max-height: calc(100% - 14.1rem - 52px);
  overflow: visible;
  padding: 50px 30px 28px;
}

html.ui-pixel .castle-docked-tray::after {
  border: 74px solid transparent;
  border-image: url("../texturen/ui/pixel/frame.png") 74 stretch;
  content: "";
  image-rendering: pixelated;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 30;
}

html.ui-pixel .castle-docked-tray::before {
  background: url("../texturen/ui/pixel/crown.png") no-repeat;
  content: "";
  height: 74px;
  image-rendering: pixelated;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: -31px;
  transform: translateX(-50%);
  width: 200px;
  z-index: 31;
}

/* --- Tray tabs and bar buttons: wood planks with iron end caps ------------ */
html.ui-pixel .castle-docked-tray-tabs {
  background: none;
  border: 0;
  box-shadow: none;
  gap: 3px;
  padding: 0;
}

html.ui-pixel .castle-docked-tray-tab,
html.ui-pixel .castle-docked-tray-tool,
html.ui-pixel .castle-docked-tray-close,
html.ui-pixel .shop-showroom-tabs .leaderboard-tab {
  background: none;
  border-image: url("../texturen/ui/pixel/tab-idle-33.png") 0 18 fill / 0 18px stretch;
  border-radius: 0;
  border-style: solid;
  border-width: 0 18px;
  box-shadow: none;
  color: #f1e2c2;
  height: 33px;
  image-rendering: pixelated;
  padding: 0 6px;
  text-shadow: 0 1px 0 #1a0b06;
}

html.ui-pixel .castle-docked-tray-close {
  border-image-source: url("../texturen/ui/pixel/tab-close-33.png");
  color: #ffe9c9;
  text-shadow: 0 1px 0 #1a0406;
}

html.ui-pixel .castle-docked-tray-tab.is-active {
  border-image-source: url("../texturen/ui/pixel/tab-active-33.png");
  color: #2a1407;
  text-shadow: 0 1px 0 rgba(255, 236, 170, 0.45);
}

html.ui-pixel .shop-showroom-tabs {
  gap: 3px;
}

html.ui-pixel .shop-showroom-tabs .leaderboard-tab {
  border-image-source: url("../texturen/ui/pixel/tab-idle-29.png");
  height: 29px;
  padding: 0 4px;
}

html.ui-pixel .shop-showroom-tabs .leaderboard-tab.is-active {
  border-image-source: url("../texturen/ui/pixel/tab-active-29.png");
  color: #2a1407;
  text-shadow: 0 1px 0 rgba(255, 236, 170, 0.45);
}

html.ui-pixel .castle-docked-tray-tab:hover,
html.ui-pixel .castle-docked-tray-tool:hover,
html.ui-pixel .castle-docked-tray-close:hover,
html.ui-pixel .shop-showroom-tabs .leaderboard-tab:hover {
  filter: brightness(1.15);
}

/* --- Tray shop cards (248x280, set by buildShopShowroomLayout) ------------ */
html.ui-pixel .castle-docked-tray .shop-showroom-stage.shop-showroom-stage--tray {
  --showroom-art-h: 112px;
  --showroom-art-size: 90px;
}

html.ui-pixel .castle-docked-tray .shop-showroom-track-card {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/card.png") 86 fill / 86px stretch;
  border-radius: 0;
  border-style: solid;
  border-width: 27px 26px 22px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
  padding: 2px 2px 0;
}

html.ui-pixel .castle-docked-tray .shop-showroom-track-card:hover {
  filter: brightness(1.1);
}

html.ui-pixel .castle-docked-tray .shop-showroom-track-art {
  background: none;
  border: 9px solid transparent;
  border-image: url("../texturen/ui/pixel/niche.png") 14 fill / 14px stretch;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  max-height: 112px;
  min-height: 112px;
  overflow: visible;
  place-items: center;
}

html.ui-pixel .castle-docked-tray :is(.shop-showroom-track-art, .shop-showroom-detail-art) .building-ui-icon-wrap {
  height: auto;
  width: auto;
}

/* Pixel icons are 1:1 art (max 90px), so they render at their natural size. The 90px cap
   only bites when a missing twin falls back to the iso sprite, which is ~768px wide. */
html.ui-pixel .castle-docked-tray :is(.shop-showroom-track-art, .shop-showroom-detail-art) .build-chip-icon {
  background: none;
  border: 0;
  border-radius: 0;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
  height: auto;
  image-rendering: pixelated;
  max-height: 90px;
  max-width: 90px;
  transform: none;
  width: auto;
}

html.ui-pixel .castle-docked-tray .shop-showroom-track-info {
  background: url("../texturen/ui/pixel/info.png") center / 100% no-repeat;
  border: 0;
  box-shadow: none;
  color: #f6e8c6;
  font-weight: 700;
  text-shadow: 0 1px 0 #000;
}

html.ui-pixel .castle-docked-tray .shop-showroom-track-meta > strong {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  min-height: 0;
}

html.ui-pixel .castle-docked-tray .shop-showroom-track-meta .muted {
  color: #d8c2ad;
}

html.ui-pixel .castle-docked-tray .shop-showroom-track-meta > .muted:not(.shop-showroom-track-cta) {
  min-height: 0;
}

html.ui-pixel .castle-docked-tray .shop-showroom-track-cta {
  font-size: 11px;
  line-height: 14px;
}

/* --- Tray tabs: building detail, Move, Roads, Decoration -------------------
   The modal kit, sign-in state language: wood tile per card, locked tile when
   it cannot act, the inset for the road info panel and the detail art (the
   niche's centre smudge shows when it is stretched that wide).
   The detail page drops its own panel box (no box in a box). */
html.ui-pixel:not(#_) .castle-docked-tray .shop-showroom-detail-interface {
  background: none;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

html.ui-pixel:not(#_) .castle-docked-tray .shop-showroom-detail-art {
  background: none;
  border: 12px solid transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  image-rendering: pixelated;
  place-items: center;
}

html.ui-pixel:not(#_) :is(.castle-docked-tray :is(.build-chip, .meadow-ornament-card), .meadow-editor-panel:not(.island-build-panel, .island-editor-panel) .meadow-editor-item) {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tile-wood.png") 30 fill / 30px round;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
  padding: 16px 20px;
}

html.ui-pixel:not(#_) :is(.castle-docked-tray :is(.build-chip, .meadow-ornament-card), .meadow-editor-panel:not(.island-build-panel, .island-editor-panel) .meadow-editor-item) > * {
  image-rendering: auto;
}

html.ui-pixel:not(#_) .castle-docked-tray .build-chip .build-chip-icon {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) .castle-docked-tray .build-chip.is-disabled {
  border-image-source: url("../texturen/ui/pixel/tile-locked.png");
}

/* Decoration tiles are ~7rem wide: narrow-tile padding keeps room for the art. */
html.ui-pixel:not(#_) :is(.castle-docked-tray .meadow-ornament-card, .meadow-editor-panel:not(.island-build-panel, .island-editor-panel) .meadow-editor-item) {
  padding: 16px 14px;
}

/* The placing panel after "Place" floats on the map like the mode banners: the
   plaque, with the gold tile on the picked ornament. The island's build and
   editor panels share this markup but sit in their own HUD; left as they were. */
html.ui-pixel:not(#_) .meadow-editor-panel:not(.island-build-panel, .island-editor-panel) {
  backdrop-filter: none;
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/plaque.png") 20 fill / 20px repeat;
  border-radius: 0;
  border-style: solid;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
  padding: 16px 18px;
}

html.ui-pixel:not(#_) .meadow-editor-panel:not(.island-build-panel, .island-editor-panel) .meadow-editor-item.is-active {
  border-image-source: url("../texturen/ui/pixel/tile-gold.png");
}

html.ui-pixel:not(#_) .meadow-editor-panel:not(.island-build-panel, .island-editor-panel) .meadow-editor-item-meta {
  color: #d8c2ad;
}

html.ui-pixel:not(#_) .meadow-editor-panel:not(.island-build-panel, .island-editor-panel) .meadow-editor-item:hover {
  background: none;
  filter: brightness(1.08);
}

html.ui-pixel:not(#_) .castle-docked-tray .road-status-card {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
}

/* The planks tile cleanly from 32px tall and their iron caps are 24px wide;
   the tray's small buttons were 22-30px with the label under the caps. */
html.ui-pixel:not(#_) .castle-docked-tray-body :is(.primary-button, .secondary-button, .close-button, .danger-button) {
  min-height: 32px;
  padding-inline: 26px;
}

html.ui-pixel:not(#_) .castle-docked-tray .meadow-ornament-card-actions button {
  padding-inline: 18px;
}

/* --- Parchment price tag (emerald trim for emerald purchases) ------------- */
html.ui-pixel .shop-cost-tag {
  background: none;
  border-image: url("../texturen/ui/pixel/tag-parchment.png") 0 20 fill / 0 20px stretch;
  border-radius: 0;
  border-style: solid;
  border-width: 0 20px;
  box-shadow: none;
  box-sizing: border-box;
  color: #2b1608;
  display: flex;
  font: 800 13px/1 var(--font-ui);
  gap: 10px;
  height: 38px;
  image-rendering: pixelated;
  justify-content: center;
  justify-self: stretch;
  padding: 0 2px;
  text-shadow: 0 1px 0 rgba(255, 245, 220, 0.6);
  width: 100%;
}

html.ui-pixel .shop-cost-tag.is-emerald {
  border-image-source: url("../texturen/ui/pixel/tag-emerald.png");
  height: 37px;
}

html.ui-pixel .shop-cost-tag-item {
  gap: 3px;
}

html.ui-pixel .shop-cost-tag-icon {
  filter: drop-shadow(0 1px 0 rgba(43, 22, 8, 0.45));
  height: 20px;
  width: 20px;
}

html.ui-pixel .shop-cost-tag-item.is-short b {
  color: #a3241b;
}

html.ui-pixel .shop-cost-tag-free {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ============================================================================
   P1 — SHELLS
   ========================================================================= */

/* --- Generic modal frame -----------------------------------------------------
   Every modal panel except the building-work shell (below) and the full-screen
   hubs, which get their own family frames. The frame is the panel's own
   border-image: borders do not scroll, and these panels are their own scroll
   container (renderObjectModal restores panel.scrollTop), so a pseudo-element
   frame would scroll away. The 74px corners reach 51px past the 23px wood and
   paint under the content. */
html.ui-pixel .modal-panel:not(:has(.building-work-interface, .shop-showroom-interface, .emerald-well-card)) {
  background-clip: padding-box;
  border: 23px solid transparent;
  border-image: url("../texturen/ui/pixel/frame.png") 74 / 74px stretch;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  image-rendering: pixelated;
}

/* --- Building-work shell (~60 building screens) ------------------------------
   This panel does not scroll (.building-work-scroll does), so the frame is an
   overlay above the content, like the build tray, and the crown can sit on it. */
html.ui-pixel .modal-panel:has(.building-work-interface) {
  background: none;
  border: 23px solid transparent;
  border-radius: 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  overflow: visible;
  position: relative;
}

html.ui-pixel .modal-panel:has(.building-work-interface)::after {
  border: 74px solid transparent;
  border-image: url("../texturen/ui/pixel/frame.png") 74 stretch;
  content: "";
  image-rendering: pixelated;
  inset: -23px;
  pointer-events: none;
  position: absolute;
  z-index: 40;
}

html.ui-pixel .modal-panel:has(.building-work-interface)::before {
  background: url("../texturen/ui/pixel/crown-top.png") no-repeat;
  content: "";
  height: 36px;
  image-rendering: pixelated;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: -40px;
  transform: translateX(-50%);
  width: 54px;
  z-index: 41;
}

html.ui-pixel .building-work-stage {
  border-radius: 0;
}

/* Title on the burgundy banner, centred under the crown; level badge and Close
   move to the corner so a long name keeps the middle. */
html.ui-pixel .building-work-scroll-header {
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 4px 0.65rem 2px;
  position: relative;
}

html.ui-pixel .building-work-scroll-header h3 {
  border-image: url("../texturen/ui/pixel/banner-v2.png") 0 80 fill / 0 80px stretch;
  border-style: solid;
  border-width: 0 80px;
  box-sizing: border-box;
  color: #f6e3b4;
  height: 56px;
  image-rendering: pixelated;
  line-height: 44px;
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  padding: 0 4px;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 #2a0b14, 0 0 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

html.ui-pixel .building-work-scroll-header .castle-actions {
  position: absolute;
  right: 0.5rem;
  top: 0.4rem;
}

/* --- Inner cards: sunken inset, not a second frame (no box in a box) ------- */
/* Every inset slices 21 24: its corner shading reaches 21px down and 24px in, and
   a smaller slice stretches that shading into a band across tall boards. */
html.ui-pixel .modal-panel .modal-section-card:not(.spy-ops-card, .marked-target-card, .onboarding-chapter-banner),
html.ui-pixel .modal-panel .building-upgrade-section {
  background: none;
  border: 12px solid transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

/* --- Family frames ------------------------------------------------------------
   Recolours of the oak frame (FRAME_FAMILIES in build-pixel-ui-kit.py). Hubs and
   generic modals swap the panel's border-image; building-work families swap the
   overlay. Family ornaments replacing the crown come with kit sheet D. */
html.ui-pixel .modal-panel:has(.season-interface--heaven):not(:has(.building-work-interface)),
html.ui-pixel .modal-panel:has(.capital-building-interface):not(:has(.building-work-interface)) {
  border-image-source: url("../texturen/ui/pixel/frame-heaven.png");
}

html.ui-pixel .modal-panel:has(.season-interface--hell):not(:has(.building-work-interface)),
html.ui-pixel .modal-panel:has(.demon-castle-shell, .demon-building-interface):not(:has(.building-work-interface)) {
  border-image-source: url("../texturen/ui/pixel/frame-demon.png");
}

html.ui-pixel .modal-panel:has(.hallowtide-stage) {
  border-image-source: url("../texturen/ui/pixel/frame-hallowtide.png");
}

html.ui-pixel .modal-panel:has(.iap-hub-stage) {
  border-image-source: url("../texturen/ui/pixel/frame-premium.png");
}

html.ui-pixel .modal-panel:has(.capital-building-interface.building-work-interface)::after {
  border-image-source: url("../texturen/ui/pixel/frame-heaven.png");
}

html.ui-pixel .modal-panel:has(:is(.demon-building-interface, .demon-shop-interface, .demon-research-interface).building-work-interface)::after {
  border-image-source: url("../texturen/ui/pixel/frame-demon.png");
}

html.ui-pixel .modal-panel:has(.harbor-building-interface.building-work-interface)::after {
  border-image-source: url("../texturen/ui/pixel/frame-harbor.png");
}

html.ui-pixel .modal-panel:has(.island-building-interface.building-work-interface)::after {
  border-image-source: url("../texturen/ui/pixel/frame-island.png");
}

/* --- Pre-game panel (login, profile select, realm picker, create wizard) -----
   It scrolls itself, so like the generic modal it wears the frame as its border. */
html.ui-pixel .profile-shell-panel {
  background-clip: padding-box;
  border: 23px solid transparent;
  border-image: url("../texturen/ui/pixel/frame.png") 74 / 74px stretch;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  image-rendering: pixelated;
}

/* --- Mobile -------------------------------------------------------------------
   mobile-landscape.css makes every modal panel scroll (html.is-mobile-client
   body.is-mobile-landscape .modal-panel, 0-3-2). The building-work panel must
   not: its inner .building-work-scroll scrolls, and a scrolling panel clips the
   overlay frame. The crown would sit above the top of a 390-430px screen. */
html.ui-pixel.is-mobile-client body .modal-panel:has(.building-work-interface) {
  overflow: visible;
}

html.ui-pixel.is-mobile-client .modal-panel:has(.building-work-interface)::before {
  display: none;
}

/* The build tray: mobile.css (0-3-2, loaded earlier) shrinks its padding under
   the frame's 23px wood, so tabs and cards went under the frame and the crown. */
html.ui-pixel.is-mobile-client body .castle-docked-tray {
  padding: 26px 28px 24px;
}

html.ui-pixel.is-mobile-client .castle-docked-tray::before {
  display: none;
}

/* ============================================================================
   P2 — COMPONENTS
   ========================================================================= */

/* --- Buttons: wood plank, gold plate, red plank, worn plank ------------------
   btn-*.png are 9-slices (16px bracket rows, 24px iron caps) whose middle rows
   and columns tile 1:1, so any button 32px+ tall keeps whole art pixels. The
   art paints inward over the padding (border-image-width > border-width), so
   button sizes do not change.
   :not(#_) — styles.css has ~60 context rules on these classes, many using the
   `border` shorthand, which resets border-image; the id weight keeps the plank.
   HUD launchers (--icon, frames baked into their art) and three small HUD
   buttons get their own P3 treatment below. */
html.ui-pixel:not(#_) :is(.primary-button, .secondary-button, .close-button, .danger-button):not([class*="--icon"], .castle-chat-send, .castle-next-up-chip, .mobile-fullscreen-toggle) {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/btn-wood.png") 16 24 fill / 16px 24px repeat;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  color: #f1e2c2;
  image-rendering: pixelated;
  opacity: 1;
  text-shadow: 0 1px 0 #1a0b06;
  transition: filter 120ms ease;
}

html.ui-pixel:not(#_) .primary-button:not([class*="--icon"], .castle-chat-send, .castle-next-up-chip, .mobile-fullscreen-toggle) {
  border-image-source: url("../texturen/ui/pixel/btn-gold.png");
  color: #2a1407;
  text-shadow: 0 1px 0 rgba(255, 236, 170, 0.45);
}

html.ui-pixel:not(#_) :is(.close-button, .danger-button):not([class*="--icon"], .castle-chat-send, .castle-next-up-chip, .mobile-fullscreen-toggle) {
  border-image-source: url("../texturen/ui/pixel/btn-red.png");
  color: #ffe9c9;
  text-shadow: 0 1px 0 #1a0406;
}

/* Hover brightens the art; the background stays off (the global button:hover paints one). */
html.ui-pixel:not(#_) :is(.primary-button, .secondary-button, .close-button, .danger-button):not([class*="--icon"], .castle-chat-send, .castle-next-up-chip, .mobile-fullscreen-toggle):hover:not(:disabled) {
  background: none;
  filter: brightness(1.14);
}

html.ui-pixel:not(#_) :is(.primary-button, .secondary-button, .close-button, .danger-button):not([class*="--icon"], .castle-chat-send, .castle-next-up-chip, .mobile-fullscreen-toggle):active:not(:disabled) {
  filter: brightness(0.92);
  transform: translateY(1px);
}

/* Disabled: worn grey plank for every kind, never opacity. */
html.ui-pixel:not(#_) :is(.primary-button, .secondary-button, .close-button, .danger-button):not([class*="--icon"], .castle-chat-send, .castle-next-up-chip, .mobile-fullscreen-toggle):disabled {
  border-image-source: url("../texturen/ui/pixel/btn-worn.png");
  color: #b9b0a4;
  filter: none;
  opacity: 1;
  text-shadow: 0 1px 0 #141210;
}

/* Short Close buttons put both rivets beside the text, so the label needs to
   clear the 24px caps. Base weight: context paddings (harbor) still win. */
:where(html.ui-pixel) .close-button {
  padding-inline: 22px;
}

/* Too small for the plank (26x32): a chip socket, as planned for zoom buttons. */
html.ui-pixel:not(#_) .secondary-button.research-tree-zoom-button,
html.ui-pixel:not(#_) .secondary-button.research-tree-zoom-button:disabled {
  border-image: url("../texturen/ui/pixel/chip.png") 6 fill / 6px stretch;
}

html.ui-pixel :is(.primary-button, .secondary-button, .close-button, .danger-button):focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

/* --- Pills and badges: chip ring, no fill ------------------------------------
   :where() keeps this at the base rule's weight, so every colour variant
   (.pill-class--*, hero ranks, .pill-emerald, .badge-danger …) still wins with
   its own background and ink inside the ring. */
:where(html.ui-pixel) .pill,
:where(html.ui-pixel) .badge {
  background-color: #382320;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/chip.png") 6 / 6px stretch;
  border-radius: 3px;
  border-style: solid;
  image-rendering: pixelated;
}

:where(html.ui-pixel) .pill {
  color: #e8d6bd;
}

:where(html.ui-pixel) .badge {
  background-color: rgba(119, 183, 109, 0.16);
}

/* --- Text fields and selects: the same chip ring, gold when focused ----------
   Unlayered, so it beats the @layer base controls; at (0,1,1) it still loses to
   any context rule, and the ones that reset `border` (amount steppers, auth
   autofill) keep their own look. */
html.ui-pixel :where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="date"], textarea, select) {
  background-color: #2a1a17;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/chip.png") 6 / 6px stretch;
  border-radius: 3px;
  border-style: solid;
  color: #f1e2c2;
  image-rendering: pixelated;
}

html.ui-pixel :where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="tel"], input[type="date"], textarea, select):focus {
  border-image-source: url("../texturen/ui/pixel/chip-gold.png");
  outline: none;
}

html.ui-pixel :where(input, textarea, select):disabled {
  background-color: #221917;
  color: var(--text-muted);
}

html.ui-pixel :where(select) {
  appearance: none;
  background-image: url("../texturen/ui/pixel/caret.png");
  background-position: right 9px center;
  background-repeat: no-repeat;
  padding-right: 1.6rem;
}

/* --- Checkboxes and radios: 16px pixel art ------------------------------------
   The champion toggle stays native: its red accent is a semantic warning. */
html.ui-pixel :where(input[type="checkbox"], input[type="radio"]):not(.attack-champion-toggle input) {
  appearance: none;
  background: url("../texturen/ui/pixel/checkbox.png") center / 16px 16px no-repeat;
  border: 0;
  flex: none;
  height: 16px;
  image-rendering: pixelated;
  width: 16px;
}

html.ui-pixel :where(input[type="checkbox"]):not(.attack-champion-toggle input):checked {
  background-image: url("../texturen/ui/pixel/checkbox-on.png");
}

html.ui-pixel :where(input[type="radio"]):not(.attack-champion-toggle input) {
  background-image: url("../texturen/ui/pixel/radio.png");
}

html.ui-pixel :where(input[type="radio"]):not(.attack-champion-toggle input):checked {
  background-image: url("../texturen/ui/pixel/radio-on.png");
}

html.ui-pixel :where(input[type="checkbox"], input[type="radio"]):disabled {
  cursor: not-allowed;
  filter: saturate(0) brightness(0.7);
}

html.ui-pixel :where(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

/* --- Progress bar: dark trough, banded gold fill -----------------------------
   Hard colour stops instead of art, so the bar stays crisp at every height.
   The four bands are the four golds. Width stays inline (live ticks set it). */
html.ui-pixel .progress-track {
  background: #1b110e;
  border: 1px solid #0d0705;
  border-radius: 0;
  box-shadow: inset 0 2px 0 #0f0806, 0 1px 0 rgba(241, 226, 194, 0.12);
}

html.ui-pixel .progress-fill {
  background: linear-gradient(180deg, var(--gold-100) 0 1px, var(--gold-300) 1px 3px, var(--gold-500) 3px calc(100% - 2px), var(--gold-700) calc(100% - 2px));
  border-radius: 0;
  box-shadow: 1px 0 0 #0d0705;
}

/* --- Tooltips -----------------------------------------------------------------
   [data-tip] cards are plain text: parchment with ink. JS positions the card
   from its measured box, so padding may change but transform/margin must not.
   The resource tooltip carries green/red income lines and a bar, so it keeps
   its dark inks on a wood plaque. */
html.ui-pixel .land-tip-card {
  backdrop-filter: none;
  background: none;
  border: 6px solid transparent;
  border-image: url("../texturen/ui/pixel/parchment.png") 16 fill / 16px repeat;
  border-radius: 0;
  box-shadow: none;
  color: #2b1608;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
  font-weight: 500;
  image-rendering: pixelated;
  padding: 8px 12px;
}

html.ui-pixel .resource-tooltip {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/plaque.png") 20 fill / 20px repeat;
  border-radius: 0;
  image-rendering: pixelated;
  padding: 16px 18px;
}

/* --- Toast: plaque banner, red for errors (the default), wood for info ------- */
html.ui-pixel .game-toast {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/plaque-red.png") 20 fill / 20px repeat;
  border-radius: 0;
  color: #ffe9c9;
  font-weight: 600;
  image-rendering: pixelated;
  min-height: 42px;
  padding: 12px 22px;
  text-shadow: 0 1px 0 #1a0406;
}

html.ui-pixel .game-toast--info {
  border-image-source: url("../texturen/ui/pixel/plaque.png");
  color: #f6e3b4;
  text-shadow: 0 1px 0 #1a0b06;
}

html.ui-pixel .game-toast-action {
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/btn-gold.png") 16 24 fill / 16px 24px repeat;
  border-radius: 0;
  color: #2a1407;
  image-rendering: pixelated;
  min-height: 34px;
  padding: 0.4rem 1.4rem;
  text-shadow: 0 1px 0 rgba(255, 236, 170, 0.45);
}

html.ui-pixel .game-toast-action:hover,
html.ui-pixel .game-toast-action:focus-visible {
  background: none;
  filter: brightness(1.14);
}

/* ============================================================================
   P3 — HUD
   Castle, capital, demon and island all render .castle-overlay-hud; the world
   map has .map-hud, its zoom rail and the troop card.
   ========================================================================= */

/* --- Icon launchers -----------------------------------------------------------
   The launcher PNGs carry their own wood/iron frame, so the CSS box goes.
   :not(#_) — the container rules (bottom nav, top centre, season launcher,
   open/alert states) paint this box at up to (0,4,0). Icons snap to 64px
   (192px art / 3) so the pixelated downscale stays even; the zero border keeps
   the image at exactly that size. */
html.ui-pixel .castle-overlay-hud :is(.castle-bottom-nav, .castle-top-center),
html.ui-pixel .castle-overlay-hud {
  --castle-nav-icon: 64px;
}

/* Six launchers pin their image at 3.9rem one by one; on desktop all of them
   take the 64px snap and the button wraps it. Phones size by --kf-hud-icon. */
html.ui-pixel:not(.is-mobile-client) .castle-overlay-hud button[class*="--icon"] img {
  height: 64px;
  width: 64px;
}

html.ui-pixel:not(.is-mobile-client):not(#_) .castle-overlay-hud button[class*="--icon"] {
  height: auto;
  width: auto;
}

html.ui-pixel:not(#_) :is(.castle-overlay-hud, .map-hud) button[class*="--icon"] {
  backdrop-filter: none;
  background: none;
  border-radius: 0;
  border-width: 0;
  box-shadow: none;
  transition: filter 120ms ease;
}

html.ui-pixel:not(#_) :is(.castle-overlay-hud, .map-hud) button[class*="--icon"]:hover:not(:disabled) {
  background: none;
  filter: brightness(1.14);
}

/* Open: a square gold line around the framed icon, not a glow. */
html.ui-pixel:not(#_) :is(.castle-overlay-hud, .map-hud) button[class*="--icon"]:is(.is-open, [aria-expanded="true"]) {
  background: none;
  outline: 2px solid var(--gold-300);
  outline-offset: 1px;
}

/* Alerts keep their meaning: gold for something to claim, red for trouble. */
html.ui-pixel:not(#_) .castle-quest-launcher.has-claimable .castle-quest-toggle--icon {
  outline: 2px dashed var(--gold-300);
  outline-offset: 1px;
}

html.ui-pixel:not(#_) :is(.castle-minigame-launcher.has-memory-alert .castle-minigame-toggle--icon, .castle-log-launcher.has-alert .castle-log-toggle--icon, .castle-log-toggle.has-alert, .castle-world-map-button.has-loot-goblin-alert) {
  outline: 2px solid #dc5a46;
  outline-offset: 1px;
}

/* Mail's icon (gift.webp) is the one launcher without a baked frame. */
html.ui-pixel:not(#_) .castle-overlay-hud .castle-mail-toggle {
  border-image: url("../texturen/ui/pixel/inset.png") 14 fill / 14px repeat;
  image-rendering: pixelated;
}

/* --- Small wood plates: name card, next-up chip, map chips, chat pill ---------
   tag-wood.png is a 9-slice (10px corners, gold inline) painted inward. */
html.ui-pixel:not(#_) :is(.castle-crest-profile-banner, .house-identity-crest-line, .castle-next-up-chip, .castle-chat-panel.is-collapsed .castle-chat-toggle, .map-hud > :is(.map-date, .map-army, .map-capital-hud, .map-world-boss-timer)) {
  backdrop-filter: none;
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tag-wood.png") 10 fill / 10px repeat;
  border-radius: 0;
  border-style: solid;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) :is(.castle-next-up-chip, .castle-chat-panel.is-collapsed .castle-chat-toggle, .map-capital-hud):hover:not(:disabled) {
  background: none;
  filter: brightness(1.14);
}

html.ui-pixel .castle-next-up-chip {
  color: #f1e2c2;
  padding-inline: 14px;
}

/* Ready keeps its green, as ink instead of a glow. */
html.ui-pixel:not(#_) :is(.castle-next-up-chip.is-ready, .castle-next-up-launcher.is-ready .castle-next-up-chip) {
  color: #9fe3b4;
}

html.ui-pixel:not(#_) .castle-chat-toggle[aria-pressed="true"] {
  background: none;
  outline: 2px solid var(--gold-300);
  outline-offset: 1px;
}

/* --- Resource tiles: the chip socket from the form fields --------------------- */
html.ui-pixel:not(#_) .castle-crest-resource-chip {
  background: #2a1a17;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/chip.png") 6 / 6px stretch;
  border-radius: 3px;
  border-style: solid;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) button.castle-crest-resource-chip:hover {
  background: #2a1a17;
  filter: brightness(1.14);
}

/* --- Panels: chat, crest card without art, menu dropdown, mode banners, island
   stock bar. plaque.png (20px corners) paints inward, so padding clears the
   rivets. */
html.ui-pixel:not(#_) :is(.castle-chat-panel:not(.is-collapsed), .castle-account-panel:not(.has-crest-texture), .castle-menu-dropdown, .castle-move-mode-banner, .island-stock-bar) {
  backdrop-filter: none;
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/plaque.png") 20 fill / 20px repeat;
  border-radius: 0;
  border-style: solid;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
}

html.ui-pixel :is(.castle-chat-panel:not(.is-collapsed), .castle-menu-dropdown, .castle-move-mode-banner) {
  padding: 14px 16px;
}

/* The collapsed chat is just its toggle pill: no panel behind it. */
html.ui-pixel:not(#_) .castle-chat-panel.is-collapsed {
  background: none;
  border-color: transparent;
  box-shadow: none;
}

/* --- Round HUD buttons: the iron socket ---------------------------------------
   The socket is drawn 1:1 (35x36) in the middle of whatever tap size the
   button has, so mobile keeps its 44px targets. */
html.ui-pixel:not(#_) :is(.castle-menu-toggle, .castle-rotate-view-button, .mobile-fullscreen-toggle, .world-map-zoom-button, .castle-chat-send, .castle-chat-panel:not(.is-collapsed) .castle-chat-head .castle-chat-toggle) {
  background: url("../texturen/ui/pixel/socket.png") center / 35px 36px no-repeat;
  border-color: transparent;
  border-image: none;
  border-radius: 50%;
  box-shadow: none;
  color: #f1e2c2;
  image-rendering: pixelated;
  text-shadow: 0 1px 0 #1a0b06;
}

html.ui-pixel:not(#_) :is(.castle-menu-toggle, .castle-rotate-view-button, .mobile-fullscreen-toggle, .world-map-zoom-button, .castle-chat-send, .castle-chat-panel:not(.is-collapsed) .castle-chat-head .castle-chat-toggle):hover:not(:disabled) {
  background: url("../texturen/ui/pixel/socket.png") center / 35px 36px no-repeat;
  filter: brightness(1.18);
}

html.ui-pixel:not(#_) .castle-menu-toggle[aria-expanded="true"] {
  background: url("../texturen/ui/pixel/socket.png") center / 35px 36px no-repeat;
  border-color: transparent;
  outline: 2px solid var(--gold-300);
  outline-offset: -2px;
}

html.ui-pixel:not(#_) :is(.castle-menu-toggle, .castle-rotate-view-button, .mobile-fullscreen-toggle, .world-map-zoom-button, .castle-chat-send):disabled {
  filter: saturate(0) brightness(0.7);
}

/* --- Event posters: a wood frame over the painted art -------------------------
   ::before, because Hallowtide's souls-night state owns ::after. */
html.ui-pixel:not(#_) .castle-overlay-hud .castle-event-ad {
  border-color: transparent;
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
}

html.ui-pixel .castle-overlay-hud .castle-event-ad::before {
  border: 10px solid transparent;
  border-image: url("../texturen/ui/pixel/tag-wood.png") 10 / 10px repeat;
  content: "";
  image-rendering: pixelated;
  inset: -2px;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

html.ui-pixel:not(#_) .castle-overlay-hud .castle-event-ad:is(.is-open, .has-reward) {
  outline: 2px solid var(--gold-300);
  outline-offset: 2px;
}

/* --- Bottom dock: a wooden plate behind the launchers -------------------------
   Desktop paints it outside the nav box (outset), so nothing moves. Below
   1360px the centred nav box already reaches into the chat panel (invisible in
   classic, where the nav is transparent), so the plate only shows from there.
   On phones the nav is a full-width bar of its own. */
@media (min-width: 1360px) {
  html.ui-pixel .castle-overlay-hud .castle-bottom-nav {
    border-image: url("../texturen/ui/pixel/plaque.png") 20 fill / 20px / 10px 6px 8px repeat;
    border-style: solid;
    border-width: 0;
    image-rendering: pixelated;
  }
}

html.ui-pixel.is-mobile-client .castle-overlay-hud .castle-bottom-nav {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/plaque.png") 20 fill / 20px repeat;
  border-style: solid;
  border-width: 1px 0 0;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.4);
  image-rendering: pixelated;
}

/* Demon castle: the family's red wood (plan rule 6). */
html.ui-pixel .castle-overlay-hud.demon-overlay-hud .castle-bottom-nav {
  border-image-source: url("../texturen/ui/pixel/plaque-red.png");
}

/* --- World map: troop card on parchment, demon march banner on red wood ------- */
html.ui-pixel:not(#_) .map-troop-detail-panel {
  backdrop-filter: none;
  background: none;
  border: 6px solid transparent;
  border-image: url("../texturen/ui/pixel/parchment.png") 16 fill / 16px repeat;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) .demon-march-planning-banner {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/plaque-red.png") 20 fill / 20px repeat;
  border-radius: 0;
  border-style: solid;
  image-rendering: pixelated;
}

/* --- Phones: launcher icons snap to 48px (192 / 4) ----------------------------
   mobile.css sets the size on body, per orientation. Below 420px of height the
   taller dock and rails collide (checked at 844x390), so those phones keep the
   classic size. The button loses its padding so it is exactly the art. */
@media (min-height: 420px) {
  html.ui-pixel.is-mobile-client body:is(.is-mobile-portrait, .is-mobile-landscape) {
    --kf-hud-icon: 48px;
  }
}

html.ui-pixel.is-mobile-client .castle-overlay-hud,
html.ui-pixel.is-mobile-client .castle-overlay-hud :is(.castle-bottom-nav, .castle-top-center) {
  --castle-nav-pad: 0px;
}

html.ui-pixel.is-mobile-client:not(#_) .castle-overlay-hud button[class*="--icon"] {
  padding: 0;
}

/* ============================================================================
   P4 — LONG TAIL
   ========================================================================= */

/* --- Bespoke bars: square, outlined, bevelled ---------------------------------
   Colour-preserving: only corners, a 1px dark outline (outline, so existing
   borders and ring shadows stay) and a 1px light/dark bevel on the fill. The
   bevel runs only along top and bottom, so the two-span heaven/hell war bar
   shows no seam and scaleX fills (loading screen) stay even. Left alone: the
   Emerald Well and Schuetzenfest bars (painted themes) and the 3px kontor
   meter, which a bevel would fill completely. */
html.ui-pixel :is(.season-bar, .season-war-bar-track, .memory-game-timer-track, .hero-mastery-bar, .arena-power-bar, .arena-hp-bar, .admin-analytics-bar-track, .iap-hub-recharge-bar, .god-banner-bar, .queue-job-bar, .quest-row-bar, .quest-daily-chest-track, .iap-pass-bar, .castle-level-xp-track, .castle-crest-level-xp, .satisfaction-bar-track, .moril-progress-bar, .moril-crew-bar, .religion-progress, .capital-capacity-track, .alliance-capacity-track, .placed-building-move-progress, .resource-progress, .prestige-progress, .season-rift-hp, .guild-boss-hp, .game-loading-screen-progress, .harbor-exchange-depth-bar) {
  border-radius: 0;
  outline: 1px solid #0d0705;
}

html.ui-pixel :is(.season-bar > span, .season-war-bar-heaven, .season-war-bar-hell, .memory-game-timer-fill, .hero-mastery-bar > span, .arena-power-bar span, .arena-hp-fill, .arena-hp-shield, .admin-analytics-bar-track span, .iap-hub-recharge-fill, .god-banner-bar > span, .queue-job-fill, .quest-row-bar-fill, .quest-daily-chest-fill, .iap-pass-bar-fill, .hud-xp-fill, .castle-crest-level-xp-fill, .satisfaction-bar-fill, .moril-progress-bar span, .moril-crew-bar span, .religion-progress-fill, .capital-capacity-fill, .alliance-capacity-fill, .placed-building-move-progress-fill, .resource-progress span, .prestige-progress-bar, .season-rift-hp > span, .guild-boss-hp > span, .game-loading-screen-progress-bar) {
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.38), inset 0 -1px 0 rgba(0, 0, 0, 0.38);
}

html.ui-pixel .harbor-kontor-interface .kontor-stat-capacity :is(.kontor-capacity-meter, .kontor-capacity-meter i) {
  border-radius: 0;
}

/* --- Tab systems ----------------------------------------------------------------
   Rows of 32px+ tabs and the side menus are planks: wood when idle, the gold
   plate when selected (plan rule 4). The seven small rows (22-31px) are chips,
   with the gold chip when selected. Underline tabs (research, profile, auth)
   already read as crisp lines and stay. :not(#_) for the same reason as the
   buttons: the tab rules reach (0,3,1) and several reset `border`. The shop
   tray's tabs keep their P0 planks; Hallowtide's dock keeps its flame colour.
   The fixed 1px border stops the classic 3px gold left rail from shifting the
   label when a tab becomes active. */
html.ui-pixel:not(#_) :is(.settings-subnav:not(.barracks-unit-subnav, .gladiator-gear-filters) > button, .rewards-hub-tab, .leaderboard-tab:not(.castle-docked-tray *), .quest-board-tabs button, .wiki-category-tabs button, .weekly-event-board-toggle button, .weekly-event-dock:not(.hallowtide-stage *) button, .keep-side-menu .keep-menu-btn, .weekly-event-shop-rail button, .season-rail-entry, .backpack-tab, .house-crest-tabs button) {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/btn-wood.png") 16 24 fill / 16px 24px repeat;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  box-shadow: none;
  color: #f1e2c2;
  image-rendering: pixelated;
  text-shadow: 0 1px 0 #1a0b06;
}

html.ui-pixel:not(#_) :is(.settings-subnav:not(.barracks-unit-subnav, .gladiator-gear-filters) > button.active, .rewards-hub-tab.is-active, .leaderboard-tab.is-active:not(.castle-docked-tray *), .quest-board-tabs button.active, .wiki-category-tabs button.active, .weekly-event-board-toggle button.is-active, .weekly-event-dock:not(.hallowtide-stage *) button.is-active, .keep-side-menu .keep-menu-btn.active, .weekly-event-shop-rail button.is-active, .season-rail-entry.is-active, .backpack-tab.is-active, .house-crest-tabs button:is(.active, .is-active), .palace-room-tab.is-active, .tavern-nav-button.is-active) {
  background: none;
  border-image-source: url("../texturen/ui/pixel/btn-gold.png");
  color: #2a1407;
  text-shadow: 0 1px 0 rgba(255, 236, 170, 0.45);
}

html.ui-pixel:not(#_) :is(.settings-subnav:not(.barracks-unit-subnav, .gladiator-gear-filters) > button, .rewards-hub-tab, .leaderboard-tab:not(.castle-docked-tray *), .quest-board-tabs button, .wiki-category-tabs button, .weekly-event-board-toggle button, .weekly-event-dock:not(.hallowtide-stage *) button, .keep-side-menu .keep-menu-btn, .weekly-event-shop-rail button, .season-rail-entry, .backpack-tab, .house-crest-tabs button):hover:not(:disabled) {
  background: none;
  filter: brightness(1.14);
}

html.ui-pixel:not(#_) :is(.settings-subnav:not(.barracks-unit-subnav, .gladiator-gear-filters) > button, .rewards-hub-tab, .leaderboard-tab:not(.castle-docked-tray *), .quest-board-tabs button, .wiki-category-tabs button, .weekly-event-board-toggle button, .weekly-event-dock:not(.hallowtide-stage *) button, .keep-side-menu .keep-menu-btn, .weekly-event-shop-rail button, .season-rail-entry, .backpack-tab, .house-crest-tabs button):disabled {
  border-image-source: url("../texturen/ui/pixel/btn-worn.png");
  color: #b9b0a4;
  opacity: 1;
}

html.ui-pixel:not(#_) :is(.barracks-unit-subnav button, .gladiator-gear-filters > button, .iap-pass-subtab, .castle-chat-tab, .season-segments button, .sprint-hub-kind-toggle button, .moril-panes button, .meadow-editor-panel:not(.island-build-panel, .island-editor-panel) .meadow-editor-cat) {
  background: #2a1a17;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/chip.png") 6 / 6px stretch;
  border-radius: 3px;
  border-style: solid;
  box-shadow: none;
  color: #e8d6bd;
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) :is(.barracks-unit-subnav button.active, .gladiator-gear-filters > button.active, .iap-pass-subtab.is-active, .castle-chat-tab.is-active, .season-segments button.is-active, .sprint-hub-kind-toggle button.is-active, .moril-panes button.is-active, .meadow-editor-panel:not(.island-build-panel, .island-editor-panel) .meadow-editor-cat.is-active) {
  background: #3a2618;
  border-image-source: url("../texturen/ui/pixel/chip-gold.png");
  color: var(--gold-300);
}

/* Text tabs: the label clears the 24px iron caps (side-menu rows are left-aligned). */
html.ui-pixel:not(#_) :is(.settings-subnav:not(.barracks-unit-subnav, .gladiator-gear-filters) > button, .rewards-hub-tab, .leaderboard-tab:not(.castle-docked-tray *), .quest-board-tabs button, .wiki-category-tabs button, .weekly-event-board-toggle button, .weekly-event-dock:not(.hallowtide-stage *) button, .keep-side-menu .keep-menu-btn, .backpack-tab, .house-crest-tabs button) {
  padding-inline: 24px;
}

/* The Keep menu column is 142.875px; the planks' fixed 1px border rounds it to
   one pixel of horizontal overflow and a needless scrollbar. It only scrolls down. */
html.ui-pixel .keep-side-menu {
  overflow-x: hidden;
}

/* Phones: tabs run 22-30px tall there, so they swap down one size to the chip
   (plan rule 1: never scale the art). */
html.ui-pixel.is-mobile-client:not(#_) :is(.settings-subnav:not(.barracks-unit-subnav, .gladiator-gear-filters) > button, .rewards-hub-tab, .leaderboard-tab:not(.castle-docked-tray *), .quest-board-tabs button, .wiki-category-tabs button, .weekly-event-board-toggle button, .weekly-event-dock:not(.hallowtide-stage *) button, .keep-side-menu .keep-menu-btn, .weekly-event-shop-rail button, .season-rail-entry, .backpack-tab, .house-crest-tabs button) {
  background: #2a1a17;
  border-image: url("../texturen/ui/pixel/chip.png") 6 / 6px stretch;
  border-radius: 3px;
  color: #e8d6bd;
  padding-inline: 10px;
}

html.ui-pixel.is-mobile-client:not(#_) :is(.settings-subnav:not(.barracks-unit-subnav, .gladiator-gear-filters) > button.active, .rewards-hub-tab.is-active, .leaderboard-tab.is-active:not(.castle-docked-tray *), .quest-board-tabs button.active, .wiki-category-tabs button.active, .weekly-event-board-toggle button.is-active, .weekly-event-dock:not(.hallowtide-stage *) button.is-active, .keep-side-menu .keep-menu-btn.active, .weekly-event-shop-rail button.is-active, .season-rail-entry.is-active, .backpack-tab.is-active, .house-crest-tabs button:is(.active, .is-active), .palace-room-tab.is-active, .tavern-nav-button.is-active) {
  background: #3a2618;
  border-image-source: url("../texturen/ui/pixel/chip-gold.png");
  color: var(--gold-300);
  text-shadow: 0 1px 0 #1a0b06;
}

/* Icon-tile rails (premium hub, summon banners): art-led, so square corners and
   a gold line for the selected tile instead of a soft ring. */
html.ui-pixel:not(#_) :is(.iap-hub-tile, .summon-rail-tile) {
  border-radius: 0;
}

html.ui-pixel:not(#_) :is(.iap-hub-tile, .summon-rail-tile).is-active {
  box-shadow: none;
  outline: 2px solid var(--gold-300);
  outline-offset: 1px;
}

/* Guild hall labels sit on the painting like map chips: the wood tag. */
html.ui-pixel:not(#_) .guild-hall-node {
  backdrop-filter: none;
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tag-wood.png") 10 fill / 10px repeat;
  border-radius: 0;
  border-style: solid;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) .guild-hall-node:is(.is-active, :hover) {
  outline: 2px solid var(--gold-300);
  outline-offset: 1px;
}

/* --- Cards ---------------------------------------------------------------------
   113 card selectors live inside modals. Most of them carry state or meaning in
   their own border, background or ring colour (rarity, faction, claimable,
   selected, locked), which a painted frame would erase, so the default is the
   light touch: square corners and a crisp dark outline, colours untouched.
   The outline skips :focus-visible so focusable cards keep the focus ring.
   Stateless panels take the sunken inset (painted inward, so nothing moves),
   stat tiles take the chip socket, and art panels a wood frame. */
html.ui-pixel:not(#_) :is(.queue-card, .queue-capacity, .quest-row, .mailbox-card, .policies-card, .wiki-entry-button, .wiki-entry-placeholder, .settings-menu-card, .unit-army-card, .army-station-card, .unit-training-card, .research-card, .minigame-schedule-tile, .minigame-shop-card, .minigame-poster, .arena-record-card, .memory-shop-track-card, .treasury-item, .backpack-slot, .guild-battle-pet, .social-list-item, .social-thread-item, .social-status-banner, .alliance-directory-row, .alliance-member-row, .alliance-application-row, .alliance-recruit-card, .alliance-poi-source-row, .palace-item, .season-rank-row, .login-reward-slot, .level-roadmap-slot, .leaderboard-row, .prestige-offer-tile, .house-crest-gallery-card, .avatar-shop-tile, .harbor-trade-card, .harbor-auction-card, .kontor-stock-row, .god-worship-supply-row, .religion-directory-row, .religion-follower-row, .campaign-loot-card, .campaign-loot-item, .gladiator-item-preview, .gladiator-stats-panel, .rift-supply-row, .hallowtide-lantern-row, .hallowtide-market-row, .land-build-queue-card, .attack-unit-row, .garrison-row, .hero-assign-picker-row, .market-order-card, .tavern-larder-tile, .iap-reveal-card, .iap-shop-card, .iap-advancement-card, .iap-starter-banner, .iap-recharge-list, .iap-recharge-row, .hero-showroom-track-card, .hero-slot-box, .building-hero-slot, .season-faction-card, .season-building-shop-card, .season-track-tile, .daily-signin-slot, .research-tree-node, .iap-pack-card, .iap-guild-reward-card, .widget-carousel-card, .demon-unit-card, .demon-shop-card, .demon-research-card, .demon-attack-mode-row, .demon-assault-unit-row, .spy-ops-card, .marked-target-card, .moril-banner, .shop-category-card, .tavern-slot, .weekly-event-roster-card, .tavern-recipe-card, .coronation-gate) {
  border-radius: 0;
}

html.ui-pixel:not(#_) :is(.queue-card, .queue-capacity, .quest-row, .mailbox-card, .policies-card, .wiki-entry-button, .wiki-entry-placeholder, .settings-menu-card, .unit-army-card, .army-station-card, .unit-training-card, .research-card, .minigame-schedule-tile, .minigame-shop-card, .minigame-poster, .arena-record-card, .memory-shop-track-card, .treasury-item, .backpack-slot, .guild-battle-pet, .social-list-item, .social-thread-item, .social-status-banner, .alliance-directory-row, .alliance-member-row, .alliance-application-row, .alliance-recruit-card, .alliance-poi-source-row, .palace-item, .season-rank-row, .login-reward-slot, .level-roadmap-slot, .leaderboard-row, .prestige-offer-tile, .house-crest-gallery-card, .avatar-shop-tile, .harbor-trade-card, .harbor-auction-card, .kontor-stock-row, .god-worship-supply-row, .religion-directory-row, .religion-follower-row, .campaign-loot-card, .campaign-loot-item, .gladiator-item-preview, .gladiator-stats-panel, .rift-supply-row, .hallowtide-lantern-row, .hallowtide-market-row, .land-build-queue-card, .attack-unit-row, .garrison-row, .hero-assign-picker-row, .market-order-card, .tavern-larder-tile, .iap-reveal-card, .iap-shop-card, .iap-advancement-card, .iap-starter-banner, .iap-recharge-list, .iap-recharge-row, .hero-showroom-track-card, .hero-slot-box, .building-hero-slot, .season-faction-card, .season-building-shop-card, .season-track-tile, .daily-signin-slot, .research-tree-node, .iap-pack-card, .iap-guild-reward-card, .widget-carousel-card, .demon-unit-card, .demon-shop-card, .demon-research-card, .demon-attack-mode-row, .demon-assault-unit-row, .spy-ops-card, .marked-target-card, .moril-banner, .shop-category-card, .tavern-slot, .weekly-event-roster-card, .tavern-recipe-card, .coronation-gate):not(:focus-visible) {
  outline: 1px solid rgba(13, 7, 5, 0.6);
}

html.ui-pixel:not(#_) :is(.patch-note-card, .wiki-entry-detail, .research-tree-detail, .social-section-card, .weekly-event-sheet, .weekly-event-shop-panel, .hero-detail-content-panel, .guild-hall-panel, .summon-rates-panel, .summon-feature-plate, .battle-record-card) {
  backdrop-filter: none;
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  border-style: solid;
  image-rendering: pixelated;
}

/* Every other stat tile only loses its rounding: some screens strip the tile to
   bare text, where an outline would draw a box that was never there. */
html.ui-pixel:not(#_) .castle-stat {
  border-radius: 0;
}

/* Stat tiles (label + number): the chip socket of the HUD resource tiles. Only
   the Keep's grid and the weekly event; other castle-stat uses are re-styled or
   stripped by their screens. */
html.ui-pixel:not(#_) :is(.keep-interface .interface-stat-grid .castle-stat, .weekly-event-stats) {
  background: #2a1a17;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/chip.png") 6 / 6px stretch;
  border-radius: 3px;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
}

/* Art panels: the wood tag frames the painting's edge (no fill). */
html.ui-pixel:not(#_) :is(.minigame-art, .hero-detail-art-panel, .summon-banner-stage) {
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tag-wood.png") 10 / 10px repeat;
  border-radius: 0;
  border-style: solid;
  image-rendering: pixelated;
}

/* --- Premium shop: emerald-studded offer cards, privilege-card tiers ----------
   premium-shop-sheet + privilege-sheet (build_premium_shop in build-pixel-ui-kit.py).
   Panel centres are flat and 90% opaque, so the girl (the doll mesh) still reads
   behind the cards; the glass blur goes because the art is the surface now. Wood
   card = offer, gold card = highlighted offer and the starter pack, slim row = list
   entries. The three privilege tiers each own a frame, a name plate and an emblem,
   in place of the painted scrolls. Art paints inward over a 1px border; the
   padding clears the rim. */
html.ui-pixel .iap-hub-stage {
  --iap-glass-blur: none;
}

html.ui-pixel:not(#_) .iap-hub-stage :is(.iap-shop-card, .iap-advancement-card, .iap-pack-card, .iap-guild-reward-card, .iap-home-row, .iap-home-meter, .iap-pass-hud, .modal-section-card, .prestige-badge) {
  background: none;
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/premium-card.png") 22 fill / 22px stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  outline: none;
  padding: 26px 28px;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-pack-stripe {
  border-radius: 0;
}

html.ui-pixel:not(#_) .iap-hub-stage :is(.iap-shop-card, .iap-pack-card, .iap-advancement-card).is-highlighted,
html.ui-pixel:not(#_) .iap-hub-stage .iap-starter-banner {
  background: none;
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/premium-card-gold.png") 30 fill / 30px stretch;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(246, 201, 108, 0.28));
  image-rendering: pixelated;
  outline: none;
  padding: 22px 26px;
}

/* Only the frame is pixel art; text, icons and buttons inside keep smooth scaling. */
html.ui-pixel:not(#_) .iap-hub-stage :is(.iap-shop-card, .iap-advancement-card, .iap-pack-card, .iap-guild-reward-card, .iap-home-row, .iap-home-meter, .iap-pass-hud, .modal-section-card, .prestige-badge, .iap-starter-banner, .iap-recharge-row, .iap-pass-milestone, .iap-hub-recharge-strip, .iap-privilege-card) > * {
  image-rendering: auto;
}

html.ui-pixel:not(#_) .iap-hub-stage :is(.iap-recharge-list, .iap-pass-milestones) {
  background: none;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 6px;
  padding: 0;
}

html.ui-pixel:not(#_) .iap-hub-stage :is(.iap-recharge-row, .iap-pass-milestone) {
  background: none;
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/premium-row.png") 14 fill / 14px stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  outline: none;
  padding: 10px 16px;
}

html.ui-pixel:not(#_) .iap-hub-stage :is(.iap-recharge-row, .iap-pass-milestone) {
  position: relative;
}

/* Reached = a gold bar inside the left rim (the classic inset accent sits under the art). */
html.ui-pixel:not(#_) .iap-hub-stage :is(.iap-recharge-row, .iap-pass-milestone).is-reached::before {
  background: var(--gold-300);
  bottom: 12px;
  box-shadow: 1px 0 0 #1a0b06;
  content: "";
  left: 7px;
  position: absolute;
  top: 12px;
  width: 3px;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-hub-recharge-strip {
  background: none;
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/premium-strip.png") 23 42 fill / 23px 42px stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  padding: 8px 46px;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-hub-recharge-strip:hover {
  filter: brightness(1.1);
}

/* Rail: the portrait is the tile's content and would cover a border-image, so the
   frame sits on ::after above it; label and badge stay above the frame. */
html.ui-pixel:not(#_) .iap-hub-rail .iap-hub-tile::after {
  border: 12px solid transparent;
  border-image: url("../texturen/ui/pixel/premium-tile.png") 12 / 12px stretch;
  content: "";
  image-rendering: pixelated;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

html.ui-pixel:not(#_) .iap-hub-rail .iap-hub-tile.is-active::after {
  border-image-source: url("../texturen/ui/pixel/premium-tile-active.png");
}

html.ui-pixel:not(#_) .iap-hub-rail .iap-hub-tile.is-active {
  filter: drop-shadow(0 0 6px rgba(246, 201, 108, 0.45));
  outline: none;
}

html.ui-pixel:not(#_) .iap-hub-rail :is(.iap-hub-tile-label, .iap-hub-tile-badge) {
  z-index: 2;
}

/* Reward slots: the gold socket, the emerald one for emeralds. Padding keeps the
   painted item tile inside the rim; the slot keeps its size. */
html.ui-pixel:not(#_) .iap-hub-stage .iap-pack-slot :is(img, .iap-reward-icon) {
  background: none;
  border-image: url("../texturen/ui/pixel/premium-slot.png") 8 fill / 8px stretch;
  border-radius: 0;
  box-sizing: border-box;
  image-rendering: auto;
  padding: 6px;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-pack-slot .iap-reward-icon {
  border-image-source: url("../texturen/ui/pixel/premium-slot-emerald.png");
}

/* Ribbons: one banner baked in four cloths (green, gold = best, blue = popular,
   rose = once). 34px tails on both ends are fixed; the body stretches under the text. */
html.ui-pixel:not(#_) .iap-hub-stage .iap-ribbon {
  animation: none;
  background: none;
  border: 0 solid transparent;
  border-image: url("../texturen/ui/pixel/premium-ribbon.png") 0 34 fill / 0 34px stretch;
  border-radius: 0;
  border-width: 0 34px;
  box-shadow: none;
  color: #fff4dc;
  height: 34px;
  image-rendering: pixelated;
  line-height: 26px;
  padding: 0 2px 8px;
  text-shadow: 0 1px 0 #10301c;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-ribbon--best {
  border-image-source: url("../texturen/ui/pixel/premium-ribbon-gold.png");
  color: #3a1e08;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.5);
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-ribbon--popular {
  border-image-source: url("../texturen/ui/pixel/premium-ribbon-blue.png");
  text-shadow: 0 1px 0 #0c1e36;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-ribbon--once {
  border-image-source: url("../texturen/ui/pixel/premium-ribbon-rose.png");
  text-shadow: 0 1px 0 #3a0c1e;
}

/* Prestige tab: the page is the gold card (prestige is the top tier), its two
   boxes are slim rows. */
html.ui-pixel:not(#_) .iap-hub-stage .prestige-page {
  background: none;
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/premium-card-gold.png") 30 fill / 30px stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  padding: 26px 28px;
}

html.ui-pixel:not(#_) .iap-hub-stage :is(.prestige-page-hud, .prestige-page-acquire) {
  background: none;
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/premium-row.png") 14 fill / 14px stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  padding: 12px 16px;
}

html.ui-pixel:not(#_) .iap-hub-stage :is(.prestige-page, .prestige-page-hud, .prestige-page-acquire) > * {
  image-rendering: auto;
}

/* Privilege cards: the tier frame replaces the scroll, so the ink turns light. */
html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-scroll-art {
  display: none;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-card {
  --iap-ink: #f3e3c8;
  --iap-ink-muted: #c9b08f;
  --iap-ink-rule: rgba(246, 201, 108, 0.22);
  --iap-pack-accent: #e0a46a;
  --iap-plate: url("../texturen/ui/pixel/privilege-plate-weekly.png");
  --iap-plate-ink: #f6dcb4;
  --iap-emblem: url("../texturen/ui/pixel/privilege-emblem-weekly.png");
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/privilege-weekly.png") 48 fill / 48px stretch;
  image-rendering: pixelated;
  overflow: visible;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-card--monthly {
  --iap-ink-rule: rgba(214, 170, 255, 0.24);
  --iap-pack-accent: #d6aaff;
  --iap-plate: url("../texturen/ui/pixel/privilege-plate-monthly.png");
  --iap-plate-ink: #2a1838;
  --iap-emblem: url("../texturen/ui/pixel/privilege-emblem-monthly.png");
  border-image-source: url("../texturen/ui/pixel/privilege-monthly.png");
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-card--lifetime {
  --iap-pack-accent: #f6c96c;
  --iap-plate: url("../texturen/ui/pixel/privilege-plate-lifetime.png");
  --iap-plate-ink: #3a1e08;
  --iap-emblem: url("../texturen/ui/pixel/privilege-emblem-lifetime.png");
  border-image-source: url("../texturen/ui/pixel/privilege-lifetime.png");
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-card.is-active {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--iap-pack-accent) 45%, transparent));
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-ink {
  padding: 30px 30px 34px;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-head {
  justify-items: center;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-head::before {
  background: var(--iap-emblem) no-repeat;
  content: "";
  height: 45px;
  image-rendering: pixelated;
  width: 45px;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-name {
  border: 1px solid transparent;
  border-image: var(--iap-plate) 20 14 fill / 20px 14px stretch;
  color: var(--iap-plate-ink);
  image-rendering: pixelated;
  padding: 8px 22px 9px;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-card :is(.iap-privilege-row strong, .iap-emerald-amount em, .iap-value-worth strong),
html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-status.is-active {
  color: #8fe0a8;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-card .iap-ribbon {
  top: -14px;
}

html.ui-pixel:not(#_) .iap-hub-stage .iap-privilege-card .iap-value-bonus {
  color: #2a1704;
}

/* --- Daily sign-in: sunken board, wood day tiles, plaque counter --------------
   signin-sheet pieces (build_signin in build-pixel-ui-kit.py). Tiles paint inward
   (30px image over a 1px border), so the grid keeps its size. The state lives in
   the art: gold = today, dim brass = tomorrow, sunken = upcoming, wood + wax
   seal = claimed. The fill hides the hero/rare inset bar, so the day label
   carries that colour instead. */
html.ui-pixel:not(#_) .daily-signin-panel {
  background: none;
  border: 12px solid transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) .daily-signin-head .pill-quest-points {
  background: none;
  border-image: url("../texturen/ui/pixel/plaque-counter.png") 20 fill / 20px stretch;
  border-radius: 0;
  color: #f6c96c;
  padding: 0.55rem 1.4rem;
  text-shadow: 0 1px 0 #1a0b06;
}

html.ui-pixel:not(#_) .daily-signin-panel .daily-signin-slot {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tile-wood.png") 30 fill / 30px stretch;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
  padding: 17px 19px 15px;
}

html.ui-pixel:not(#_) .daily-signin-panel .daily-signin-slot:not(:focus-visible) {
  outline: none;
}

html.ui-pixel:not(#_) .daily-signin-panel .daily-signin-slot.is-claimable {
  border-image-source: url("../texturen/ui/pixel/tile-gold.png");
  filter: drop-shadow(0 0 6px rgba(246, 201, 108, 0.5));
}

html.ui-pixel:not(#_) .daily-signin-panel .daily-signin-slot.is-claimable:hover {
  filter: drop-shadow(0 0 8px rgba(246, 201, 108, 0.65)) brightness(1.08);
}

html.ui-pixel:not(#_) .daily-signin-panel .daily-signin-slot.is-current.is-locked {
  border-image-source: url("../texturen/ui/pixel/tile-gold-dim.png");
}

html.ui-pixel:not(#_) .daily-signin-panel .daily-signin-slot.is-locked:not(.is-current) {
  border-image-source: url("../texturen/ui/pixel/tile-locked.png");
}

html.ui-pixel:not(#_) .daily-signin-panel .daily-signin-slot.is-claimed::after {
  background: url("../texturen/ui/pixel/seal.png") no-repeat;
  content: "";
  height: 29px;
  right: 7px;
  top: 7px;
  width: 29px;
}

html.ui-pixel:not(#_) .daily-signin-panel .daily-signin-slot--hero:not(.is-current) .daily-signin-slot-day {
  color: #e58ea3;
}

html.ui-pixel:not(#_) .daily-signin-panel .daily-signin-slot--rare:not(.is-current) .daily-signin-slot-day {
  color: #8fd6a4;
}

/* --- Quest board: the sign-in tiles as row panels -----------------------------
   Same pieces and the same state language as the sign-in tab above: wood = in
   progress, gold = ready to claim, sunken = locked, wax seal = line finished.
   The 30px tiles paint inward over the 1px border, so rows keep their size;
   round repeats the rim instead of smearing it across a 900px row. Also covers
   the keep's quest panel, which renders the same .quest-row. The padding clears
   the gold inner line; questRowsVerticalPixel gives the rows the height for it. */
html.ui-pixel:not(#_) .quest-row {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tile-wood.png") 30 fill / 30px round;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
  outline: none;
  padding: 16px 20px;
}

html.ui-pixel:not(#_) .quest-row > * {
  image-rendering: auto;
}

html.ui-pixel:not(#_) .quest-row.quest-completed {
  border-image-source: url("../texturen/ui/pixel/tile-gold.png");
}

html.ui-pixel:not(#_) .quest-row.quest-row--locked {
  border-image-source: url("../texturen/ui/pixel/tile-locked.png");
}

html.ui-pixel:not(#_) .quest-row:not(.quest-completed, .quest-claimed, .quest-row--done, .quest-row--locked):hover {
  background: none;
  filter: brightness(1.08);
}

html.ui-pixel:not(#_) .quest-row-icon {
  background: rgba(13, 7, 5, 0.45);
  border-color: rgba(13, 7, 5, 0.8);
  border-radius: 0;
}

html.ui-pixel:not(#_) .quest-row--done .quest-status-pill {
  background: url("../texturen/ui/pixel/seal.png") no-repeat;
  border: 0;
  border-image: none;
  font-size: 0;
  height: 29px;
  padding: 0;
  width: 29px;
}

html.ui-pixel:not(#_) .quest-board-interface .onboarding-chapter-banner {
  background: none;
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/tile-gold-dim.png") 30 fill / 30px round;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  padding: 18px 24px;
}

html.ui-pixel:not(#_) .quest-board-interface .onboarding-chapter-banner > * {
  image-rendering: auto;
}

html.ui-pixel:not(#_) .quest-board-interface .quest-daily-hud {
  background: none;
  border: 12px solid transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

/* Queues (modal + barracks card): the same tiles. Wood = a queue with jobs,
   sunken = an empty queue; the capacity row sits on the inset board. */
html.ui-pixel:not(#_) .queue-card {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tile-wood.png") 30 fill / 30px round;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
  outline: none;
  padding: 20px 22px 22px;
}

html.ui-pixel:not(#_) .queue-card > * {
  image-rendering: auto;
}

html.ui-pixel:not(#_) .queue-card.is-empty {
  border-image-source: url("../texturen/ui/pixel/tile-locked.png");
}

html.ui-pixel:not(#_) .queue-capacity {
  background: none;
  border: 12px solid transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  outline: none;
}

html.ui-pixel:not(#_) .queue-capacity > * {
  image-rendering: auto;
}

/* --- Arena duel: colosseum backdrop and chibi sprites -------------------------
   ui-gladiator-arena.js swaps the painted backdrop and figures for
   assets/gladiators/arena/pixel/: a 384x256 backdrop and per-fighter sheets of
   9 x 4 frames of 128x64 (rows idle, attack, hit, death), built by
   scripts/build-arena-chibi-sheet.mjs. The fight is a size container, so --px
   is one backdrop pixel under background-size: cover; on narrow screens a
   chibi shrinks to fit her half. The clips run as inline animation lists. */
html.ui-pixel .arena-fight {
  container-type: size;
  image-rendering: pixelated;
}

html.ui-pixel .arena-fight > * {
  image-rendering: auto;
}

html.ui-pixel .arena-chibi {
  --px: min(max(100cqw / 384, 100cqh / 256), 50cqw / 128);
  background-position: 12.5% 0;
  background-repeat: no-repeat;
  background-size: 900% 400%;
  display: block;
  height: calc(64 * var(--px));
  image-rendering: pixelated;
  /* Feet stand on the tag-wood plate of .arena-fight-side-hud, not behind it. */
  margin-bottom: 5rem;
  position: relative;
  width: calc(128 * var(--px));
  z-index: 1;
}

/* Phones: the HP plate is compact (no name), so the feet come down to it. */
html.ui-pixel.is-mobile-client .arena-chibi {
  margin-bottom: 3rem;
}

/* Columns 1-8 of a row; column 0 is the input pose the idle loop returns to. */
@keyframes arena-chibi-idle {
  from { background-position: 12.5% 0; }
  to { background-position: 100% 0; }
}

@keyframes arena-chibi-attack {
  from { background-position: 12.5% calc(100% / 3); }
  to { background-position: 100% calc(100% / 3); }
}

@keyframes arena-chibi-hit {
  from { background-position: 12.5% calc(200% / 3); }
  to { background-position: 100% calc(200% / 3); }
}

@keyframes arena-chibi-death {
  from { background-position: 12.5% 100%; }
  to { background-position: 100% 100%; }
}

/* --- Arena HUD: kit plates over the colosseum --------------------------------
   The painted arena darkened its backdrop with gradients for the light text; the
   pixel colosseum is bright sand and stone, so every text block sits on a plate:
   plaque for the fighters' cards and the result, the banner for the round,
   tag-wood under each chibi, parchment for the log. */
html.ui-pixel .arena-fight-hud,
html.ui-pixel .arena-fight-dock {
  background: none;
}

html.ui-pixel:not(#_) :is(.arena-fight-hud-side, .arena-result) {
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/plaque.png") 20 fill / 20px repeat;
  border-radius: 0;
  border-style: solid;
  color: #f1e2c2;
  image-rendering: pixelated;
  text-shadow: 0 1px 0 #1a0b06;
}

html.ui-pixel .arena-fight-hud-side {
  justify-self: start;
  padding: 10px 18px;
  width: min(24rem, 100%);
}

html.ui-pixel .arena-fight-hud-side--opponent {
  justify-self: end;
}

html.ui-pixel .arena-fight-hud-side :is(.arena-power-label, .muted) {
  color: #d9c49c;
  opacity: 1;
}

/* Her head, cropped 2x from frame 0 of the chibi sheet (1152x256, sprite at x 32-96). */
html.ui-pixel .arena-portrait--chibi {
  background-position: -84px 0;
  background-size: 2304px 512px;
  border: 0;
  border-radius: 0;
  height: 64px;
  image-rendering: pixelated;
  width: 72px;
}

html.ui-pixel .arena-fight-hud-side--opponent .arena-portrait--chibi {
  transform: scaleX(-1);
}

html.ui-pixel .arena-versus-mark--hud {
  align-items: center;
  border-image: url("../texturen/ui/pixel/banner-v2.png") 0 80 fill / 0 80px stretch;
  border-style: solid;
  border-width: 0 80px;
  box-sizing: border-box;
  color: #f6e3b4;
  display: flex;
  gap: 0.5rem;
  height: 56px;
  image-rendering: pixelated;
  padding-bottom: 12px;
  text-shadow: 0 1px 0 #2a0b14;
  white-space: nowrap;
}

html.ui-pixel .arena-versus-mark--hud > span:first-child {
  color: #f3c64a;
  font-weight: 800;
}

html.ui-pixel .arena-versus-mark--hud .muted {
  color: #f6e3b4;
  opacity: 1;
}

html.ui-pixel:not(#_) .arena-fight-side-hud {
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tag-wood.png") 10 fill / 10px repeat;
  border-style: solid;
  color: #f1e2c2;
  image-rendering: pixelated;
  left: 22%;
  padding: 8px 14px;
  right: 22%;
  text-shadow: 0 1px 0 #1a0b06;
}

html.ui-pixel .arena-fight-side-hud .muted {
  color: #d9c49c;
}

html.ui-pixel:not(#_) .arena-log {
  background: none;
  border: 6px solid transparent;
  border-image: url("../texturen/ui/pixel/parchment.png") 16 fill / 16px repeat;
  border-radius: 0;
  color: #2b1608;
  image-rendering: pixelated;
  padding: 8px 12px;
  scrollbar-width: none;
  top: 9rem;
}

/* Wrapped lines hang under the text, not under the round number. */
html.ui-pixel .arena-log li {
  padding-left: 1.5em;
  text-indent: -1.5em;
}

/* The round number is an inline-block, which would inherit the hang. */
html.ui-pixel .arena-log .muted {
  color: #7a5a3a;
  text-indent: 0;
}

/* Phones: the stage between the top plates and the dock is about one chibi tall
   (932x430), so the plates go compact and the log stays off the stage; the
   names already sit on the top plates and the HP bars carry the fight. The
   lobby column is ~250px wide there, so its stage would only push the button
   further below the fold. */
html.ui-pixel.is-mobile-client :is(.arena-portrait--chibi, .arena-fight-hud-side .arena-power-label, .arena-fight-side-hud .arena-fighter-name, .arena-log, .arena-lobby-stage) {
  display: none;
}

html.ui-pixel.is-mobile-client .arena-fight-hud {
  padding-top: 2.2rem;
}

html.ui-pixel.is-mobile-client .arena-fight-hud-side {
  padding: 6px 12px;
}

html.ui-pixel.is-mobile-client:not(#_) .arena-fight-side-hud {
  left: 14%;
  padding: 4px 10px;
  right: 14%;
}

html.ui-pixel .arena-result {
  margin: 0 auto;
  padding: 12px 20px;
  width: fit-content;
}

html.ui-pixel:not(#_) .arena-result.is-loss {
  border-image-source: url("../texturen/ui/pixel/plaque-red.png");
}

html.ui-pixel .arena-result.is-win strong {
  color: #f3c64a;
}

html.ui-pixel .arena-result.is-loss strong {
  color: #ffe9c9;
}

/* --- Gladiator hub: niches for the gear slots, wood frames for the tiles -----
   Tile state (rarity, selected, defender, locked) lives in the background and
   box-shadow rules of styles.css. The frame paints inward over the tile's edge
   and would hide an inset selection ring, so selection swaps the frame itself
   to the gold chip ring. Art inside keeps smooth scaling. */
html.ui-pixel:not(#_) .gladiator-slot {
  background: none;
  border: 0 solid transparent;
  border-image: url("../texturen/ui/pixel/niche.png") 14 fill / 14px stretch;
  border-radius: 0;
  image-rendering: pixelated;
  outline: 0;
}

html.ui-pixel:not(#_) .gladiator-stage :is(.gear-tile, .gladiator-roster-card, .campaign-node-frame) {
  border: 0 solid transparent;
  border-image: url("../texturen/ui/pixel/tag-wood.png") 10 / 10px repeat;
  border-radius: 0;
  image-rendering: pixelated;
  outline: 0;
}

html.ui-pixel:not(#_) .gladiator-stage :is(.gear-tile.is-selected, .gladiator-roster-card.is-selected, .campaign-node.is-current .campaign-node-frame) {
  border-image: url("../texturen/ui/pixel/chip-gold.png") 6 / 6px stretch;
}

/* A stage's art fills its card and would paint over an inward frame. */
html.ui-pixel:not(#_) .gladiator-stage .campaign-node-frame {
  border-width: 8px;
}

html.ui-pixel .gladiator-stage :is(.gladiator-slot, .gear-tile, .gladiator-roster-card, .campaign-node-frame) > * {
  image-rendering: auto;
}

html.ui-pixel:not(#_) .gladiator-stage :is(.campaign-board, .gladiator-items-bay-inspect) {
  backdrop-filter: none;
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  border-style: solid;
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) .gladiator-stats-tab {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/btn-wood.png") 16 24 fill / 16px 24px repeat;
  border-radius: 0;
  border-style: solid;
  image-rendering: pixelated;
}

/* --- Arena lobby: her chibi idling in a slice of the colosseum ---------------
   A size container like the fight, so --px matches the backdrop's cover scale
   while the width rules; on short screens max-height wins and she shrinks. */
html.ui-pixel .arena-lobby-stage {
  align-items: end;
  aspect-ratio: 12 / 5;
  background-position: center 78%;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0 solid transparent;
  border-image: url("../texturen/ui/pixel/tag-wood.png") 10 / 10px repeat;
  container-type: size;
  display: grid;
  image-rendering: pixelated;
  justify-items: center;
  margin: 0.6rem 0;
  max-height: 40vh;
}

html.ui-pixel:not(#_) .arena-lobby-stage .arena-chibi {
  --px: min(100cqw / 384, 100cqh / 72);
  margin-bottom: calc(10 * var(--px));
}

/* @generated icon-swaps (scripts/build-pixel-ui-kit.py) - do not edit by hand */
html.ui-pixel img[src*="texturen/items/arenaBomb.png"] { content: url("../texturen/items-pixel/arenaBomb.png"); }
html.ui-pixel img[src*="texturen/items/arenaHealTonic.png"] { content: url("../texturen/items-pixel/arenaHealTonic.png"); }
html.ui-pixel img[src*="texturen/items/arenaSmoke.png"] { content: url("../texturen/items-pixel/arenaSmoke.png"); }
html.ui-pixel img[src*="texturen/items/arenaVoucher.png"] { content: url("../texturen/items-pixel/arenaVoucher.png"); }
html.ui-pixel img[src*="texturen/items/ascensionScroll.png"] { content: url("../texturen/items-pixel/ascensionScroll.png"); }
html.ui-pixel img[src*="texturen/items/buildingUpgradeVoucher.png"] { content: url("../texturen/items-pixel/buildingUpgradeVoucher.png"); }
html.ui-pixel img[src*="texturen/items/cakeAmbrosia.png"] { content: url("../texturen/items-pixel/cakeAmbrosia.png"); }
html.ui-pixel img[src*="texturen/items/cakeArenaSlice.png"] { content: url("../texturen/items-pixel/cakeArenaSlice.png"); }
html.ui-pixel img[src*="texturen/items/cakeDrumroll.png"] { content: url("../texturen/items-pixel/cakeDrumroll.png"); }
html.ui-pixel img[src*="texturen/items/cakeEmeraldGlaze.png"] { content: url("../texturen/items-pixel/cakeEmeraldGlaze.png"); }
html.ui-pixel img[src*="texturen/items/cakeHarvest.png"] { content: url("../texturen/items-pixel/cakeHarvest.png"); }
html.ui-pixel img[src*="texturen/items/cakeHoneypaw.png"] { content: url("../texturen/items-pixel/cakeHoneypaw.png"); }
html.ui-pixel img[src*="texturen/items/cakeInkwell.png"] { content: url("../texturen/items-pixel/cakeInkwell.png"); }
html.ui-pixel img[src*="texturen/items/cakeIronSpice.png"] { content: url("../texturen/items-pixel/cakeIronSpice.png"); }
html.ui-pixel img[src*="texturen/items/coronationMedal.png"] { content: url("../texturen/items-pixel/coronationMedal.png"); }
html.ui-pixel img[src*="texturen/items/courtGames30m.png"] { content: url("../texturen/items-pixel/courtGames30m.png"); }
html.ui-pixel img[src*="texturen/items/diceOfFate.png"] { content: url("../texturen/items-pixel/diceOfFate.png"); }
html.ui-pixel img[src*="texturen/items/divineGem.png"] { content: url("../texturen/items-pixel/divineGem.png"); }
html.ui-pixel img[src*="texturen/items/doubleProduction1h.png"] { content: url("../texturen/items-pixel/doubleProduction1h.png"); }
html.ui-pixel img[src*="texturen/items/doubleResearch1h.png"] { content: url("../texturen/items-pixel/doubleResearch1h.png"); }
html.ui-pixel img[src*="texturen/items/emeraldCatalyst.png"] { content: url("../texturen/items-pixel/emeraldCatalyst.png"); }
html.ui-pixel img[src*="texturen/items/emeraldPouch150.png"] { content: url("../texturen/items-pixel/emeraldPouch150.png"); }
html.ui-pixel img[src*="texturen/items/emeraldPouch50.png"] { content: url("../texturen/items-pixel/emeraldPouch50.png"); }
html.ui-pixel img[src*="texturen/items/emeraldPouch500.png"] { content: url("../texturen/items-pixel/emeraldPouch500.png"); }
html.ui-pixel img[src*="texturen/items/eventConfetti.png"] { content: url("../texturen/items-pixel/eventConfetti.png"); }
html.ui-pixel img[src*="texturen/items/gearRefineStone.png"] { content: url("../texturen/items-pixel/gearRefineStone.png"); }
html.ui-pixel img[src*="texturen/items/gearRerollDice.png"] { content: url("../texturen/items-pixel/gearRerollDice.png"); }
html.ui-pixel img[src*="texturen/items/goblinKingsCrown.png"] { content: url("../texturen/items-pixel/goblinKingsCrown.png"); }
html.ui-pixel img[src*="texturen/items/goblinKingsHoard.png"] { content: url("../texturen/items-pixel/goblinKingsHoard.png"); }
html.ui-pixel img[src*="texturen/items/goblinPouch.png"] { content: url("../texturen/items-pixel/goblinPouch.png"); }
html.ui-pixel img[src*="texturen/items/guildBattleCoin.png"] { content: url("../texturen/items-pixel/guildBattleCoin.png"); }
html.ui-pixel img[src*="texturen/items/hallowtideGearToken.png"] { content: url("../texturen/items-pixel/hallowtideGearToken.png"); }
html.ui-pixel img[src*="texturen/items/heroShardAGuaranteed.png"] { content: url("../texturen/items-pixel/heroShardAGuaranteed.png"); }
html.ui-pixel img[src*="texturen/items/heroShardAOrS.png"] { content: url("../texturen/items-pixel/heroShardAOrS.png"); }
html.ui-pixel img[src*="texturen/items/heroShardS.png"] { content: url("../texturen/items-pixel/heroShardS.png"); }
html.ui-pixel img[src*="texturen/items/legendaryWarChest.png"] { content: url("../texturen/items-pixel/legendaryWarChest.png"); }
html.ui-pixel img[src*="texturen/items/massRetreatHorn.png"] { content: url("../texturen/items-pixel/massRetreatHorn.png"); }
html.ui-pixel img[src*="texturen/items/newspaperPrinter.png"] { content: url("../texturen/items-pixel/newspaperPrinter.png"); }
html.ui-pixel img[src*="texturen/items/occupationBanner.png"] { content: url("../texturen/items-pixel/occupationBanner.png"); }
html.ui-pixel img[src*="texturen/items/pet7Shard.png"] { content: url("../texturen/items-pixel/pet7Shard.png"); }
html.ui-pixel img[src*="texturen/items/petFragment.png"] { content: url("../texturen/items-pixel/petFragment.png"); }
html.ui-pixel img[src*="texturen/items/petTreat.png"] { content: url("../texturen/items-pixel/petTreat.png"); }
html.ui-pixel img[src*="texturen/items/crownJewel.png"] { content: url("../texturen/items-pixel/crownJewel.png"); }
html.ui-pixel img[src*="texturen/items/protectionCharm24h.png"] { content: url("../texturen/items-pixel/protectionCharm24h.png"); }
html.ui-pixel img[src*="texturen/items/protectionCharm6h.png"] { content: url("../texturen/items-pixel/protectionCharm6h.png"); }
html.ui-pixel img[src*="texturen/items/randomHeroShard.png"] { content: url("../texturen/items-pixel/randomHeroShard.png"); }
html.ui-pixel img[src*="texturen/items/researchVoucher.png"] { content: url("../texturen/items-pixel/researchVoucher.png"); }
html.ui-pixel img[src*="texturen/items/resourceSkip1d.png"] { content: url("../texturen/items-pixel/resourceSkip1d.png"); }
html.ui-pixel img[src*="texturen/items/resourceSkip1h.png"] { content: url("../texturen/items-pixel/resourceSkip1h.png"); }
html.ui-pixel img[src*="texturen/items/retreatHorn.png"] { content: url("../texturen/items-pixel/retreatHorn.png"); }
html.ui-pixel img[src*="texturen/items/royalDecree.png"] { content: url("../texturen/items-pixel/royalDecree.png"); }
html.ui-pixel img[src*="texturen/items/royalTreasure.png"] { content: url("../texturen/items-pixel/royalTreasure.png"); }
html.ui-pixel img[src*="texturen/items/rustyKey.png"] { content: url("../texturen/items-pixel/rustyKey.png"); }
html.ui-pixel img[src*="texturen/items/siegePlan.png"] { content: url("../texturen/items-pixel/siegePlan.png"); }
html.ui-pixel img[src*="texturen/items/sigilCoin.png"] { content: url("../texturen/items-pixel/sigilCoin.png"); }
html.ui-pixel img[src*="texturen/items/summoningHorn.png"] { content: url("../texturen/items-pixel/summoningHorn.png"); }
html.ui-pixel img[src*="texturen/items/thiefMap.png"] { content: url("../texturen/items-pixel/thiefMap.png"); }
html.ui-pixel img[src*="texturen/items/werkstein.png"] { content: url("../texturen/items-pixel/werkstein.png"); }
html.ui-pixel img[src*="texturen/items/wornBoots.png"] { content: url("../texturen/items-pixel/wornBoots.png"); }
html.ui-pixel img[src*="texturen/items/zHeroChoiceChest.png"] { content: url("../texturen/items-pixel/zHeroChoiceChest.png"); }
html.ui-pixel img[src*="assets/events/icons/check.webp"] { content: url("../assets/events/icons-pixel/check.png"); }
html.ui-pixel img[src*="assets/events/icons/clock.webp"] { content: url("../assets/events/icons-pixel/clock.png"); }
html.ui-pixel img[src*="assets/events/icons/energy.webp"] { content: url("../assets/events/icons-pixel/energy.png"); }
html.ui-pixel img[src*="assets/events/icons/gear-refine-stone.webp"] { content: url("../assets/events/icons-pixel/gear-refine-stone.png"); }
html.ui-pixel img[src*="assets/events/icons/gear-reroll-dice.webp"] { content: url("../assets/events/icons-pixel/gear-reroll-dice.png"); }
html.ui-pixel img[src*="assets/events/icons/gift.webp"] { content: url("../assets/events/icons-pixel/gift.png"); }
html.ui-pixel img[src*="assets/events/icons/guild-coin.webp"] { content: url("../assets/events/icons-pixel/guild-coin.png"); }
html.ui-pixel img[src*="assets/events/icons/hallowtide-carved.webp"] { content: url("../assets/events/icons-pixel/hallowtide-carved.png"); }
html.ui-pixel img[src*="assets/events/icons/hallowtide-gourd.webp"] { content: url("../assets/events/icons-pixel/hallowtide-gourd.png"); }
html.ui-pixel img[src*="assets/events/icons/hallowtide-grinning.webp"] { content: url("../assets/events/icons-pixel/hallowtide-grinning.png"); }
html.ui-pixel img[src*="assets/events/icons/hallowtide-hollow-king.webp"] { content: url("../assets/events/icons-pixel/hallowtide-hollow-king.png"); }
html.ui-pixel img[src*="assets/events/icons/hallowtide-witchfire.webp"] { content: url("../assets/events/icons-pixel/hallowtide-witchfire.png"); }
html.ui-pixel img[src*="assets/events/icons/himmelsdrache.webp"] { content: url("../assets/events/icons-pixel/himmelsdrache.png"); }
html.ui-pixel img[src*="assets/events/icons/hoellendrache.webp"] { content: url("../assets/events/icons-pixel/hoellendrache.png"); }
html.ui-pixel img[src*="assets/events/icons/lock.webp"] { content: url("../assets/events/icons-pixel/lock.png"); }
html.ui-pixel img[src*="assets/events/icons/moril-caravan.webp"] { content: url("../assets/events/icons-pixel/moril-caravan.png"); }
html.ui-pixel img[src*="assets/events/icons/pet-fragment.webp"] { content: url("../assets/events/icons-pixel/pet-fragment.png"); }
html.ui-pixel img[src*="assets/events/icons/pet-paw.png"] { content: url("../assets/events/icons-pixel/pet-paw.png"); }
html.ui-pixel img[src*="assets/events/icons/pet-treat.webp"] { content: url("../assets/events/icons-pixel/pet-treat.png"); }
html.ui-pixel img[src*="assets/events/icons/pet7-shard.webp"] { content: url("../assets/events/icons-pixel/pet7-shard.png"); }
html.ui-pixel img[src*="assets/events/icons/plate-star8.webp"] { content: url("../assets/events/icons-pixel/plate-star8.png"); }
html.ui-pixel img[src*="assets/events/icons/sigil-bronze.webp"] { content: url("../assets/events/icons-pixel/sigil-bronze.png"); }
html.ui-pixel img[src*="assets/events/icons/sigil-crown.webp"] { content: url("../assets/events/icons-pixel/sigil-crown.png"); }
html.ui-pixel img[src*="assets/events/icons/sigil-emerald.webp"] { content: url("../assets/events/icons-pixel/sigil-emerald.png"); }
html.ui-pixel img[src*="assets/events/icons/sigil-gold.webp"] { content: url("../assets/events/icons-pixel/sigil-gold.png"); }
html.ui-pixel img[src*="assets/events/icons/sigil-silver.webp"] { content: url("../assets/events/icons-pixel/sigil-silver.png"); }
html.ui-pixel img[src*="assets/events/icons/skull.webp"] { content: url("../assets/events/icons-pixel/skull.png"); }
html.ui-pixel img[src*="assets/events/icons/trophy.webp"] { content: url("../assets/events/icons-pixel/trophy.png"); }
html.ui-pixel img[src*="assets/events/icons/xp.webp"] { content: url("../assets/events/icons-pixel/xp.png"); }
/* @end icon-swaps */

/* --- Brown panel sweep: flat brown boxes swapped for kit panels ---------------
   Found by a computed-style scan of every screen a local profile can open (keep
   tabs, ~30 menus and every building, each tab clicked): any box painted a flat
   dark-brown colour or gradient, translucent ones included, with no border-image.
   Three treatments, all painted inward over the existing border:
   - containers (menus, columns, section boxes, form rows): the sunken inset;
   - repeated cards: the sign-in tile, with its state language (gold = ready,
     selected or current, dim brass = next, sunken = locked);
   - stat tiles: the chip socket; value boxes beside a button: the plaque.
   Left alone on purpose: art wells (portraits, crests, emblems), rarity- and
   rank-coloured cards (gear tiles, hero showroom), currency pills, and the
   blocks other sessions own (queues, quest board, sign-in, premium shop). */
html.ui-pixel:not(#_) :is(.keep-side-menu, .rewards-daily-col, .rewards-xp-hero, .house-identity-block, .religion-panel, .social-dm-panel, .playtest-terms-body, .social-status-banner, .minigame-poster, .season-point-market-form-block, .harbor-exchange-chart, .capital-exchange-direction, .tavern-kitchen-drawer, .university-campus-panel, .trade-road-panel, .processed-resources-panel, .attack-menu-interface .settings-field, .treasury-interface .backpack-slot:not(.gear-tile), .tavern-larder-tile) {
  backdrop-filter: none;
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) .attack-menu-interface .settings-field {
  padding: 14px 16px;
}

/* The hospital's upgrade panel only wraps the (already sunken) upgrade section: no box in a box. */
html.ui-pixel:not(#_) .building-upgrade-panel {
  background: none;
  border-color: transparent;
  box-shadow: none;
}

html.ui-pixel:not(#_) .tavern-larder-tile.is-out {
  filter: grayscale(0.6) brightness(0.8);
}

html.ui-pixel:not(#_) .treasury-interface .backpack-slot:not(.gear-tile).is-selected {
  outline: 2px solid var(--gold-300);
  outline-offset: -2px;
}

html.ui-pixel:not(#_) :is(.login-reward-slot, .level-roadmap-slot-body, .avatar-shop-tile, .settings-menu-card, .unit-training-card, .market-order-card, .leaderboard-reward-tier, .house-crest-gallery-card, .policies-card, .minigame-shop-card, .minigame-schedule-tile, .religion-style-option, .god-worship-rite, .god-worship-supply-row, .weekly-event-roster-card, .memory-shop-track-card) {
  backdrop-filter: none;
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tile-wood.png") 30 fill / 30px round;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
  outline: none;
  padding: 16px 20px;
}

html.ui-pixel:not(#_) :is(.login-reward-slot, .level-roadmap-slot-body, .avatar-shop-tile, .settings-menu-card, .unit-training-card, .market-order-card, .leaderboard-reward-tier, .house-crest-gallery-card, .policies-card, .minigame-shop-card, .minigame-schedule-tile, .religion-style-option, .god-worship-rite, .god-worship-supply-row, .weekly-event-roster-card, .memory-shop-track-card) > * {
  image-rendering: auto;
}

/* Narrow tiles (95-151px) keep room for their art. */
html.ui-pixel:not(#_) :is(.avatar-shop-tile, .minigame-schedule-tile, .house-crest-gallery-card) {
  padding: 16px 14px;
}

html.ui-pixel:not(#_) :is(.login-reward-slot.is-claimable, .level-roadmap-slot.is-next .level-roadmap-slot-body, .avatar-shop-tile--active, .leaderboard-reward-tier.is-current, .house-crest-gallery-card.is-active, .policies-card.is-selected, .minigame-schedule-tile.is-today, .religion-style-option.is-active, .god-worship-rite.is-current, .weekly-event-roster-card.is-selected) {
  border-image-source: url("../texturen/ui/pixel/tile-gold.png");
}

html.ui-pixel:not(#_) .login-reward-slot.is-current.is-locked {
  border-image-source: url("../texturen/ui/pixel/tile-gold-dim.png");
}

html.ui-pixel:not(#_) :is(.login-reward-slot.is-locked:not(.is-current), .avatar-shop-tile--locked, .policies-card.is-locked, .minigame-shop-card.is-locked, .minigame-schedule-tile.is-locked, .god-worship-rite.is-locked, .memory-shop-track-card.is-disabled) {
  border-image-source: url("../texturen/ui/pixel/tile-locked.png");
}

html.ui-pixel:not(#_) :is(button.login-reward-slot.is-claimable, .settings-menu-card, .house-crest-gallery-card, .policies-card:not(.is-locked), .minigame-schedule-tile, .religion-style-option, .weekly-event-roster-card, .memory-shop-track-card:not(.is-disabled)):hover {
  background: none;
  filter: brightness(1.08);
}

/* Stat tiles and amount steppers get the Keep's chip socket. Two screens strip
   stat tiles to bare text (capital treasury ledger, world-map land card). */
html.ui-pixel:not(#_) :is(.castle-stat:not(.capital-treasury-ledger *, .land-interface *), .amount-stepper) {
  background: #2a1a17;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/chip.png") 6 / 6px stretch;
  border-radius: 3px;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
}

/* Cost and duration beside the Move button stretch to its height: a plaque, not an empty box. */
html.ui-pixel:not(#_) .building-move-controls .button-row .pill {
  align-items: center;
  background: none;
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/plaque-counter.png") 20 fill / 20px stretch;
  border-radius: 0;
  color: #f1e2c2;
  display: inline-flex;
  image-rendering: pixelated;
  padding: 0.35rem 1.1rem;
  text-shadow: 0 1px 0 #1a0b06;
}

/* The "What is this building for?" fold is one line tall: a wood strip, not a sunken box. */
html.ui-pixel:not(#_) .building-info-details {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tag-wood.png") 10 fill / 10px repeat;
  border-radius: 0;
  border-style: solid;
  image-rendering: pixelated;
  padding: 0.55rem 0.9rem;
}

/* --- Modal body: dark plank board instead of the flat --bg-panel fill ----------
   board.png (build_board in build-pixel-ui-kit.py). Specificity (0,2,0) to match
   .modal-panel:has(.keep-interface); hubs that paint their own stage colour (or
   none) are left out, and the building-work shell keeps its hall painting.
   Interface roots drop their own copy of the flat fill so the board shows; roots
   with their own art (minigame hub, demon shell, guild hall) are more specific. */
:where(html.ui-pixel) .modal-panel:not(:has(.building-work-interface, .emerald-well-card, .sprint-rankings-stage, .weekly-event-stage, .policies-stage, .gladiator-stage, .iap-hub-stage, .palace-stage)) {
  background: #1c1210 url("../texturen/ui/pixel/board.png") repeat;
}

:where(html.ui-pixel) .modal-panel .building-interface {
  background-color: transparent;
}

/* --- Pre-game stage (My Realms): kit panels over the throne-hall painting -------
   The realm and profile columns float on the art, so they get the iron-cornered
   card (86px corners paint inward; its wood and iron reach 35px in, so the padding
   keeps text off them). The tab
   bar and the account bar are one-line strips: the HUD name card's wood tag.
   The hero nameplate is the gold tile; profile rows use the sign-in tiles
   (gold = the selected profile); "Create profile" is an empty, sunken slot. */
html.ui-pixel:not(#_) .profile-stage-side {
  backdrop-filter: none;
  background: none;
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/card.png") 86 fill / 86px stretch;
  border-radius: 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  image-rendering: pixelated;
  padding: 36px 28px 32px;
}

html.ui-pixel:not(#_) :is(.profile-stage-side, .profile-stage-plate, .profile-roster-row) > * {
  image-rendering: auto;
}

html.ui-pixel:not(#_) :is(.profile-screen-tabs, .account-menu-card) {
  backdrop-filter: none;
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tag-wood.png") 10 fill / 10px repeat;
  border-radius: 0;
  border-style: solid;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) .profile-stage-plate {
  backdrop-filter: none;
  background: none;
  border: 1px solid transparent;
  border-image: url("../texturen/ui/pixel/tile-gold.png") 30 fill / 30px round;
  border-radius: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  image-rendering: pixelated;
  padding: 18px 30px 20px;
}

html.ui-pixel:not(#_) .profile-roster-row {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tile-wood.png") 30 fill / 30px round;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
  padding: 6px 6px 6px 10px;
}

html.ui-pixel:not(#_) .profile-roster-row.is-selected {
  border-image-source: url("../texturen/ui/pixel/tile-gold.png");
}

html.ui-pixel:not(#_) .profile-roster-row:not(.is-selected):hover {
  background: none;
  filter: brightness(1.08);
}

html.ui-pixel:not(#_) .profile-create-card {
  backdrop-filter: none;
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  border-style: solid;
  image-rendering: pixelated;
}

/* Framed pre-game panels (sign-in, manage profiles) and the create-profile wizard
   take the modal body's plank board. The wizard scrolls itself, so like the shell
   panel it wears the frame as its own border. */
html.ui-pixel:not(#_) .profile-create-wizard-card {
  border: 23px solid transparent;
  border-image: url("../texturen/ui/pixel/frame.png") 74 / 74px stretch;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) :is(.profile-shell-panel, .profile-create-wizard-card) {
  background: #1c1210 url("../texturen/ui/pixel/board.png") repeat;
  background-clip: padding-box;
}

html.ui-pixel:not(#_) .profile-create-wizard-card > * {
  image-rendering: auto;
}

html.ui-pixel:not(#_) :is(.profile-realm-card, .profile-race-card, .admin-server-population-card, .admin-profile-result) {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/tile-wood.png") 30 fill / 30px round;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
  padding: 16px 18px;
}

html.ui-pixel:not(#_) :is(.profile-realm-card, .profile-race-card, .admin-server-population-card, .admin-profile-result) > * {
  image-rendering: auto;
}

html.ui-pixel:not(#_) :is(.profile-race-card.is-selected, .admin-profile-result.is-selected) {
  border-image-source: url("../texturen/ui/pixel/tile-gold.png");
}

html.ui-pixel:not(#_) :is(.profile-realm-card:is(.is-closed, .is-full), .profile-race-card:disabled) {
  border-image-source: url("../texturen/ui/pixel/tile-locked.png");
}

html.ui-pixel:not(#_) :is(.profile-realm-card, .profile-race-card:not(:disabled), .admin-profile-result):hover {
  background: none;
  filter: brightness(1.08);
}

html.ui-pixel:not(#_) :is(.admin-world-server-panel, .admin-server-tools, .admin-profile-browser-list, .admin-profile-browser-detail) {
  background: none;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
}

/* Phones: the card's 35px of wood and iron cost the profile list a row, so the
   side columns drop to the slimmer sunken inset (like plank tabs drop to chips). */
html.ui-pixel.is-mobile-client:not(#_) .profile-stage-side {
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  padding: 20px 18px;
}

/* --- Rift stage (renderSeasonRiftStage) ---------------------------------------
   The panel is the inset, the art sits in a wood tile (the gold tile for world
   bosses) at an exact 2x of its 128px source, the name on a wood tag, the stage
   label and stat tiles on the chip socket. :not(#_) because the world-map
   castle-card and the hub sheet rules reset `border`. */
html.ui-pixel:not(#_) .season-rift-stage {
  background: none;
  border: 12px solid transparent;
  border-image: url("../texturen/ui/pixel/inset.png") 21 24 fill / 21px 24px stretch;
  border-radius: 0;
  image-rendering: pixelated;
  padding: 0.4rem 0.6rem;
}

html.ui-pixel:not(#_) .season-rift-stage-art {
  background: none;
  border: 0 solid transparent;
  border-image: url("../texturen/ui/pixel/tile-wood.png") 30 fill / 30px stretch;
  padding: 18px;
  width: calc(256px + 36px);
}

html.ui-pixel:not(#_) .season-rift-stage.is-boss .season-rift-stage-art {
  border-image-source: url("../texturen/ui/pixel/tile-gold.png");
}

html.ui-pixel:not(#_) :is(.season-rift-stage-tag, .season-rift-stage-facts .castle-stat) {
  background: #2a1a17;
  border-color: transparent;
  border-image: url("../texturen/ui/pixel/chip.png") 6 / 6px stretch;
  border-radius: 3px;
  border-style: solid;
  box-shadow: none;
  image-rendering: pixelated;
}

html.ui-pixel:not(#_) .season-rift-stage-tag {
  border-width: 6px;
  bottom: 10px;
  padding: 0 0.4rem;
  text-shadow: 0 1px 0 #1a0b06;
}

html.ui-pixel:not(#_) .season-rift-stage-plate {
  border: 0 solid transparent;
  border-image: url("../texturen/ui/pixel/tag-wood.png") 10 fill / 10px repeat;
  padding: 0.45rem 0.85rem 0.5rem;
  text-shadow: 0 1px 0 #1a0b06;
}

html.ui-pixel:not(#_) .season-rift-stage-title {
  color: #f6e3b4;
}

/* Villain art sits in the faction frame (74px corners drawn at 32px) instead of
   the wood tile; the image keeps smooth scaling since it is shown at 1:1 or less. */
html.ui-pixel:not(#_) .season-rift-stage.has-villain .season-rift-stage-art {
  border-image: url("../texturen/ui/pixel/frame-demon.png") 74 / 32px stretch;
  max-width: calc(512px + 22px);
  padding: 11px;
  width: 100%;
}

html.ui-pixel:not(#_) .season-rift-stage.has-villain .season-rift-stage-tag {
  bottom: auto;
  right: 16px;
  top: 16px;
}

html.ui-pixel:not(#_) .season-rift-stage--heaven.has-villain .season-rift-stage-art {
  border-image-source: url("../texturen/ui/pixel/frame-heaven.png");
}

html.ui-pixel:not(#_) .season-rift-stage.has-villain .season-rift-stage-plate {
  border-image: url("../texturen/ui/pixel/plaque-red.png") 20 fill / 20px repeat;
  padding: 0.55rem 1.4rem 0.6rem;
}

html.ui-pixel:not(#_) .season-rift-stage--heaven.has-villain .season-rift-stage-plate {
  border-image-source: url("../texturen/ui/pixel/plaque.png");
}