:root {
  --ink: #4a3828;
  --muted: #7d705d;
  --paper: #fff9e8;
  --panel: #f8efd2;
  --panel-strong: #ead091;
  --line: #b88a45;
  --line-dark: #77522e;
  --grass: #a9d978;
  --grass-dark: #78b463;
  --soil: #c98c59;
  --soil-dark: #8c5b3b;
  --water: #75c7d6;
  --gold: #f2b94b;
  --gold-light: #ffe08a;
  --mint: #dcefc4;
  --peach: #f4c08c;
  --plum: #8d6389;
  --cream: #fff1bd;
  --cream-soft: #fffdf1;
  --leaf: #5c9b53;
  --berry: #d66576;
  --sky: #dff4ee;
  --sidebar: #e5c983;
  --scene-grass: #93c46c;
  --scene-shadow: rgba(32, 54, 25, 0.26);
  --dock: rgba(255, 248, 224, 0.84);
  --dock-line: rgba(100, 74, 42, 0.28);
  --ticket: #fff4cf;
  --ledger: #f4ead3;
  --wood: #7a5431;
  --wood-dark: #4f341f;
  --action-primary: #e7a83d;
  --action-secondary: #d7bc7a;
  --action-quiet: #eadfbe;
  --action-danger: #b96a55;
  --surface-ledger: #f5e7c2;
  --surface-ticket: #fff2c8;
  --shadow: rgba(64, 45, 24, 0.16);
  --soft-shadow: 0 8px 0 rgba(64, 45, 24, 0.07), 0 16px 28px rgba(64, 45, 24, 0.11);
  --pixel-shadow: 0 3px 0 rgba(83, 54, 26, 0.22);
  --lock-icon-image: url("assets/ui/pixel-lock.png");
  font-family: Nunito, "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 8%, rgba(255, 235, 154, 0.42), transparent 22rem),
    radial-gradient(circle at 86% 4%, rgba(117, 199, 214, 0.26), transparent 24rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%) 0 0 / 34px 34px,
    linear-gradient(180deg, #cfe8a2 0%, #b8d879 48%, #d7bd75 100%);
  min-height: 100vh;
  overflow-x: clip;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 1px solid rgba(113, 82, 44, 0.24);
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(230, 202, 132, 0.82)),
    #d9b76b;
  box-shadow: inset 0 -3px rgba(84, 55, 25, 0.18), var(--pixel-shadow);
  cursor: pointer;
  font-weight: 800;
  min-height: 44px;
  padding: 8px 12px;
  touch-action: manipulation;
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

button:active {
  transform: translateY(1px);
  box-shadow: inset 0 -1px rgba(125, 79, 22, 0.18), 0 1px 0 rgba(116, 75, 30, 0.16);
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(117, 199, 214, 0.78);
  outline-offset: 2px;
}

textarea:focus-visible {
  outline: 3px solid rgba(117, 199, 214, 0.78);
  outline-offset: 2px;
}

button:disabled {
  border-color: rgba(118, 96, 68, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(202, 188, 152, 0.46)),
    #ded2b1;
  color: rgba(82, 68, 47, 0.68);
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
  box-shadow: inset 0 -2px rgba(84, 55, 25, 0.08);
}

button[data-action="add-recycle-box"],
button[data-action="return-recycle-box"],
button[data-action="tab"] {
  background: #ead8a8;
  box-shadow: inset 0 -2px rgba(125, 79, 22, 0.12);
  color: #6a5435;
}

button[data-action="buy"],
button[data-action="start"],
button[data-action="upgrade"],
button[data-action="order"],
button[data-action="research"],
button[data-action="storage"] {
  border-color: rgba(145, 91, 25, 0.28);
}

button[data-action="start"],
button[data-action="upgrade"],
button[data-action="order"],
button[data-action="claim-town-goal"],
button[data-action="start-research"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(212, 139, 37, 0.86)),
    var(--action-primary);
  color: #4b2f18;
}

button[data-action="abandon-order"],
button[data-action="cancel-research"],
button[data-action="cancel-player-order"] {
  border-color: rgba(141, 73, 56, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(163, 82, 66, 0.74)),
    var(--action-danger);
  color: #fff8df;
  text-shadow: 0 1px 0 rgba(74, 39, 32, 0.38);
}

button[data-action="add-recycle-box"],
button[data-action="return-recycle-box"],
button[data-action="reload-player-market"],
button[data-action="track-order"],
button[data-action="copy-player-id"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(203, 181, 127, 0.72)),
    var(--action-secondary);
}

button:is(
  [data-action="add-recycle-box"],
  [data-action="return-recycle-box"],
  [data-action="player-sell"],
  [data-action="player-buy"],
  [data-action="player-take-order"],
  [data-action="cancel-player-order"],
  [data-action="reload-player-market"],
  [data-action="order"],
  [data-action="track-order"],
  [data-action="abandon-order"],
  [data-action="contract"],
  [data-action="start-research"],
  [data-action="cancel-research"],
  [data-action="reset-research"],
  [data-action="storage"],
  [data-action="advance-day"],
  [data-action="copy-player-id"]
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

button:is(
  [data-action="add-recycle-box"],
  [data-action="return-recycle-box"],
  [data-action="player-sell"],
  [data-action="player-buy"],
  [data-action="player-take-order"],
  [data-action="cancel-player-order"],
  [data-action="reload-player-market"],
  [data-action="order"],
  [data-action="track-order"],
  [data-action="abandon-order"],
  [data-action="contract"],
  [data-action="start-research"],
  [data-action="cancel-research"],
  [data-action="reset-research"],
  [data-action="storage"],
  [data-action="advance-day"],
  [data-action="copy-player-id"]
)::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(91, 61, 34, 0.18);
  border-radius: 7px;
  background-color: rgba(255, 250, 225, 0.64);
  background-image: var(--action-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  box-shadow: inset 0 -1px rgba(83, 54, 26, 0.1);
  image-rendering: pixelated;
}

button[data-action="add-recycle-box"],
button[data-action="return-recycle-box"],
button[data-action="storage"] {
  --action-icon: url("assets/ui/nav-storage.png");
}

button[data-action="player-sell"],
button[data-action="player-buy"],
button[data-action="player-take-order"],
button[data-action="cancel-player-order"],
button[data-action="reload-player-market"] {
  --action-icon: url("assets/ui/nav-market.png");
}

button[data-action="order"],
button[data-action="track-order"],
button[data-action="abandon-order"] {
  --action-icon: url("assets/ui/nav-orders.png");
}

button[data-action="contract"] {
  --action-icon: url("assets/ui/nav-bulletin.png");
}

button[data-action="copy-player-id"] {
  --action-icon: url("assets/ui/nav-bulletin.png");
}

button[data-action="start-research"],
button[data-action="cancel-research"],
button[data-action="reset-research"] {
  --action-icon: url("assets/ui/nav-research.png");
}

button[data-action="advance-day"] {
  --action-icon: url("assets/ui/nav-economy.png");
}

button:disabled::before {
  opacity: 0.55;
  filter: grayscale(0.35);
}

img {
  display: block;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.shell {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  padding: 0;
  overflow-x: hidden;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 56px;
  border-bottom: 2px solid rgba(159, 112, 52, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 246, 214, 0.9)),
    rgba(255, 248, 224, 0.96);
  box-shadow: 0 8px 20px rgba(98, 67, 31, 0.08);
  padding: 8px 16px;
}

.topbar:has(.personal-message-center.is-open) {
  z-index: 1200;
}

.nav-brand-logo,
.brand-logo-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.nav-brand-logo:hover,
.brand-logo-button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.nav-brand-logo img,
.brand-logo-button img {
  width: 156px;
  max-width: 34vw;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.nav-brand-logo {
  align-self: center;
  margin-right: 8px;
}

.brand,
.panel,
.farm-stage {
  min-width: 0;
  border: 2px solid rgba(126, 91, 49, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(246, 235, 201, 0.82)),
    rgba(250, 242, 218, 0.94);
  box-shadow: 0 6px 0 rgba(64, 45, 24, 0.06), 0 12px 24px rgba(64, 45, 24, 0.08), 0 2px 0 rgba(255, 255, 255, 0.44) inset;
}

.sidebar {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 12px;
  min-height: 100vh;
  border-right: 2px solid rgba(164, 116, 55, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 250, 224, 0.88), rgba(240, 211, 151, 0.92)),
    var(--sidebar);
  box-shadow: 10px 0 26px rgba(98, 67, 31, 0.08);
  padding: 14px 14px 18px;
}

.sidebar > .profile-card {
  display: none;
}

.app-main {
  min-width: 0;
}

.is-home {
  display: block;
  min-height: 100vh;
  padding-bottom: 0;
}

.is-home .shell {
  background: none;
}

.is-home .sidebar {
  display: none;
}

.is-home .app-main {
  min-height: 100vh;
}

.is-home .topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  min-height: 72px;
  transform: none;
  border: 0;
  border-bottom: 2px solid rgba(151, 106, 48, 0.28);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(224, 244, 174, 0.88), rgba(169, 211, 112, 0.86)),
    #b7d879;
  box-shadow: 0 8px 18px rgba(71, 55, 30, 0.1);
  padding: 8px 18px;
}

.is-home .nav-brand-logo img {
  width: 176px;
  max-width: 32vw;
}

.home-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 348px);
  grid-template-areas:
    "stage hud"
    "stage dock";
  align-items: start;
  gap: 12px;
  min-height: 100vh;
  padding: 96px 14px 12px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 239, 162, 0.24), transparent 28rem),
    linear-gradient(180deg, rgba(245, 232, 180, 0.18), rgba(79, 117, 58, 0.16)),
    var(--scene-grass);
}

.home-stage {
  grid-area: stage;
  min-width: 0;
}

.home-hud {
  grid-area: hud;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.home-dock {
  grid-area: dock;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.is-home .home-hud .panel,
.is-home .home-dock .panel {
  border-color: var(--dock-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(240, 224, 178, 0.58)),
    var(--dock);
  box-shadow: 0 5px 0 rgba(64, 45, 24, 0.08), 0 12px 24px rgba(64, 45, 24, 0.1);
}

.is-home .home-hud .panel::before,
.is-home .home-dock .panel::before {
  opacity: 0.12;
}

.is-home .farm-stage {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 8px;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.is-home .farm-map {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}

.is-home .bottom-nav {
  position: static;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: none;
  margin: 0;
  border-color: rgba(89, 61, 35, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(121, 80, 42, 0.18)),
    #8b6138;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.2), 0 6px 0 rgba(64, 42, 23, 0.16);
  padding: 6px;
}

.is-home .goals-panel,
.is-home .summary-panel {
  display: none;
}

.is-home .bottom-nav button {
  min-height: 54px;
  font-size: 11px;
  padding: 5px 3px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.74), rgba(255, 246, 212, 0.92)),
    var(--panel);
}

.brand-logo-button img {
  width: 178px;
  max-width: 100%;
}

.brand > button {
  flex: 0 0 auto;
}

.brand-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid #aac76e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.72), transparent 38%),
    #e9f4bf;
  box-shadow: 0 3px 0 rgba(101, 128, 60, 0.24);
  overflow: hidden;
}

.brand-mark img {
  width: 132px;
  image-rendering: pixelated;
}

.brand-copy {
  min-width: 0;
}

h1 {
  font-size: 24px;
  line-height: 0.96;
  letter-spacing: 0;
}

.profile-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 2px solid rgba(163, 119, 58, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 242, 194, 0.62)),
    #ffe7ac;
  box-shadow: 0 3px 0 rgba(123, 83, 35, 0.1);
  padding: 10px;
}

.profile-card span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid #8dc083;
  border-radius: 8px;
  background: #eef8d5;
  overflow: hidden;
}

.profile-avatar img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  image-rendering: auto;
}

.side-nav,
.side-wallet {
  display: grid;
  gap: 6px;
  align-content: start;
}

.side-nav {
  padding-bottom: 8px;
}

.sidebar-nav-tools {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.sidebar-nav-tools button {
  min-height: 30px;
  border-color: rgba(118, 85, 43, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent),
    #ecd89f;
  color: #6a5435;
  font-size: 12px;
  padding: 4px 10px;
}

.sidebar-nav-tools button.active {
  border-color: rgba(82, 129, 72, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent),
    #dcefae;
  color: #3f6a37;
}

.side-nav-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border-color: rgba(137, 100, 54, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 238, 188, 0.42)),
    #f7dfa6;
  box-shadow: inset 0 -2px rgba(125, 79, 22, 0.08);
  color: #6a5435;
  font-size: 14px;
  text-align: left;
  padding: 5px 9px;
}

.side-nav.is-editing .side-nav-item {
  grid-template-columns: 14px 30px minmax(0, 1fr) auto;
  cursor: grab;
}

.side-nav.is-editing .side-nav-item:active {
  cursor: grabbing;
}

.side-nav-item.is-dragging {
  opacity: 0.58;
}

.side-nav-item.is-hidden {
  opacity: 0.58;
  filter: saturate(0.78);
}

.side-nav-item.is-hidden .nav-icon {
  opacity: 0.7;
}

.drag-handle {
  width: 12px;
  height: 22px;
  border-radius: 5px;
  background-image: radial-gradient(circle, rgba(107, 83, 49, 0.62) 2px, transparent 2px);
  background-position: 1px 2px;
  background-size: 7px 7px;
}

.nav-visibility {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 26px;
  border: 1px solid rgba(99, 73, 42, 0.22);
  border-radius: 7px;
  background: rgba(255, 250, 225, 0.56);
  color: #6a5435;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 -1px rgba(83, 54, 26, 0.1);
  cursor: pointer;
}

.side-nav-item.is-hidden .nav-visibility {
  border-color: rgba(94, 128, 75, 0.34);
  background: rgba(220, 239, 196, 0.74);
  color: #3f6a37;
}

.side-nav-item.active {
  border-color: rgba(95, 138, 75, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent),
    #dff1b8;
  color: #3f6a37;
}

.nav-icon {
  display: grid;
  place-items: center;
  position: relative;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(154, 117, 63, 0.4);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 212, 0.86)),
    #fff8df;
  box-shadow:
    inset 0 -2px rgba(129, 89, 43, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.65);
  overflow: hidden;
}

.nav-icon::before,
.nav-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  image-rendering: pixelated;
}

.nav-icon::before {
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}

.nav-icon::after {
  display: none;
}

.nav-icon[data-nav-icon="town"]::before {
  background-image: url("assets/ui/nav-town.png");
}

.nav-icon[data-nav-icon="orders"]::before {
  background-image: url("assets/ui/nav-orders.png");
}

.nav-icon[data-nav-icon="market"]::before {
  background-image: url("assets/ui/nav-market.png");
}

.nav-icon[data-nav-icon="research"]::before {
  background-image: url("assets/ui/nav-research.png");
}

.nav-icon[data-nav-icon="building"]::before {
  background-image: url("assets/ui/nav-building.png");
}

.nav-icon[data-nav-icon="storage"]::before {
  background-image: url("assets/ui/nav-storage.png");
}

.nav-icon[data-nav-icon="prestige"]::before {
  background-image: url("assets/ui/nav-prestige.png");
}

.nav-icon[data-nav-icon="guide"]::before {
  background-image: url("assets/ui/nav-guide.png");
}

.nav-icon[data-nav-icon="economy"]::before {
  background-image: url("assets/ui/nav-economy.png");
}

.nav-icon[data-nav-icon="bulletin"]::before {
  background-image: url("assets/ui/nav-bulletin.png");
}

.nav-icon[data-nav-icon="pet"]::before {
  background-image: url("assets/generated-icons/egg-q0.png");
}

.nav-badge,
.bulletin-entry span {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  border-radius: 999px;
  background: #b95f48;
  color: #fff8df;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.nav-red-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border-radius: 999px;
  background: #d84f35;
  box-shadow: 0 0 0 2px rgba(255, 248, 224, 0.9);
  flex: 0 0 auto;
}

.bulletin-entry {
  gap: 5px;
}

.world-strip,
.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.world-strip {
  flex: 999 1 680px;
  scrollbar-width: none;
  overflow-x: auto;
}

.tools-panel {
  --tool-wood: #6f4b2a;
  --tool-ink: #332616;
  --tool-muted: #765e43;
  --tool-parchment: #fff3d1;
  --tool-surface: rgba(255, 248, 222, 0.92);
  --tool-green: #51784a;
  --tool-slate: #3f4850;
  display: grid;
  gap: 14px;
}

.tool-hero {
  min-height: 206px;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 360px);
  align-items: end;
  gap: 18px;
  border: 1px solid rgba(67, 48, 28, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(38, 25, 14, 0.78), rgba(63, 43, 24, 0.26) 44%, rgba(38, 25, 14, 0.7)),
    url("assets/generated-icons/tools/toolbox-workshop-banner.png") center / cover no-repeat;
  color: #fff8df;
  box-shadow: inset 0 -42px 60px rgba(22, 14, 8, 0.36), 0 3px 0 rgba(75, 51, 27, 0.16);
  overflow: hidden;
}

.tool-hero-copy {
  max-width: 540px;
  display: grid;
  gap: 7px;
  text-shadow: 0 2px 0 rgba(26, 16, 8, 0.34);
}

.tool-hero-copy h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
}

.tool-hero-copy p {
  max-width: 36rem;
  margin: 0;
  color: rgba(255, 248, 223, 0.9);
}

.tool-page-tabs {
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid rgba(255, 232, 175, 0.28);
  border-radius: 8px;
  background: rgba(31, 22, 13, 0.54);
  backdrop-filter: blur(2px);
}

.tool-page-tab {
  min-height: 58px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 244, 210, 0.12);
  color: #fff8df;
  text-align: left;
  touch-action: manipulation;
}

.tool-page-tab-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 234, 180, 0.22);
  border-radius: 8px;
  background: rgba(255, 248, 221, 0.18);
  overflow: hidden;
}

.tool-page-tab-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-page-tab-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.1;
}

.tool-page-tab strong,
.tool-page-tab small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-page-tab strong {
  font-size: 15px;
  font-weight: 950;
}

.tool-page-tab small {
  color: rgba(255, 242, 205, 0.72);
  font-size: 11px;
  font-weight: 850;
}

.tool-page-tab.active {
  border-color: rgba(255, 227, 155, 0.58);
  background: linear-gradient(180deg, rgba(255, 238, 184, 0.95), rgba(201, 147, 72, 0.92));
  color: #3b2815;
  box-shadow: 0 3px 0 rgba(31, 20, 11, 0.28);
}

.tool-page-tab.active .tool-page-tab-icon {
  border-color: rgba(92, 61, 25, 0.22);
  background: rgba(255, 250, 231, 0.52);
}

.tool-page-tab.active small {
  color: rgba(61, 42, 24, 0.72);
}

.tool-resource-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.tool-resource-chip {
  min-height: 56px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(83, 64, 39, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(237, 224, 185, 0.84)),
    #efe0b7;
  color: var(--tool-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.tool-resource-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}

.tool-resource-icon img {
  width: 42px;
  height: 42px;
  image-rendering: pixelated;
}

.tool-resource-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.tool-resource-chip strong {
  color: rgba(51, 38, 22, 0.78);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-resource-chip small {
  font-size: 17px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.tool-equipment-layout,
.tool-forge-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.86fr) minmax(280px, 1fr) minmax(320px, 1.12fr);
  gap: 12px;
  align-items: start;
}

.tool-forge-layout {
  grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.68fr);
}

.tool-manufacture-layout {
  display: grid;
  gap: 12px;
  align-items: start;
}

.tool-sell-panel {
  grid-column: 1 / -1;
}

.tool-surface {
  min-width: 0;
  padding: 13px;
  display: grid;
  gap: 11px;
  border: 1px solid rgba(87, 62, 34, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.94), rgba(232, 216, 178, 0.94)),
    #ead8ac;
  box-shadow: 0 3px 0 rgba(95, 65, 34, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.tool-surface-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.tool-surface-head h3 {
  margin: 0;
  color: var(--tool-ink);
  font-size: 16px;
}

.tool-modify-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tool-enhance-help-button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.tool-surface-head .secondary {
  min-height: 38px;
  white-space: nowrap;
}

.tool-building-list,
.tool-list,
.tool-forge-list {
  display: grid;
  gap: 9px;
}

.tool-building-list,
.tool-list {
  max-height: 560px;
  overflow: auto;
  scrollbar-width: thin;
}

.tool-building-card {
  min-height: 86px;
  padding: 8px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(83, 64, 39, 0.2);
  border-radius: 8px;
  background: rgba(255, 248, 226, 0.72);
  color: var(--tool-ink);
  text-align: left;
  touch-action: manipulation;
}

.tool-building-card.active {
  border-color: rgba(73, 116, 67, 0.56);
  background:
    linear-gradient(180deg, rgba(239, 250, 217, 0.95), rgba(186, 213, 150, 0.86)),
    #cfdfaa;
  box-shadow: inset 0 0 0 2px rgba(72, 111, 66, 0.14), 0 2px 0 rgba(77, 91, 48, 0.14);
}

.tool-building-art {
  width: 72px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  overflow: hidden;
}

.tool-building-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tool-building-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.tool-building-copy strong,
.tool-building-copy small,
.tool-building-copy em {
  overflow-wrap: anywhere;
}

.tool-building-copy small {
  color: rgba(51, 38, 22, 0.64);
}

.tool-building-copy em {
  color: var(--tool-green);
  font-style: normal;
  font-weight: 800;
}

.tool-current-slot {
  min-height: 58px;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  border: 1px dashed rgba(83, 64, 39, 0.34);
  border-radius: 8px;
  background: rgba(255, 252, 239, 0.62);
}

.tool-current-slot span {
  color: rgba(51, 38, 22, 0.62);
  font-size: 12px;
}

.tool-current-slot strong {
  color: var(--tool-ink);
  overflow-wrap: anywhere;
}

.tool-filter-shell {
  display: grid;
  gap: 8px;
}

.tool-filter-summary {
  min-height: 42px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px dashed rgba(91, 68, 39, 0.22);
  border-radius: 8px;
  background: rgba(255, 252, 239, 0.54);
}

.tool-filter-summary strong {
  min-width: 0;
  color: var(--tool-ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.tool-filter-summary button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 12px;
}

.tool-inventory-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.tool-control-group {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tool-control-group > span {
  color: rgba(51, 38, 22, 0.62);
  font-size: 11px;
  font-weight: 900;
}

.tool-control-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-control-group > .tool-filter-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 5px 8px;
}

.tool-filter-check {
  min-width: 0;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(51, 38, 22, 0.82);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.tool-filter-check input {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  accent-color: #4f7d42;
}

.tool-filter-check span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-control-group button {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 12px;
}

.tool-control-group button.active {
  border-color: rgba(67, 116, 62, 0.46);
  background: rgba(230, 246, 207, 0.88);
  color: #315b2b;
}

.tool-bulk-bar {
  min-height: 44px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px dashed rgba(91, 68, 39, 0.28);
  border-radius: 8px;
  background: rgba(255, 252, 239, 0.62);
}

.tool-bulk-bar span {
  color: var(--tool-ink);
  font-size: 12px;
  font-weight: 900;
}

.tool-bulk-bar div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-bulk-bar button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 12px;
}

.tool-target-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 8px;
}

.tool-target-option {
  min-height: 58px;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  font-size: 12px;
  text-align: left;
  touch-action: manipulation;
}

.tool-option-icon,
.tool-card-icon,
.tool-detail-icon,
.building-tool-icon,
.tool-forge-target-icon {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(111, 77, 35, 0.22);
  border-radius: 8px;
  background: rgba(255, 252, 238, 0.76);
  overflow: hidden;
  flex: 0 0 auto;
}

.tool-option-icon img,
.tool-card-icon img,
.tool-detail-icon img,
.building-tool-icon img,
.tool-forge-target-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.tool-target-option strong,
.tool-target-option small {
  display: block;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tool-target-option small {
  color: rgba(95, 68, 40, 0.62);
}

.tool-target-option.active {
  border-color: rgba(67, 116, 62, 0.46);
  background: linear-gradient(180deg, rgba(232, 250, 204, 0.95), rgba(152, 199, 126, 0.9)), #a4c986;
  color: #2f5429;
  box-shadow: inset 0 0 0 2px rgba(48, 83, 41, 0.12);
}

.tool-forge-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-forge-card {
  min-height: 188px;
  padding: 12px;
  display: grid;
  align-content: space-between;
  gap: 9px;
  border: 1px solid rgba(84, 60, 33, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 251, 234, 0.88), rgba(226, 210, 172, 0.86)),
    #e8d4a4;
}

.tool-forge-card.focused {
  border-color: rgba(68, 99, 140, 0.28);
  background: linear-gradient(180deg, rgba(235, 244, 255, 0.72), rgba(215, 222, 207, 0.86)), #dfd8b6;
}

.tool-forge-card.premium {
  border-color: rgba(177, 104, 39, 0.34);
  background: linear-gradient(180deg, rgba(255, 240, 196, 0.9), rgba(223, 190, 126, 0.84)), #e1c17d;
}

.tool-forge-card-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.tool-forge-target-icon {
  width: 48px;
  height: 48px;
}

.tool-forge-card strong,
.tool-forge-card small,
.tool-forge-odds {
  overflow-wrap: anywhere;
}

.tool-forge-card small {
  display: block;
  color: rgba(51, 38, 22, 0.64);
}

.tool-forge-odds {
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255, 252, 239, 0.68);
  color: var(--tool-slate);
  font-size: 12px;
  line-height: 1.35;
}

.tool-card {
  position: relative;
  min-height: 86px;
  padding: 10px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--quality) 72%, rgba(125, 91, 45, 0.24));
  border-left: 6px solid var(--quality);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(245, 232, 195, 0.86)),
    #f2dfb1;
  color: var(--tool-ink);
  text-align: left;
  touch-action: manipulation;
}

.tool-owned-rack .tool-list,
.tool-forge-inventory .tool-list {
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  align-items: start;
}

.tool-owned-rack .tool-card,
.tool-forge-inventory .tool-card {
  min-height: 0;
  width: 100%;
  aspect-ratio: 1;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  border-width: 2px;
  border-left: 6px solid var(--quality);
  text-align: center;
}

.tool-owned-rack .tool-list > :is(.empty-state),
.tool-forge-inventory .tool-list > :is(.empty-state) {
  grid-column: 1 / -1;
  min-height: 128px;
  align-content: center;
}

.tool-owned-rack .tool-card .tool-card-icon,
.tool-forge-inventory .tool-card .tool-card-icon {
  width: min(46px, 70%);
  height: min(46px, 70%);
}

.tool-owned-rack .tool-card-body,
.tool-forge-inventory .tool-card-body {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tool-card-select {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(51, 38, 22, 0.38);
  border-radius: 5px;
  background: rgba(255, 252, 239, 0.86);
  color: #2f5429;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.tool-card-select.checked {
  border-color: color-mix(in srgb, var(--quality) 74%, #2f5429);
  background: color-mix(in srgb, var(--quality) 36%, #fffceb);
}

.tool-card.equipped::after {
  content: "已装备";
  position: absolute;
  left: 5px;
  bottom: 5px;
  min-width: 42px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(49, 91, 43, 0.88);
  color: #fff8df;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.tool-card-enhance {
  display: none;
}

.tool-owned-rack .tool-card .tool-card-enhance,
.tool-forge-inventory .tool-card .tool-card-enhance {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  display: inline-grid;
  min-width: 25px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(255, 252, 239, 0.94);
  color: #7b4d24;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(87, 62, 34, 0.16);
}

.tool-owned-rack .tool-card em,
.tool-forge-inventory .tool-card em {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(255, 252, 239, 0.9);
  box-shadow: 0 0 0 1px rgba(87, 62, 34, 0.16);
}

.tool-card.artisan,
.tool-detail-card.artisan,
.tool-sell-row.artisan,
.building-tool-slot.artisan,
.tool-market-row.artisan {
  border-color: rgba(219, 151, 18, 0.98);
  border-left-color: #ffbf18;
  background:
    linear-gradient(90deg, rgba(255, 228, 111, 0.76), rgba(255, 190, 34, 0.56) 48%, rgba(255, 232, 135, 0.72)),
    url("assets/generated-icons/tools/tool-artisan-bg.png") center / cover no-repeat,
    #ffc928;
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 188, 0.94),
    inset 0 0 0 4px rgba(143, 76, 5, 0.24),
    inset 0 0 24px rgba(123, 58, 8, 0.18),
    0 4px 0 rgba(92, 50, 18, 0.22),
    0 0 26px rgba(255, 190, 24, 0.46);
}

.tool-card-icon {
  width: 50px;
  height: 50px;
}

.tool-card-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tool-card.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--quality) 46%, transparent), 0 3px 0 rgba(121, 82, 35, 0.12);
}

.tool-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tool-title-line {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.tool-card .tool-artisan-badge,
.tool-detail-head .tool-artisan-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  padding: 2px 6px;
  border: 1px solid rgba(103, 59, 14, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 248, 181, 0.98), rgba(205, 129, 34, 0.96)),
    #e6ad3d;
  color: #55300d;
  font-size: 10px;
  font-weight: 950;
  line-height: 1.1;
  white-space: nowrap;
  overflow-wrap: normal;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 1px 0 rgba(92, 52, 14, 0.18);
}

.tool-card strong,
.tool-card span {
  overflow-wrap: anywhere;
}

.tool-card em {
  font-style: normal;
  font-weight: 900;
  color: #7b4d24;
}

.tool-card small {
  color: rgba(51, 38, 22, 0.64);
}

.tool-detail-card {
  position: relative;
  padding: 13px;
  display: grid;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--quality) 70%, rgba(125, 91, 45, 0.24));
  border-top: 6px solid var(--quality);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(244, 232, 199, 0.9)),
    #f0ddb0;
}

.tool-detail-head {
  display: flex;
  align-items: start;
  gap: 10px;
}

.tool-detail-head > div {
  min-width: 0;
  flex: 1;
}

.tool-detail-icon {
  width: 60px;
  height: 60px;
  border-color: color-mix(in srgb, var(--quality) 50%, rgba(111, 77, 35, 0.22));
}

.tool-detail-head h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  color: var(--tool-ink);
  overflow-wrap: anywhere;
}

.tool-stat-list {
  display: grid;
  gap: 7px;
}

.tool-stat-list div {
  padding: 9px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  border: 1px solid rgba(125, 91, 45, 0.14);
  border-radius: 8px;
  background: rgba(255, 252, 238, 0.64);
}

.tool-stat-list span {
  color: rgba(51, 38, 22, 0.62);
  font-size: 12px;
}

.tool-stat-list strong {
  overflow-wrap: anywhere;
  color: var(--tool-ink);
}

.tool-stat-help {
  display: inline;
  color: inherit;
  border-bottom: 1px dotted rgba(109, 76, 32, 0.46);
  cursor: help;
  text-decoration: none;
  outline: none;
}

.tool-stat-help:focus-visible {
  border-bottom-style: solid;
  box-shadow: 0 2px 0 rgba(109, 76, 32, 0.2);
}

.tool-action-grid,
.tool-equip-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tool-equip-list {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.tool-equip-list button,
.tool-action-grid button,
.tool-forge-card button {
  min-height: 44px;
  touch-action: manipulation;
}

.tool-equip-list button.active {
  border-color: color-mix(in srgb, var(--quality) 58%, rgba(67, 116, 62, 0.46));
  background: rgba(230, 246, 207, 0.88);
  color: #315b2b;
}

.tool-action-grid .danger {
  border-color: rgba(146, 65, 44, 0.38);
  color: #8d3f2c;
}

.tool-sell-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

.tool-sell-row {
  position: relative;
  min-height: 72px;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--quality) 60%, rgba(125, 91, 45, 0.2));
  border-left: 5px solid var(--quality);
  border-radius: 8px;
  background: rgba(255, 252, 238, 0.66);
}

.tool-sell-row div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.tool-sell-row strong,
.tool-sell-row span {
  overflow-wrap: anywhere;
}

.tool-sell-row span {
  color: rgba(51, 38, 22, 0.64);
  font-size: 12px;
}

.tool-forge-locked {
  min-height: 260px;
  padding: 22px;
  align-content: center;
  justify-items: start;
  background:
    linear-gradient(90deg, rgba(38, 25, 14, 0.78), rgba(38, 25, 14, 0.28)),
    url("assets/generated-icons/tools/toolbox-workshop-banner.png") center / cover no-repeat;
  color: #fff8df;
}

.tool-forge-locked h3 {
  margin: 0 0 6px;
  font-size: 24px;
}

.tool-forge-locked p {
  max-width: 36rem;
  margin: 0;
  color: rgba(255, 248, 223, 0.9);
}

@media (max-width: 1120px) {
  .tool-equipment-layout,
  .tool-forge-layout {
    grid-template-columns: 1fr;
  }

  .tool-building-list,
  .tool-list {
    max-height: none;
  }
}

@media (max-width: 980px) {
  .tool-hero {
    grid-template-columns: 1fr;
    align-items: end;
  }

  .tool-resource-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tool-forge-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .tool-hero {
    min-height: 260px;
    padding: 12px;
  }

  .tool-page-tabs,
  .tool-resource-strip,
  .tool-action-grid {
    grid-template-columns: 1fr;
  }

  .tool-page-tab {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .tool-page-tab-icon {
    width: 44px;
    height: 44px;
  }

  .tool-building-card,
  .tool-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .tool-building-art {
    width: 56px;
  }
}

.world-strip::-webkit-scrollbar {
  display: none;
}

.top-actions {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.personal-message-center {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  z-index: 9;
}

.personal-message-center.is-open {
  z-index: 1201;
}

.message-mail-button {
  position: relative;
  display: grid;
  place-items: center;
  z-index: 2;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  border-color: rgba(112, 75, 36, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(230, 198, 124, 0.78)),
    #f1d58c;
  padding: 0;
  pointer-events: auto;
  touch-action: manipulation;
}

.mail-icon {
  display: block;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  background: url("assets/ui/top-mailbox-icon.png") center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(84, 55, 25, 0.14));
  image-rendering: pixelated;
}

.mail-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  border: 2px solid #fff8dc;
  border-radius: 999px;
  background: #d84f35;
  color: #fff8dc;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.message-popover {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 24px));
  border: 2px solid rgba(111, 73, 39, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(238, 217, 164, 0.92)),
    #fff1bd;
  box-shadow: 0 16px 34px rgba(64, 45, 24, 0.2), inset 0 0 0 3px rgba(255, 250, 225, 0.42);
  padding: 10px;
}

.message-popover::before {
  position: absolute;
  top: -8px;
  right: 16px;
  width: 14px;
  height: 14px;
  border-top: 2px solid rgba(111, 73, 39, 0.42);
  border-left: 2px solid rgba(111, 73, 39, 0.42);
  background: #fff1bd;
  transform: rotate(45deg);
  content: "";
}

.message-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed rgba(126, 88, 38, 0.25);
  padding-bottom: 8px;
}

.message-popover-head strong {
  color: #4a3525;
  font-size: 14px;
  font-weight: 950;
}

.message-popover-head button {
  min-height: 28px;
  border-radius: 7px;
  font-size: 11px;
  padding: 3px 8px;
}

.message-list {
  display: grid;
  gap: 6px;
  max-height: min(360px, calc(100vh - 128px));
  overflow: auto;
}

.message-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 54px;
  border-color: rgba(137, 100, 54, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 238, 188, 0.42)),
    #f7dfa6;
  box-shadow: inset 0 -2px rgba(125, 79, 22, 0.08);
  text-align: left;
  padding: 7px 9px;
}

.message-row.is-read {
  opacity: 0.72;
}

.message-row.is-unread {
  border-color: rgba(185, 95, 72, 0.42);
}

.message-row-icon {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(154, 117, 63, 0.34);
  border-radius: 7px;
  background-color: rgba(255, 250, 225, 0.76);
  background-image: url("assets/ui/nav-bulletin.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 26px 26px;
  image-rendering: pixelated;
}

.message-research .message-row-icon {
  background-image: url("assets/ui/nav-research.png");
}

.message-ready .message-row-icon,
.message-reward .message-row-icon {
  background-image: url("assets/ui/nav-bulletin.png");
  background-color: #e8f3bf;
}

.message-market .message-row-icon {
  background-image: url("assets/ui/nav-market.png");
}

.message-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.message-row-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.message-row-copy strong,
.message-row-copy small,
.message-row-title time {
  min-width: 0;
  overflow-wrap: anywhere;
}

.message-row-copy strong {
  color: #4a3525;
  font-size: 13px;
  font-weight: 950;
}

.message-row-title time {
  flex: 0 0 auto;
  color: #8a6b43;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.message-row-copy small,
.message-empty {
  color: #765b3d;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
}

.message-empty {
  border: 1px dashed rgba(126, 88, 38, 0.26);
  border-radius: 7px;
  background: rgba(255, 248, 222, 0.66);
  padding: 12px;
  text-align: center;
}

.message-archive-link {
  justify-self: stretch;
  min-height: 32px;
  border-radius: 7px;
  font-size: 12px;
}

.player-hud {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px 9px;
  min-width: 0;
  border: 2px solid rgba(114, 77, 32, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 231, 151, 0.62)),
    #f2ce75;
  box-shadow:
    inset 0 2px rgba(255, 255, 255, 0.45),
    inset 0 -3px rgba(117, 76, 28, 0.13),
    0 3px 0 rgba(96, 63, 24, 0.1);
  padding: 10px;
}

.player-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 3px solid #6f4927;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent),
    #fff1bd;
  box-shadow:
    inset 0 0 0 3px #d1a55d,
    0 3px 0 rgba(84, 55, 25, 0.18);
  overflow: visible;
  padding: 0;
}

.player-avatar > img:not(.pet-pass-avatar-badge) {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: auto;
}

.player-avatar .pet-pass-avatar-link {
  position: absolute;
  right: -8px;
  bottom: -8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  line-height: 0;
  text-decoration: none;
}

.player-avatar .pet-pass-avatar-link:focus-visible {
  outline: 2px solid #4d7e35;
  outline-offset: 2px;
}

.player-avatar .pet-pass-avatar-badge {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(84, 55, 25, 0.2));
  pointer-events: none;
}

.player-hud-main {
  grid-column: 2;
  min-width: 0;
}

.player-profile-edit {
  grid-column: 3;
  align-self: start;
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  border-color: rgba(78, 120, 93, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(203, 232, 179, 0.78)),
    #dcefc4;
  color: #38562f;
  box-shadow: inset 0 -2px rgba(69, 108, 52, 0.14), 0 2px 0 rgba(84, 55, 25, 0.12);
  line-height: 1;
  padding: 0;
}

.profile-edit-pencil {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  transform: rotate(-42deg);
}

.profile-edit-pencil::before,
.profile-edit-pencil::after {
  position: absolute;
  content: "";
}

.profile-edit-pencil::before {
  left: 6px;
  top: 1px;
  width: 5px;
  height: 13px;
  border: 1px solid rgba(74, 55, 34, 0.72);
  border-radius: 2px 2px 1px 1px;
  background:
    linear-gradient(180deg, #f7e6a0 0 63%, #b8794f 64% 100%);
  box-shadow: inset 0 -2px rgba(89, 55, 30, 0.18);
}

.profile-edit-pencil::after {
  left: 6px;
  top: 13px;
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  border-top: 5px solid #4f3928;
}

.player-kicker {
  display: block;
  color: #8a6334;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.player-hud-main strong {
  display: block;
  margin-top: 3px;
  max-width: 100%;
  overflow: visible;
  color: #3f3026;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.12;
  text-overflow: clip;
  white-space: nowrap;
}

.player-hud-main > span:not(.player-kicker) {
  display: block;
  margin-top: 3px;
  max-width: 100%;
  color: #765b3d;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-hud-main > .player-identity {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.22;
}

.player-status-strip {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.player-status-chip {
  display: grid;
  min-width: 0;
  min-height: 46px;
  align-content: center;
  border: 1px solid rgba(126, 88, 38, 0.22);
  border-radius: 7px;
  background: rgba(255, 248, 222, 0.72);
  box-shadow: inset 0 -2px rgba(117, 76, 28, 0.07);
  padding: 6px 8px;
}

.player-status-chip.is-link {
  appearance: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.player-status-chip.is-link:hover,
.player-status-chip.is-link:focus-visible {
  border-color: rgba(111, 73, 39, 0.45);
  background: rgba(255, 251, 232, 0.94);
  transform: translateY(-1px);
}

.player-status-chip strong,
.player-status-chip small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.player-status-chip strong {
  color: #4a3525;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
}

.player-status-chip small {
  margin-top: 3px;
  color: #765b3d;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.player-status-chip.is-research,
.player-status-chip.is-ready,
.player-status-chip.is-card {
  background: rgba(255, 236, 164, 0.9);
  border-color: rgba(133, 88, 32, 0.34);
}

.player-production {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 7px;
  background: rgba(255, 248, 222, 0.58);
  padding: 5px 7px;
}

.player-production > span {
  color: #765b3d;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.production-icons {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  grid-auto-rows: 30px;
  align-items: center;
  align-content: start;
  gap: 5px;
  min-width: 0;
  max-height: 30px;
  overflow: hidden;
}

.production-icons.is-expanded {
  max-height: none;
}

.production-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid rgba(116, 76, 32, 0.26);
  border-radius: 6px;
  background: #fff2bd;
  box-shadow: inset 0 -2px rgba(117, 76, 28, 0.08);
}

.production-icon.is-paused {
  filter: grayscale(0.45);
  opacity: 0.72;
}

.production-icon img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

.production-icon b {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 246, 210, 0.94);
  border-radius: 999px;
  background: #6c8b4d;
  color: #fff7d6;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.production-more {
  cursor: pointer;
  color: #765b3d;
  font-size: 11px;
  font-weight: 900;
}

.production-empty {
  color: #8a6b43;
  font-size: 12px;
  font-weight: 900;
}

.world-chip,
.world-buff {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(163, 119, 58, 0.18);
  border-radius: 7px;
  background: rgba(255, 252, 232, 0.78);
  color: #61492f;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  padding: 4px 8px;
}

.world-chip.season {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent),
    #e4f3bf;
  color: #3f6a37;
}

.world-chip.event-chip {
  flex: 0 0 124px;
  width: 124px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: rgba(122, 86, 42, 0.2);
  box-shadow: inset 0 -2px rgba(125, 79, 22, 0.08);
}

.world-event-group {
  display: inline-grid;
  grid-template-columns: 124px 118px clamp(260px, 32vw, 430px);
  align-items: stretch;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

.world-event-group .world-chip,
.world-event-group .world-buff {
  width: 100%;
  min-width: 0;
}

.world-buff {
  flex: 0 0 clamp(260px, 32vw, 430px);
  width: clamp(260px, 32vw, 430px);
  min-width: 0;
  max-width: clamp(260px, 32vw, 430px);
  border-color: rgba(143, 95, 44, 0.28);
  background: #fff4cf;
  color: #5f472f;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-wrap: normal;
  white-space: nowrap;
  scrollbar-width: none;
}

.world-buff::-webkit-scrollbar {
  display: none;
}

.world-buff-track,
.world-buff-copy {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.world-buff-copy[aria-hidden="true"] {
  display: none;
}

.world-buff strong {
  flex: 0 0 auto;
  margin-right: 4px;
  color: #7a5225;
}

@keyframes world-buff-mobile-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 14px));
  }
}

.world-chip.event-preview-chip {
  flex: 0 0 118px;
  width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: rgba(82, 125, 148, 0.26);
  background: #edf4f4;
  color: #43606c;
}

.world-chip.event-tourist {
  background: #dff4ee;
  color: #3d6e63;
}

.world-chip.event-festival {
  background: #ffe5a6;
  color: #7a5225;
}

.world-chip.event-build {
  background: #ead9b4;
  color: #705432;
}

.world-chip.event-quiet {
  background: #e4f3bf;
  color: #4c6d38;
}

.top-entry {
  min-height: 44px;
  border-color: rgba(130, 98, 53, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent),
    #f1dba4;
  box-shadow: inset 0 -2px rgba(125, 79, 22, 0.1);
  color: #6a5435;
  padding-inline: 12px;
}

.top-entry.active {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: var(--ink);
}

.top-entry.newbie-task-entry {
  position: relative;
  display: inline-grid;
  grid-template-columns: 28px auto;
  align-items: center;
  gap: 6px;
  min-width: 98px;
  border-color: rgba(216, 157, 67, 0.56);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent),
    #fff0bd;
  color: #5f4429;
  font-weight: 950;
  padding: 3px 24px 3px 6px;
}

.top-entry.newbie-task-entry.is-ready {
  border-color: rgba(94, 128, 75, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent),
    #e7f7bd;
}

.top-entry.newbie-task-entry.is-complete {
  border-color: rgba(216, 157, 67, 0.72);
}

.newbie-task-nav-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}

.newbie-task-nav-icon .guide-symbol {
  width: 26px;
  height: 26px;
  border-width: 2px;
  border-radius: 6px;
}

.newbie-task-nav-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  border: 2px solid #fff8dc;
  border-radius: 999px;
  background: #b95f48;
  color: #fff8dc;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.top-entry.mode-switch {
  border-color: rgba(73, 117, 132, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent),
    #d8eef0;
  color: #315f68;
  font-weight: 950;
}

.top-entry.mode-switch.is-admin {
  border-color: rgba(157, 88, 61, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent),
    #f1c895;
  color: #6b3f2c;
}

.top-entry.preview-switch {
  border-color: rgba(82, 124, 86, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent),
    #d7edb7;
  color: #3e6538;
  font-weight: 950;
}

.top-entry.preview-switch.is-mobile {
  border-color: rgba(132, 92, 54, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent),
    #f1d39a;
  color: #6b4c2e;
}

.is-admin-view .topbar {
  box-shadow: inset 0 -3px rgba(157, 88, 61, 0.16);
}

.mobile-preview-frame {
  position: fixed;
  inset: 76px 16px 16px auto;
  z-index: 20;
  display: grid;
  place-items: center;
  width: min(430px, calc(100vw - 32px));
  pointer-events: none;
}

.mobile-preview-device {
  width: min(390px, 100%);
  height: min(844px, calc(100vh - 100px));
  min-height: 560px;
  border: 10px solid #263426;
  border-radius: 32px;
  padding: 10px;
  background: #263426;
  box-shadow: 0 22px 52px rgba(43, 59, 34, 0.26);
  pointer-events: auto;
}

.mobile-preview-device iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 22px;
  background: white;
}

h2 {
  font-size: 20px;
  line-height: 1.15;
}

h3 {
  font-size: 17px;
}

.panel-head h2,
.workbench-head h2,
.page-head h2 {
  display: inline-block;
  border-bottom: 3px solid rgba(120, 180, 99, 0.46);
  padding-bottom: 2px;
}

.brand p,
.tiny,
.muted {
  color: var(--muted);
}

.brand p,
.muted {
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.tiny {
  font-size: 12px;
  line-height: 1.35;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 6px;
}

.status-panel {
  position: relative;
  overflow: hidden;
}

.status-panel .panel-head {
  align-items: flex-start;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(156, 114, 58, 0.18);
}

.status-panel .panel-head h2 {
  border-bottom-width: 2px;
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.05;
}

.status-panel .panel-head .tiny {
  max-width: none;
  margin-top: 3px;
  font-size: 11px;
}

.status-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(168, 122, 62, 0.08), transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(129, 95, 52, 0.045) 23px 24px);
}

.status-panel::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 9px;
  z-index: 0;
  width: min(158px, 42%);
  aspect-ratio: 520 / 242;
  pointer-events: none;
  background: url("assets/ui/town-status-ledger.png") center / contain no-repeat;
  image-rendering: pixelated;
  opacity: 0.28;
  filter: saturate(0.92);
}

.status-panel > * {
  position: relative;
  z-index: 1;
}

.is-home .status-grid {
  gap: 6px;
}

.status-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(42px, max-content) minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  min-height: 43px;
  overflow: hidden;
  border: 1px solid rgba(177, 126, 54, 0.28);
  border-radius: 7px;
  background:
    linear-gradient(90deg, var(--status-accent, #d7b161) 0 5px, transparent 5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 244, 201, 0.32)),
    #f8e8b6;
  box-shadow: inset 0 -2px rgba(124, 83, 33, 0.06), 0 2px 0 rgba(154, 105, 38, 0.08);
  padding: 7px 10px 7px 12px;
}

.status-item::after {
  position: absolute;
  right: -12px;
  bottom: -14px;
  width: 46px;
  height: 34px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(45deg, var(--status-accent, #d7b161) 0 5px, transparent 5px 10px);
  content: "";
  opacity: 0.16;
  pointer-events: none;
}

.status-item span,
.status-item strong {
  position: relative;
  z-index: 1;
}

.status-icon {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  align-self: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(130, 93, 47, 0.2);
  border-radius: 6px;
  background: rgba(255, 250, 226, 0.76);
  box-shadow: inset 0 -2px rgba(117, 76, 28, 0.08);
}

.status-icon img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}

.is-home .status-item {
  padding: 6px 8px;
}

.status-item > span:not(.status-icon),
.ledger-item span {
  display: block;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.status-item .status-icon {
  display: grid;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.status-item:has(.status-icon) {
  grid-template-columns: 25px minmax(34px, max-content) minmax(0, 1fr);
  padding-left: 9px;
}

.status-item:has(.status-icon) > span:not(.status-icon) {
  grid-column: 2;
}

.status-item strong {
  display: block;
  grid-column: 2;
  justify-self: end;
  max-width: 100%;
  margin-top: 0;
  overflow: visible;
  font-variant-numeric: tabular-nums;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}

.status-item:has(.status-icon) strong {
  grid-column: 3;
}

.is-home .status-item strong {
  font-size: 16px;
}

.status-item.coin {
  --status-accent: #d89d2e;
  background-color: #ffe8a7;
}

.status-item.rep {
  --status-accent: #8fb95b;
}

.status-item.storage,
.status-item.research {
  --status-accent: #b98b4d;
}

.status-item.rating {
  --status-accent: #76a7a8;
}

.status-item.rank {
  grid-column: span 2;
}

.status-item.event {
  grid-column: span 2;
  --status-accent: #93ba55;
  background-color: #dff0b7;
}

.status-item.pop {
  --status-accent: #74af63;
  background-color: #dceec0;
}

.status-item.rank {
  --status-accent: #b77d45;
}

.status-item.rank strong {
  font-size: clamp(15px, 1.15vw, 18px);
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(430px, 1.18fr) minmax(470px, 1.34fr) minmax(300px, 0.88fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  padding: 14px;
}

.board-grid {
  grid-template-columns: minmax(560px, 1.25fr) minmax(340px, 0.75fr);
}

.is-home .left-column {
  order: 1;
}

.is-home .center-column {
  order: 2;
}

.is-home .board-side {
  display: block;
  order: 2;
}

.status-panel + .panel {
  margin-top: 14px;
}

.subpage-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(300px, 0.42fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  padding: 0 14px 14px;
}

.left-column,
.center-column,
.right-column {
  min-width: 0;
}

.main-grid > *,
.topbar > * {
  min-width: 0;
}

.panel,
.farm-stage {
  padding: 14px;
}

.is-home .panel {
  padding: 10px;
}

.is-home .farm-stage {
  padding: 0;
}

.panel {
  position: relative;
  overflow: hidden;
}

.panel::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(111, 82, 46, 0.1) 1px, transparent 1px);
  background-size: 18px 18px;
  content: "";
  opacity: 0.16;
  pointer-events: none;
}

.panel > *,
.farm-stage > * {
  position: relative;
  z-index: 1;
}

.panel + .panel,
.farm-stage + .panel {
  margin-top: 14px;
}

.panel-head,
.stage-head,
.workbench-head,
.section-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.is-home .panel-head {
  margin-bottom: 8px;
}

.is-home .panel-head h2 {
  font-size: 17px;
}

.is-home .panel-head .tiny,
.is-home .panel-head .muted {
  font-size: 11px;
  line-height: 1.25;
}

.stage-head {
  align-items: flex-start;
}

.stage-head-compact {
  justify-content: flex-end;
  margin-bottom: 8px;
}

.stage-meter,
.count-chip,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  border: 1px solid #c7d99a;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent),
    #e8f4c5;
  color: #466a35;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.stage-meter {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 2px 0 rgba(88, 123, 50, 0.12);
}

.stage-meter span {
  color: var(--muted);
  font-size: 11px;
}

.count-chip,
.pill {
  padding: 3px 8px;
}

.farm-stage {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(91, 131, 62, 0.18), rgba(66, 91, 48, 0.22)),
    #9fc66f;
}

.farm-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(156px, 1fr));
  align-content: center;
  align-items: center;
  gap: 12px;
  min-height: clamp(320px, 48vh, 560px);
  border: 3px solid rgba(57, 78, 39, 0.64);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(44, 72, 36, 0.08), rgba(20, 37, 24, 0.24)),
    url("assets/manor-map-gpt-image-2.png") center / cover,
    #779653;
  box-shadow:
    inset 0 0 0 5px rgba(246, 229, 168, 0.2),
    inset 0 -30px 70px rgba(31, 45, 23, 0.28),
    0 5px 0 rgba(54, 73, 35, 0.24);
  overflow: hidden;
  padding: clamp(14px, 2vw, 24px);
}

.is-home .farm-map {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  align-content: start;
  align-items: start;
  min-height: clamp(470px, calc(100vh - 320px), 560px);
  border-color: rgba(35, 57, 32, 0.42);
  box-shadow:
    inset 0 0 0 3px rgba(246, 229, 168, 0.14),
    inset 0 -24px 60px rgba(31, 45, 23, 0.22),
    0 4px 0 rgba(54, 73, 35, 0.14);
  overflow: visible;
  padding: clamp(10px, 1.4vw, 16px);
}

.farm-map::before {
  position: absolute;
  pointer-events: none;
  content: "";
}

.farm-map::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(25, 44, 27, 0.36), transparent 24%, transparent 76%, rgba(25, 44, 27, 0.3)),
    radial-gradient(circle at 24% 72%, rgba(242, 203, 106, 0.18), transparent 32%),
    radial-gradient(circle at 74% 30%, rgba(255, 246, 184, 0.14), transparent 28%);
}

.manor-entry-button {
  position: absolute;
  top: 14px;
  z-index: 6;
  min-height: 44px;
  border: 2px solid rgba(255, 246, 210, 0.9);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(224, 184, 93, 0.9)),
    #d5a64d;
  box-shadow: 0 4px 0 rgba(76, 52, 24, 0.2), 0 10px 22px rgba(34, 48, 28, 0.22);
  color: #5b371d;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  padding: 7px 14px;
}

.manor-entry-button {
  left: 14px;
}

.is-home .manor-entry-button {
  top: -28px;
  left: 16px;
  min-height: 38px;
  padding: 6px 13px;
}

.manor-entry-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.stage-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.farm-map-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 5;
  box-sizing: border-box;
  width: 100%;
  margin: -2px 0 0;
  border: 2px solid rgba(67, 43, 23, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 236, 181, 0.24), rgba(67, 43, 23, 0.28)),
    #8b6138;
  box-shadow: inset 0 2px rgba(255, 246, 210, 0.18), 0 5px 0 rgba(45, 31, 19, 0.18), 0 14px 24px rgba(31, 45, 23, 0.22);
  padding: 5px 6px;
}

.building-filter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  max-width: 540px;
  border: 1px solid rgba(255, 244, 204, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(76, 51, 30, 0.18)),
    rgba(72, 47, 27, 0.46);
  box-shadow: inset 0 1px rgba(255, 246, 210, 0.12);
  padding: 4px;
}

.building-filter {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(255, 244, 204, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(206, 167, 88, 0.36)),
    #bd8d4c;
  box-shadow: inset 0 -2px rgba(73, 45, 23, 0.14);
  color: #fff5d2;
  font-size: 12px;
  padding: 5px 8px;
  text-shadow: 0 1px 0 rgba(58, 37, 20, 0.35);
}

.building-filter.active {
  border-color: rgba(255, 231, 141, 0.88);
  background:
    linear-gradient(180deg, rgba(255, 246, 191, 0.86), rgba(226, 172, 55, 0.92)),
    var(--gold);
  color: #4b2f18;
  text-shadow: none;
}

.building-filter span {
  min-width: 22px;
  border-radius: 999px;
  background: rgba(61, 40, 23, 0.22);
  font-size: 11px;
  line-height: 1;
  padding: 4px 5px;
  text-align: center;
}

.farm-map-empty {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 148px;
  border: 2px dashed rgba(255, 238, 184, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 225, 0.72), rgba(115, 85, 48, 0.28)),
    rgba(87, 124, 61, 0.72);
  color: #fff7d7;
  box-shadow: inset 0 0 0 3px rgba(73, 49, 28, 0.12);
  padding: 16px;
  text-align: center;
}

.farm-map-empty span {
  color: rgba(255, 247, 215, 0.9);
  font-size: 12px;
  font-weight: 800;
}

.farm-map-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  min-height: 40px;
  border: 2px solid rgba(255, 246, 210, 0.84);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(203, 167, 93, 0.86)),
    #c49a53;
  box-shadow: 0 3px 0 rgba(76, 52, 24, 0.18), 0 8px 18px rgba(35, 48, 27, 0.18);
  color: #5b371d;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 10px;
  white-space: nowrap;
}

.farm-map-actions .building-page-indicator,
.farm-map-actions .building-unlock-summary {
  flex: 0 0 auto;
  white-space: nowrap;
}

.farm-map-actions .building-entry {
  position: relative;
  gap: 6px;
  min-width: 104px;
  border-color: rgba(212, 239, 179, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(109, 153, 83, 0.86)),
    #79a963;
  color: #fffbe3;
  text-shadow: 0 1px 0 rgba(40, 63, 30, 0.42);
}

.farm-map-actions .building-entry::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 1px solid rgba(62, 88, 44, 0.26);
  border-radius: 6px;
  background: rgba(255, 250, 225, 0.78) url("assets/ui/nav-building.png") center / 22px 22px no-repeat;
  box-shadow: inset 0 -1px rgba(83, 54, 26, 0.12);
  image-rendering: pixelated;
}

.farm-map-actions button:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.farm-map-actions button:disabled {
  opacity: 0.44;
  cursor: default;
}

.stage-brief-item {
  min-width: 0;
  border: 2px solid rgba(106, 137, 68, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent),
    #edf4be;
  box-shadow: inset 0 -2px rgba(94, 122, 55, 0.1), 0 2px 0 rgba(83, 110, 51, 0.1);
  padding: 8px 10px;
}

.stage-brief-item span {
  display: block;
  color: #61754a;
  font-size: 11px;
  font-weight: 900;
}

.stage-brief-item strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.stage-brief-item.is-order {
  background-color: #ffe8aa;
  border-color: rgba(193, 140, 58, 0.4);
}

.stage-brief-item.is-event {
  background-color: #dcefc4;
  border-color: rgba(96, 151, 91, 0.42);
}

.stage-yard {
  display: none;
}

@media (min-width: 1500px) and (min-height: 880px) {
  .is-home .farm-stage {
    min-height: auto;
  }

  .stage-yard {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: end;
    gap: 10px;
    min-height: auto;
    margin-top: 10px;
    border: 2px solid rgba(91, 128, 59, 0.28);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(255, 246, 207, 0.72), rgba(220, 185, 119, 0.64)),
      #d4ad6e;
    box-shadow: inset 0 -3px rgba(96, 68, 35, 0.12);
    overflow: hidden;
    padding: 12px;
  }

  .stage-yard::before {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 16px;
    height: 100%;
    border: 2px solid rgba(126, 86, 45, 0.35);
    border-radius: 0;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent),
      #c99a5d;
    transform: translateX(-50%);
    content: "";
    opacity: 0.42;
  }

  .stage-yard span {
    position: relative;
    z-index: 1;
    min-width: 0;
    border: 2px solid rgba(189, 139, 64, 0.38);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 239, 187, 0.84)),
      #ffe4a0;
    box-shadow: 0 2px 0 rgba(120, 82, 39, 0.12);
    color: #6b4b26;
    font-size: 12px;
    font-weight: 900;
    padding: 8px 10px;
    overflow-wrap: anywhere;
  }
}

.map-river {
  display: none;
}

.map-road {
  display: none;
}

.map-corner {
  display: none;
}

.map-corner img {
  width: 110px;
  image-rendering: pixelated;
}

.map-corner.top {
  top: 8px;
  left: 10px;
}

.map-corner.bottom {
  right: 14px;
  bottom: 8px;
}

.farm-tile {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 134px;
  border: 2px solid rgba(70, 47, 27, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(110, 73, 37, 0.18)),
    #b9834d;
  box-shadow: inset 0 -4px rgba(62, 39, 21, 0.18), 0 6px 0 rgba(47, 38, 25, 0.2), 0 16px 24px rgba(30, 45, 24, 0.18);
  padding: 7px;
  text-align: left;
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.is-home .farm-tile {
  align-self: start;
  min-height: 0;
  height: fit-content;
  border-color: rgba(61, 42, 27, 0.56);
  border-radius: 8px;
  overflow: hidden;
  padding: 6px;
}

.tile-start {
  display: grid;
  grid-template-columns: minmax(112px, 43%) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto 10px;
  align-items: stretch;
  gap: 8px 10px;
  width: 100%;
  min-height: 116px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.is-home .tile-start {
  grid-template-columns: minmax(118px, 44%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 136px;
  min-height: 0;
  gap: 8px 10px;
}

.farm-tile:not(.locked-preview) .tile-start {
  grid-template-rows: auto 1fr auto auto 12px;
}

.is-home .farm-tile .tile-start {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.tile-favorite {
  position: absolute;
  z-index: 5;
  left: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 2px solid rgba(255, 246, 210, 0.92);
  border-radius: 7px;
  background: rgba(50, 39, 25, 0.62);
  color: #fff8d7;
  font-size: 21px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(45, 31, 19, 0.48);
  box-shadow: 0 2px 0 rgba(45, 34, 22, 0.22), inset 0 -2px rgba(0, 0, 0, 0.16);
}

.tile-favorite.active {
  background: linear-gradient(180deg, #fff1a8, #d99735);
  color: #6e4015;
  border-color: rgba(255, 249, 207, 0.96);
  text-shadow: 0 1px 0 rgba(255, 247, 210, 0.62);
}

.tile-favorite:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.tile-stop {
  position: absolute;
  z-index: 4;
  right: 6px;
  top: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 246, 210, 0.9);
  border-radius: 7px;
  background: linear-gradient(180deg, #fff4c7, #cfa35f);
  box-shadow: 0 3px 0 rgba(83, 54, 26, 0.18);
  overflow: hidden;
}

.tile-stop img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.tile-stop:disabled {
  opacity: 0.42;
  cursor: default;
}

.farm-tile.is-ready .tile-stop:disabled {
  opacity: 0.82;
}

.farm-tile:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  border-color: rgba(231, 202, 123, 0.88);
  box-shadow: inset 0 -4px rgba(62, 39, 21, 0.14), 0 8px 0 rgba(47, 38, 25, 0.18), 0 18px 28px rgba(30, 45, 24, 0.22);
}

.farm-tile.crop,
.farm-tile.wood {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(92, 129, 57, 0.2)),
    #b9824f;
}

.farm-tile.gather {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(118, 105, 73, 0.24)),
    #a88050;
}

.farm-tile.animal {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(115, 151, 151, 0.2)),
    #b98355;
}

.farm-tile.craft {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(90, 66, 43, 0.2)),
    #a8754b;
}

.farm-tile.water {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(205, 242, 245, 0.72)),
    var(--water);
}

.farm-tile.is-running {
  border-color: rgba(242, 185, 75, 0.96);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(221, 168, 69, 0.32)),
    #b9824f;
  box-shadow: inset 0 -4px rgba(88, 49, 25, 0.12), 0 0 0 2px rgba(255, 230, 122, 0.24), 0 7px 0 rgba(84, 60, 32, 0.18), 0 18px 28px rgba(30, 45, 24, 0.2);
}

.farm-tile.is-ready::after,
.farm-tile.is-paused::after,
.farm-tile.is-blocked::after,
.farm-tile.is-waiting::after {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  min-width: 42px;
  border: 2px solid rgba(255, 246, 210, 0.78);
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(45, 31, 19, 0.2);
  color: #fff8dc;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 4px 7px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(40, 45, 24, 0.36);
}

.farm-tile.is-ready::after {
  content: "可安排";
  background: #6c9b55;
}

.farm-tile.is-paused::after,
.farm-tile.is-blocked::after {
  content: "缺料";
  background: #b65f4d;
}

.farm-tile.is-waiting::after {
  content: "等人口";
  background: #6b93a3;
}

.farm-tile.is-paused,
.farm-tile.is-blocked {
  border-color: rgba(193, 98, 76, 0.64);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(248, 222, 188, 0.78)),
    #efc08b;
}

.farm-tile.is-waiting {
  border-color: rgba(111, 151, 174, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(210, 236, 235, 0.76)),
    #b8d9cf;
}

.farm-tile.is-ready {
  border-color: rgba(99, 147, 82, 0.72);
  box-shadow: inset 0 -4px rgba(62, 39, 21, 0.12), 0 0 0 2px rgba(205, 239, 179, 0.24), 0 6px 0 rgba(47, 38, 25, 0.16), 0 16px 24px rgba(30, 45, 24, 0.16);
}

.farm-tile.locked-preview {
  grid-column: auto;
  grid-row: auto;
  border-color: rgba(68, 67, 60, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(206, 203, 187, 0.78)),
    #b7b3a5;
  box-shadow:
    inset 0 -3px rgba(46, 44, 38, 0.12),
    0 5px 0 rgba(46, 44, 38, 0.18);
}

.locked-preview:hover {
  border-color: rgba(92, 83, 67, 0.75);
  filter: brightness(1.03);
}

.locked-start {
  cursor: pointer;
}

.locked-art {
  position: relative;
  background: #a8a392;
}

.locked-art img {
  filter: grayscale(0.85) contrast(0.82) brightness(0.78);
  opacity: 0.56;
}

.lock-mark {
  grid-column: 2;
  grid-row: 3;
  display: inline-grid;
  align-self: center;
  justify-self: start;
  width: 40px;
  height: 40px;
  background: var(--lock-icon-image) center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(46, 44, 38, 0.18));
  image-rendering: pixelated;
}

.locked-preview .tile-meta {
  padding-left: 46px;
}

.locked-preview .tile-status {
  background: rgba(68, 63, 50, 0.78);
  color: #fff5d2;
}

.locked-preview .tile-progress {
  display: none;
}

.tile-art {
  grid-column: 1;
  grid-row: 1 / span 5;
  display: block;
  min-width: 0;
  min-height: 116px;
  border: 2px solid rgba(255, 238, 184, 0.72);
  border-radius: 7px;
  background: #9fcf6b;
  box-shadow: inset 0 -3px rgba(62, 39, 21, 0.1), 0 2px 0 rgba(45, 34, 22, 0.22);
  overflow: hidden;
}

.is-home .tile-art,
.is-home .tile-art img {
  height: 136px;
  min-height: 0;
}

.is-home .tile-art {
  grid-row: 1 / -1;
}

.tile-art img {
  width: 100%;
  height: 100%;
  min-height: 116px;
  object-fit: cover;
  image-rendering: pixelated;
}

.tile-icon {
  display: grid;
  place-items: center;
  align-self: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 246, 210, 0.78);
  border-radius: 8px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.66), transparent 34%),
    linear-gradient(180deg, #fff1bd, #e9c98c);
  box-shadow: 0 3px 0 rgba(83, 54, 26, 0.14);
}

.tile-icon-wrap {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  display: inline-grid;
  align-self: center;
  justify-self: start;
}

.farm-tile .tile-output-progress {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  align-self: center;
  gap: 7px;
  justify-self: stretch;
  width: 100%;
  min-height: 34px;
  height: auto;
  margin-top: 0;
  border: 1px solid rgba(255, 246, 210, 0.42);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 249, 220, 0.4), rgba(67, 43, 23, 0.18)),
    rgba(62, 45, 28, 0.36);
  box-shadow: inset 0 1px rgba(255, 246, 210, 0.22), 0 2px 0 rgba(45, 31, 19, 0.16);
  overflow: hidden;
  padding: 3px 7px 3px 3px;
}

.farm-tile .tile-output-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 248, 216, 0.22), rgba(65, 43, 24, 0.12));
}

.farm-tile .tile-output-progress > i {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  display: block;
  width: var(--pct);
  height: 100%;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), transparent 48%, rgba(255, 255, 255, 0.18)),
    linear-gradient(90deg, #5f9f4c, #d9ad45);
  background-size: 100% 100%, 100% 100%;
  opacity: 0.82;
}

.farm-tile .tile-output-progress .tile-icon,
.farm-tile .tile-output-progress .tile-meta,
.farm-tile .tile-output-progress .worker-badge {
  position: relative;
  z-index: 2;
}

.farm-tile .tile-output-progress .tile-meta {
  grid-column: auto;
  grid-row: auto;
  min-height: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(58, 39, 22, 0.2);
  color: #fff8dc;
  text-shadow: 0 1px 0 rgba(45, 31, 19, 0.62);
}

.farm-tile .tile-output-progress .worker-badge {
  right: auto;
  bottom: auto;
  min-width: 22px;
  height: 22px;
  box-shadow: 0 1px 0 rgba(45, 31, 19, 0.18);
}

.worker-badge {
  position: absolute;
  right: -10px;
  bottom: -8px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid rgba(255, 246, 210, 0.9);
  border-radius: 999px;
  background: #6c8b4d;
  color: #fff7d6;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 0 rgba(83, 54, 26, 0.18);
}

.tile-icon img {
  width: 21px;
  height: 21px;
  max-height: none;
  object-fit: contain;
  image-rendering: pixelated;
}

.tile-zone,
.tile-name,
.tile-speed,
.tile-status,
.tile-meta,
.tile-consume {
  grid-column: 2;
  position: static;
  max-width: 100%;
  border-radius: 6px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.tile-zone {
  grid-row: 1;
  align-self: start;
  justify-self: start;
  padding: 4px 7px;
  background: rgba(53, 43, 28, 0.78);
  color: #fff4ca;
  font-size: 11px;
  box-shadow: 0 2px 0 rgba(28, 21, 14, 0.18);
}

.tile-name {
  grid-row: 2;
  align-self: end;
  max-width: 100%;
  color: #fff7d7;
  text-shadow: 0 1px 0 rgba(45, 31, 19, 0.42);
  font-size: 15px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.tile-meta {
  grid-row: 3;
  align-self: center;
  min-height: 30px;
  padding: 7px 4px 4px 38px;
  color: rgba(255, 249, 220, 0.92);
  font-size: 12px;
}

.tile-consume {
  grid-row: 4;
  align-self: center;
  justify-self: end;
  max-width: 56%;
  min-height: 22px;
  padding: 4px 7px;
  background: rgba(255, 245, 204, 0.88);
  color: #6d4725;
  font-size: 10px;
  box-shadow: 0 1px 0 rgba(80, 49, 22, 0.08);
}

.tile-status {
  grid-row: 4;
  align-self: center;
  justify-self: start;
  max-width: 42%;
  padding: 5px 7px;
  background: rgba(235, 246, 198, 0.9);
  color: #4b6a34;
  font-size: 11px;
  box-shadow: 0 1px 0 rgba(80, 49, 22, 0.08);
}

.tile-start:not(:has(.tile-consume)) .tile-status {
  max-width: 100%;
}

.production-tooltip {
  position: fixed;
  left: 24px;
  top: 24px;
  z-index: 999;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  border: 1px solid rgba(108, 72, 33, 0.28);
  border-radius: 8px;
  background: rgba(255, 248, 224, 0.88);
  box-shadow: 0 12px 28px rgba(50, 34, 21, 0.2);
  color: #54381e;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.12s ease;
  backdrop-filter: blur(6px);
}

.production-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

.farm-tile.is-running .worker-badge {
  background: #578449;
  color: #fff8d8;
}

.farm-tile.is-running .tile-status {
  display: none;
}

.farm-tile.is-paused .tile-status,
.farm-tile.is-blocked .tile-status {
  background: #b65f4d;
  color: #fff8df;
}

.farm-tile.is-waiting .tile-status {
  background: #6b93a3;
  color: #f7fbeb;
}

.tile-speed {
  grid-row: 1;
  justify-self: end;
  align-self: start;
  max-width: 100%;
  padding: 4px 6px;
  background: rgba(255, 250, 225, 0.58);
  color: rgba(49, 41, 25, 0.62);
  font-size: 10px;
  box-shadow: none;
}

.is-home .tile-speed {
  margin-right: 50px;
  max-width: calc(100% - 52px);
  color: #5f4428;
  background: rgba(255, 250, 225, 0.72);
}

.tile-progress {
  grid-column: 2;
  grid-row: 6;
  align-self: end;
  width: calc(100% - 34px);
  margin-top: 0;
}

.farm-tile:not(.locked-preview) .tile-progress:not(.tile-output-progress) {
  grid-row: 5;
  width: 100%;
}

.row-1 {
  grid-row: 1;
}

.row-2 {
  grid-row: 2;
}

.row-3 {
  grid-row: 3;
}

.col-1 {
  grid-column: 1;
}

.col-2 {
  grid-column: 2;
}

.col-3 {
  grid-column: 3;
}

.credit {
  margin-top: 10px;
  color: rgba(48, 39, 25, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

.queue-list,
.building-list,
.market-list,
.order-list,
.tracked-order-list,
.inventory-list,
.inventory-grid,
.inventory-shelf-grid,
.rank-list,
.dashboard-grid {
  display: grid;
  gap: 8px;
}

.prestige-population-details {
  margin-top: 14px;
}

.prestige-population-details > summary {
  cursor: pointer;
  list-style: none;
}

.prestige-population-details > summary::-webkit-details-marker {
  display: none;
}

.prestige-population-details > summary h3::after {
  content: "展开";
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.prestige-population-details[open] > summary h3::after {
  content: "收起";
}

.prestige-population-details > .rank-list {
  margin-top: 8px;
}

.inventory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inventory-shelf-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.is-home .dashboard-grid,
.is-home .ledger-grid {
  grid-template-columns: minmax(0, 1fr);
}

.pet-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(125, 97, 55, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 247, 209, 0.9) 0 45%, rgba(226, 244, 195, 0.9) 45% 100%),
    #f7e7ae;
}

.pet-panel::after {
  position: absolute;
  right: -22px;
  bottom: -18px;
  width: 108px;
  height: 84px;
  border: 2px solid rgba(111, 133, 72, 0.16);
  background:
    repeating-linear-gradient(45deg, rgba(99, 132, 70, 0.14) 0 8px, transparent 8px 16px),
    rgba(255, 255, 255, 0.18);
  content: "";
  transform: rotate(-4deg);
}

.pet-showcase {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.pet-sheet {
  width: 96px;
  aspect-ratio: 1;
  border: 2px solid rgba(122, 87, 45, 0.3);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 72%, rgba(121, 170, 90, 0.22), transparent 42%),
    var(--pet-sheet) var(--pet-x, 0) var(--pet-y, 0) / 200% 200% no-repeat,
    #fff3c6;
  box-shadow: inset 0 -3px rgba(107, 74, 34, 0.12), 0 4px 0 rgba(120, 82, 39, 0.12);
  image-rendering: pixelated;
}

.pet-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.pet-copy strong {
  font-size: 18px;
  line-height: 1.15;
}

.pet-copy span,
.pet-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.pet-roster {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 10px;
}

.pet-roster span {
  border: 1px solid rgba(127, 91, 48, 0.2);
  border-radius: 6px;
  background: rgba(255, 252, 232, 0.66);
  color: #674f30;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  padding: 4px 6px;
  overflow-wrap: anywhere;
}

.pet-roster span.active {
  border-color: rgba(80, 126, 60, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(221, 240, 173, 0.86)),
    #ddecad;
  color: #3f6c36;
  box-shadow: inset 0 -2px 0 rgba(80, 126, 60, 0.16), 0 2px 0 rgba(80, 126, 60, 0.12);
}

.pet-entry-button {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 10px;
}

.pet-care-note {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(127, 91, 48, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 246, 210, 0.46)),
    rgba(255, 252, 232, 0.68);
  color: #5c4328;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  padding: 8px 10px;
}

.pet-home-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.86fr) minmax(260px, 1.2fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.pet-home-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pet-home-avatar {
  width: 82px;
}

.pet-home-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(120px, auto);
  gap: 8px;
  min-width: 142px;
}

.pet-home-actions button {
  min-height: 38px;
  padding: 7px 10px;
  white-space: nowrap;
}

.pet-home-actions .secondary {
  border-color: rgba(80, 126, 60, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(220, 238, 179, 0.78)),
    #ddecad;
  color: #41522f;
}

.pet-page-shell {
  display: grid;
  gap: 12px;
}

.pet-page-hero {
  grid-template-columns: 112px minmax(0, 1fr) minmax(320px, 0.78fr);
  border: 1px solid rgba(111, 133, 72, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 252, 232, 0.74), rgba(221, 240, 173, 0.72)),
    #fff0bd;
  padding: 12px;
}

.pet-page-avatar {
  width: 112px;
}

.pet-care-action-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.pet-care-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pet-care-buttons button {
  min-height: 36px;
  padding: 6px 8px;
}

.pet-care-wishes {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid rgba(127, 91, 48, 0.18);
  border-radius: 8px;
  background: rgba(255, 252, 232, 0.55);
  padding: 7px;
}

.pet-care-wish-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #5c4328;
  font-size: 12px;
  font-weight: 950;
}

.pet-care-wish-head span,
.pet-wish-locked {
  color: #7b6647;
  font-size: 11px;
  font-weight: 850;
}

.pet-compact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pet-compact-stat {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 64px;
  align-content: center;
  border: 1px solid rgba(127, 91, 48, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 245, 207, 0.5)),
    rgba(255, 240, 189, 0.68);
  padding: 8px 10px;
}

.pet-compact-stat span,
.pet-compact-stat small {
  min-width: 0;
  color: #6c5a3e;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pet-compact-stat strong {
  min-width: 0;
  color: #332617;
  font-size: 19px;
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.pet-skin-art {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.pet-skin-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pet-page-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pet-page-tabs button,
.pet-dispatch-grid button {
  min-height: 38px;
  border-color: rgba(80, 126, 60, 0.28);
  background: #eef4d5;
  color: #41522f;
}

.pet-page-tabs button.active,
.pet-dispatch-grid button.active {
  border-color: rgba(80, 126, 60, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent),
    #ddecad;
}

.pet-tab-panel {
  display: grid;
  gap: 12px;
}

.pet-wardrobe-grid {
  min-width: 0;
}

.pet-select-grid,
.pet-wardrobe-grid,
.pet-benefit-grid,
.pet-dispatch-grid,
.pet-collection-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pet-select-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pet-dispatch-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pet-card,
.pet-option {
  display: grid;
  min-width: 0;
  gap: 8px;
  align-content: start;
  border: 1px solid rgba(127, 91, 48, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 245, 207, 0.58)),
    #fff0bd;
  padding: 10px;
}

.pet-option {
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
}

.pet-card.active,
.pet-option.active {
  border-color: rgba(80, 126, 60, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent),
    #e1f0c7;
}

.pet-card.locked,
.pet-option.locked {
  filter: saturate(0.7);
}

.pet-wish-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pet-wish-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.pet-wish-card.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  border-radius: 7px;
  padding: 7px;
}

.pet-wish-card.compact strong {
  font-size: 12px;
}

.pet-wish-card.compact .tiny {
  font-size: 10px;
  line-height: 1.2;
}

.pet-wish-card.compact .pet-wish-actions {
  min-width: 66px;
}

.pet-wish-card.compact .pet-wish-actions button {
  min-height: 28px;
  padding: 3px 6px;
  font-size: 11px;
}

.pet-wish-card.done {
  opacity: 0.72;
}

.pet-wish-actions {
  display: grid;
  gap: 6px;
  min-width: 86px;
}

.pet-wish-actions button {
  min-height: 34px;
}

.pet-wish-count {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 18px;
  border: 1px solid rgba(125, 91, 48, 0.2);
  border-radius: 999px;
  background: rgba(255, 247, 211, 0.82);
  color: #5b7438;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  padding: 0 6px;
  vertical-align: middle;
}

.pet-level-progress-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(127, 91, 48, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(225, 240, 199, 0.62)),
    #fff0bd;
  padding: 10px;
}

.pet-level-progress-card > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.pet-level-progress-card strong {
  color: #332617;
  font-size: 18px;
  font-weight: 950;
}

.pet-level-progress-card span,
.pet-level-progress-card small {
  color: #5c4328;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
}

.pet-affinity-meter {
  position: relative;
  overflow: hidden;
  height: 20px;
  min-width: 180px;
  border: 2px solid rgba(116, 86, 48, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 253, 235, 0.9), rgba(244, 225, 169, 0.72)),
    #f6e0a3;
  box-shadow:
    inset 0 2px rgba(255, 255, 255, 0.64),
    inset 0 -2px rgba(113, 79, 41, 0.1);
}

.pet-affinity-meter::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, rgba(118, 91, 48, 0.08) 0 1px, transparent 1px 18px),
    rgba(255, 250, 225, 0.62);
}

.pet-affinity-meter > i {
  position: absolute;
  inset: 4px auto 4px 4px;
  width: var(--pct, 0%);
  max-width: calc(100% - 8px);
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 45%),
    linear-gradient(90deg, #f2a0a8, #e8bd62 52%, #85b96b);
  box-shadow: inset 0 -2px rgba(91, 61, 34, 0.12);
}

.pet-level-benefits {
  display: grid;
  gap: 8px;
}

.pet-level-benefit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.pet-level-benefit-row {
  display: grid;
  grid-template-columns: 52px 82px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(127, 91, 48, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 252, 232, 0.58), rgba(247, 230, 184, 0.46)),
    rgba(255, 242, 196, 0.62);
  color: #60482e;
  padding: 7px 9px;
}

.pet-level-benefit-row.unlocked {
  border-color: rgba(96, 133, 68, 0.26);
  background:
    linear-gradient(180deg, rgba(248, 255, 229, 0.66), rgba(223, 239, 191, 0.56)),
    rgba(239, 247, 208, 0.78);
}

.pet-level-benefit-row.current {
  border-color: rgba(104, 142, 73, 0.52);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 240, 0.68), 0 2px 0 rgba(91, 61, 34, 0.08);
}

.pet-level-benefit-row strong {
  color: #332617;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

.pet-level-benefit-row span,
.pet-level-benefit-row small {
  min-width: 0;
  color: #6a5435;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.pet-level-benefit-row small {
  color: #405b31;
  font-weight: 900;
}

.pet-option-art {
  width: 78px;
  aspect-ratio: 1;
  border: 1px solid rgba(122, 87, 45, 0.3);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 72%, rgba(121, 170, 90, 0.22), transparent 42%),
    var(--pet-sheet) var(--pet-x, 0) var(--pet-y, 0) / 200% 200% no-repeat,
    #fff3c6;
}

.pet-skin-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgba(122, 87, 45, 0.3);
  border-radius: 8px;
  background: rgba(255, 252, 232, 0.72);
  overflow: hidden;
}

.pet-skin-preview > img,
.pet-skin-preview .pet-sheet {
  width: 100%;
  height: 100%;
}

.pet-collection-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.empty-state {
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 2px dashed rgba(126, 88, 38, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18px 18px, rgba(126, 88, 38, 0.18) 0 4px, transparent 5px),
    linear-gradient(180deg, rgba(255, 253, 238, 0.72), rgba(231, 213, 170, 0.72)),
    #f2dfac;
  box-shadow: inset 0 0 0 2px rgba(255, 250, 225, 0.42), 0 3px 0 rgba(91, 61, 34, 0.1);
  color: #5e452c;
  padding: 13px 14px 13px 42px;
}

.empty-state::before {
  position: absolute;
  left: 12px;
  top: 14px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(126, 88, 38, 0.34);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 250, 225, 0.72), rgba(194, 151, 82, 0.42)),
    #e4c17d;
  box-shadow: 0 2px 0 rgba(91, 61, 34, 0.12);
  content: "";
}

.empty-state strong {
  color: #4f3925;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.empty-state span {
  color: #715d43;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.queue-row,
.building,
.listing,
.order,
.inventory-row,
.inventory-cell,
.rank-row,
.dashboard-card {
  display: grid;
  gap: 8px;
  border: 1px solid #e0bd6e;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 245, 207, 0.58)),
    #fff0bd;
  box-shadow: 0 2px 0 rgba(146, 97, 35, 0.1);
  padding: 9px;
}

.listing.cat-crop,
.market-category.cat-crop,
.market-item-entry.cat-crop,
.market-detail.cat-crop,
.inventory-cell.cat-crop {
  --cat: var(--grass-dark);
  --cat-bg: rgba(225, 242, 184, 0.72);
}

.listing.cat-animal,
.market-category.cat-animal,
.market-item-entry.cat-animal,
.market-detail.cat-animal,
.inventory-cell.cat-animal {
  --cat: var(--water);
  --cat-bg: rgba(221, 244, 239, 0.74);
}

.listing.cat-gather,
.market-category.cat-gather,
.market-item-entry.cat-gather,
.market-detail.cat-gather,
.inventory-cell.cat-gather {
  --cat: var(--soil);
  --cat-bg: rgba(244, 217, 174, 0.72);
}

.listing.cat-forge,
.market-category.cat-forge,
.market-item-entry.cat-forge,
.market-detail.cat-forge,
.inventory-cell.cat-forge {
  --cat: #6f6b53;
  --cat-bg: rgba(229, 226, 207, 0.76);
}

.listing.cat-food,
.market-category.cat-food,
.market-item-entry.cat-food,
.market-detail.cat-food,
.inventory-cell.cat-food {
  --cat: var(--gold);
  --cat-bg: rgba(255, 235, 174, 0.74);
}

.listing.cat-clothing,
.market-category.cat-clothing,
.market-item-entry.cat-clothing,
.market-detail.cat-clothing,
.inventory-cell.cat-clothing {
  --cat: var(--plum);
  --cat-bg: rgba(235, 222, 238, 0.7);
}

.listing.cat-luxury,
.market-category.cat-luxury,
.market-item-entry.cat-luxury,
.market-detail.cat-luxury,
.inventory-cell.cat-luxury {
  --cat: var(--berry);
  --cat-bg: rgba(250, 222, 208, 0.72);
}

.listing.cat-special,
.market-category.cat-special,
.market-item-entry.cat-special,
.market-detail.cat-special,
.inventory-cell.cat-special {
  --cat: #5f7384;
  --cat-bg: rgba(222, 232, 236, 0.74);
}

.listing[class*="cat-"],
.inventory-cell[class*="cat-"] {
  border-color: var(--cat, #d8b56d);
  background:
    linear-gradient(90deg, var(--cat, #d8b56d) 0 7px, transparent 7px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), var(--cat-bg, rgba(255, 245, 207, 0.58))),
    #fff0bd;
}

.inventory-cell {
  position: relative;
  align-content: start;
  min-height: 188px;
  padding-top: 12px;
}

.inventory-cell .mini-sprite {
  justify-self: center;
  width: 48px;
  height: 48px;
}

.inventory-cell .mini-sprite img {
  width: 44px;
  height: 44px;
}

.inventory-cell strong,
.inventory-cell small {
  text-align: center;
}

.queue-row:hover,
.building:hover,
.listing:hover,
.order:hover,
.inventory-row:hover,
.inventory-cell:hover,
.rank-row:hover,
.research-card:hover,
.dashboard-card:hover {
  border-color: #d69f4d;
  box-shadow: 0 4px 10px rgba(110, 73, 31, 0.1);
}

.queue-row {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
}

.queue-row::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #89b961;
  content: "";
}

.is-home .queue-row {
  gap: 7px;
  border-color: rgba(114, 145, 77, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(235, 245, 196, 0.7)),
    #edf4c4;
  padding: 7px;
}

.queue-row.is-paused {
  border-color: rgba(187, 96, 73, 0.44);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(250, 226, 192, 0.72)),
    #f1d09b;
}

.queue-row.is-paused::before {
  background: #c87955;
}

.queue-row.is-running .progress-label {
  color: #4f7a3f;
  font-weight: 900;
}

.queue-row.is-paused .progress-label {
  color: #a34f42;
  font-weight: 900;
}

.queue-row .progress-label {
  min-width: 42px;
  border: 1px solid rgba(91, 126, 65, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.44);
  line-height: 1;
  padding: 5px 7px;
  text-align: center;
}

.building,
.listing,
.order {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
}

.order-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  align-items: stretch;
}

.order {
  position: relative;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  column-gap: 8px;
  min-height: 166px;
  overflow: hidden;
  border: 2px solid #d8a85d;
  background:
    linear-gradient(90deg, rgba(132, 89, 42, 0.12) 0 8px, transparent 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 239, 188, 0.82)),
    #fff3cb;
  box-shadow: 0 4px 0 rgba(132, 89, 42, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  padding: 12px 12px 10px 18px;
}

.contract-card {
  border-color: rgba(89, 139, 128, 0.52);
  background:
    linear-gradient(90deg, rgba(85, 145, 128, 0.16) 0 8px, transparent 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(221, 244, 239, 0.84)),
    #e7f4d4;
}

.contract-card::after {
  border-color: rgba(82, 138, 126, 0.2);
  background: rgba(188, 226, 218, 0.42);
}

.contract-card.kind-buy {
  border-color: rgba(88, 139, 128, 0.58);
}

.contract-card.kind-buy .price-tag {
  border-color: rgba(82, 138, 126, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent),
    #d7eee8;
  color: #3f6e62;
}

.contract-card.kind-supply {
  border-color: rgba(143, 116, 63, 0.58);
  background:
    linear-gradient(90deg, rgba(174, 126, 55, 0.16) 0 8px, transparent 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(244, 229, 188, 0.84)),
    #f2e1b6;
}

.contract-card.kind-supply .price-tag {
  border-color: rgba(174, 126, 55, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent),
    #ffe0a0;
  color: #7b4b1b;
}

.contract-card.is-active {
  border-color: rgba(84, 132, 91, 0.68);
  background:
    linear-gradient(90deg, rgba(89, 132, 67, 0.2) 0 8px, transparent 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(225, 242, 202, 0.88)),
    #e7f4d4;
}

.contract-card.is-active .price-tag {
  border-color: rgba(91, 142, 82, 0.44);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent),
    #d8edaa;
  color: #3f6c36;
}

.contract-list {
  align-items: stretch;
}

.contract-list .contract-card {
  min-height: 188px;
}

.contract-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.contract-terms span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid rgba(82, 138, 126, 0.18);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent),
    rgba(245, 252, 237, 0.66);
  padding: 6px 7px;
}

.contract-terms small {
  color: rgba(65, 94, 85, 0.78);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.contract-terms strong {
  color: #355c52;
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.kind-supply .contract-terms span {
  border-color: rgba(151, 104, 43, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent),
    rgba(255, 246, 217, 0.68);
}

.kind-supply .contract-terms small,
.kind-supply .contract-terms strong {
  color: #6b4b26;
}

.contract-card .client-portrait {
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-color: rgba(88, 72, 48, 0.28);
  background:
    radial-gradient(circle at 50% 78%, rgba(126, 88, 38, 0.16), transparent 42%),
    #fff1c4;
}

.contract-card .client-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.order::before,
.order::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.order::before {
  left: 9px;
  top: 12px;
  bottom: 12px;
  border-left: 2px dashed rgba(143, 93, 44, 0.22);
}

.order::after {
  right: -18px;
  top: -18px;
  width: 62px;
  height: 62px;
  border: 2px solid rgba(174, 112, 55, 0.18);
  border-radius: 50%;
  background: rgba(255, 224, 160, 0.38);
}

.order.is-tracked {
  border-color: #8fbc6b;
  background:
    linear-gradient(90deg, rgba(89, 132, 67, 0.18) 0 8px, transparent 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(233, 247, 196, 0.86)),
    #eef6cc;
}

.order-batch {
  border-color: rgba(91, 139, 146, 0.62);
  background:
    linear-gradient(90deg, rgba(69, 132, 145, 0.18) 0 8px, transparent 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(221, 244, 239, 0.84)),
    #e8f3d8;
}

.order-publicGoal {
  border-color: rgba(103, 126, 78, 0.72);
  background:
    linear-gradient(90deg, rgba(98, 133, 71, 0.2) 0 8px, transparent 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(232, 242, 198, 0.88)),
    #edf0cf;
}

.order.is-event-order .order-stamp {
  border-color: rgba(174, 101, 86, 0.46);
  background: rgba(255, 229, 166, 0.7);
  color: #7a5225;
}

.order-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.order-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  max-width: 100%;
  border: 1px solid rgba(120, 91, 52, 0.2);
  border-radius: 999px;
  background: rgba(255, 250, 225, 0.76);
  color: #674f30;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 3px 7px;
}

.order-demand-block {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin-top: 8px;
  border: 1px solid rgba(143, 93, 44, 0.18);
  border-radius: 7px;
  background: rgba(255, 252, 232, 0.62);
  padding: 7px;
}

.order-need-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
}

.order-need-list:not(:has(.order-need:nth-child(3))) {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.order-need {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 34px;
  border: 1px solid rgba(126, 88, 38, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.42);
  padding: 4px 6px 4px 4px;
}

.order-need.is-missing {
  border-color: rgba(184, 97, 62, 0.24);
  background: rgba(255, 237, 218, 0.66);
}

.order-need img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}

.order-need span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.order-need strong,
.order-need small {
  overflow-wrap: anywhere;
}

.order-need strong {
  color: #46311f;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.order-need small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.order-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.order-info-grid > span {
  display: grid;
  gap: 2px;
  min-height: 38px;
  border: 1px solid rgba(126, 88, 38, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.34);
  padding: 6px 7px;
}

.order-info-grid small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.order-info-grid strong {
  color: #4f3c27;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.order-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.order-stamp {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  align-self: start;
  z-index: 1;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  transform: rotate(2deg);
  border: 2px solid rgba(151, 88, 53, 0.42);
  color: rgba(132, 72, 45, 0.82);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  padding: 4px 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-commendation-seal {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  transform: rotate(8deg);
  border: 2px solid rgba(112, 42, 33, 0.54);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 206, 154, 0.74) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 74%, rgba(105, 30, 28, 0.35) 0 9px, transparent 10px),
    radial-gradient(circle, #d66a4c 0 49%, #b8463d 50% 64%, #8f2f34 65% 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 173, 118, 0.36),
    inset 0 -6px 0 rgba(112, 33, 33, 0.2),
    0 3px 0 rgba(99, 55, 30, 0.18);
  color: #fff7d7;
  line-height: 1;
  pointer-events: none;
  text-align: center;
}

.order-commendation-seal::before,
.order-commendation-seal::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  pointer-events: none;
}

.order-commendation-seal::before {
  border: 1px dashed rgba(255, 230, 170, 0.58);
  box-shadow: inset 0 0 0 1px rgba(117, 34, 32, 0.2);
}

.order-commendation-seal::after {
  inset: -4px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 0, #b8463d 0 3px, transparent 4px),
    radial-gradient(circle at 100% 50%, #9f3738 0 3px, transparent 4px),
    radial-gradient(circle at 50% 100%, #8f2f34 0 3px, transparent 4px),
    radial-gradient(circle at 0 50%, #c75343 0 3px, transparent 4px);
}

.order-commendation-seal span,
.order-commendation-seal small {
  position: relative;
  z-index: 1;
  display: block;
  text-shadow: 0 1px 0 rgba(80, 25, 25, 0.42);
}

.order-commendation-seal span {
  font-size: 15px;
  font-weight: 950;
}

.order-commendation-seal small {
  margin-top: -1px;
  font-size: 10px;
  font-weight: 950;
}

.order .row-main {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  gap: 0;
  padding-right: 0;
}

.order .row-main strong {
  display: block;
  font-size: 17px;
  line-height: 1.2;
}

.order .actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px dashed rgba(143, 93, 44, 0.22);
  margin-top: 2px;
  padding-top: 2px;
}

.contract-card .actions {
  border-top-color: rgba(82, 138, 126, 0.28);
}

.order .actions button[data-action="track-order"] {
  background: #e8f4c5;
  color: #4c6d38;
}

.order .actions button[data-action="order-market"] {
  background: #dff1ef;
  color: #356f68;
}

.order .actions button[data-action="abandon-order"] {
  background: #f0d7bb;
  color: #7a4d31;
}

.order .actions button[data-action="order"]:disabled {
  border-color: rgba(90, 86, 78, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(137, 133, 124, 0.16)),
    #bfb9aa;
  color: rgba(65, 60, 52, 0.68);
  opacity: 0.72;
}

.building-detail {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.92fr);
  gap: 12px;
  border-width: 2px;
  background:
    linear-gradient(90deg, rgba(119, 157, 88, 0.13) 0 10px, transparent 10px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 242, 198, 0.78)),
    #fff0bd;
}

.building-page-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid rgba(123, 91, 47, 0.18);
  border-radius: 8px;
  background: rgba(255, 250, 229, 0.58);
}

.building-page-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 40px;
  border-radius: 7px;
  border-color: rgba(116, 84, 44, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(231, 213, 158, 0.7)),
    #ead89d;
  color: #644328;
  font-weight: 900;
}

.building-page-tab.active {
  border-color: rgba(100, 142, 71, 0.56);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(190, 220, 132, 0.78)),
    #dceca9;
  color: #3e632f;
}

.building-page-tab span {
  min-width: 24px;
  border-radius: 999px;
  background: rgba(82, 58, 32, 0.14);
  font-size: 12px;
  line-height: 1;
  padding: 4px 6px;
}

.building-page-body {
  display: grid;
  gap: 10px;
}

.building-chain {
  overflow: hidden;
  border: 1px solid rgba(123, 91, 47, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(246, 232, 183, 0.72)),
    #f4e8bd;
}

.building-chain.open {
  box-shadow: inset 0 0 0 1px rgba(94, 139, 67, 0.16);
}

.building-chain-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #4b3622;
  text-align: left;
  padding: 10px 12px;
}

.building-chain-summary > span:nth-child(2) {
  min-width: 0;
}

.building-chain-summary strong,
.building-chain-summary small {
  display: block;
}

.building-chain-summary small {
  margin-top: 2px;
  color: rgba(73, 62, 42, 0.68);
  font-size: 12px;
  font-weight: 700;
}

.chain-caret {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(168, 202, 111, 0.66)),
    #d9e9a5;
}

.chain-caret::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 7px auto 0;
  border-right: 2px solid #4d6f36;
  border-bottom: 2px solid #4d6f36;
  transform: rotate(-45deg);
}

.building-chain.open .chain-caret::before {
  margin-top: 5px;
  transform: rotate(45deg);
}

.building-chain-body {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.building-subsection {
  margin: 2px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(122, 88, 42, 0.14);
}

.building-status-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.functional-building .building-status-card {
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
}

.functional-building .row-main {
  display: grid;
  gap: 5px;
}

.functional-building .row-main > strong {
  color: #3a2d1f;
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: normal;
}

.functional-building .row-main > .tiny {
  margin: 0;
  color: rgba(63, 52, 35, 0.72);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.functional-building-summary {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(122, 88, 42, 0.18);
  border-radius: 8px;
  background: rgba(255, 253, 241, 0.66);
}

.functional-building-summary span,
.functional-building-summary strong,
.functional-building-summary small {
  display: block;
}

.functional-building-summary span {
  color: rgba(73, 62, 42, 0.66);
  font-size: 11px;
  font-weight: 800;
}

.functional-building-summary strong {
  margin-top: 2px;
  color: #4f6d35;
  font-size: 17px;
  line-height: 1.2;
}

.functional-building-summary small {
  margin-top: 3px;
  color: #6d5335;
  font-size: 12px;
  line-height: 1.3;
}

.functional-building .building-actions {
  display: flex;
  justify-content: flex-end;
}

.functional-building .building-actions button {
  min-width: 104px;
  min-height: 38px;
  padding: 8px 14px;
  white-space: nowrap;
}

.building-blueprint-exchange-list {
  display: grid;
  gap: 8px;
}

.building-blueprint-exchange-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(86, 119, 151, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(72, 115, 154, 0.12) 0 9px, transparent 9px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(221, 235, 241, 0.72)),
    #eef0c9;
  padding: 9px 10px;
}

.building-blueprint-exchange-card .mini-sprite {
  width: 52px;
  height: 52px;
  border-color: rgba(86, 119, 151, 0.3);
  background:
    radial-gradient(circle at 52% 58%, rgba(88, 134, 164, 0.2), transparent 46%),
    #fff3c7;
}

.building-blueprint-exchange-card .mini-sprite img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.building-blueprint-exchange-card .row-main {
  display: grid;
  gap: 5px;
}

.building-blueprint-exchange-card strong {
  color: #334f67;
  font-size: 15px;
  line-height: 1.25;
}

.building-blueprint-exchange-card button {
  min-width: 92px;
  min-height: 38px;
  white-space: nowrap;
}

.blueprint-exchange-progress {
  overflow: hidden;
  height: 8px;
  border: 1px solid rgba(82, 114, 143, 0.22);
  border-radius: 999px;
  background: rgba(255, 253, 241, 0.78);
}

.blueprint-exchange-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(93, 144, 183, 0.9), rgba(99, 155, 116, 0.88)),
    #6698bd;
}

.building-status-card > .sprite,
.building-detail > .sprite {
  width: 92px;
  height: 72px;
  border-color: rgba(123, 91, 47, 0.28);
  background:
    radial-gradient(circle at 50% 72%, rgba(116, 176, 95, 0.22), transparent 42%),
    #f6e6ad;
}

.building-status-card > .sprite img,
.building-detail > .sprite img {
  width: 88px;
  height: 68px;
  object-fit: cover;
  object-position: center;
}

.building-upgrade-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(122, 88, 42, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(238, 248, 220, 0.72)),
    #f3edc9;
}

.upgrade-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.upgrade-card-head strong {
  display: block;
  color: #3e5f31;
}

.upgrade-card-head span {
  display: block;
  color: rgba(73, 62, 42, 0.68);
  font-size: 12px;
}

.building-level-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.building-level-actions button {
  min-width: 64px;
}

.building-downgrade-note {
  display: flex;
  align-items: center;
  gap: 6px;
}

.upgrade-condition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.upgrade-condition {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(122, 88, 42, 0.18);
  border-radius: 7px;
  background: rgba(255, 250, 231, 0.82);
}

.upgrade-condition span,
.upgrade-condition strong {
  display: block;
  overflow-wrap: anywhere;
}

.upgrade-condition span {
  color: rgba(73, 62, 42, 0.66);
  font-size: 11px;
}

.upgrade-condition strong {
  color: #5d452b;
  font-size: 12px;
}

.upgrade-condition.done strong {
  color: #3f7a35;
}

.upgrade-condition.missing strong {
  color: #9a4c29;
}

.upgrade-milestone {
  grid-column: 1 / -1;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(90, 131, 68, 0.12);
  color: #3f6b32;
  font-size: 12px;
  font-weight: 700;
}

.locked-building {
  border-style: dashed;
  border-color: rgba(128, 111, 85, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(236, 226, 202, 0.58)),
    #ead9b4;
  color: rgba(56, 45, 30, 0.78);
}

.locked-building .sprite {
  position: relative;
}

.locked-building .sprite > img {
  filter: grayscale(0.65);
  opacity: 0.72;
}

.locked-building .sprite::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 32px;
  height: 32px;
  background: var(--lock-icon-image) center / contain no-repeat;
  content: "";
  filter: drop-shadow(0 2px 0 rgba(64, 45, 24, 0.18));
  image-rendering: pixelated;
}

.ready-building {
  border-color: rgba(99, 147, 82, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(226, 242, 209, 0.72)),
    #eaf3cb;
}

.ready-unlock-list {
  margin-top: 8px;
}

.unlock-list {
  margin-top: 8px;
}

.dashboard-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 108px;
  position: relative;
  overflow: hidden;
}

.dashboard-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--grass-dark), var(--gold));
  content: "";
  opacity: 0.72;
}

.is-home .dashboard-panel {
  padding: 9px;
}

.newbie-task-banner {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 72px;
  margin-bottom: 8px;
  overflow: hidden;
  border: 3px solid rgba(132, 89, 42, 0.52);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20px 16px, rgba(255, 255, 255, 0.7) 0 8px, transparent 9px),
    linear-gradient(135deg, #fff0a8 0%, #ffd56e 42%, #dff3b8 100%);
  box-shadow: inset 0 -4px rgba(125, 79, 22, 0.16), 0 6px 0 rgba(91, 55, 22, 0.12), 0 14px 24px rgba(91, 55, 22, 0.12);
  text-align: left;
}

.newbie-task-banner::before {
  position: absolute;
  right: 62px;
  top: -22px;
  width: 92px;
  height: 92px;
  border: 3px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  content: "";
}

.newbie-task-banner::after {
  position: absolute;
  left: 16px;
  bottom: 5px;
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: rgba(120, 180, 99, 0.45);
  content: "";
}

.newbie-task-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 3px solid #7d5935;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent),
    #fff8dc;
  box-shadow: inset 0 -3px rgba(125, 79, 22, 0.14);
}

.newbie-task-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}

.newbie-task-icon .guide-symbol {
  width: 42px;
  height: 42px;
}

.guide-symbol {
  --symbol-bg: #fff8dc;
  --symbol-accent: #78b463;
  --symbol-dark: #5c422b;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 3px solid var(--symbol-dark);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), transparent),
    var(--symbol-bg);
  box-shadow: inset 0 -3px rgba(92, 66, 43, 0.16), 0 2px 0 rgba(92, 66, 43, 0.12);
}

.guide-symbol::before,
.guide-symbol::after {
  position: absolute;
  content: "";
}

.guide-symbol-production {
  --symbol-accent: #78b463;
}

.guide-symbol-production::before {
  width: 19px;
  height: 19px;
  border: 5px solid var(--symbol-accent);
  border-radius: 50%;
  box-shadow:
    0 -11px 0 -6px var(--symbol-dark),
    0 11px 0 -6px var(--symbol-dark),
    -11px 0 0 -6px var(--symbol-dark),
    11px 0 0 -6px var(--symbol-dark);
}

.guide-symbol-production::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--symbol-dark);
}

.guide-symbol-order {
  --symbol-accent: #5e9ccf;
}

.guide-symbol-order::before {
  width: 22px;
  height: 26px;
  border: 3px solid var(--symbol-dark);
  border-radius: 4px;
  background:
    linear-gradient(var(--symbol-accent), var(--symbol-accent)) 5px 8px / 12px 3px no-repeat,
    linear-gradient(var(--symbol-accent), var(--symbol-accent)) 5px 15px / 12px 3px no-repeat,
    #fffdf0;
}

.guide-symbol-order::after {
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  background:
    linear-gradient(var(--symbol-dark), var(--symbol-dark)) right top / 3px 11px no-repeat,
    linear-gradient(var(--symbol-dark), var(--symbol-dark)) right bottom / 11px 3px no-repeat;
}

.guide-symbol-research {
  --symbol-accent: #6d83c5;
}

.guide-symbol-research::before {
  width: 24px;
  height: 24px;
  border: 3px solid var(--symbol-dark);
  border-radius: 4px 7px 7px 4px;
  background:
    linear-gradient(90deg, var(--symbol-accent) 0 7px, #fffdf0 7px);
}

.guide-symbol-research::after {
  left: 20px;
  width: 3px;
  height: 24px;
  background: rgba(92, 66, 43, 0.7);
}

.guide-symbol-upgrade {
  --symbol-accent: #d59b42;
}

.guide-symbol-upgrade::before {
  width: 10px;
  height: 25px;
  border-radius: 4px;
  background: var(--symbol-dark);
  transform: rotate(45deg);
}

.guide-symbol-upgrade::after {
  top: 8px;
  left: 10px;
  width: 20px;
  height: 11px;
  border-radius: 3px;
  background: var(--symbol-accent);
  transform: rotate(45deg);
}

.guide-symbol-market {
  --symbol-accent: #dc6f4d;
}

.guide-symbol-market::before {
  top: 10px;
  width: 26px;
  height: 10px;
  border: 3px solid var(--symbol-dark);
  border-radius: 7px 7px 3px 3px;
  background:
    linear-gradient(90deg, var(--symbol-accent) 0 33%, #fff0bd 33% 66%, var(--symbol-accent) 66%);
}

.guide-symbol-market::after {
  bottom: 8px;
  width: 22px;
  height: 14px;
  border: 3px solid var(--symbol-dark);
  border-top: 0;
  background: #fffdf0;
}

.guide-symbol-branch {
  --symbol-accent: #6aa87a;
}

.guide-symbol-branch::before {
  width: 5px;
  height: 25px;
  border-radius: 999px;
  background: var(--symbol-dark);
}

.guide-symbol-branch::after {
  width: 24px;
  height: 24px;
  border-radius: 0 12px 0 0;
  background:
    linear-gradient(var(--symbol-accent), var(--symbol-accent)) 0 0 / 24px 5px no-repeat,
    linear-gradient(var(--symbol-accent), var(--symbol-accent)) right 0 / 5px 24px no-repeat;
  transform: translate(4px, -2px) rotate(-45deg);
}

.guide-symbol-pet {
  --symbol-accent: #d98b75;
}

.guide-symbol-pet::before {
  bottom: 8px;
  width: 20px;
  height: 16px;
  border-radius: 50% 50% 44% 44%;
  background: var(--symbol-accent);
  box-shadow: inset 0 -3px rgba(92, 66, 43, 0.18);
}

.guide-symbol-pet::after {
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--symbol-accent);
  box-shadow:
    -9px 5px 0 0 var(--symbol-accent),
    0 5px 0 0 var(--symbol-accent),
    9px 5px 0 0 var(--symbol-accent);
}

.guide-symbol-chain {
  --symbol-accent: #7a8c9a;
}

.guide-symbol-chain::before,
.guide-symbol-chain::after {
  width: 18px;
  height: 11px;
  border: 4px solid var(--symbol-accent);
  border-radius: 999px;
}

.guide-symbol-chain::before {
  transform: translate(-6px, -3px) rotate(-35deg);
}

.guide-symbol-chain::after {
  transform: translate(6px, 3px) rotate(-35deg);
}

.guide-symbol-graduation {
  --symbol-accent: #d6a23e;
}

.guide-symbol-graduation::before {
  top: 8px;
  width: 24px;
  height: 14px;
  border: 3px solid var(--symbol-dark);
  border-radius: 50% 50% 45% 45%;
  background: var(--symbol-accent);
}

.guide-symbol-graduation::after {
  bottom: 7px;
  width: 12px;
  height: 16px;
  background:
    linear-gradient(135deg, transparent 0 45%, #c9534e 46% 100%) left / 50% 100% no-repeat,
    linear-gradient(225deg, transparent 0 45%, #c9534e 46% 100%) right / 50% 100% no-repeat;
}

.guide-symbol-quest {
  --symbol-accent: #f2b94b;
}

.guide-symbol-quest::before {
  width: 23px;
  height: 27px;
  border: 3px solid var(--symbol-dark);
  border-radius: 7px;
  background: var(--symbol-accent);
}

.guide-symbol-quest::after {
  width: 5px;
  height: 17px;
  border-radius: 999px;
  background: var(--symbol-dark);
  box-shadow: 0 11px 0 -1px var(--symbol-dark);
}

.newbie-task-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.newbie-task-copy strong,
.newbie-task-copy small {
  display: block;
}

.newbie-task-copy strong {
  color: #3f3026;
  font-size: 20px;
  line-height: 1.1;
}

.newbie-task-copy small {
  margin-top: 4px;
  color: #634a2d;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
}

.newbie-task-cta {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 34px;
  border: 2px solid rgba(89, 69, 37, 0.32);
  border-radius: 8px;
  background: #fff8dc;
  color: #5a7d3d;
  font-size: 13px;
  font-weight: 950;
  box-shadow: inset 0 -2px rgba(125, 79, 22, 0.12);
}

.is-home .dashboard-panel .panel-head {
  display: flex;
}

.is-home .dashboard-grid {
  gap: 6px;
}

.is-home .dashboard-card {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 7px;
  min-height: 58px;
  padding: 7px 7px 7px 12px;
}

.is-home .dashboard-card .sprite {
  width: 36px;
  height: 36px;
}

.is-home .dashboard-card .sprite img {
  width: 34px;
  height: 34px;
}

.buff-summary-panel {
  padding: 9px;
}

.buff-summary-panel .panel-head {
  margin-bottom: 7px;
}

.buff-detail-list {
  display: grid;
  gap: 6px;
}

.buff-detail-card {
  display: grid;
  grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.6fr);
  gap: 8px;
  align-items: start;
  border: 1px solid rgba(116, 82, 44, 0.22);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 252, 229, 0.66), rgba(232, 207, 151, 0.34)),
    rgba(255, 246, 212, 0.66);
  padding: 7px;
}

.buff-detail-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.buff-detail-title strong {
  color: #4d3a22;
  font-size: 12px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.buff-detail-title small {
  color: rgba(83, 62, 36, 0.58);
  font-size: 9px;
  font-weight: 800;
}

.buff-effect-list {
  display: grid;
  gap: 5px;
}

.buff-effect-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.buff-effect-row > span {
  color: rgba(83, 62, 36, 0.7);
  font-size: 10px;
  font-weight: 900;
}

.buff-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.buff-source-list i {
  color: rgba(83, 62, 36, 0.44);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.buff-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 22px;
  border-color: rgba(139, 91, 44, 0.28);
  border: 1px solid rgba(139, 91, 44, 0.28);
  border-radius: 6px;
  background: rgba(255, 236, 176, 0.82);
  color: #5d3f1e;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.buff-source-chip b {
  color: rgba(83, 62, 36, 0.62);
  font-size: 9px;
}

.is-home .dashboard-card strong {
  display: block;
  font-size: 13px;
  line-height: 1.2;
}

.is-home .dashboard-card .tiny {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.is-home .dashboard-card button {
  grid-column: auto;
  min-height: 28px;
  padding: 4px 7px;
  font-size: 11px;
}

.dashboard-card.unlock-card {
  border-color: rgba(94, 128, 75, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(229, 242, 203, 0.74)),
    #e8f1c6;
}

.dashboard-card.guide-card {
  border-color: rgba(216, 157, 67, 0.78);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 224, 138, 0.38), transparent 48px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 239, 177, 0.86)),
    #fff0bd;
}

.dashboard-card.guide-card::before {
  background: linear-gradient(180deg, #d85f4a, var(--gold));
  opacity: 1;
}

.dashboard-card.guide-card .sprite {
  display: grid;
  place-items: center;
  border-color: rgba(216, 157, 67, 0.78);
  background: #fff8dc;
}

.dashboard-card.guide-card .sprite .guide-symbol {
  width: 42px;
  height: 42px;
}

.dashboard-card.guide-card button {
  background: linear-gradient(180deg, #fff4a8, #f2b94b);
}

.is-home .dashboard-card:nth-child(n+5) {
  display: none;
}

.is-home .dashboard-card.guide-card {
  display: grid;
}

.is-home .dashboard-card:nth-child(2)::before {
  background: linear-gradient(180deg, var(--water), var(--grass-dark));
}

.is-home .dashboard-card:nth-child(3)::before {
  background: linear-gradient(180deg, var(--soil), var(--gold));
}

.is-home .dashboard-card:nth-child(4)::before {
  background: linear-gradient(180deg, var(--peach), var(--plum));
}

.dashboard-card button {
  grid-column: 1 / -1;
  justify-self: start;
}

.event-card {
  border-color: rgba(126, 88, 38, 0.34);
  background:
    radial-gradient(circle at 16px 16px, rgba(135, 95, 45, 0.28) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 16px) 16px, rgba(135, 95, 45, 0.24) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(244, 225, 177, 0.76)),
    #f4d79c;
}

.event-card::before {
  background: linear-gradient(180deg, #b77d45, var(--gold));
}

.event-card .event-sprite {
  width: 66px;
  height: 54px;
  border-color: rgba(126, 88, 38, 0.2);
  background:
    radial-gradient(circle at 50% 88%, rgba(110, 145, 76, 0.18), transparent 48%),
    rgba(255, 248, 220, 0.58);
}

.event-card .event-sprite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.town-goal-panel {
  border-color: rgba(107, 139, 76, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(229, 242, 202, 0.82)),
    #e9f2c7;
}

.town-goal-panel.event-tourist {
  border-color: rgba(83, 139, 123, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(219, 242, 231, 0.78)),
    #dff0d6;
}

.town-goal-panel.event-festival {
  border-color: rgba(174, 101, 86, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(248, 220, 198, 0.78)),
    #f4d79c;
}

.town-goal-panel.event-build {
  border-color: rgba(132, 104, 68, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(231, 216, 185, 0.82)),
    #ead9b4;
}

.town-goal-panel.event-quiet {
  border-color: rgba(111, 133, 88, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(228, 239, 200, 0.8)),
    #edf0cf;
}

.town-goal-panel[class*="event-"] {
  border-color: rgba(126, 88, 38, 0.34);
}

.town-goal-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 8px 0 5px;
}

.town-goal-meter > span {
  color: #5f6f3e;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.town-goal-reward-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.town-goal-reward-row p {
  margin: 0;
}

.town-goal-reward-row button {
  min-width: 112px;
}

.event-command-layout {
  display: grid;
  gap: 12px;
}

.event-brief-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(126, 88, 38, 0.28);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(244, 225, 177, 0.72)),
    var(--ticket);
}

.event-brief-card .event-sprite {
  width: 84px;
  height: 64px;
  border-color: rgba(126, 88, 38, 0.22);
  background: rgba(255, 248, 220, 0.62);
}

.event-brief-card .event-sprite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.event-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.event-tag-row span {
  padding: 4px 8px;
  border: 1px solid rgba(126, 88, 38, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  color: #685132;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 640px) {
  .title-forge-card,
  .title-part-picker,
  .achievement-group-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .achievement-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .achievement-card-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .achievement-card-foot button {
    width: 100%;
  }

  .title-forge-preview strong {
    font-size: 21px;
  }

  .event-brief-card,
  .town-goal-reward-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .event-brief-card .event-sprite {
    width: 72px;
    height: 58px;
  }

  .town-goal-reward-row button {
    width: 100%;
  }
}

.event-grid.event-tourist .event-card::before {
  background: linear-gradient(180deg, #559180, var(--water));
}

.event-grid.event-tourist .event-card {
  border-color: rgba(83, 139, 123, 0.42);
  background:
    radial-gradient(circle at 16px 16px, rgba(83, 139, 123, 0.22) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 16px) 16px, rgba(83, 139, 123, 0.18) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(219, 242, 231, 0.76)),
    #dff0d6;
}

.event-grid.event-festival .event-card {
  border-color: rgba(174, 101, 86, 0.42);
  background:
    radial-gradient(circle at 16px 16px, rgba(174, 101, 86, 0.22) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 16px) 16px, rgba(174, 101, 86, 0.18) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(248, 220, 198, 0.78)),
    #f4d79c;
}

.event-grid.event-festival .event-card::before {
  background: linear-gradient(180deg, #c87955, var(--gold));
}

.event-grid.event-build .event-card {
  border-color: rgba(132, 104, 68, 0.46);
  background:
    radial-gradient(circle at 16px 16px, rgba(132, 104, 68, 0.24) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 16px) 16px, rgba(132, 104, 68, 0.18) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(231, 216, 185, 0.8)),
    #ead9b4;
}

.event-grid.event-build .event-card::before {
  background: linear-gradient(180deg, #8c6d45, var(--soil));
}

.event-grid.event-quiet .event-card {
  border-color: rgba(111, 133, 88, 0.42);
  background:
    radial-gradient(circle at 16px 16px, rgba(111, 133, 88, 0.22) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 16px) 16px, rgba(111, 133, 88, 0.16) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(228, 239, 200, 0.78)),
    #edf0cf;
}

.event-grid.event-quiet .event-card::before {
  background: linear-gradient(180deg, #6f8558, var(--grass-dark));
}

.event-grid[class*="event-"] .event-card {
  border-color: rgba(126, 88, 38, 0.34);
}

.tracked-orders-panel {
  border-color: rgba(102, 143, 72, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(237, 247, 202, 0.82)),
    #eef5cc;
}

.tracked-order-list {
  gap: 7px;
}

.home-stage .tracked-order-list {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.home-stage .tracked-order-card {
  min-height: 72px;
}

.tracked-order-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 66px;
  border: 1px solid rgba(110, 145, 76, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(243, 249, 216, 0.78)),
    #f4f3c9;
  box-shadow: 0 2px 0 rgba(88, 119, 58, 0.1);
  padding: 7px;
}

.tracked-order-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #c87955;
  content: "";
}

.tracked-order-card.is-ready {
  border-color: rgba(90, 147, 69, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(229, 244, 196, 0.84)),
    #edf5c7;
}

.tracked-order-card.is-ready::before {
  background: #78a94f;
}

.tracked-order-card.is-ready button {
  background: #d8edaa;
  color: #3f6c36;
}

.tracked-order-card strong {
  display: block;
  color: #3e4f2f;
  font-size: 13px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.tracked-order-card .tiny {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tracked-order-card button {
  min-height: 44px;
  padding: 6px 9px;
  font-size: 11px;
}

.is-home .home-hud .town-goal-panel,
.is-home .home-hud .tracked-orders-panel,
.is-home .home-hud .queue-panel {
  border: 3px solid rgba(66, 43, 24, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 239, 184, 0.18), rgba(42, 29, 18, 0.1)),
    repeating-linear-gradient(90deg, rgba(139, 92, 48, 0.92) 0 18px, rgba(113, 73, 39, 0.92) 18px 36px),
    var(--wood);
  box-shadow:
    inset 0 0 0 2px rgba(255, 235, 174, 0.12),
    inset 0 -5px rgba(50, 32, 18, 0.14),
    0 5px 0 rgba(50, 32, 18, 0.18),
    0 14px 22px rgba(42, 65, 32, 0.12);
  color: #fff3cf;
  padding: 9px;
}

.is-home .home-hud .panel::before {
  background:
    radial-gradient(circle at 18px 16px, rgba(54, 35, 20, 0.32) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 18px) 16px, rgba(54, 35, 20, 0.28) 0 3px, transparent 4px);
  background-size: auto;
  opacity: 0.55;
}

.is-home .home-hud .panel-head {
  align-items: center;
  min-height: 42px;
  margin-bottom: 7px;
  border: 1px solid rgba(255, 239, 184, 0.16);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 250, 225, 0.16), rgba(55, 36, 20, 0.12)),
    rgba(72, 46, 26, 0.38);
  box-shadow: inset 0 1px rgba(255, 247, 213, 0.1);
  padding: 6px 8px;
}

.is-home .home-hud .panel-head h2 {
  color: #fff5d6;
  text-shadow: 0 1px 0 rgba(38, 24, 14, 0.36);
}

.is-home .home-hud .panel-head .tiny,
.is-home .home-hud .panel > .tiny {
  color: rgba(255, 243, 207, 0.78);
}

.is-home .home-hud .pill,
.is-home .home-hud .count-chip {
  border: 1px solid rgba(255, 238, 184, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 246, 210, 0.34), rgba(65, 42, 24, 0.08)),
    #d4ad6e;
  box-shadow: inset 0 -2px rgba(69, 43, 23, 0.12);
  color: #4f341f;
}

.is-home .town-goal-meter {
  border: 1px solid rgba(255, 238, 184, 0.2);
  border-radius: 7px;
  background: rgba(52, 34, 20, 0.22);
  padding: 6px;
}

.is-home .town-goal-meter > span {
  color: #fff0c2;
}

.is-home .tracked-orders-panel {
  --board-pin: #c87955;
}

.is-home .tracked-orders-panel .tracked-order-list,
.is-home .queue-panel .queue-list {
  gap: 6px;
}

.is-home .tracked-order-card,
.is-home .queue-row {
  border: 1px solid rgba(89, 61, 35, 0.24);
  border-radius: 7px;
  background:
    linear-gradient(90deg, var(--board-pin, #b88a45) 0 5px, transparent 5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(243, 222, 174, 0.76)),
    #efd29a;
  box-shadow:
    0 2px 0 rgba(50, 32, 18, 0.16),
    inset 0 1px rgba(255, 250, 225, 0.62);
  color: #4b321f;
}

.is-home .tracked-order-card::before {
  width: 0;
}

.is-home .tracked-order-card::after,
.is-home .queue-row::after {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(129, 82, 43, 0.44);
  box-shadow: 0 1px 0 rgba(255, 246, 210, 0.34) inset;
  content: "";
}

.is-home .tracked-order-card.is-ready {
  --board-pin: #6f9b4f;
  background:
    linear-gradient(90deg, var(--board-pin) 0 5px, transparent 5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(225, 239, 189, 0.8)),
    #e4edb8;
}

.is-home .tracked-order-card strong,
.is-home .queue-row strong {
  color: #3f3026;
}

.is-home .tracked-order-card .tiny,
.is-home .queue-row .tiny {
  color: rgba(69, 47, 31, 0.72);
}

.is-home .tracked-order-card button {
  min-width: 48px;
  border-color: rgba(86, 57, 31, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 246, 210, 0.56), rgba(202, 150, 73, 0.82)),
    #c99854;
}

.is-home .queue-row {
  position: relative;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 60px;
  padding: 7px 8px;
}

.is-home .queue-row.is-running {
  --board-pin: #6f9b4f;
}

.is-home .queue-row.is-paused {
  --board-pin: #b65f4d;
}

.is-home .home-stage .pet-home-card {
  min-height: 128px;
  overflow: hidden;
  border: 2px solid rgba(224, 161, 99, 0.72);
  border-radius: 8px;
  background:
    url("assets/ui/pet-home-card-bg-wide.png") center / cover no-repeat,
    #fff4d9;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.42),
    0 4px 0 rgba(214, 141, 80, 0.16),
    0 12px 22px rgba(82, 104, 60, 0.14);
  color: #5c4328;
  padding: 13px 16px;
}

.is-home .home-stage .pet-home-card::after {
  display: none;
}

.is-home .pet-home-main {
  border: 1px solid rgba(222, 167, 103, 0.22);
  border-radius: 8px;
  background: rgba(255, 252, 238, 0.7);
  box-shadow: inset 0 -2px 0 rgba(225, 172, 101, 0.08);
  padding: 8px;
}

.is-home .pet-showcase {
  grid-template-columns: 78px minmax(0, 1fr);
}

.is-home .pet-sheet {
  width: 78px;
  border-color: rgba(222, 167, 103, 0.42);
  background:
    radial-gradient(circle at 50% 72%, rgba(132, 181, 116, 0.22), transparent 42%),
    var(--pet-sheet) var(--pet-x, 0) var(--pet-y, 0) / 200% 200% no-repeat,
    #fff5d7;
}

.is-home .pet-copy strong {
  color: #5b3a25;
}

.is-home .pet-copy span,
.is-home .pet-copy small {
  color: rgba(93, 68, 43, 0.74);
}

.is-home .pet-care-note {
  border-color: rgba(222, 167, 103, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 242, 211, 0.62)),
    rgba(255, 252, 238, 0.78);
  color: #684a2f;
  box-shadow: inset 0 -2px 0 rgba(225, 172, 101, 0.08);
}

.is-home .pet-home-actions button {
  border-color: rgba(218, 150, 82, 0.4);
  background:
    linear-gradient(180deg, rgba(255, 244, 199, 0.92), rgba(239, 176, 91, 0.9)),
    #f0b263;
  color: #5b341d;
}

.is-home .pet-home-actions .secondary {
  border-color: rgba(105, 151, 94, 0.38);
  background:
    linear-gradient(180deg, rgba(240, 252, 220, 0.9), rgba(158, 199, 132, 0.86)),
    #a4c986;
  color: #36532f;
  text-shadow: none;
}

.is-home .pet-roster span {
  border-color: rgba(255, 238, 184, 0.18);
  background: rgba(48, 31, 18, 0.22);
  color: rgba(255, 243, 207, 0.82);
}

.is-home .pet-roster span.active {
  border-color: rgba(232, 204, 121, 0.56);
  background:
    linear-gradient(180deg, rgba(255, 246, 210, 0.28), rgba(97, 135, 73, 0.26)),
    rgba(77, 109, 60, 0.54);
  color: #fff7d7;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  margin: 14px;
}

.row-main {
  min-width: 0;
}

.row-main strong {
  overflow-wrap: anywhere;
}

.sprite,
.mini-sprite {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #d6b66a;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 239, 188, 0.7)),
    #f3dfaa;
  box-shadow: 0 2px 0 rgba(121, 82, 35, 0.1);
  overflow: hidden;
}

.sprite {
  width: 48px;
  height: 48px;
}

.sprite img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  image-rendering: pixelated;
}

.item-sprite img {
  width: 42px;
  height: 42px;
}

.mini-sprite {
  width: 38px;
  height: 38px;
}

.mini-sprite img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}

.actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.building-actions {
  align-self: start;
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 6px;
  justify-content: end;
}

.building-actions .icon-action {
  position: relative;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.building-actions .worker-action {
  border-color: rgba(69, 119, 55, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(213, 239, 177, 0.86)),
    #d8efb2;
  color: #355f30;
}

.building-actions .release-worker {
  border-color: rgba(150, 95, 53, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(244, 210, 158, 0.88)),
    #f3cd8e;
  color: #7b4b2c;
}

.building-actions .upgrade-action {
  border-color: rgba(145, 91, 25, 0.28);
}

.worker-tool-icon {
  --tool-ink: currentColor;
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
}

.worker-tool-icon::before,
.worker-tool-icon::after {
  position: absolute;
  content: "";
}

.worker-tool-add::before,
.worker-tool-remove::before {
  left: 2px;
  top: 3px;
  width: 11px;
  height: 15px;
  border-radius: 6px 6px 4px 4px;
  background:
    radial-gradient(circle at 50% 4px, var(--tool-ink) 0 4px, transparent 4px),
    linear-gradient(var(--tool-ink), var(--tool-ink)) 2px 11px / 7px 5px no-repeat;
}

.worker-tool-add::after,
.worker-tool-remove::after {
  right: 0;
  top: 8px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--tool-ink);
  border-radius: 50%;
  background:
    linear-gradient(var(--tool-ink), var(--tool-ink)) 3px 4px / 5px 2px no-repeat,
    transparent;
}

.worker-tool-add::after {
  background:
    linear-gradient(var(--tool-ink), var(--tool-ink)) 3px 4px / 5px 2px no-repeat,
    linear-gradient(var(--tool-ink), var(--tool-ink)) 4px 3px / 2px 5px no-repeat;
}

.worker-tool-upgrade::before {
  left: 7px;
  top: 3px;
  width: 8px;
  height: 17px;
  border-radius: 4px;
  background: var(--tool-ink);
  transform: rotate(45deg);
}

.worker-tool-upgrade::after {
  left: 3px;
  top: 5px;
  width: 15px;
  height: 8px;
  border-radius: 3px;
  background: rgba(255, 248, 220, 0.9);
  box-shadow: inset 0 0 0 2px var(--tool-ink);
  transform: rotate(45deg);
}

.building-tool-slot {
  position: relative;
  width: 100%;
  min-height: 58px;
  margin-top: 8px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  border: 1px solid rgba(122, 88, 42, 0.24);
  border-left: 4px solid var(--quality, rgba(122, 88, 42, 0.34));
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 241, 196, 0.72)),
    #f4dfa8;
  color: #5f4428;
  text-align: left;
}

.building-tool-slot.equipped {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
}

.building-tool-slot.equipped > span:not(.building-tool-icon),
.building-tool-slot.equipped > strong,
.building-tool-slot.equipped > small {
  grid-column: 2;
}

.building-tool-slot .building-tool-icon {
  grid-row: 1 / span 3;
  width: 34px;
  height: 34px;
}

button.building-tool-slot {
  cursor: pointer;
}

.building-tool-slot span,
.building-tool-slot small {
  color: rgba(95, 68, 40, 0.72);
  font-size: 11px;
}

.building-tool-slot strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.building-tool-slot.empty {
  border-style: dashed;
}

.building-tool-slot.equipped {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--quality) 34%, transparent), 0 2px 0 rgba(121, 82, 35, 0.08);
}

.slot-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.slot {
  position: relative;
  min-height: 86px;
  overflow: hidden;
  border: 1px solid rgba(122, 88, 42, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 241, 196, 0.76)),
    #f3dfa8;
  box-shadow: inset 0 -2px rgba(125, 79, 22, 0.1), 0 2px 0 rgba(121, 82, 35, 0.08);
  color: #674f30;
  font-size: 12px;
  line-height: 1.15;
  text-align: left;
  text-overflow: ellipsis;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 4px 8px;
  padding: 9px 8px 8px;
}

.slot:not(.locked),
.slot.assigned {
  border-left-color: var(--grass-dark);
  box-shadow: inset 0 0 0 2px rgba(120, 180, 99, 0.14), inset 0 -2px rgba(125, 79, 22, 0.1), 0 2px 0 rgba(121, 82, 35, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent),
    #e8f4c5;
  color: #466a35;
}

.slot.assigned {
  border-color: rgba(88, 139, 69, 0.45);
  border-left-color: rgba(88, 139, 69, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent),
    #dcefc4;
}

.slot.locked {
  border-left-color: rgba(99, 91, 76, 0.55);
  filter: none;
}

.slot span,
.slot strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.slot-status-mark {
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  position: relative;
  width: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: rgba(255, 253, 241, 0.72);
  opacity: 0.72;
}

.slot-status-mark::before,
.slot-status-mark::after {
  position: absolute;
  content: "";
}

.slot-status-mark::before {
  left: 5px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 8px 0 2px currentColor;
  opacity: 0.28;
}

.slot.assigned .slot-status-mark {
  background: #fffdf1;
  opacity: 1;
}

.slot.assigned .slot-status-mark::before {
  opacity: 1;
}

.slot.assigned .slot-status-mark::after {
  left: 11px;
  top: 1px;
  width: 8px;
  height: 14px;
  background:
    linear-gradient(#5c9b53, #5c9b53) right top / 3px 14px no-repeat,
    linear-gradient(#5c9b53, #5c9b53) right bottom / 10px 3px no-repeat;
  transform: rotate(40deg);
}

.slot.locked .slot-status-mark::before {
  content: none;
}

.slot.locked .slot-status-mark::after {
  content: none;
}

.slot.locked .slot-status-mark {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: var(--lock-icon-image) center / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(64, 45, 24, 0.16));
  opacity: 1;
  image-rendering: pixelated;
}

.slot-kind {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  font-weight: 900;
}

.slot small {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.slot strong {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: start;
  border: 1px solid rgba(94, 128, 67, 0.22);
  border-radius: 999px;
  background: rgba(255, 253, 241, 0.68);
  color: #5e7d3e;
  font-size: 10px;
  line-height: 1;
  padding: 3px 6px;
}

.slot.locked strong {
  border-color: rgba(100, 87, 68, 0.22);
  color: #7d705d;
}

.recipe-output-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.recipe-output-label {
  color: #7d705d;
  font-size: 12px;
}

.building-status-card > .recipe-output-list {
  grid-column: 1 / -1;
  margin-top: 0;
}

.production-forecast {
  display: inline-flex;
  max-width: 100%;
  margin-top: 7px;
  border: 1px solid rgba(122, 88, 42, 0.18);
  border-radius: 7px;
  background: rgba(255, 253, 241, 0.58);
  color: #6d4725;
  padding: 4px 7px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.recipe-output-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  border: 1px solid rgba(122, 88, 42, 0.2);
  border-radius: 6px;
  background: rgba(255, 253, 241, 0.68);
  color: #5f4b33;
  font-size: 12px;
  line-height: 1;
  padding: 2px 6px 2px 3px;
}

.recipe-output-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;
}

.workbench {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent),
    rgba(255, 247, 221, 0.97);
}

.workbench-head {
  align-items: flex-start;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  border: 1px solid rgba(134, 98, 53, 0.18);
  border-radius: 8px;
  background: rgba(246, 224, 170, 0.58);
  padding: 4px;
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  padding: 5px 10px 5px 7px;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.tab:hover,
.tab:focus-visible {
  border-color: rgba(107, 139, 74, 0.28);
  background: rgba(255, 250, 225, 0.68);
  color: #4f3a24;
}

.tab.active {
  border-color: rgba(133, 91, 35, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent),
    var(--gold);
  color: var(--ink);
  box-shadow: inset 0 -2px rgba(130, 86, 26, 0.18);
}

.tab-icon {
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(91, 61, 34, 0.2);
  border-radius: 7px;
  background-color: rgba(255, 250, 225, 0.62);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
  box-shadow: inset 0 -1px rgba(83, 54, 26, 0.12);
  image-rendering: pixelated;
}

.tab.active .tab-icon {
  border-color: rgba(92, 62, 30, 0.3);
  background-color: rgba(255, 247, 207, 0.88);
}

.tab-icon[data-nav-icon="orders"] {
  background-image: url("assets/ui/nav-orders.png");
}

.tab-icon[data-nav-icon="market"] {
  background-image: url("assets/ui/nav-market.png");
}

.tab-icon[data-nav-icon="research"] {
  background-image: url("assets/ui/nav-research.png");
}

.tab-icon[data-nav-icon="bulletin"] {
  background-image: url("assets/ui/nav-bulletin.png");
}

.tab-icon[data-nav-icon="economy"] {
  background-image: url("assets/ui/nav-economy.png");
}

.section-strip {
  margin: 8px 0 12px;
  border: 1px solid rgba(170, 124, 61, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(120, 180, 99, 0.12), transparent 42%),
    rgba(255, 248, 220, 0.62);
  padding: 8px 10px;
}

.system-strip {
  position: relative;
  overflow: hidden;
  border-color: rgba(95, 70, 42, 0.24);
  padding-left: 50px;
}

.system-strip:has(.mechanic-help) {
  overflow: visible;
}

.system-title-help {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.system-title-help h2,
.system-title-help h3 {
  min-width: 0;
}

.system-strip::before {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(91, 61, 34, 0.22);
  border-radius: 7px;
  background-color: rgba(255, 250, 225, 0.72);
  background-image: var(--system-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  box-shadow: inset 0 -1px rgba(83, 54, 26, 0.12), 0 1px 0 rgba(255, 255, 255, 0.54);
  content: "";
  image-rendering: pixelated;
  transform: translateY(-50%);
}

.system-strip::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--system-accent, var(--grass-dark));
  content: "";
  opacity: 0.78;
}

.market-strip {
  --system-accent: #9b6b35;
  --system-icon: url("assets/ui/nav-market.png");
  background:
    linear-gradient(90deg, rgba(126, 83, 43, 0.22), transparent 48%),
    rgba(255, 243, 205, 0.68);
}

.orders-strip {
  --system-accent: #b86f42;
  --system-icon: url("assets/ui/nav-orders.png");
  background:
    linear-gradient(90deg, rgba(184, 111, 66, 0.2), transparent 48%),
    var(--ticket);
}

.research-strip {
  --system-accent: #7a5431;
  --system-icon: url("assets/ui/nav-research.png");
  background:
    linear-gradient(90deg, rgba(91, 58, 31, 0.24), transparent 50%),
    rgba(238, 215, 164, 0.72);
}

.research-strip:has(.mechanic-help) {
  z-index: 30;
}

.research-mobile-action {
  display: none;
}

.contracts-strip {
  --system-accent: #4f8a7d;
  --system-icon: url("assets/ui/nav-bulletin.png");
  background:
    linear-gradient(90deg, rgba(79, 138, 125, 0.18), transparent 48%),
    var(--ticket);
}

.events-strip {
  --system-accent: #8d6389;
  --system-icon: url("assets/ui/nav-economy.png");
  background:
    linear-gradient(90deg, rgba(141, 99, 137, 0.18), transparent 48%),
    rgba(250, 232, 202, 0.72);
}

.storage-strip {
  --system-accent: #6c4b2d;
  --system-icon: url("assets/ui/nav-storage.png");
  background:
    linear-gradient(90deg, rgba(108, 75, 45, 0.18), transparent 48%),
    rgba(244, 234, 211, 0.76);
}

.leaderboard-strip {
  --system-accent: #7b7f3a;
  --system-icon: url("assets/ui/nav-prestige.png");
  background:
    linear-gradient(90deg, rgba(123, 127, 58, 0.2), transparent 48%),
    rgba(247, 236, 196, 0.76);
}

.market-shell {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(300px, 1.15fr) minmax(240px, 0.9fr);
  gap: 10px;
  align-items: start;
}

.market-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  gap: 6px;
  margin: 2px 0 8px;
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 8px;
  background: rgba(255, 250, 225, 0.62);
  padding: 5px;
}

.market-mode-switch button {
  min-height: 44px;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

.market-mode-switch button.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent),
    var(--gold);
  color: var(--ink);
  box-shadow: inset 0 -2px rgba(130, 86, 26, 0.18);
}

.market-post-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 8px;
  background: rgba(255, 250, 225, 0.68);
  padding: 5px;
}

.market-post-switch button {
  min-height: 38px;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.market-post-switch button.active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent),
    var(--cat-bg, rgba(255, 239, 184, 0.9));
  border-color: var(--cat, #d8b56d);
  color: var(--ink);
  box-shadow: inset 0 -2px rgba(120, 82, 39, 0.1);
}

.player-market-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1fr);
  gap: 10px;
  align-items: start;
}

.player-order-book {
  min-height: 220px;
}

.player-order-list {
  display: grid;
  gap: 8px;
}

.player-market-order {
  grid-template-columns: 42px minmax(0, 1fr) auto minmax(126px, auto);
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 8px;
  background: rgba(255, 250, 225, 0.68);
  padding: 8px;
}

.player-sell-catalog {
  max-height: 310px;
  overflow: auto;
}

.market-catalog,
.market-detail,
.market-info-slot {
  min-width: 0;
}

.market-catalog,
.market-info-slot {
  display: grid;
  gap: 8px;
}

.market-category {
  display: grid;
  gap: 7px;
  border: 1px solid var(--cat, #d8b56d);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--cat, #d8b56d) 0 6px, transparent 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), var(--cat-bg, rgba(255, 245, 207, 0.58))),
    #fff0bd;
  box-shadow: 0 2px 0 rgba(146, 97, 35, 0.08);
  padding: 8px 8px 8px 12px;
}

.market-category-head,
.market-detail-head,
.market-info-head,
.market-detail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.market-category-head span {
  min-width: 22px;
  border-radius: 999px;
  background: rgba(255, 250, 225, 0.72);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 6px;
  text-align: center;
}

.market-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.market-item-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1px 6px;
  align-items: center;
  min-height: 54px;
  border-color: rgba(126, 88, 38, 0.18);
  background: rgba(255, 250, 225, 0.66);
  box-shadow: none;
  color: var(--ink);
  padding: 6px;
  text-align: left;
}

.market-item-entry:hover,
.market-item-entry.active {
  border-color: var(--cat, #d8b56d);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 248, 220, 0.8)),
    var(--cat-bg, #fff0bd);
  box-shadow: inset 0 -2px rgba(120, 82, 39, 0.1);
}

.market-item-entry .mini-sprite {
  grid-row: 1 / span 2;
}

.market-item-entry strong,
.market-item-entry small {
  overflow-wrap: anywhere;
}

.market-item-entry strong {
  font-size: 12px;
  line-height: 1.15;
}

.market-item-entry small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.market-detail {
  display: grid;
  gap: 10px;
  border: 2px solid var(--cat, #d8b56d);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--cat, #d8b56d) 0 8px, transparent 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), var(--cat-bg, rgba(255, 245, 207, 0.66))),
    #fff0bd;
  box-shadow: 0 4px 0 rgba(132, 89, 42, 0.1);
  padding: 12px 12px 12px 18px;
}

.market-detail-head {
  align-items: flex-start;
}

.market-detail-head > div:not(.sprite) {
  flex: 1 1 auto;
  min-width: 0;
}

.market-detail h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}

.market-order-book {
  display: grid;
  gap: 8px;
}

.market-order-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 8px;
  background: rgba(255, 250, 225, 0.68);
  padding: 9px;
}

.market-order-card.service-disabled {
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  opacity: 0.72;
}

.market-order-card.special-pass-order-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.special-fee-pill {
  border-color: rgba(184, 76, 50, 0.46);
  background: #f4d2ba;
  color: #7d3428;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 224, 0.52);
}

.special-fee-text {
  color: #8a3329;
  font-weight: 950;
}

.market-order-card.special-pass-system-card {
  grid-template-columns: minmax(0, 1fr) auto minmax(220px, auto);
  border-color: rgba(150, 85, 53, 0.34);
  background:
    linear-gradient(90deg, rgba(164, 92, 53, 0.12), transparent 42%),
    rgba(255, 242, 213, 0.82);
}

.market-order-card.special-pass-current-price {
  grid-template-columns: minmax(0, 1fr) auto minmax(220px, auto);
  border-color: rgba(72, 132, 120, 0.34);
  background:
    linear-gradient(90deg, rgba(72, 132, 120, 0.12), transparent 42%),
    rgba(232, 246, 239, 0.82);
}

.market-order-card.special-pass-afdian-card {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  border-color: rgba(174, 104, 35, 0.42);
  background:
    linear-gradient(135deg, rgba(139, 43, 36, 0.14), transparent 36%),
    linear-gradient(90deg, rgba(226, 174, 77, 0.3), rgba(248, 239, 193, 0.72)),
    #f7df9f;
  box-shadow:
    inset 0 0 0 2px rgba(255, 248, 224, 0.64),
    0 3px 0 rgba(117, 70, 28, 0.16);
}

.special-pass-afdian-avatar {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 2px solid rgba(255, 246, 214, 0.9);
  border-radius: 8px;
  background: #fff4ca;
  box-shadow: 0 2px 0 rgba(119, 71, 27, 0.18);
}

.special-pass-afdian-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
  display: block;
}

.special-pass-afdian-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.special-pass-afdian-copy strong {
  color: #71391f;
}

.special-pass-afdian-copy span {
  color: rgba(80, 50, 26, 0.76);
  font-size: 13px;
  line-height: 1.45;
}

.special-pass-buy-list {
  display: grid;
  gap: 8px;
}

.system-buyback-price {
  min-width: 126px;
  padding: 8px 10px;
  border: 1px solid rgba(126, 88, 38, 0.2);
  border-radius: 8px;
  background: rgba(255, 252, 238, 0.76);
  text-align: center;
}

.system-buyback-price small,
.system-buyback-price b {
  display: block;
}

.system-buyback-price small {
  color: rgba(74, 54, 34, 0.66);
  font-size: 11px;
  font-weight: 850;
}

.system-buyback-price b {
  color: #704225;
  font-size: 18px;
}

.pet-card.service-disabled {
  opacity: 0.72;
}

.service-disabled button:disabled {
  cursor: not-allowed;
}

.market-order-card.sell {
  background: rgba(235, 244, 218, 0.68);
}

.market-order-card span,
.market-detail-foot,
.market-order-price small,
.market-order-qty small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.market-order-card strong,
.market-order-card span {
  display: block;
}

.market-order-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.market-order-title strong {
  min-width: 0;
}

.mechanic-help {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.market-order-card .mechanic-help {
  display: inline-flex;
}

.mechanic-help-trigger {
  width: 20px;
  height: 20px;
  min-height: 20px;
  border: 1px solid rgba(126, 88, 38, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 246, 0.88);
  color: #7b4b1b;
  padding: 0;
  font-size: 12px;
  font-weight: 950;
  line-height: 18px;
}

.mechanic-help-bubble {
  display: none;
}

.mechanic-help-tooltip {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 1100;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  border: 1px solid rgba(126, 88, 38, 0.26);
  border-radius: 8px;
  background: rgba(255, 253, 242, 0.98);
  box-shadow: 0 12px 26px rgba(61, 42, 29, 0.18);
  color: #3d2a1d;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.mechanic-help-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.market-order-price,
.market-order-qty {
  display: grid;
  justify-items: center;
  min-width: 48px;
  line-height: 1;
}

.market-order-price b,
.market-order-qty b {
  color: #7b4b1b;
  font-size: 18px;
}

.bazaar-vendor-panel {
  overflow: hidden;
}

.bazaar-vendor-hero {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.bazaar-vendor-avatar {
  width: 160px;
  aspect-ratio: 1;
  border: 3px solid rgba(88, 58, 31, 0.5);
  border-radius: 8px;
  object-fit: cover;
  background: #e8c27d;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 205, 0.34), 0 5px 0 rgba(72, 48, 28, 0.18);
}

.bazaar-vendor-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.bazaar-vendor-copy h3 {
  margin: 0;
  color: #5a351b;
  font-size: 26px;
}

.bazaar-vendor-copy p {
  margin: 0;
  color: #6a4c2d;
  font-weight: 800;
  line-height: 1.55;
}

.bazaar-countdown {
  justify-self: start;
  border: 1px solid rgba(99, 64, 33, 0.22);
  border-radius: 7px;
  background: rgba(255, 246, 212, 0.72);
  color: #6b3e1a;
  padding: 8px 10px;
  font-size: 14px;
}

.bazaar-refresh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.bazaar-refresh-actions button {
  min-height: 34px;
}

.bazaar-preview-panel {
  border-style: dashed;
}

.bazaar-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bazaar-preview-actions button {
  min-height: 34px;
}

.bazaar-offer-grid {
  display: grid;
  gap: 10px;
}

.bazaar-offer-card {
  grid-template-columns: auto minmax(0, 1fr) minmax(150px, auto) auto;
}

.bazaar-offer-card small {
  display: block;
  margin-top: 4px;
  color: #7a5732;
  font-weight: 800;
}

.bazaar-offer-card.is-sold-out {
  filter: grayscale(0.25);
  opacity: 0.72;
}

.market-exchange-treasure {
  background:
    linear-gradient(180deg, rgba(68, 43, 70, 0.2), rgba(36, 24, 22, 0.18)),
    repeating-linear-gradient(90deg, rgba(118, 70, 47, 0.94) 0 18px, rgba(79, 51, 48, 0.94) 18px 36px),
    var(--wood);
}

.treasure-auction-hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.88fr) minmax(260px, 1fr);
  gap: 14px;
  align-items: stretch;
  overflow: hidden;
}

.treasure-auction-hero img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  border: 2px solid rgba(85, 50, 28, 0.34);
  border-radius: 7px;
  object-fit: cover;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 198, 0.16);
}

.treasure-auction-hero-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.treasure-auction-hero-copy h3 {
  margin: 0;
  color: #53321d;
  font-size: 24px;
}

.treasure-auction-hero-copy p {
  margin: 0;
  color: #684629;
  font-weight: 800;
  line-height: 1.55;
}

.treasure-auction-rumor {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-style: dashed;
}

.treasure-auction-rumor h3,
.treasure-auction-rumor p {
  margin: 0;
}

.treasure-auction-rumor p {
  color: #5f3b22;
  font-weight: 900;
}

.treasure-auction-grid {
  display: grid;
  gap: 10px;
}

.treasure-auction-lot {
  grid-template-columns: auto minmax(0, 1fr) minmax(148px, auto) auto;
}

.treasure-auction-lot small {
  display: block;
  margin-top: 3px;
  color: #725233;
  font-weight: 800;
}

.trade-control {
  display: grid;
  grid-template-columns: 64px minmax(58px, auto);
  gap: 6px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.trade-control:has([data-trade-price]) {
  grid-template-columns: 64px 72px minmax(74px, auto);
}

.trade-control:has(.trade-field) {
  grid-template-columns: minmax(66px, 76px) minmax(72px, 84px) minmax(74px, auto);
  align-items: end;
}

.trade-control:has(.trade-max-button) {
  grid-template-columns: 64px 56px minmax(58px, auto);
}

.trade-control:has([data-trade-price]):has(.trade-max-button) {
  grid-template-columns: 64px 56px 72px minmax(74px, auto);
}

.trade-control:has(.trade-field):has(.trade-max-button) {
  grid-template-columns: minmax(66px, 76px) 56px minmax(72px, 84px) minmax(74px, auto);
}

.trade-field {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.trade-field span {
  color: rgba(81, 56, 37, 0.76);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.market-inventory-note,
.market-order-card .market-inventory-note,
.player-market-order .market-inventory-note {
  grid-column: 1 / -1;
  justify-self: start;
  max-width: 100%;
  border: 1px solid rgba(94, 128, 103, 0.22);
  border-radius: 999px;
  background: rgba(235, 244, 218, 0.72);
  color: #4f6941;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  padding: 5px 8px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.trade-control input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 2px solid rgba(126, 88, 38, 0.2);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 246, 216, 0.9)),
    #fff7d5;
  color: #513825;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  padding: 4px 6px;
}

.trade-control button {
  min-width: 0;
  min-height: 44px;
  white-space: nowrap;
}

.trade-control .trade-max-button {
  padding-inline: 8px;
  font-size: 12px;
}

.trade-control.special-pass-trade-control {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trade-control.special-pass-trade-control:has(.trade-field):has(.trade-max-button) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.market-detail-foot {
  flex-wrap: wrap;
  justify-content: flex-start;
  border-top: 1px dashed rgba(143, 93, 44, 0.22);
  padding-top: 8px;
}

.market-detail-foot span {
  border: 1px solid rgba(120, 91, 52, 0.16);
  border-radius: 999px;
  background: rgba(255, 250, 225, 0.56);
  padding: 4px 7px;
}

.market-info-slot {
  border: 1px solid rgba(94, 128, 103, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(234, 244, 218, 0.52)),
    rgba(255, 250, 228, 0.76);
  padding: 10px;
}

.market-info-slot .market-intel {
  margin: 0;
}

.market-info-slot .intel-card-grid {
  grid-template-columns: minmax(0, 1fr);
}

.market-info-slot .market-spark {
  max-width: none;
  border: 1px solid rgba(126, 88, 38, 0.14);
  border-radius: 8px;
  background: rgba(255, 250, 225, 0.6);
  padding: 8px;
}

.market-spark.empty {
  grid-template-columns: minmax(0, 1fr);
}

.selected-intel {
  border-color: var(--cat, rgba(94, 128, 103, 0.24));
  background:
    linear-gradient(90deg, var(--cat-bg, rgba(120, 180, 99, 0.14)), rgba(255, 250, 228, 0.72)),
    rgba(255, 250, 228, 0.8);
}

.intel-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.intel-stat {
  display: grid;
  gap: 3px;
  min-height: 52px;
  border: 1px solid rgba(126, 88, 38, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.34);
  padding: 8px;
}

.intel-stat small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.intel-stat strong {
  color: #3d2a1d;
  font-size: 18px;
  line-height: 1;
}

.intel-readout {
  display: grid;
  gap: 6px;
  border-top: 1px dashed rgba(126, 88, 38, 0.2);
  padding-top: 8px;
}

.intel-readout p {
  margin: 0;
  color: #4f3c27;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.trend-delta {
  justify-self: start;
  border-radius: 999px;
  background: rgba(255, 250, 225, 0.72);
  color: #5f4a34;
  font-size: 11px;
  font-weight: 950;
  padding: 4px 8px;
}

.trend-delta.up {
  background: rgba(226, 242, 209, 0.84);
  color: #47743c;
}

.trend-delta.down {
  background: rgba(249, 222, 201, 0.84);
  color: #9b5431;
}

.intel-footnote {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.price-tag,
.reward-stack {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 34px;
  border-radius: 7px;
  border: 1px solid rgba(216, 157, 67, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent),
    #ffe0a0;
  color: #7b4b1b;
  font-weight: 900;
}

.listing .price-tag {
  min-width: 54px;
  grid-template-rows: auto auto;
  gap: 1px;
  line-height: 1;
}

.listing .price-tag::before {
  color: rgba(123, 75, 27, 0.68);
  content: "买价";
  font-size: 10px;
}

.reward-stack {
  gap: 0;
  line-height: 1;
  padding: 5px 6px;
}

.reward-stack small {
  color: var(--muted);
  font-size: 10px;
}

.research-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.research-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  border: 1px solid #e0bd6e;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 238, 185, 0.72)),
    var(--panel-strong);
  box-shadow: 0 2px 0 rgba(146, 97, 35, 0.12);
  padding: 10px;
}

.research-tree {
  display: grid;
  gap: 10px;
}

.research-line {
  display: grid;
  gap: 8px;
  border: 1px solid #e0bd6e;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 245, 207, 0.58)),
    var(--cream-soft);
  padding: 10px;
}

.research-line-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.research-node-list {
  display: grid;
  gap: 7px;
}

.research-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #e0bd6e;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 245, 207, 0.66)),
    var(--cream);
  box-shadow: 0 2px 0 rgba(146, 97, 35, 0.1);
  padding: 9px;
}

.research-card.is-complete {
  border-color: #8fbc6b;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(224, 247, 189, 0.7)),
    #edf8c8;
}

.research-card.is-active {
  border-color: #d69f4d;
  box-shadow: 0 0 0 2px rgba(242, 185, 75, 0.22);
}

.research-card.is-locked {
  position: relative;
  filter: saturate(0.72);
  opacity: 0.72;
}

.research-card.is-locked::after {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  background: var(--lock-icon-image) center / contain no-repeat;
  content: "";
  image-rendering: pixelated;
}

.node-tier {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(151, 104, 46, 0.24);
  border-radius: 8px;
  background: #ffe4a0;
  color: #7b5528;
  font-size: 12px;
  font-weight: 900;
}

.research-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.8fr);
  gap: 12px;
  align-items: start;
}

.research-side-panel {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 10px;
}

.research-queue-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(77, 139, 168, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(226, 244, 236, 0.76)),
    #eef7df;
  box-shadow: var(--soft-shadow);
  padding: 12px;
}

.research-queue-panel.is-locked {
  border-color: rgba(126, 88, 38, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(230, 221, 197, 0.78)),
    #eee3c8;
}

.research-queue-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.research-queue-head h4 {
  margin: 0;
  color: #4d3a22;
  font-size: 18px;
}

.research-queue-head small,
.research-queue-item small {
  color: #745d3d;
  font-weight: 800;
  line-height: 1.35;
}

.research-queue-list {
  display: grid;
  gap: 8px;
}

.research-queue-item {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 7px;
  background: rgba(255, 253, 241, 0.72);
  padding: 9px 10px;
}

.research-queue-item > span {
  color: #85683f;
  font-size: 11px;
  font-weight: 950;
}

.research-queue-item strong {
  color: #4f3820;
  font-size: 15px;
}

.research-queue-item.is-active {
  border-color: rgba(226, 172, 55, 0.44);
  background: rgba(255, 239, 185, 0.72);
}

.research-queue-item.is-queued {
  border-color: rgba(77, 139, 168, 0.5);
  background: rgba(224, 244, 238, 0.78);
}

.research-queue-item.is-empty,
.research-queue-item.is-locked {
  opacity: 0.78;
}

.research-queue-panel > button {
  width: 100%;
}

.research-board .research-tree {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.research-board .research-line {
  position: relative;
  min-height: 172px;
  overflow: hidden;
}

.research-board .research-line::after {
  content: "";
  position: absolute;
  left: 45px;
  right: 20px;
  top: 102px;
  height: 4px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(122, 89, 45, 0.12) 0 8px, transparent 8px 14px),
    linear-gradient(90deg, rgba(120, 180, 99, 0.55), rgba(117, 199, 214, 0.45), rgba(242, 185, 75, 0.55));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  pointer-events: none;
}

.research-board .research-line-head {
  position: relative;
  z-index: 1;
}

.research-board .research-node-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--node-count), minmax(70px, 1fr));
  gap: 6px;
  align-items: start;
  padding: 10px 0 2px;
}

.research-node {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  min-height: 86px;
  padding: 0 3px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  isolation: isolate;
}

.research-node:hover {
  filter: none;
  transform: translateY(-2px);
}

.research-node::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 50%;
  width: 3px;
  height: 25px;
  border-radius: 999px;
  background: rgba(122, 89, 45, 0.22);
  transform: translateX(-50%);
  z-index: -1;
}

.research-node-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid #d8b56d;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 232, 168, 0.72)),
    var(--panel-strong);
  box-shadow: 0 3px 0 rgba(116, 75, 30, 0.18);
}

.research-node-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}

.research-node-tier {
  position: absolute;
  top: 0;
  right: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 18px;
  border: 1px solid rgba(126, 87, 38, 0.22);
  border-radius: 6px;
  background: #fff8dc;
  color: #7b5528;
  font-size: 10px;
  font-weight: 800;
}

.research-node-name {
  width: 100%;
  min-height: 30px;
  color: #4f3c27;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.research-node-status {
  width: 100%;
  min-height: 16px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.research-node.is-complete .research-node-icon {
  border-color: #78b463;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(198, 238, 148, 0.78)),
    #edf8c8;
}

.research-node.is-active .research-node-icon,
.research-node.is-selected .research-node-icon {
  border-color: #d69f4d;
  box-shadow: 0 0 0 3px rgba(242, 185, 75, 0.28), 0 3px 0 rgba(116, 75, 30, 0.18);
}

.research-node.is-active .research-node-status {
  color: #9d681f;
}

.research-node.is-locked {
  opacity: 0.88;
}

.research-node.is-locked .research-node-icon {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(231, 220, 186, 0.72)),
    #e7d9b4;
}

.research-node.is-locked .research-node-icon > img {
  filter: grayscale(0.55);
  opacity: 0.5;
}

.research-node.is-locked .research-node-icon::after {
  position: absolute;
  right: -7px;
  bottom: -6px;
  width: 30px;
  height: 30px;
  background: var(--lock-icon-image) center / contain no-repeat;
  content: "";
  filter: drop-shadow(0 1px 0 rgba(64, 45, 24, 0.18));
  image-rendering: pixelated;
}

.research-detail {
  display: grid;
  gap: 10px;
  border: 1px solid #d8b56d;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 246, 214, 0.76)),
    var(--panel);
  box-shadow: var(--soft-shadow);
  padding: 12px;
}

.research-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.research-detail h4 {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.15;
}

.research-effect {
  min-height: 44px;
  border: 1px solid rgba(120, 180, 99, 0.36);
  border-radius: 8px;
  background: rgba(223, 244, 238, 0.62);
  color: #355a38;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  padding: 9px;
}

.research-cost-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.research-cost-grid span {
  display: grid;
  gap: 2px;
  min-height: 52px;
  place-items: center;
  border: 1px solid rgba(216, 181, 109, 0.76);
  border-radius: 8px;
  background: rgba(255, 248, 220, 0.78);
}

.research-cost-grid strong {
  font-size: 15px;
  line-height: 1.1;
}

.research-cost-grid small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.research-requirements {
  display: grid;
  gap: 4px;
  border-top: 1px dashed rgba(168, 122, 62, 0.34);
  padding-top: 8px;
}

.research-warning {
  color: #9b5431;
  font-weight: 800;
}

.research-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.research-progress-row .progress {
  margin-top: 0;
}

.research-progress-row > span {
  min-width: 42px;
  color: #7a5a32;
  font-weight: 800;
  text-align: right;
}

.research-detail > button {
  width: 100%;
}

.progress {
  height: 9px;
  margin-top: 6px;
  border-radius: 999px;
  background: #ead8aa;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(93, 58, 23, 0.18);
}

.progress > i {
  display: block;
  height: 100%;
  width: var(--pct);
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.45), transparent 40%, rgba(255, 255, 255, 0.25)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0 6px, rgba(255, 255, 255, 0) 6px 12px),
    linear-gradient(90deg, #71b95b, #e8bd48);
  background-size: 100% 100%, 24px 24px, 100% 100%;
  animation: progress-flow 720ms linear infinite;
}

.progress.paused > i {
  animation: none;
  filter: grayscale(0.45);
  opacity: 0.55;
}

@keyframes progress-flow {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 24px 0, 0 0; }
}

.inventory-row,
.rank-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.inventory-cell {
  grid-template-rows: auto auto auto auto auto 1fr;
  place-items: center;
  min-height: 178px;
  text-align: center;
}

.inventory-cell .mini-sprite {
  width: 58px;
  height: 58px;
}

.inventory-cell .mini-sprite img {
  width: 50px;
  height: 50px;
}

.inventory-cell strong {
  max-width: 100%;
  color: #3f3026;
  font-size: 18px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.inventory-cell small {
  max-width: 100%;
  color: #6f604e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.inventory-count {
  min-width: 44px;
  border: 1px solid rgba(144, 99, 38, 0.2);
  border-radius: 999px;
  background: #fff7d5;
  color: #513825;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  padding: 4px 9px;
}

.inventory-cell button {
  align-self: end;
  justify-self: stretch;
  min-height: 44px;
}

.storage-ledger-panel {
  border-color: rgba(101, 72, 42, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(222, 198, 144, 0.58)),
    var(--ledger);
}

.storage-ledger-panel .panel-head {
  border-bottom: 1px dashed rgba(101, 72, 42, 0.22);
  padding-bottom: 10px;
}

.storage-head-actions {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.storage-ledger-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.storage-ledger-strip .ledger-item {
  min-height: 62px;
  border-color: rgba(101, 72, 42, 0.22);
  background:
    linear-gradient(90deg, rgba(111, 74, 38, 0.16) 0 5px, transparent 5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(238, 222, 184, 0.72)),
    #f2ddb0;
}

.inventory-shelf {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border: 2px solid rgba(101, 72, 42, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--cat, #b88a45) 0 6px, transparent 6px),
    linear-gradient(180deg, rgba(255, 250, 229, 0.7), rgba(221, 196, 142, 0.42)),
    rgba(244, 234, 211, 0.88);
  box-shadow: inset 0 -4px rgba(111, 74, 38, 0.08), 0 3px 0 rgba(96, 63, 34, 0.12);
  padding: 10px;
}

.inventory-shelf-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px dashed rgba(101, 72, 42, 0.22);
  padding: 0 0 8px 8px;
}

.inventory-shelf-head strong {
  display: block;
  color: #3f3026;
  font-size: 16px;
  line-height: 1.1;
}

.inventory-shelf-head small {
  color: rgba(81, 56, 37, 0.72);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.1;
}

.inventory-shelf-head > span {
  display: grid;
  place-items: center;
  min-width: 54px;
  min-height: 44px;
  border: 1px solid rgba(101, 72, 42, 0.2);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(238, 222, 184, 0.7)),
    #f2ddb0;
  color: #513825;
}

.inventory-shelf-head b {
  font-size: 16px;
  line-height: 1;
}

.inventory-shelf-toggle {
  min-height: 44px;
  border-radius: 7px;
  padding: 0 12px;
  white-space: nowrap;
}

.inventory-shelf.collapsed .inventory-shelf-head {
  border-bottom: 0;
  padding-bottom: 0;
}

.inventory-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.inventory-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.quality {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 18px;
  border: 1px solid rgba(169, 86, 60, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent),
    #f6d0b4;
  color: #a9563c;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 2px 6px;
}

.ledger-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ledger-item {
  position: relative;
  overflow: hidden;
  border: 1px solid #e0bd6e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(120, 180, 99, 0.14), transparent 36px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent),
    #fff0bd;
  box-shadow: 0 2px 0 rgba(146, 97, 35, 0.1);
  padding: 9px;
}

.ledger-item::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(132, 89, 42, 0.22);
  content: "";
}

.ledger-item span {
  color: rgba(84, 68, 45, 0.72);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
}

.ledger-item strong {
  display: block;
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.16;
}

.rank-row.unlocked {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent),
    #edf4cb;
  border-color: #c5d594;
}

.reputation-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}

.reputation-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid #d8b56d;
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(137, 185, 97, 0.16), transparent 44px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 244, 205, 0.72)),
    #fff0bd;
  box-shadow: 0 3px 0 rgba(146, 97, 35, 0.1);
  padding: 10px;
}

.reputation-art {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(134, 98, 53, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent),
    #edf4cb;
}

.reputation-art img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}

.reputation-card strong {
  display: block;
  margin: 3px 0;
  font-size: 20px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.reputation-card small {
  color: rgba(84, 68, 45, 0.72);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.reputation-arrow {
  display: grid;
  place-items: center;
  min-width: 34px;
  color: #a9563c;
  font-size: 24px;
  font-weight: 950;
}

.rank-row.pop-node,
.rank-row.title-node {
  position: relative;
  min-height: 46px;
  overflow: hidden;
  border-color: rgba(134, 98, 53, 0.28);
  box-shadow: inset 0 0 0 2px rgba(134, 98, 53, 0.08), 0 2px 0 rgba(146, 97, 35, 0.1);
  padding-left: 10px;
}

.rank-row.pop-node::after,
.rank-row.title-node::after {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(126, 88, 38, 0.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.rank-row.pop-node.unlocked {
  border-color: rgba(120, 180, 99, 0.48);
  box-shadow: inset 0 0 0 2px rgba(120, 180, 99, 0.14), 0 2px 0 rgba(146, 97, 35, 0.1);
}

.rank-row.title-node.unlocked {
  border-color: rgba(242, 185, 75, 0.54);
  box-shadow: inset 0 0 0 2px rgba(242, 185, 75, 0.16), 0 2px 0 rgba(146, 97, 35, 0.1);
}

.rank-row:not(.unlocked) {
  filter: saturate(0.82);
}

.achievement-title-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.achievement-strip {
  margin-top: 0;
}

.title-forge-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
  border: 2px solid rgba(134, 98, 53, 0.3);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, rgba(242, 185, 75, 0.24), transparent 160px),
    #fff4cf;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42), 0 3px 0 rgba(146, 97, 35, 0.1);
  padding: 12px;
}

.title-forge-preview {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 88px;
}

.title-forge-preview strong {
  color: #59351c;
  font-size: 24px;
  line-height: 1.08;
}

.title-forge-preview small {
  color: rgba(84, 68, 45, 0.74);
  font-size: 11px;
  font-weight: 850;
}

.title-part-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.title-part-column {
  display: grid;
  gap: 6px;
}

.title-part-column > label {
  color: #7a6145;
  font-size: 12px;
  font-weight: 950;
}

.title-part-column select,
.achievement-tabs button {
  min-height: 34px;
  border: 1px solid rgba(110, 77, 42, 0.28);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.58);
  color: #4f3924;
  font-size: 12px;
  font-weight: 950;
}

.title-part-column select {
  width: 100%;
  padding: 0 32px 0 10px;
}

.achievement-tabs button.active {
  border-color: rgba(91, 130, 71, 0.5);
  background: #6f9b50;
  color: #fffdf0;
}

.achievement-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.achievement-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
}

.achievement-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.achievement-card {
  display: grid;
  gap: 10px;
  min-height: 164px;
  border: 2px solid rgba(134, 98, 53, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.16)),
    #fff7d9;
  box-shadow: inset 0 0 0 2px rgba(134, 98, 53, 0.06), 0 3px 0 rgba(146, 97, 35, 0.1);
  padding: 12px;
}

.achievement-card.is-complete {
  border-color: rgba(120, 180, 99, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.16)),
    #f0f6ce;
}

.achievement-card.is-claimable {
  border-color: rgba(204, 135, 45, 0.58);
  box-shadow: inset 0 0 0 2px rgba(242, 185, 75, 0.18), 0 3px 0 rgba(146, 97, 35, 0.1);
}

.achievement-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.achievement-card-head strong {
  display: block;
  color: #51351d;
  font-size: 17px;
  line-height: 1.16;
}

.achievement-state {
  flex: 0 0 auto;
  border: 1px solid rgba(110, 77, 42, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  padding: 4px 8px;
  color: #674a2e;
  font-size: 11px;
  font-weight: 950;
}

.achievement-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.achievement-steps > div {
  display: grid;
  align-content: space-between;
  min-height: 56px;
  border: 1px solid rgba(110, 77, 42, 0.22);
  border-radius: 6px;
  background: #fff0bd;
  padding: 7px;
}

.achievement-steps > div.current {
  outline: 2px solid rgba(204, 135, 45, 0.72);
}

.achievement-steps > div.locked {
  opacity: 0.54;
  background: #eadfc9;
}

.achievement-steps strong {
  font-size: 12px;
  line-height: 1.18;
}

.achievement-steps small,
.achievement-condition {
  color: rgba(84, 68, 45, 0.72);
  font-size: 11px;
  font-weight: 850;
}

.achievement-progress {
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(110, 77, 42, 0.38);
  border-radius: 999px;
  background: #e5d4ae;
}

.achievement-progress i {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  background: linear-gradient(90deg, #6f9b50, #b5bd5c);
}

.achievement-reward-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.achievement-reward-row span {
  min-height: 26px;
  border: 1px solid rgba(110, 77, 42, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.58);
  padding: 4px 7px;
  color: #4f3924;
  font-size: 11px;
  font-weight: 950;
}

.achievement-card-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.achievement-card-foot button {
  min-height: 34px;
  min-width: 86px;
  border-radius: 7px;
  font-size: 12px;
  white-space: nowrap;
}

.achievement-card-foot button:disabled {
  filter: saturate(0.72);
  opacity: 0.58;
}

.subpage-grid.guide-layout {
  grid-template-columns: minmax(620px, 1.25fr) minmax(300px, 0.75fr);
}

.guide-panel {
  overflow: hidden;
}

.guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  border: 2px solid rgba(121, 156, 76, 0.4);
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 100%, rgba(117, 199, 214, 0.28), transparent 190px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(237, 244, 203, 0.88)),
    #fff8dc;
  padding: 16px;
}

.guide-hero h2 {
  font-size: 28px;
  line-height: 1.08;
}

.guide-hero p {
  max-width: 620px;
  margin-top: 8px;
  color: #6f604e;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.guide-hero-badge {
  display: grid;
  place-items: center;
  min-height: 112px;
  border: 3px solid #8f663f;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent),
    #ffd980;
  box-shadow: inset 0 -5px rgba(125, 79, 22, 0.14), 0 6px 0 rgba(91, 55, 22, 0.1);
  text-align: center;
}

.guide-hero-side {
  display: grid;
  gap: 8px;
}

.guide-hero-side button {
  min-height: 34px;
  font-size: 12px;
}

.guide-hero-badge strong {
  font-size: 36px;
  line-height: 1;
}

.guide-hero-badge span {
  color: #6a5435;
  font-size: 12px;
  font-weight: 950;
}

.guide-route-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  border: 2px solid rgba(143, 102, 63, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(120, 180, 99, 0.16) 0 2px, transparent 2px 18px),
    linear-gradient(0deg, rgba(120, 180, 99, 0.12) 0 2px, transparent 2px 18px),
    #f7edbf;
  background-size: 18px 18px;
}

.guide-route-node {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 62px;
  border: 2px solid rgba(126, 88, 38, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent),
    #fff7d5;
  box-shadow: 0 3px 0 rgba(146, 97, 35, 0.1);
  padding: 8px;
}

.guide-route-node::after {
  position: absolute;
  right: -13px;
  top: 50%;
  z-index: 1;
  width: 14px;
  height: 4px;
  transform: translateY(-50%);
  background: rgba(132, 89, 42, 0.34);
  content: "";
}

.guide-route-node:nth-child(4n)::after,
.guide-route-node:last-child::after {
  display: none;
}

.guide-route-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #8f663f;
  border-radius: 50%;
  background: #ffe08a;
  font-weight: 950;
}

.guide-route-node .guide-symbol {
  width: 32px;
  height: 32px;
}

.guide-route-node strong {
  grid-column: 1 / -1;
  color: #59432d;
  font-size: 12px;
  text-align: center;
}

.guide-route-node.is-start {
  border-color: rgba(120, 180, 99, 0.62);
}

.guide-route-node.is-finish {
  border-color: rgba(216, 157, 67, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent),
    #fff0bd;
}

.guide-route-node.is-ready {
  border-color: rgba(94, 128, 75, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent),
    #eef9d7;
}

.guide-route-node.is-claimed {
  border-color: rgba(120, 180, 99, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent),
    #e4f2bf;
}

.guide-route-node.is-claimed .guide-route-index {
  background: #78b463;
  color: #fffdf0;
}

.guide-loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.guide-loop div {
  display: grid;
  place-items: center;
  min-height: 82px;
  border: 2px solid rgba(91, 139, 128, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, rgba(117, 199, 214, 0.22), transparent 48px),
    #eef9d7;
  color: #3f5e3a;
  font-weight: 950;
}

.guide-loop .guide-symbol {
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
}

.guide-loop i {
  display: none;
}

.guide-task-list {
  display: grid;
  gap: 10px;
}

.guide-task-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  border: 2px solid rgba(126, 88, 38, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 248, 220, 0.72)),
    #fffaf0;
  box-shadow: 0 4px 0 rgba(146, 97, 35, 0.08);
  padding: 12px;
}

.guide-task-card.is-ready {
  border-color: rgba(94, 128, 75, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(237, 249, 215, 0.78)),
    #eef9d7;
}

.guide-task-card.is-claimed {
  border-color: rgba(120, 180, 99, 0.5);
  filter: saturate(0.9);
}

.guide-task-card.is-claimed .guide-task-art {
  background: #e4f2bf;
}

.guide-task-art {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 96px;
  border: 2px solid rgba(132, 89, 42, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent),
    #edf4cb;
}

.guide-task-art span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffd980;
  box-shadow: inset 0 -2px rgba(125, 79, 22, 0.14);
  font-weight: 950;
}

.guide-task-art .guide-symbol {
  width: 50px;
  height: 50px;
  margin-top: 8px;
}

.guide-task-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.guide-task-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
}

.guide-task-title h3 {
  font-size: 18px;
  line-height: 1.18;
}

.guide-task-title small {
  color: #7d705d;
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.guide-task-copy p,
.guide-task-condition,
.guide-task-reward,
.guide-task-hint {
  color: #6f604e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.guide-task-condition,
.guide-task-reward {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.guide-task-condition strong,
.guide-task-reward strong {
  color: #4a3828;
  font-size: 12px;
  font-weight: 950;
}

.guide-task-reward span {
  color: #5a7d3d;
  font-weight: 950;
}

.guide-task-hint {
  border: 1px solid rgba(120, 180, 99, 0.38);
  border-radius: 6px;
  background: rgba(237, 244, 203, 0.78);
  box-shadow: inset 0 0 0 2px rgba(120, 180, 99, 0.1);
  padding: 8px 10px;
}

.guide-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guide-task-actions button {
  min-height: 34px;
  font-size: 12px;
}

.guide-reward-total {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid rgba(216, 181, 109, 0.76);
  border-radius: 8px;
  background: #fff0bd;
  padding: 10px;
}

.guide-reward-total .guide-symbol {
  width: 58px;
  height: 58px;
}

.guide-reward-total strong,
.guide-reward-total span {
  display: block;
}

.guide-reward-total span {
  margin-top: 4px;
  color: #6f604e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.guide-reward-bars {
  display: grid;
  gap: 8px;
}

.guide-reward-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 8px;
  background: #fff8dc;
  padding: 8px;
}

.guide-reward-bar i {
  position: absolute;
  inset: auto auto 0 0;
  width: var(--pct);
  height: 4px;
  background: linear-gradient(90deg, #78b463, #f2b94b);
}

.guide-reward-bar span,
.guide-reward-bar b {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 950;
}

.guide-reward-bar span {
  color: #59432d;
  overflow-wrap: anywhere;
}

.guide-reward-bar b {
  color: #5a7d3d;
  text-align: right;
}

.guide-principle-grid {
  display: grid;
  gap: 9px;
}

.guide-principle-grid div {
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 8px;
  background: #fff8dc;
  box-shadow: inset 0 0 0 2px rgba(120, 180, 99, 0.1);
  padding: 10px;
}

.guide-principle-grid strong,
.guide-principle-grid span,
.guide-principle-grid small {
  display: block;
}

.guide-principle-grid span {
  margin-top: 4px;
  color: #6f604e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.guide-principle-grid small {
  margin-top: 7px;
  color: #7d705c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.tiny,
.muted,
.panel small,
.market-item-entry small,
.inventory-cell small,
.dashboard-card small,
.tile-meta,
.tile-consume,
.tile-speed,
.stage-brief-item span {
  font-weight: 700;
}

.bottom-nav {
  position: sticky;
  bottom: 10px;
  z-index: 8;
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 6px;
  border: 2px solid rgba(135, 95, 45, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(242, 224, 176, 0.94)),
    #e8c77e;
  box-shadow: 0 10px 0 rgba(91, 55, 22, 0.12), 0 18px 34px rgba(91, 55, 22, 0.14), inset 0 2px rgba(255, 255, 255, 0.56);
  padding: 7px;
}

.mobile-nav-shell {
  display: contents;
}

.mobile-nav-backdrop,
.mobile-nav-drawer {
  display: none;
}

.mobile-nav-fab {
  display: none;
}

.bottom-nav button {
  display: grid;
  grid-template-rows: 28px auto;
  place-items: center;
  gap: 3px;
  min-height: 52px;
  padding: 5px 4px;
  border-radius: 7px;
  border-color: rgba(88, 59, 33, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(81, 53, 31, 0.12)),
    #d7bd7d;
  box-shadow: inset 0 -2px rgba(83, 54, 26, 0.16);
  color: #5a3b22;
  font-size: 12px;
}

.bottom-nav button.active {
  border-color: rgba(242, 185, 75, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 244, 190, 0.8), rgba(224, 164, 59, 0.9)),
    var(--gold);
  color: var(--ink);
  box-shadow: inset 0 -3px rgba(125, 79, 22, 0.18), 0 2px 0 rgba(93, 62, 28, 0.18);
}

.bottom-nav-icon {
  display: block;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(91, 61, 34, 0.22);
  border-radius: 7px;
  background-color: rgba(255, 250, 225, 0.62);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
  box-shadow: inset 0 -1px rgba(83, 54, 26, 0.12);
  image-rendering: pixelated;
}

.bottom-nav-icon[data-nav-icon="orders"] {
  background-image: url("assets/ui/nav-orders.png");
}

.bottom-nav-icon[data-nav-icon="market"] {
  background-image: url("assets/ui/nav-market.png");
}

.bottom-nav-icon[data-nav-icon="research"] {
  background-image: url("assets/ui/nav-research.png");
}

.bottom-nav-icon[data-nav-icon="storage"] {
  background-image: url("assets/ui/nav-storage.png");
}

.bottom-nav-icon[data-nav-icon="bulletin"] {
  background-image: url("assets/ui/nav-bulletin.png");
}

.bottom-nav-icon[data-nav-icon="town"] {
  background-image: url("assets/ui/nav-town.png");
}

.bottom-nav-icon[data-nav-icon="building"] {
  background-image: url("assets/ui/nav-building.png");
}

.bottom-nav-icon[data-nav-icon="prestige"] {
  background-image: url("assets/ui/nav-prestige.png");
}

.bottom-nav-icon[data-nav-icon="guide"] {
  background-image: url("assets/ui/nav-guide.png");
}

.bottom-nav-icon[data-nav-icon="economy"] {
  background-image: url("assets/ui/nav-economy.png");
}

.bottom-nav-icon[data-nav-icon="pet"] {
  background-image: url("assets/generated-icons/egg-q0.png");
}

.bottom-nav-icon[data-nav-icon="more"] {
  position: relative;
  background-image: radial-gradient(circle, #6a4828 2px, transparent 3px);
  background-size: 9px 9px;
}

.mobile-nav-drawer {
  border: 2px solid rgba(105, 72, 36, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 249, 221, 0.96), rgba(232, 197, 124, 0.98)),
    #e9c77c;
  box-shadow: 12px 0 34px rgba(91, 55, 22, 0.2), inset 0 2px rgba(255, 255, 255, 0.58);
  padding: 10px;
}

.mobile-nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #53351d;
  font-weight: 900;
}

.mobile-nav-drawer-head button {
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 7px;
  border-color: rgba(88, 59, 33, 0.24);
  background: rgba(255, 250, 225, 0.62);
  color: #715231;
  font-size: 12px;
}

.mobile-nav-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.mobile-nav-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 7px;
  border-color: rgba(88, 59, 33, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(91, 55, 22, 0.1)),
    #d9bd78;
  color: #56381f;
  box-shadow: inset 0 -2px rgba(83, 54, 26, 0.12);
  text-align: left;
}

.mobile-nav-item > span:not(.bottom-nav-icon) {
  overflow-wrap: anywhere;
}

.mobile-nav-item.active {
  border-color: rgba(242, 185, 75, 0.64);
  background: linear-gradient(180deg, rgba(255, 244, 190, 0.82), rgba(224, 164, 59, 0.86));
  color: var(--ink);
}

.mobile-nav-fab {
  grid-template-rows: 28px auto;
  place-items: center;
  gap: 2px;
  width: 58px;
  min-width: 58px;
  min-height: 58px;
  padding: 5px 4px;
  border: 2px solid rgba(135, 95, 45, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(242, 224, 176, 0.94)),
    #e8c77e;
  box-shadow: 0 10px 0 rgba(91, 55, 22, 0.12), 0 18px 34px rgba(91, 55, 22, 0.14), inset 0 2px rgba(255, 255, 255, 0.56);
  color: #5a3b22;
  font-size: 11px;
}

.mobile-nav-fab.active {
  border-color: rgba(242, 185, 75, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 244, 190, 0.8), rgba(224, 164, 59, 0.9)),
    var(--gold);
  color: var(--ink);
}

.mobile-nav-fab:focus-visible .bottom-nav-icon,
.mobile-nav-item:focus-visible .bottom-nav-icon,
.tab:focus-visible .tab-icon,
.market-item-entry:focus-visible .mini-sprite,
.research-node:focus-visible .research-node-icon,
.tile-stop:focus-visible,
.building-filter:focus-visible,
.farm-map-actions button:focus-visible {
  box-shadow:
    0 0 0 3px rgba(117, 199, 214, 0.34),
    inset 0 -1px rgba(83, 54, 26, 0.12);
}

.mobile-nav-fab:active:not(:disabled),
.mobile-nav-item:active:not(:disabled),
.building-filter:active:not(:disabled),
.farm-map-actions button:active:not(:disabled),
.tile-stop:active:not(:disabled),
.market-item-entry:active:not(:disabled),
.research-node:active:not(:disabled) {
  filter: brightness(0.98);
  transform: translateY(1px);
}

@media (hover: none) {
  button:hover,
  .farm-tile:hover,
  .market-item-entry:hover,
  .research-node:hover {
    filter: none;
    transform: none;
  }
}

/* Surface identity pass: Scene / Dock / Ticket / Ledger */
.market-exchange-board {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  border: 3px solid rgba(65, 42, 24, 0.6);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 235, 174, 0.14), rgba(49, 32, 18, 0.16)),
    repeating-linear-gradient(90deg, rgba(125, 82, 42, 0.94) 0 18px, rgba(101, 65, 36, 0.94) 18px 36px),
    var(--wood);
  box-shadow:
    inset 0 0 0 3px rgba(255, 232, 164, 0.12),
    inset 0 -6px rgba(50, 32, 18, 0.18),
    0 5px 0 rgba(58, 39, 24, 0.18);
  padding: 10px;
}

.market-exchange-board .market-mode-switch {
  justify-self: start;
  border-color: rgba(255, 235, 174, 0.22);
  background: rgba(50, 32, 18, 0.34);
  box-shadow: inset 0 1px rgba(255, 246, 210, 0.1);
}

.market-exchange-board .market-mode-switch button {
  color: rgba(255, 243, 207, 0.76);
}

.market-exchange-board .market-mode-switch button.active {
  border-color: rgba(255, 231, 141, 0.74);
  background:
    linear-gradient(180deg, rgba(255, 246, 191, 0.82), rgba(209, 146, 45, 0.9)),
    var(--gold);
  color: #4b2f18;
}

.market-exchange-board .market-strip {
  border-color: rgba(255, 235, 174, 0.24);
  background:
    linear-gradient(90deg, rgba(126, 83, 43, 0.34), transparent 52%),
    rgba(255, 243, 205, 0.84);
  box-shadow: 0 3px 0 rgba(50, 32, 18, 0.14);
}

.market-exchange-tools .tool-market-grid {
  align-items: start;
  grid-template-columns: minmax(300px, 0.9fr) minmax(330px, 1.05fr);
}

.tool-market-select-list {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.market-exchange-tools .market-detail {
  --cat: #8c7650;
  --cat-bg: rgba(234, 222, 189, 0.72);
  border-color: rgba(109, 83, 49, 0.56);
  background:
    linear-gradient(90deg, rgba(105, 75, 43, 0.72) 0 8px, transparent 8px),
    linear-gradient(180deg, rgba(255, 251, 234, 0.74), rgba(224, 210, 174, 0.78)),
    #ead8aa;
}

.market-exchange-tools .tool-market-post,
.market-exchange-tools .tool-market-detail {
  background:
    linear-gradient(135deg, rgba(82, 62, 39, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255, 252, 238, 0.86), rgba(230, 218, 184, 0.88)),
    #ead8aa;
}

.tool-market-selected-detail {
  padding: 10px;
}

.tool-market-row {
  position: relative;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  min-height: 68px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--quality, #8a6b3f) 54%, rgba(91, 58, 31, 0.22));
  border-left: 6px solid var(--quality, rgba(91, 58, 31, 0.46));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--quality, #8a6b3f) 16%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(255, 253, 239, 0.82), rgba(232, 219, 185, 0.82)),
    #ead8aa;
}

.tool-market-row .mini-sprite {
  background: rgba(255, 248, 222, 0.86);
}

.tool-market-affixes {
  color: #5f4c32;
}

.tool-market-row-main {
  min-width: 0;
}

.tool-market-row-main strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-market-row-main .tiny {
  display: block;
  margin-top: 3px;
}

.tool-market-row-trade {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.tool-market-row-actions,
.tool-market-detail-actions {
  display: flex;
  gap: 6px;
}

.tool-market-row-actions button {
  min-width: 64px;
  min-height: 36px;
  padding-inline: 10px;
}

.tool-market-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 18px;
}

.tool-market-detail-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(47, 31, 19, 0.52);
  box-shadow: none;
}

.tool-market-detail-sheet {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 24px));
  max-height: min(720px, calc(100dvh - 24px));
  overflow: auto;
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--quality, #8c7650) 58%, rgba(109, 83, 49, 0.34));
  border-top: 7px solid var(--quality, #8c7650);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(82, 62, 39, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(255, 252, 238, 0.96), rgba(230, 218, 184, 0.96)),
    #ead8aa;
  box-shadow: 0 18px 42px rgba(38, 24, 14, 0.38);
  padding: 14px;
}

.tool-market-detail-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.tool-market-detail-head h3 {
  margin: 0;
  color: var(--tool-ink, #332616);
  font-size: 22px;
  line-height: 1.15;
}

.tool-market-detail-close {
  min-width: 72px;
}

.tool-market-detail-price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  border: 1px solid rgba(97, 70, 38, 0.18);
  border-radius: 8px;
  background: rgba(255, 249, 225, 0.72);
  padding: 9px 10px;
}

.tool-market-detail-price span,
.tool-market-detail-price small {
  color: #6a5132;
  font-size: 12px;
  font-weight: 900;
}

.tool-market-detail-price strong {
  color: #7b4b1b;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.tool-market-detail-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tool-market-detail-foot span {
  border: 1px solid rgba(97, 70, 38, 0.18);
  border-radius: 999px;
  background: rgba(255, 249, 225, 0.72);
  color: #62482a;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 6px 8px;
}

.price-tag small {
  display: block;
  color: rgba(123, 75, 27, 0.72);
  font-size: 10px;
  font-weight: 900;
}

.market-mode-switch,
.market-catalog,
.market-info-slot {
  border-color: rgba(83, 54, 28, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 247, 213, 0.76), rgba(205, 163, 93, 0.28)),
    rgba(126, 83, 43, 0.1);
}

.market-detail {
  border-color: rgba(82, 53, 29, 0.5);
  background:
    linear-gradient(90deg, rgba(91, 58, 31, 0.72) 0 10px, transparent 10px),
    linear-gradient(180deg, rgba(255, 248, 220, 0.84), rgba(229, 205, 149, 0.86)),
    #e7c986;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 210, 0.24), 0 5px 0 rgba(72, 48, 28, 0.16);
}

.market-category {
  border-color: rgba(82, 53, 29, 0.34);
  background:
    linear-gradient(90deg, var(--cat, #b88a45) 0 6px, transparent 6px),
    linear-gradient(180deg, rgba(255, 250, 225, 0.78), rgba(218, 189, 128, 0.46)),
    #e9cf91;
}

.market-item-entry {
  border-color: rgba(91, 63, 35, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(234, 214, 163, 0.58)),
    #f1d99c;
}

.market-order-card,
.player-market-order {
  border-color: rgba(84, 58, 33, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 243, 205, 0.8)),
    var(--ticket);
}

.market-exchange-board .market-catalog,
.market-exchange-board .market-info-slot {
  border: 1px solid rgba(255, 235, 174, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 235, 174, 0.12), rgba(49, 32, 18, 0.18)),
    rgba(48, 31, 18, 0.22);
  box-shadow: inset 0 1px rgba(255, 246, 210, 0.08);
  padding: 8px;
}

.market-exchange-board .market-category {
  border-color: rgba(73, 49, 29, 0.42);
  background:
    linear-gradient(90deg, var(--cat, #b88a45) 0 6px, transparent 6px),
    linear-gradient(180deg, rgba(255, 250, 225, 0.82), rgba(220, 188, 126, 0.54)),
    #e4c17d;
  box-shadow: 0 2px 0 rgba(50, 32, 18, 0.14);
}

.market-exchange-board .market-item-entry {
  border-color: rgba(73, 49, 29, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(231, 205, 148, 0.62)),
    #ecd294;
}

.market-exchange-board .market-item-entry:hover,
.market-exchange-board .market-item-entry.active {
  border-color: var(--cat, #b88a45);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(244, 225, 171, 0.8)),
    var(--cat-bg, #efd29a);
  box-shadow: inset 0 -2px rgba(80, 49, 22, 0.12), 0 2px 0 rgba(50, 32, 18, 0.14);
}

.market-exchange-board .market-detail {
  border-color: rgba(73, 49, 29, 0.58);
  background:
    linear-gradient(90deg, rgba(91, 58, 31, 0.78) 0 10px, transparent 10px),
    linear-gradient(180deg, rgba(255, 250, 225, 0.9), rgba(226, 197, 132, 0.88)),
    #e7c986;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 210, 0.2), 0 4px 0 rgba(50, 32, 18, 0.16);
}

.market-exchange-board .market-order-card,
.market-exchange-board .player-market-order {
  border-color: rgba(91, 58, 31, 0.24);
  background:
    linear-gradient(90deg, rgba(132, 76, 42, 0.16) 0 6px, transparent 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 238, 193, 0.84)),
    var(--ticket);
  box-shadow: 0 2px 0 rgba(50, 32, 18, 0.12);
}

.market-exchange-board .market-info-slot {
  background:
    linear-gradient(90deg, rgba(79, 138, 125, 0.18) 0 6px, transparent 6px),
    linear-gradient(180deg, rgba(255, 250, 225, 0.84), rgba(224, 210, 171, 0.78)),
    #e9d7aa;
  color: #3f3026;
}

.ticket-board {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 3px solid rgba(86, 52, 29, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 238, 193, 0.58), rgba(202, 150, 86, 0.28)),
    repeating-linear-gradient(0deg, rgba(145, 92, 50, 0.18) 0 2px, transparent 2px 22px),
    #d8ad6e;
  box-shadow:
    inset 0 0 0 3px rgba(255, 246, 210, 0.16),
    inset 0 -5px rgba(74, 45, 24, 0.12),
    0 5px 0 rgba(74, 45, 24, 0.16);
  padding: 10px;
}

.ticket-board .system-strip {
  margin: 0;
  box-shadow: 0 3px 0 rgba(92, 55, 28, 0.12);
}

.order-commendation-strip {
  border: 1px dashed rgba(124, 137, 44, 0.42);
  border-radius: 7px;
  background: rgba(246, 248, 204, 0.72);
  color: #5a6324;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  padding: 7px 10px;
}

.ticket-board .order-list {
  gap: 10px;
}

.ticket-board .order {
  border-color: rgba(125, 70, 43, 0.48);
  background:
    radial-gradient(circle at 10px 18px, rgba(125, 70, 43, 0.28) 0 3px, transparent 4px),
    radial-gradient(circle at 10px calc(100% - 18px), rgba(125, 70, 43, 0.22) 0 3px, transparent 4px),
    linear-gradient(90deg, rgba(132, 76, 42, 0.25) 0 12px, transparent 12px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 236, 188, 0.9)),
    var(--ticket);
  box-shadow:
    0 4px 0 rgba(109, 67, 35, 0.14),
    0 14px 22px rgba(81, 55, 31, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

.ticket-board .order::before {
  width: 0;
}

.ticket-board .order::after {
  inset: 10px 10px auto auto;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(154, 83, 48, 0.28);
  border-radius: 999px;
  background:
    radial-gradient(circle, transparent 0 15px, rgba(154, 83, 48, 0.18) 16px 18px, transparent 19px);
  opacity: 0.78;
  transform: rotate(-8deg);
}

.ticket-board .order-empty-slot {
  min-height: 154px;
  border-style: dashed;
  border-color: rgba(125, 70, 43, 0.34);
  background:
    radial-gradient(circle at 10px 18px, rgba(125, 70, 43, 0.16) 0 3px, transparent 4px),
    linear-gradient(90deg, rgba(132, 76, 42, 0.14) 0 12px, transparent 12px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(241, 225, 185, 0.72)),
    var(--ticket);
  color: rgba(76, 62, 43, 0.72);
}

.ticket-board .order-empty-slot::after {
  opacity: 0.35;
}

.ticket-board .order-locked-slot {
  min-height: 154px;
  border-style: dashed;
  border-color: rgba(120, 91, 62, 0.32);
  background:
    radial-gradient(circle at 10px 18px, rgba(120, 91, 62, 0.12) 0 3px, transparent 4px),
    linear-gradient(90deg, rgba(120, 91, 62, 0.1) 0 12px, transparent 12px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(230, 216, 188, 0.58)),
    rgba(244, 233, 205, 0.72);
  color: rgba(72, 62, 49, 0.72);
}

.ticket-board .order-locked-slot::after {
  opacity: 0.22;
}

.ticket-board .order.order-pet-slot {
  min-height: 176px;
  border-color: rgba(225, 126, 105, 0.72);
  border-style: solid;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 243, 205, 0.24)),
    url("assets/ui/pet-order-slot-bg.png") center / 100% 100% no-repeat,
    #fff2c9;
  box-shadow:
    0 5px 0 rgba(176, 92, 72, 0.16),
    0 16px 24px rgba(100, 67, 38, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  padding: 36px 18px 12px 22px;
}

.ticket-board .order.order-pet-slot::after {
  opacity: 0;
}

.pet-pass-slot-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 84px);
  min-height: 24px;
  border: 1px solid rgba(145, 83, 49, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 249, 226, 0.96), rgba(255, 218, 153, 0.92)),
    #ffe0a0;
  box-shadow: 0 2px 0 rgba(139, 80, 45, 0.16), inset 0 1px rgba(255, 255, 255, 0.76);
  color: #7a4d31;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  overflow: hidden;
  padding: 5px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-board .order.order-pet-slot .order-stamp {
  border-color: rgba(197, 102, 84, 0.58);
  background: rgba(255, 246, 218, 0.68);
  color: #8f4c3d;
}

.ticket-board .order.order-pet-slot .order-demand-block,
.ticket-board .order.order-pet-slot .order-info-grid > span,
.ticket-board .order.order-pet-slot .empty-order-note,
.ticket-board .order.order-pet-slot .empty-order-art {
  border-color: rgba(197, 102, 84, 0.2);
  background: rgba(255, 253, 239, 0.7);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.58);
}

.locked-order-art {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 86px;
  border: 2px dashed rgba(120, 91, 62, 0.22);
  border-radius: 8px;
  background:
    repeating-linear-gradient(135deg, rgba(120, 91, 62, 0.08) 0 8px, transparent 8px 16px),
    rgba(255, 250, 225, 0.42);
}

.locked-order-art span {
  width: 54px;
  height: 54px;
  background: var(--lock-icon-image) center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(64, 45, 24, 0.16));
  image-rendering: pixelated;
  opacity: 0.86;
}

.locked-order-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  max-width: 360px;
  border: 1px dashed rgba(120, 91, 62, 0.26);
  border-radius: 8px;
  background: rgba(255, 250, 225, 0.4);
  padding: 10px 12px;
}

.locked-order-progress strong {
  color: #7b4b1b;
  font-size: 18px;
}

.empty-order-art {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 86px;
  border: 2px dashed rgba(125, 70, 43, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 250, 225, 0.72), rgba(235, 205, 145, 0.34));
}

.empty-order-art span {
  width: 56px;
  height: 70px;
  border: 3px solid rgba(125, 70, 43, 0.3);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 246, 210, 0.76), rgba(226, 194, 132, 0.5));
  box-shadow: inset 0 -7px rgba(125, 70, 43, 0.08);
}

.empty-order-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  max-width: 360px;
  padding: 10px 12px;
  border: 1px dashed rgba(125, 70, 43, 0.24);
  border-radius: 8px;
  background: rgba(255, 250, 225, 0.52);
}

.empty-order-note strong {
  font-variant-numeric: tabular-nums;
  color: #7f4a2a;
}

.ticket-board .order-stamp {
  border-color: rgba(154, 83, 48, 0.56);
  background: rgba(255, 246, 210, 0.42);
  box-shadow: 0 1px 0 rgba(109, 67, 35, 0.08);
}

.ticket-board .order-demand-block,
.ticket-board .contract-terms {
  border-color: rgba(125, 70, 43, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(232, 199, 135, 0.24)),
    rgba(255, 246, 210, 0.52);
}

.ticket-board .order-info-grid > span,
.ticket-board .contract-terms span {
  border-color: rgba(125, 70, 43, 0.18);
  background: rgba(255, 250, 225, 0.62);
}

.ticket-board .contract-card {
  border-color: rgba(75, 126, 116, 0.62);
  background:
    radial-gradient(circle at 10px 18px, rgba(75, 126, 116, 0.28) 0 3px, transparent 4px),
    radial-gradient(circle at 10px calc(100% - 18px), rgba(75, 126, 116, 0.2) 0 3px, transparent 4px),
    linear-gradient(90deg, rgba(75, 126, 116, 0.28) 0 12px, transparent 12px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(229, 242, 231, 0.86)),
    #edf6dc;
}

.order {
  border-color: rgba(154, 93, 48, 0.62);
  background:
    linear-gradient(90deg, rgba(132, 76, 42, 0.22) 0 10px, transparent 10px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 238, 193, 0.86)),
    var(--ticket);
  box-shadow: 0 4px 0 rgba(109, 67, 35, 0.14), 0 12px 22px rgba(81, 55, 31, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.64);
}

.contract-card {
  border-color: rgba(75, 126, 116, 0.58);
}

.research-board {
  border: 3px solid rgba(82, 53, 29, 0.52);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 244, 197, 0.12), rgba(55, 37, 22, 0.16)),
    repeating-linear-gradient(90deg, rgba(122, 82, 44, 0.42) 0 18px, rgba(102, 66, 36, 0.42) 18px 36px),
    #8a5b34;
  box-shadow: inset 0 0 0 4px rgba(255, 232, 164, 0.12), 0 5px 0 rgba(58, 39, 24, 0.18);
  padding: 12px;
}

.research-board .research-line {
  border: 1px solid rgba(255, 235, 179, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 225, 0.88), rgba(235, 211, 155, 0.78)),
    #e8c986;
  box-shadow: 0 3px 0 rgba(68, 45, 26, 0.14);
  padding: 10px;
}

.research-detail {
  border-color: rgba(82, 53, 29, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 253, 236, 0.9), rgba(231, 211, 162, 0.88)),
    #ead29b;
  box-shadow: 0 4px 0 rgba(69, 46, 27, 0.16);
}

.research-board .research-line-head {
  border-bottom: 1px dashed rgba(91, 58, 31, 0.2);
  padding-bottom: 7px;
}

.research-board .research-node {
  min-height: 104px;
  border: 1px solid rgba(82, 53, 29, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 7px, rgba(91, 58, 31, 0.34) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(233, 207, 145, 0.74)),
    #e8c986;
  box-shadow: 0 3px 0 rgba(68, 45, 26, 0.14), inset 0 1px rgba(255, 250, 225, 0.52);
  padding: 12px 5px 6px;
}

.research-board .research-node::before {
  top: -12px;
  height: 18px;
  background: rgba(255, 235, 179, 0.42);
  box-shadow: 0 1px 0 rgba(68, 45, 26, 0.18);
}

.research-board .research-node::after {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(91, 58, 31, 0.5);
  box-shadow: inset 0 1px rgba(255, 250, 225, 0.44);
  content: "";
  transform: translateX(-50%);
}

.research-board .research-node-icon {
  width: 44px;
  height: 44px;
  border-color: rgba(82, 53, 29, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 250, 225, 0.82), rgba(218, 189, 128, 0.62)),
    #ead29b;
  box-shadow: inset 0 -2px rgba(91, 58, 31, 0.1), 0 2px 0 rgba(68, 45, 26, 0.12);
}

.research-board .research-node-tier {
  top: 9px;
  right: 6px;
  border-color: rgba(91, 58, 31, 0.22);
  background: rgba(255, 250, 225, 0.76);
}

.research-board .research-node.is-complete {
  border-color: rgba(96, 151, 91, 0.56);
  background:
    radial-gradient(circle at 50% 7px, rgba(74, 121, 62, 0.42) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(207, 234, 165, 0.82)),
    #dcefc4;
}

.research-board .research-node.is-active,
.research-board .research-node.is-selected {
  border-color: rgba(226, 172, 55, 0.86);
  box-shadow: 0 0 0 3px rgba(255, 231, 141, 0.28), 0 4px 0 rgba(68, 45, 26, 0.16);
}

.research-board .research-node.is-queued {
  border-color: rgba(77, 139, 168, 0.82);
  box-shadow: 0 0 0 3px rgba(136, 205, 229, 0.24), 0 4px 0 rgba(68, 45, 26, 0.14);
}

.research-board .research-node.is-locked {
  border-style: dashed;
  background:
    radial-gradient(circle at 50% 7px, rgba(72, 64, 50, 0.28) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(207, 199, 177, 0.74)),
    #cfc4a6;
  opacity: 0.88;
}

.research-board .research-node.is-locked .research-node-status {
  color: rgba(74, 62, 44, 0.72);
}

.research-detail::before {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 12px;
  border-radius: 3px;
  background: rgba(122, 82, 44, 0.16);
  box-shadow: inset 0 1px rgba(255, 250, 225, 0.36);
  content: "";
  transform: rotate(3deg);
}

.research-detail .research-effect {
  border-color: rgba(79, 138, 125, 0.28);
  background:
    linear-gradient(90deg, rgba(79, 138, 125, 0.16) 0 5px, transparent 5px),
    rgba(238, 248, 231, 0.76);
}

.research-detail .research-cost-grid span {
  border-color: rgba(82, 53, 29, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(232, 199, 135, 0.28)),
    rgba(255, 250, 225, 0.74);
}

.inventory-grid {
  border: 2px solid rgba(101, 72, 42, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 229, 0.72), rgba(213, 186, 128, 0.48)),
    repeating-linear-gradient(0deg, transparent 0 128px, rgba(111, 74, 38, 0.22) 128px 136px),
    var(--ledger);
  padding: 10px;
}

.inventory-cell {
  border-color: rgba(101, 72, 42, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(244, 229, 194, 0.72)),
    #f3ddb0;
  box-shadow: inset 0 -3px rgba(111, 74, 38, 0.08), 0 2px 0 rgba(96, 63, 34, 0.12);
}

.inventory-cell[class*="cat-"] {
  background:
    linear-gradient(90deg, var(--cat, #b88a45) 0 6px, transparent 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(244, 229, 194, 0.76)),
    #f3ddb0;
}

.storage-ledger-panel .inventory-grid {
  align-items: start;
  gap: 12px;
}

.storage-ledger-panel .inventory-cell {
  grid-template-rows: 58px auto auto auto auto;
  align-content: start;
  min-height: 0;
  border-width: 2px;
  background:
    linear-gradient(90deg, var(--cat, #b88a45) 0 6px, transparent 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(235, 218, 178, 0.82)),
    #f3ddb0;
}

.storage-ledger-panel .inventory-count {
  min-width: 52px;
  border-color: rgba(101, 72, 42, 0.26);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(222, 198, 144, 0.72)),
    #f2ddb0;
  box-shadow: inset 0 -2px rgba(111, 74, 38, 0.08);
}

.storage-ledger-panel .inventory-cell small {
  justify-self: stretch;
  border: 1px solid rgba(101, 72, 42, 0.14);
  border-radius: 6px;
  background: rgba(255, 250, 229, 0.46);
  padding: 4px 6px;
}

.storage-ledger-panel .inventory-cell small:nth-of-type(2) {
  background:
    linear-gradient(90deg, rgba(108, 75, 45, 0.14) 0 4px, transparent 4px),
    rgba(255, 250, 229, 0.58);
}

.storage-ledger-panel .inventory-cell small:nth-of-type(3) {
  background:
    linear-gradient(90deg, rgba(184, 111, 66, 0.18) 0 4px, transparent 4px),
    rgba(255, 244, 217, 0.68);
  color: #7a4c2c;
}

.storage-recycle-box {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  border: 2px solid rgba(82, 53, 29, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(91, 58, 31, 0.68) 0 10px, transparent 10px),
    linear-gradient(180deg, rgba(255, 250, 225, 0.88), rgba(226, 197, 132, 0.84)),
    #e7c986;
  padding: 12px;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 210, 0.22), 0 4px 0 rgba(50, 32, 18, 0.14);
}

.recycle-box-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border-bottom: 1px dashed rgba(101, 72, 42, 0.22);
  padding-left: 10px;
  padding-bottom: 10px;
}

.recycle-box-head h3 {
  margin: 0;
  color: #3f3026;
  font-size: 22px;
  line-height: 1.1;
}

.recycle-frequency {
  justify-self: end;
  align-self: start;
}

.recycle-countdown {
  grid-column: 1 / -1;
  display: block;
  border: 2px solid rgba(89, 61, 35, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 232, 146, 0.88)),
    #f1d47a;
  color: #3f3026;
  box-shadow: inset 0 0 0 2px rgba(255, 246, 210, 0.32), 0 4px 0 rgba(50, 32, 18, 0.12);
  padding: 10px 12px;
  font-size: 24px;
  line-height: 1.1;
  text-align: center;
}

.recycle-box-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recycle-box-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.recycle-box-column,
.recycle-add-list,
.recycle-bin-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.recycle-box-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(152px, auto);
  gap: 8px;
  align-items: center;
  border: 2px solid var(--cat, rgba(126, 88, 38, 0.24));
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--cat, #b88a45) 0 6px, transparent 6px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(244, 229, 194, 0.78)),
    #f3ddb0;
  padding: 8px;
}

.recycle-box-row .mini-sprite {
  width: 44px;
  height: 44px;
}

.recycle-box-row .mini-sprite img {
  width: 38px;
  height: 38px;
}

.recycle-box-row strong,
.recycle-box-row span {
  display: block;
}

.recycle-box-row .trade-control {
  grid-template-columns: 64px minmax(54px, auto);
  justify-self: end;
  min-width: 150px;
}

.recycle-bin-row {
  background:
    linear-gradient(90deg, rgba(91, 58, 31, 0.42) 0 6px, transparent 6px),
    linear-gradient(180deg, rgba(255, 246, 210, 0.7), rgba(224, 198, 143, 0.84)),
    #e6c988;
}

.leaderboard-page {
  grid-template-columns: minmax(680px, 1.25fr) minmax(280px, 0.75fr);
}

.leaderboard-panel {
  overflow: hidden;
}

.leaderboard-mode-switch {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 10px;
  border: 1px solid rgba(126, 88, 38, 0.2);
  border-radius: 8px;
  background: rgba(255, 250, 225, 0.68);
  padding: 5px;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
}

.leaderboard-mode-switch button {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 34px;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: #6b604d;
  font-size: 12px;
  font-weight: 950;
  padding: 0 12px;
}

.leaderboard-mode-switch button.active {
  border-color: rgba(85, 109, 62, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent),
    #d4c66d;
  color: #352b1d;
  box-shadow: inset 0 -2px rgba(93, 79, 30, 0.18);
}

.leaderboard-server-status {
  margin: 8px 0 0;
  color: rgba(77, 47, 20, 0.72);
}

.leaderboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 12px;
  align-items: start;
}

.leaderboard-main {
  min-width: 0;
}

.leaderboard-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.leaderboard-summary article {
  display: grid;
  gap: 2px;
  min-height: 78px;
  border: 2px solid rgba(92, 63, 34, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent),
    #fff5cc;
  box-shadow: inset 0 -2px rgba(125, 79, 22, 0.12);
  padding: 10px;
}

.leaderboard-summary span,
.leaderboard-summary small {
  color: #75654e;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.leaderboard-summary strong {
  overflow-wrap: anywhere;
  color: #3f3122;
  font-size: 19px;
  font-weight: 950;
  line-height: 1.2;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 48px 42px minmax(0, 1fr) minmax(72px, auto) 42px;
  gap: 9px;
  align-items: center;
  min-height: 78px;
  border: 2px solid rgba(89, 62, 37, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.38), transparent 58%),
    #fff8df;
  box-shadow: 0 4px 0 rgba(71, 45, 24, 0.08);
  padding: 9px;
}

.leaderboard-row.rank-1 {
  border-color: rgba(202, 151, 49, 0.54);
  background:
    linear-gradient(90deg, rgba(255, 224, 126, 0.44), transparent 60%),
    #fff5cf;
}

.leaderboard-row.is-player {
  border-color: rgba(84, 139, 82, 0.5);
  background:
    linear-gradient(90deg, rgba(117, 169, 99, 0.22), transparent 64%),
    #f5fbdf;
}

.leaderboard-rank {
  display: inline-grid;
  place-items: center;
  min-height: 36px;
  border: 1px solid rgba(91, 61, 34, 0.18);
  border-radius: 7px;
  background: rgba(255, 250, 225, 0.74);
  color: #4b3926;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.leaderboard-avatar {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(88, 58, 31, 0.2);
  border-radius: 8px;
  background: #fff2bd;
  object-fit: contain;
}

.leaderboard-player {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.leaderboard-player strong,
.leaderboard-player span {
  display: block;
  overflow-wrap: anywhere;
}

.leaderboard-player strong {
  color: #3f3122;
  font-size: 15px;
  font-weight: 950;
}

.leaderboard-player span {
  color: #766149;
  font-size: 12px;
  font-weight: 850;
}

.leaderboard-player i {
  position: relative;
  display: block;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(92, 63, 34, 0.14);
}

.leaderboard-player i::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct);
  border-radius: inherit;
  background: linear-gradient(90deg, #7ca957, #d2b64f);
  content: "";
}

.leaderboard-score {
  display: grid;
  justify-items: end;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

.leaderboard-score strong {
  color: #34291d;
  font-size: 20px;
  line-height: 1;
}

.leaderboard-score span {
  color: #75654e;
  font-size: 11px;
  font-weight: 900;
}

.leaderboard-trend {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.leaderboard-trend.up {
  background: rgba(102, 155, 80, 0.18);
  color: #3f7131;
}

.leaderboard-trend.down {
  background: rgba(184, 111, 66, 0.16);
  color: #9a4e2f;
}

.leaderboard-social {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.leaderboard-rival-card,
.leaderboard-rumor-board {
  border: 3px solid rgba(95, 57, 32, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent),
    #fff0bb;
  box-shadow: inset 0 -3px rgba(125, 79, 22, 0.12), 0 6px 0 rgba(71, 45, 24, 0.08);
  padding: 12px;
}

.leaderboard-rival-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.leaderboard-rival-head img {
  width: 48px;
  height: 48px;
  border: 2px solid rgba(88, 58, 31, 0.22);
  border-radius: 8px;
  background: #fff8dc;
  object-fit: contain;
}

.leaderboard-rival-head strong,
.leaderboard-rival-head span,
.leaderboard-rumor-head strong,
.leaderboard-rumor-head span {
  display: block;
}

.leaderboard-rival-head span,
.leaderboard-rumor-head span {
  margin-top: 2px;
  color: #75654e;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.leaderboard-rival-card p {
  margin: 10px 0;
  color: #5f4b35;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.5;
}

.leaderboard-rival-card button {
  width: 100%;
  min-height: 44px;
}

.leaderboard-rumor-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.leaderboard-rumor-head button {
  flex: 0 0 auto;
  min-height: 40px;
}

.leaderboard-rumor-list {
  display: grid;
  gap: 8px;
}

.leaderboard-rumor-list article {
  position: relative;
  border: 2px solid rgba(126, 88, 38, 0.18);
  border-radius: 7px;
  background: #fffaf0;
  padding: 10px 10px 10px 14px;
}

.leaderboard-rumor-list article::before {
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 999px;
  background: #7ca957;
  content: "";
}

.leaderboard-rumor-list span {
  display: block;
  margin-bottom: 4px;
  color: #6c7c3e;
  font-size: 11px;
  font-weight: 950;
}

.leaderboard-rumor-list p {
  margin: 0;
  color: #5f4b35;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.48;
}

.bulletin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.bulletin-board-panel {
  overflow: hidden;
}

.bulletin-shell {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.bulletin-art {
  position: relative;
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 154px;
  border: 4px solid #5f3920;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 28%, rgba(59, 34, 18, 0.1)),
    repeating-linear-gradient(90deg, #9a6539 0 42px, #875530 42px 84px);
  box-shadow: inset 0 0 0 4px rgba(255, 229, 151, 0.24), 0 8px 0 rgba(91, 55, 22, 0.13);
  padding: 14px;
}

.bulletin-art::before {
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(255, 231, 160, 0.52);
  border-radius: 6px;
  content: "";
  pointer-events: none;
}

.bulletin-board-title {
  position: relative;
  z-index: 1;
  border: 3px solid #5f3920;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent),
    #ffd980;
  box-shadow: inset 0 -3px rgba(125, 79, 22, 0.16);
  padding: 10px;
  text-align: center;
  font-weight: 950;
}

.bulletin-pin {
  position: relative;
  z-index: 1;
  margin: 0 4px;
  border: 2px solid rgba(82, 48, 24, 0.4);
  border-radius: 6px;
  background: #fff8df;
  box-shadow: 0 6px 0 rgba(64, 36, 16, 0.12);
  padding: 13px;
  transform: rotate(-1deg);
}

.bulletin-pin:nth-of-type(2) {
  background: #eef9d7;
  transform: rotate(1deg);
}

.bulletin-pin::before {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 15px;
  height: 15px;
  transform: translateX(-50%);
  border: 2px solid #6b4024;
  border-radius: 50%;
  background: #b95f48;
  content: "";
}

.bulletin-pin span {
  display: inline-block;
  margin-bottom: 5px;
  color: #6c7c3e;
  font-size: 11px;
  font-weight: 950;
}

.bulletin-pin strong,
.bulletin-pin p {
  display: block;
}

.bulletin-pin p {
  margin: 5px 0 0;
  color: #765b3d;
  font-size: 12px;
  line-height: 1.45;
}

.bulletin-mailbox {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(168px, auto);
  gap: 12px;
  align-items: center;
  border: 3px solid #5f3920;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent),
    #ffe5a2;
  box-shadow: inset 0 -3px rgba(125, 79, 22, 0.14);
  padding: 12px;
}

.bulletin-mailbox img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
}

.bulletin-mailbox strong,
.bulletin-mailbox span {
  display: block;
}

.bulletin-brief-copy span {
  margin-top: 4px;
  color: #765b3d;
  font-size: 12px;
  font-weight: 850;
}

.bulletin-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(48px, 1fr));
  gap: 8px;
}

.bulletin-stat-row span {
  display: grid;
  place-items: center;
  min-height: 58px;
  border: 2px solid rgba(126, 88, 38, 0.24);
  border-radius: 7px;
  background: rgba(255, 250, 225, 0.68);
  padding: 6px;
  text-align: center;
}

.bulletin-stat-row strong {
  color: #4d3827;
  font-size: 20px;
  line-height: 1;
}

.bulletin-stat-row small {
  margin-top: 4px;
  color: #6c7c3e;
  font-size: 11px;
  font-weight: 950;
}

.bulletin-console {
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
}

.bulletin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.bulletin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  border-color: rgba(126, 88, 38, 0.22);
  background: #fff2bd;
  color: #6a5435;
}

.bulletin-tab.active {
  border-color: rgba(72, 110, 50, 0.42);
  background: linear-gradient(180deg, #8fc371, #6ca950);
  color: #fffbe7;
}

.bulletin-tab span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  font-size: 11px;
}

.mailbox-section-tabs {
  gap: 10px;
}

.mailbox-section-tabs .bulletin-tab {
  min-height: 48px;
  gap: 10px;
  border: 2px solid rgba(126, 88, 38, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(239, 213, 137, 0.82)),
    #f3d58d;
  box-shadow: inset 0 -3px rgba(125, 79, 22, 0.12), 0 4px 0 rgba(91, 58, 31, 0.1);
  color: #5a4429;
  font-size: 14px;
  font-weight: 950;
  padding: 9px 14px;
}

.mailbox-section-tabs .bulletin-tab.active {
  border-color: rgba(72, 110, 50, 0.48);
  background:
    linear-gradient(180deg, #9ccc78, #74ad55),
    #84bb62;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.22), 0 5px 0 rgba(66, 95, 42, 0.22);
  color: #fffbea;
}

.mailbox-section-tabs .bulletin-tab span {
  min-width: 0;
  height: auto;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
  line-height: 1.1;
}

.mailbox-section-tabs .bulletin-tab small {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: inherit;
  font-size: 13px;
  font-weight: 950;
  padding: 0 8px;
}

.reminder-archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 2px solid rgba(137, 94, 45, 0.22);
  border-radius: 8px;
  background: rgba(255, 248, 222, 0.74);
  color: #6a5435;
  font-size: 13px;
  font-weight: 900;
  padding: 9px 10px;
}

.reminder-archive-toolbar button {
  min-height: 34px;
  border-radius: 7px;
  padding: 5px 12px;
}

.reminder-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  align-content: start;
  gap: 10px;
  max-height: min(620px, calc(100vh - 260px));
  overflow: auto;
  border: 3px solid rgba(137, 94, 45, 0.32);
  border-radius: 8px;
  background: #ffedb6;
  padding: 12px;
}

.reminder-archive-grid .message-empty {
  grid-column: 1 / -1;
}

.bulletin-mail-layout {
  display: grid;
  grid-template-columns: minmax(210px, 34%) minmax(0, 1fr);
  min-height: 340px;
  overflow: hidden;
  border: 3px solid rgba(137, 94, 45, 0.42);
  border-radius: 8px;
  background: #fff7df;
}

.bulletin-list {
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  border-right: 1px solid rgba(137, 94, 45, 0.26);
  box-shadow: inset -2px 0 rgba(137, 94, 45, 0.08);
  background: #ffedb6;
  padding: 10px;
}

.bulletin-list-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  width: 100%;
  min-height: 66px;
  border: 2px solid rgba(126, 88, 38, 0.22);
  border-radius: 7px;
  background: #fffaf0;
  color: #4d3827;
  text-align: left;
  padding: 9px;
}

.bulletin-list-item.active,
.bulletin-list-item:hover {
  border-color: rgba(74, 115, 53, 0.5);
  background: #f2ffdc;
}

.bulletin-list-item.is-read {
  opacity: 0.82;
}

.bulletin-list-item.has-reward {
  border-color: rgba(185, 95, 72, 0.5);
  background: #fff0e7;
}

.bulletin-stamp {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid #6f4927;
  border-radius: 6px;
  background: #f3cd78;
  box-shadow: inset 0 -2px rgba(125, 79, 22, 0.14);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.bulletin-list-copy {
  min-width: 0;
}

.bulletin-list-copy strong,
.bulletin-list-copy small {
  display: block;
}

.bulletin-list-copy strong {
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.bulletin-list-copy small {
  margin-top: 4px;
  color: #765b3d;
  font-size: 11px;
  line-height: 1.35;
}

.bulletin-detail {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.bulletin-detail-paper {
  min-height: 178px;
  border: 2px solid rgba(126, 88, 38, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(transparent 0 34px, rgba(185, 142, 83, 0.14) 34px 36px),
    #fffdf4;
  background-size: 100% 36px;
  padding: 16px;
}

.bulletin-detail-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: #6c7c3e;
  font-size: 12px;
  font-weight: 950;
}

.bulletin-detail-paper h3 {
  margin: 0 0 10px;
  font-size: 22px;
}

.bulletin-detail-paper p {
  margin: 0;
  color: #765b3d;
  line-height: 1.7;
}

.bulletin-reward-card {
  border: 3px solid rgba(74, 115, 53, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent),
    #eaf7db;
  padding: 12px;
}

.bulletin-reward-card.claimed {
  filter: saturate(0.8);
  opacity: 0.82;
}

.bulletin-detail > .bulletin-reward-card + .bulletin-reward-card {
  display: none;
}

.bulletin-reward-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.bulletin-reward-head span {
  color: #5b7d42;
  font-size: 12px;
  font-weight: 950;
}

.bulletin-reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.bulletin-reward-item {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 82px;
  border: 2px solid rgba(74, 115, 53, 0.24);
  border-radius: 7px;
  background: rgba(255, 253, 244, 0.82);
  padding: 8px 6px;
  text-align: center;
}

.bulletin-reward-item img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}

.bulletin-reward-item strong {
  font-size: 12px;
}

.bulletin-reward-item span {
  color: #5b7d42;
  font-weight: 950;
}

.bulletin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1260px) {
  .leaderboard-page,
  .subpage-grid.guide-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .leaderboard-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .bulletin-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .bulletin-shell {
    grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .leaderboard-mode-switch {
    width: 100%;
  }

  .leaderboard-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .leaderboard-row {
    grid-template-columns: 44px 40px minmax(0, 1fr) minmax(62px, auto);
  }

  .leaderboard-trend {
    grid-column: 2 / -1;
    justify-self: start;
    min-width: 42px;
  }

  .guide-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-route-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-route-node:nth-child(2n)::after {
    display: none;
  }

  .guide-loop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-task-title {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-task-title small {
    text-align: left;
  }

  .bulletin-shell {
    grid-template-columns: 1fr;
  }

  .bulletin-art {
    min-height: 144px;
  }

  .bulletin-mail-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .reminder-archive-grid {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }

  .bulletin-list {
    border-right: 0;
    border-bottom: 3px solid rgba(137, 94, 45, 0.38);
  }

  .reminder-archive-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .leaderboard-panel {
    padding: 10px;
  }

  .leaderboard-row {
    grid-template-columns: 40px minmax(0, 1fr) minmax(58px, auto);
    gap: 7px;
  }

  .leaderboard-avatar {
    display: none;
  }

  .leaderboard-player strong,
  .leaderboard-player span {
    white-space: normal;
  }

  .leaderboard-score strong {
    font-size: 17px;
  }

  .leaderboard-rumor-head {
    align-items: stretch;
    flex-direction: column;
  }

  .guide-hero {
    padding: 12px;
  }

  .guide-hero h2 {
    font-size: 23px;
  }

  .guide-route-map,
  .guide-loop {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-route-node::after {
    display: none;
  }

  .guide-task-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-task-art {
    min-height: 78px;
  }

  .guide-task-condition,
  .guide-task-reward {
    grid-template-columns: minmax(0, 1fr);
  }

  .bulletin-board-panel {
    display: none;
  }

  .bulletin-detail {
    order: 1;
    padding: 10px;
  }

  .bulletin-list {
    order: 2;
    border-top: 1px solid rgba(137, 94, 45, 0.26);
    border-bottom: 0;
    box-shadow: inset 0 2px rgba(137, 94, 45, 0.08);
  }

  .bulletin-reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bulletin-mailbox {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .bulletin-mailbox img {
    width: 58px;
    height: 58px;
  }

  .bulletin-stat-row {
    grid-column: 1 / -1;
  }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 10;
  max-width: min(520px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: none;
  border: 2px solid #d2aa48;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), transparent),
    #fff4c7;
  box-shadow: 0 14px 34px var(--shadow);
  padding: 10px 14px;
  text-align: center;
  font-weight: 850;
}

.profile-editor-overlay {
  position: fixed;
  z-index: 22;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(55, 39, 23, 0.48);
  padding: 18px;
}

.profile-editor-dialog {
  display: grid;
  gap: 14px;
  width: min(820px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 2px solid #7f5732;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(237, 217, 166, 0.9)),
    #fff4cf;
  box-shadow: 0 18px 46px rgba(46, 29, 15, 0.34), inset 0 0 0 4px rgba(255, 248, 220, 0.44);
  padding: 16px;
}

.profile-editor-head,
.profile-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-editor-head span {
  display: block;
  color: #7a5934;
  font-size: 12px;
  font-weight: 950;
}

.profile-editor-head h2 {
  margin-top: 3px;
  font-size: 24px;
  line-height: 1.16;
}

.profile-editor-close {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.profile-editor-body {
  display: grid;
  grid-template-columns: minmax(188px, 220px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.profile-editor-identity,
.profile-editor-details {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.profile-editor-preview {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(126, 88, 38, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(237, 244, 203, 0.74)),
    #edf4cb;
  padding: 12px;
  text-align: center;
}

.profile-editor-preview img {
  width: 96px;
  height: 96px;
  border: 3px solid #6f4927;
  border-radius: 7px;
  background: #fff1bd;
  box-shadow: inset 0 0 0 3px #d1a55d;
  object-fit: contain;
  image-rendering: auto;
}

.profile-editor-preview strong,
.profile-editor-preview span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.profile-editor-preview strong {
  color: #3f3026;
  font-size: 16px;
  font-weight: 950;
}

.profile-editor-preview span {
  color: #765b3d;
  font-size: 12px;
  font-weight: 900;
}

.profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  min-width: 0;
}

.profile-summary-grid div {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 54px;
  border: 1px solid rgba(126, 88, 38, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 246, 205, 0.66)),
    #fff8de;
  padding: 9px 10px;
}

.profile-summary-grid span {
  color: #7a5934;
  font-size: 11px;
  font-weight: 950;
}

.profile-summary-grid strong {
  color: #3f3026;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(126, 88, 38, 0.24);
  border-radius: 8px;
  background: rgba(255, 248, 222, 0.76);
  padding: 10px;
}

.profile-avatar-grid legend {
  padding: 0 6px;
  color: #6a4b2c;
  font-size: 12px;
  font-weight: 950;
}

.profile-avatar-pager {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}

.profile-avatar-pager button {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 7px;
  font-size: 22px;
  line-height: 1;
}

.profile-avatar-pager span {
  color: #6a4b2c;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

.profile-avatar-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.profile-avatar-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.profile-avatar-option span {
  display: grid;
  place-items: center;
  min-height: 58px;
  border: 2px solid rgba(111, 73, 39, 0.25);
  border-radius: 7px;
  background: #fff1bd;
  cursor: pointer;
}

.profile-avatar-option input:focus-visible + span,
.profile-avatar-option input:checked + span {
  border-color: #6f4927;
  box-shadow: inset 0 0 0 2px #f0c46d, 0 0 0 3px rgba(117, 199, 214, 0.3);
}

.profile-avatar-option img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  image-rendering: auto;
}

.profile-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 460px;
  gap: 10px;
}

.profile-editor-fields label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #4a3828;
  font-size: 13px;
  font-weight: 950;
}

.profile-editor-fields input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 2px solid rgba(124, 91, 59, 0.42);
  border-radius: 7px;
  background: #fffdf3;
  color: #3f3026;
  font-weight: 900;
  padding: 0 10px;
}

.profile-editor-fields small {
  color: #74604a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.profile-email-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(126, 88, 38, 0.24);
  border-radius: 8px;
  background: rgba(255, 248, 222, 0.76);
  padding: 10px;
}

.profile-email-panel > div {
  grid-column: 1 / -1;
}

.profile-email-panel label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 850;
  color: #4a3828;
  font-weight: 950;
}

.profile-email-panel strong,
.profile-email-panel span,
.profile-email-panel small {
  display: block;
}

.profile-email-panel span {
  margin-top: 4px;
  color: #5f4f39;
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.profile-email-panel small {
  margin-top: 4px;
  color: #74604a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.profile-email-locked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  grid-column: 1 / -1;
  border: 1px solid rgba(91, 132, 74, 0.28);
  border-radius: 7px;
  background: rgba(237, 244, 203, 0.74);
  color: #4f6638;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  padding: 10px 12px;
}

.profile-email-locked button {
  min-height: 40px;
  padding: 0 12px;
  white-space: nowrap;
}

.profile-email-panel input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 2px solid rgba(124, 91, 59, 0.42);
  border-radius: 7px;
  background: #fffdf3;
  color: #3f3026;
  font-weight: 900;
  padding: 0 10px;
}

.profile-editor-message {
  grid-column: 1 / -1;
  margin: 0;
}

.profile-editor-actions {
  justify-content: end;
}

.release-announcement-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(55, 39, 23, 0.46);
  padding: 18px;
}

.release-announcement-dialog {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: min(520px, 100%);
  max-width: calc(100vw - 28px);
  box-sizing: border-box;
  min-width: 0;
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 2px solid #8b6138;
  border-radius: 8px;
  background:
    radial-gradient(circle at 20px 20px, rgba(184, 111, 66, 0.18) 0 7px, transparent 8px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(242, 222, 165, 0.88)),
    #fff4cf;
  box-shadow: 0 18px 46px rgba(46, 29, 15, 0.32), inset 0 0 0 4px rgba(255, 248, 220, 0.42);
  padding: 18px;
}

.release-announcement-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  color: #6a4b2c;
  font-size: 13px;
  font-weight: 950;
}

.release-announcement-head span,
.release-announcement-head strong {
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(128, 84, 39, 0.25);
  border-radius: 999px;
  background: rgba(255, 248, 220, 0.78);
  padding: 4px 9px;
  overflow-wrap: anywhere;
}

.release-announcement-dialog h2 {
  font-size: 24px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.release-announcement-date {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.release-announcement-dialog ul {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding-left: 22px;
}

.release-announcement-dialog li {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  line-height: 1.45;
  font-weight: 800;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-all;
}

.release-announcement-dialog button {
  justify-self: end;
  max-width: 100%;
  min-width: 112px;
}

.tool-enhance-help-overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(55, 39, 23, 0.46);
  padding: 18px;
}

.tool-enhance-help-dialog {
  width: min(680px, 100%);
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  display: grid;
  gap: 14px;
  box-sizing: border-box;
  border: 2px solid #8b6138;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(242, 222, 165, 0.92)),
    #fff4cf;
  box-shadow: 0 18px 46px rgba(46, 29, 15, 0.32), inset 0 0 0 4px rgba(255, 248, 220, 0.42);
  padding: 18px;
}

.tool-enhance-help-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.tool-enhance-help-head span {
  color: #7a5430;
  font-size: 12px;
  font-weight: 950;
}

.tool-enhance-help-head h2 {
  margin: 2px 0 0;
  color: #352314;
  font-size: 24px;
  line-height: 1.15;
}

.tool-enhance-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tool-enhance-help-grid section {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(128, 84, 39, 0.22);
  border-radius: 8px;
  background: rgba(255, 248, 220, 0.7);
}

.tool-enhance-help-grid h3 {
  margin: 0 0 6px;
  color: #4a301a;
  font-size: 15px;
}

.tool-enhance-help-grid p {
  margin: 0;
  color: #5f4b37;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 800;
}

.tool-help-table {
  width: 100%;
  border-collapse: collapse;
  color: #5f4b37;
  font-size: 13px;
  line-height: 1.42;
  table-layout: fixed;
}

.tool-help-table tr + tr {
  border-top: 1px solid rgba(128, 84, 39, 0.16);
}

.tool-help-table th,
.tool-help-table td {
  padding: 7px 0;
  vertical-align: top;
}

.tool-help-table th {
  width: 54px;
  padding-right: 10px;
  color: #4a301a;
  font-weight: 950;
  text-align: left;
  white-space: nowrap;
}

.tool-help-table td {
  font-weight: 800;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .tool-enhance-help-head {
    align-items: stretch;
    flex-direction: column;
  }

  .tool-enhance-help-head button {
    justify-self: stretch;
  }

  .tool-enhance-help-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .world-buff-track {
    transform: none !important;
  }

  .world-buff-copy[aria-hidden="true"] {
    display: none !important;
  }

  button:hover,
  .farm-tile:hover {
    transform: none;
  }
}

@media (max-width: 1260px) {
  .shell {
    grid-template-columns: 236px minmax(0, 1fr);
  }

  .main-grid,
  .board-grid,
  .subpage-grid {
    grid-template-columns: minmax(390px, 1fr) minmax(320px, 0.9fr);
  }

  .right-column {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .right-column .panel {
    margin-top: 0;
  }

  .is-home .right-column {
    display: block;
    grid-column: auto;
  }

  .is-home .right-column .panel + .panel {
    margin-top: 14px;
  }

  .home-scene {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 316px);
  }

  .is-home .farm-tile {
    min-height: 0;
  }

  .is-home .tile-start,
  .is-home .tile-art,
  .is-home .tile-art img {
    height: 128px;
    min-height: 128px;
  }
}

@media (max-width: 900px) {
  .pet-home-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .pet-home-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .pet-home-actions button {
    min-width: 0;
    white-space: normal;
  }

  .pet-page-hero,
  .pet-select-grid,
  .pet-wardrobe-grid,
  .pet-benefit-grid,
  .pet-dispatch-grid,
  .pet-level-benefit-list,
  .pet-collection-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .pet-level-benefit-row {
    grid-template-columns: 48px 76px minmax(0, 1fr);
  }

  .pet-page-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shell {
    display: block;
    padding: 0 0 86px;
  }

  .app-main {
    max-width: 100vw;
    overflow-x: hidden;
    padding-bottom: 18px;
  }

  .sidebar {
    display: none;
  }

  .topbar {
    position: sticky;
    display: grid;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px;
  }

  .is-home .topbar {
    position: sticky;
    overflow-x: hidden;
  }

  .nav-brand-logo img {
    width: 142px;
    max-width: 42vw;
  }

  body:not(.is-home) .topbar {
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    gap: 6px 8px;
    padding: 6px 8px;
  }

  body:not(.is-home) .nav-brand-logo {
    margin-right: 0;
  }

  body:not(.is-home) .nav-brand-logo img {
    width: 118px;
    max-width: 34vw;
  }

  .world-strip,
  .top-actions {
    justify-content: flex-start;
    overflow-x: hidden;
  }

  .world-strip {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .personal-message-center {
    justify-self: end;
  }

  .world-chip,
  .world-buff {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body:not(.is-home) .world-strip {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 1px;
  }

  body:not(.is-home) .world-chip,
  body:not(.is-home) .world-buff {
    flex: 1 1 132px;
    min-height: 30px;
    font-size: 11px;
    padding: 5px 7px;
  }

  body:not(.is-home) .world-buff {
    flex: 0 0 clamp(220px, 36vw, 360px);
    width: clamp(220px, 36vw, 360px);
    max-width: clamp(220px, 36vw, 360px);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }

  body:not(.is-home) .world-chip.event-chip {
    flex: 0 0 112px;
    width: 112px;
  }

  body:not(.is-home) .world-chip.event-preview-chip {
    flex: 0 0 108px;
    width: 108px;
  }

  body:not(.is-home) .world-event-group {
    grid-template-columns: 112px 108px clamp(220px, 36vw, 360px);
  }

  .player-hud {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }

  body:not(.is-home) .player-hud-main strong {
    font-size: 16px;
  }

  body:not(.is-home) .player-hud-main > span:not(.player-kicker) {
    font-size: 11px;
  }

  body:not(.is-home) .player-hud-main > .player-identity {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .top-actions {
    justify-self: end;
  }

  body:not(.is-home) .top-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    gap: 6px;
    max-width: 100%;
  }

  body:not(.is-home) .top-actions .top-entry {
    min-height: 34px;
    font-size: 12px;
    padding: 5px 8px;
  }

  .top-actions .top-entry[data-id="workbench"],
  .top-actions .top-entry[data-id="storage"],
  .top-actions .top-entry[data-id="welfare"],
  .top-actions .top-entry[data-id="leaderboard"] {
    display: none;
  }

  .is-home .top-actions {
    display: flex;
  }

  .is-home .top-actions > :not(.personal-message-center) {
    display: none;
  }

  .is-home .world-strip {
    justify-content: center;
  }

  .topbar,
  .main-grid,
  .board-grid,
  .subpage-grid,
  .right-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .subpage-grid {
    width: 100%;
    max-width: 100%;
    padding-bottom: 18px;
  }

  .page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
    min-height: auto;
    margin: 10px 14px 8px;
    padding: 8px 10px;
  }

  .page-head .muted {
    display: none;
  }

  .page-head h2 {
    font-size: 18px;
    line-height: 1.15;
  }

  .page-head button {
    min-height: 36px;
    padding: 6px 10px;
  }

  .is-home .board-side {
    display: contents;
  }

  .is-home .left-column {
    order: 2;
  }

  .is-home .status-panel {
    order: 1;
  }

  .is-home .dashboard-panel {
    order: 3;
    margin-top: 0;
  }

  .is-home .board-side .panel + .panel {
    margin-top: 0;
  }

  .home-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "hud"
      "stage"
      "dock";
    gap: 10px;
    width: 100%;
    max-width: 100vw;
    min-height: auto;
    padding: 8px 10px 104px;
    overflow-x: hidden;
  }

  .home-dock {
    gap: 8px;
    max-width: 100%;
    overflow-x: hidden;
  }

  .buff-summary-panel {
    max-width: 100%;
    overflow-x: hidden;
  }

  .buff-detail-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .buff-effect-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .is-home .home-stage,
  .is-home .home-hud,
  .is-home .farm-stage,
  .is-home .farm-map,
  .is-home .home-hud .panel {
    max-width: 100%;
    overflow-x: hidden;
  }

  .is-home .farm-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .is-home .home-dock .dashboard-panel {
    display: none;
  }

  .is-home .home-hud {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .is-home .town-goal-panel {
    padding: 8px;
  }

  .is-home .town-goal-panel .panel-head {
    margin-bottom: 6px;
  }

  .is-home .town-goal-panel .town-goal-meter {
    gap: 6px;
  }

  .is-home .town-goal-panel .town-goal-reward-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .is-home .home-hud .panel-head {
    align-items: center;
    flex-direction: row;
  }

  .is-home .home-hud .panel-head .tiny {
    display: none;
  }

  .is-home .queue-panel,
  .is-home .home-hud .pet-panel {
    display: none;
  }

  .is-home .tracked-order-card:nth-child(n+2) {
    display: none;
  }

  .stage-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stage-brief-item.is-event {
    grid-column: 1 / -1;
  }

  .is-home .dashboard-card:nth-child(n+5) {
    display: grid;
  }

  .mobile-nav-fab {
    display: grid;
    position: fixed;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    margin: 0;
    z-index: 48;
  }

  .mobile-nav-shell.is-open .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 44;
    border: 0;
    border-radius: 0;
    background: rgba(42, 29, 18, 0.24);
    box-shadow: none;
    padding: 0;
  }

  .mobile-nav-shell.is-open .mobile-nav-drawer {
    display: block;
    position: fixed;
    top: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 47;
    width: min(286px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 20px - env(safe-area-inset-bottom));
    box-sizing: border-box;
  }

  .mobile-nav-grid {
    max-height: calc(100vh - 86px - env(safe-area-inset-bottom));
  }

  .release-announcement-overlay {
    justify-items: stretch;
    padding: 10px;
  }

  .release-announcement-dialog {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 20px);
    gap: 10px;
    justify-self: center;
    padding: 14px;
  }

  .release-announcement-head {
    font-size: 12px;
    font-weight: 800;
  }

  .release-announcement-dialog h2 {
    font-size: 21px;
  }

  .release-announcement-dialog li {
    font-size: 13px;
    padding-right: 2px;
  }

  .release-announcement-dialog button {
    justify-self: stretch;
    width: 100%;
  }

  .toast {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 84px);
    max-width: calc(100vw - 32px);
  }

  .status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .status-item.rank,
  .status-item.event {
    grid-column: auto;
  }

  .farm-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: auto;
    overflow-x: hidden;
  }

  .is-home .farm-map {
    grid-auto-rows: auto;
    min-height: auto;
  }

  .farm-tile {
    grid-column: auto;
    grid-row: auto;
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-exchange-board {
    gap: 8px;
    max-width: 100%;
    overflow-x: hidden;
    padding: 8px;
  }

  .market-exchange-board .market-mode-switch {
    justify-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
  }

  .bazaar-vendor-hero,
  .bazaar-offer-card,
  .treasure-auction-hero,
  .treasure-auction-lot {
    grid-template-columns: minmax(0, 1fr);
  }

  .bazaar-vendor-avatar {
    width: min(190px, 100%);
    justify-self: center;
  }

  .bazaar-offer-card .trade-control,
  .treasure-auction-lot .trade-control {
    justify-self: stretch;
  }

  .market-exchange-board .market-mode-switch button {
    min-width: 0;
  }

  .market-exchange-board .section-strip {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }

  .market-exchange-board .section-strip button {
    flex: 0 0 auto;
    width: auto;
    min-width: 72px;
  }

  .player-market-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    min-width: 0;
  }

  .market-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storage-ledger-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-river,
  .map-road,
  .map-corner {
    opacity: 0.42;
  }

  .building,
  .listing,
  .order {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .order-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .order {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 158px;
  }

  .order .row-main {
    padding-right: 0;
  }

  .order-need-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tracked-order-card {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .home-stage .tracked-order-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-tag {
    display: none;
  }

  .player-market-order .price-tag {
    display: grid;
    min-width: 64px;
  }

  .tool-market-row .price-tag {
    display: grid;
    min-width: 64px;
  }

  .tool-market-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .tool-market-row-trade {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .tool-market-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .tool-market-detail-sheet {
    align-self: end;
    width: min(520px, calc(100vw - 16px));
    max-height: min(760px, calc(100dvh - 16px));
    padding: 12px;
  }

  .tool-market-detail-head {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .tool-market-detail-close {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .order-commendation-seal {
    top: 6px;
    right: 6px;
    width: 42px;
    height: 42px;
  }

  .actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .market-order-card {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .market-order-card.service-disabled,
  .market-order-card.special-pass-system-card,
  .market-order-card.special-pass-current-price,
  .market-order-card.special-pass-afdian-card,
  .market-order-card.tool-market-order-card,
  .bazaar-offer-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-order-card > *,
  .tool-market-order-card > *,
  .bazaar-offer-card > * {
    min-width: 0;
  }

  .market-order-card .trade-control {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .market-order-card .trade-control button,
  .market-order-card .trade-control input,
  .bazaar-offer-card .trade-control button,
  .bazaar-offer-card .trade-control input {
    min-width: 0;
  }

  .market-order-title,
  .market-detail-head {
    min-width: 0;
  }

  .market-order-title strong,
  .market-detail-head h3,
  .market-detail-head p,
  .market-order-card strong,
  .market-order-card span {
    overflow-wrap: anywhere;
  }

  .market-order-card .special-pass-trade-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-order-card.special-pass-system-card,
  .market-order-card.special-pass-current-price {
    grid-template-columns: minmax(0, 1fr);
  }

  .special-pass-afdian-avatar {
    width: 56px;
    height: 56px;
  }

  .recycle-box-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .recycle-box-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .recycle-box-row .trade-control {
    grid-column: 1 / -1;
    justify-self: stretch;
    min-width: 0;
  }

  .bottom-nav {
    display: grid;
  }
}

@media (max-width: 560px) {
  .newbie-task-banner {
    grid-template-columns: 46px minmax(0, 1fr) 48px;
    gap: 8px;
    min-height: 66px;
    padding: 7px 8px;
  }

  .newbie-task-icon {
    width: 44px;
    height: 44px;
  }

  .newbie-task-icon img {
    width: 36px;
    height: 36px;
  }

  .newbie-task-icon .guide-symbol {
    width: 36px;
    height: 36px;
  }

  .newbie-task-copy strong {
    font-size: 17px;
  }

  .newbie-task-copy small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .newbie-task-cta {
    min-width: 44px;
    min-height: 32px;
    font-size: 12px;
  }

  .shell {
    padding: 0 0 104px;
  }

  .is-home .queue-panel,
  .is-home .pet-panel {
    display: none;
  }

  .is-home .tracked-order-card:nth-child(n+2) {
    display: none;
  }

  .topbar {
    padding: 8px;
  }

  .nav-brand-logo {
    align-self: center;
  }

  .nav-brand-logo img {
    width: 128px;
    max-width: 48vw;
  }

  .world-chip,
  .world-buff,
  .top-actions button {
    min-height: 34px;
    font-size: 12px;
    padding: 5px 8px;
  }

  .world-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    min-width: 0;
    gap: 6px;
  }

  .world-chip,
  .world-buff {
    width: 100%;
  }

  .world-chip.event-chip,
  .world-chip.event-preview-chip {
    flex-basis: auto;
  }

  .world-event-group {
    grid-column: 1 / -1;
    grid-template-columns: 112px 108px 300px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .world-event-group::-webkit-scrollbar {
    display: none;
  }

  .world-buff {
    grid-column: 1 / -1;
    flex-basis: auto;
    max-width: 100%;
    overflow-x: hidden;
    white-space: nowrap;
  }

  body:not(.is-home) .world-buff {
    overflow-x: hidden;
  }

  .world-buff-track {
    gap: 28px;
    min-width: max-content;
    animation: world-buff-mobile-marquee 16s linear infinite;
    will-change: transform;
  }

  .world-buff:hover .world-buff-track,
  .world-buff:focus-within .world-buff-track {
    animation-play-state: paused;
  }

  .world-buff-copy {
    flex: 0 0 auto;
  }

  .world-buff-copy[aria-hidden="true"] {
    display: inline-flex;
  }

  .top-entry.newbie-task-entry {
    grid-template-columns: 28px;
    min-width: 38px;
    padding: 4px;
  }

  .newbie-task-nav-copy {
    display: none;
  }

  .world-buff {
    max-width: 100%;
  }

  .player-hud {
    grid-template-columns: 52px minmax(0, 1fr) 26px;
    gap: 6px;
    padding: 6px;
  }

  .player-avatar {
    width: 52px;
    height: 52px;
  }

  .player-avatar > img:not(.pet-pass-avatar-badge) {
    width: 50px;
    height: 50px;
  }

  .player-avatar .pet-pass-avatar-link {
    right: -6px;
    bottom: -6px;
    width: 16px;
    height: 16px;
  }

  .player-profile-edit {
    width: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
  }

  .player-hud-main strong {
    font-size: 15px;
  }

  .player-hud-main > .player-identity {
    font-size: 11px;
    line-height: 1.22;
  }

  .player-status-strip {
    gap: 5px;
  }

  .player-status-chip {
    min-height: 42px;
    padding: 5px 6px;
  }

  .player-status-chip strong {
    font-size: 12px;
  }

  .player-status-chip small,
  .player-production > span,
  .production-empty {
    font-size: 10px;
  }

  .production-icons {
    grid-template-columns: repeat(5, 27px);
    grid-auto-rows: 27px;
    max-height: 27px;
  }

  .production-icon {
    width: 27px;
    height: 27px;
    min-height: 27px;
  }

  .production-icon img {
    width: 22px;
    height: 22px;
  }

  .brand-mark {
    width: 48px;
    height: 48px;
  }

  .brand-mark img {
    width: 112px;
  }

  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-item {
    padding: 7px 8px;
  }

  .status-item > span:not(.status-icon),
  .status-item strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .status-item strong {
    font-size: clamp(13px, 3.5vw, 15px);
    white-space: normal;
  }

  .status-item.rank,
  .status-item.event {
    grid-column: 1 / -1;
  }

  .reputation-bridge {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .reputation-arrow {
    min-height: 22px;
    transform: rotate(90deg);
  }

  .reputation-card {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .reputation-art {
    width: 48px;
    height: 48px;
  }

  .reputation-card strong {
    font-size: 18px;
  }

  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel,
  .farm-stage {
    width: 100%;
    max-width: 100%;
    padding: 10px;
  }

  .workbench {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  .workbench::before {
    display: none;
  }

  .workbench-head {
    margin-bottom: 8px;
    border: 2px solid rgba(92, 61, 34, 0.3);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(255, 250, 225, 0.56), rgba(210, 174, 103, 0.76)),
      #d7ad65;
    box-shadow: inset 0 2px rgba(255, 246, 210, 0.28), 0 4px 0 rgba(81, 55, 31, 0.12);
    padding: 8px;
  }

  .page-head {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
  }

  .panel-head,
  .stage-head,
  .workbench-head,
  .section-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .workbench-head .muted {
    display: none;
  }

  .tabs {
    justify-content: flex-start;
    width: 100%;
    border-color: rgba(77, 51, 30, 0.24);
    background:
      linear-gradient(180deg, rgba(255, 246, 210, 0.18), rgba(85, 54, 30, 0.12)),
      rgba(110, 72, 38, 0.16);
  }

  .tab {
    flex: 1 1 0;
    gap: 3px;
    min-width: 0;
    min-height: 40px;
    padding: 4px 2px;
    font-size: 12px;
  }

  .tab-icon {
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
  }

  .system-strip {
    gap: 8px;
    min-height: 58px;
    padding-left: 44px;
  }

  .system-strip::before {
    left: 8px;
    top: 12px;
    width: 28px;
    height: 28px;
    background-size: 28px 28px;
    transform: none;
  }

  .system-strip button {
    width: 100%;
  }

  .farm-map {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: auto;
    padding: 8px;
  }

  .is-home .farm-map {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .is-home .player-hud {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 7px;
  }

  .is-home .player-avatar {
    width: 52px;
    height: 52px;
    border-width: 2px;
  }

  .is-home .stage-head-compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
  }

  .is-home .stage-meter {
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: 6px 4px;
    text-align: center;
    white-space: normal;
  }

  .is-home .player-avatar > img:not(.pet-pass-avatar-badge) {
    width: 48px;
    height: 48px;
  }

  .is-home .player-status-strip,
  .is-home .player-production,
  .is-home .tracked-orders-panel {
    display: none;
  }

  .farm-stage {
    margin-top: 0;
  }

  .stage-head {
    margin-bottom: 8px;
  }

  .stage-head .muted,
  .credit {
    font-size: 11px;
  }

  .farm-tile {
    min-height: 112px;
    overflow: hidden;
    padding: 7px;
  }

  .is-home .farm-tile {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }

  .tile-start {
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    height: 96px;
    min-height: 96px;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
  }

  .tile-stop {
    right: 6px;
    top: 6px;
    width: 44px;
    height: 44px;
  }

  .tile-stop:disabled {
    display: none;
  }

  .tile-art,
  .tile-art img {
    height: 96px;
    min-height: 96px;
  }

  .tile-icon {
    width: 25px;
    height: 25px;
  }

  .tile-icon img {
    width: 17px;
    height: 17px;
  }

  .tile-zone,
  .tile-name,
  .tile-speed,
  .tile-status,
  .tile-meta,
  .tile-consume {
    font-size: 9px;
  }

  .tile-icon {
    opacity: 0.96;
  }

  .tile-name {
    font-size: 13px;
  }

  .tile-zone {
    padding: 3px 4px;
  }

  .tile-meta {
    min-height: 25px;
    padding: 6px 4px 3px 32px;
  }

  .tile-speed {
    max-width: 54%;
    font-size: 9px;
    overflow-wrap: anywhere;
  }

  .tile-progress {
    width: calc(100% - 8px);
  }

  .farm-tile.is-ready::after,
  .farm-tile.is-paused::after,
  .farm-tile.is-blocked::after,
  .farm-tile.is-waiting::after {
    left: 8px;
    top: 8px;
    min-width: 36px;
    font-size: 9px;
    padding: 3px 5px;
  }

  .is-home .bottom-nav {
    gap: 5px;
    padding: 5px;
  }

  .farm-map-actions {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 0;
  }

  .farm-map-actions .building-unlock-summary {
    display: none;
  }

  .farm-map-actions .building-page-prev,
  .farm-map-actions .building-page-next,
  .farm-map-actions .building-entry {
    flex: 1 1 86px;
    min-width: 0;
  }

  .building-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 8px;
    padding: 4px;
  }

  .building-filter {
    border-radius: 7px;
    font-size: 11px;
    padding: 5px 7px;
  }

  .is-home .bottom-nav button {
    min-height: 52px;
    font-size: 10px;
    padding: 4px 2px;
  }

  .bottom-nav-icon {
    width: 26px;
    height: 26px;
    background-size: 26px 26px;
  }

  .market-catalog {
    grid-template-columns: minmax(0, 1fr);
  }

  .storage-ledger-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-order-card,
  .player-market-order {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-order-card.service-disabled,
  .market-order-card.special-pass-system-card,
  .market-order-card.special-pass-current-price,
  .market-order-card.special-pass-afdian-card,
  .market-order-card.tool-market-order-card,
  .bazaar-offer-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-market-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .tool-market-row-trade {
    grid-column: 1 / -1;
    width: 100%;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .tool-market-row-actions {
    flex: 1 1 100%;
    justify-content: stretch;
  }

  .tool-market-row-actions button,
  .tool-market-detail-actions button {
    flex: 1 1 0;
  }

  .tool-sell-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-sell-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .tool-sell-row button {
    width: 100%;
  }

  .trade-control,
  .trade-control:has([data-trade-price]),
  .trade-control:has(.trade-field),
  .trade-control:has(.trade-max-button),
  .trade-control:has([data-trade-price]):has(.trade-max-button),
  .trade-control:has(.trade-field):has(.trade-max-button),
  .trade-control.special-pass-trade-control,
  .trade-control.special-pass-trade-control:has(.trade-field):has(.trade-max-button) {
    grid-template-columns: minmax(0, 1fr);
  }

  .trade-control button,
  .trade-control input {
    width: 100%;
  }

  .trade-control button {
    white-space: normal;
  }

  .stage-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .stage-brief-item.is-event {
    display: none;
    grid-column: auto;
  }

  .research-grid,
  .ledger-grid,
  .dashboard-grid,
  .intel-card-grid,
  .economy-metrics,
  .economy-split,
  .admin-bridge-grid,
  .admin-bridge-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .research-board,
  .research-board .research-tree {
    grid-template-columns: minmax(0, 1fr);
  }

  .research-side-panel {
    position: static;
  }

  .research-mobile-action {
    position: sticky;
    top: 8px;
    z-index: 24;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    border: 2px solid rgba(82, 53, 29, 0.42);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(255, 253, 236, 0.96), rgba(231, 211, 162, 0.94)),
      #ead29b;
    box-shadow: 0 4px 0 rgba(69, 46, 27, 0.14), 0 12px 22px rgba(51, 35, 20, 0.12);
    padding: 9px;
  }

  .research-mobile-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
  }

  .research-mobile-main > div:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .research-mobile-main strong,
  .research-mobile-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .research-mobile-main strong {
    color: #4f3c27;
    font-size: 15px;
    line-height: 1.12;
  }

  .research-mobile-main small {
    color: #7a5a32;
    font-size: 11px;
    font-weight: 700;
  }

  .research-mobile-costs {
    display: grid;
    grid-template-columns: repeat(3, minmax(52px, auto));
    gap: 5px;
  }

  .research-mobile-costs span {
    display: grid;
    min-height: 38px;
    place-items: center;
    border: 1px solid rgba(82, 53, 29, 0.2);
    border-radius: 8px;
    background: rgba(255, 250, 225, 0.74);
    padding: 3px 5px;
  }

  .research-mobile-costs strong {
    max-width: 64px;
    overflow: hidden;
    color: #4f3c27;
    font-size: 12px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .research-mobile-costs small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
  }

  .research-mobile-action > button {
    grid-column: 1 / -1;
    min-height: 42px;
    width: 100%;
  }

  .research-board .research-line {
    min-height: auto;
  }

  .research-board .research-node-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 8px;
  }

  .research-board .research-node {
    min-height: 98px;
  }

  .research-board .research-line::after {
    left: 32px;
    right: auto;
    top: 72px;
    bottom: 16px;
    width: 4px;
    height: auto;
    background:
      repeating-linear-gradient(180deg, rgba(122, 89, 45, 0.12) 0 8px, transparent 8px 14px),
      linear-gradient(180deg, rgba(120, 180, 99, 0.55), rgba(117, 199, 214, 0.45), rgba(242, 185, 75, 0.55));
  }

  .research-detail {
    position: static;
  }

  .market-catalog,
  .market-item-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .queue-row,
  .building,
  .listing,
  .order,
  .research-status,
  .inventory-row,
  .dashboard-card,
  .economy-hot-row,
  .economy-table-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .contract-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-intel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .economy-row-chart,
  .economy-row-stats {
    grid-column: 1 / -1;
  }

  .tracked-order-card {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .tracked-order-card button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .actions button {
    flex: 1 1 120px;
  }

  .research-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .research-card > button,
  .research-status > button,
  .research-status > .pill {
    grid-column: 1 / -1;
  }

  .page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .building-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .building-page-tabs {
    grid-template-columns: minmax(0, 1fr);
  }

  .building-chain-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .building-chain-summary > .pill {
    grid-column: 2;
    justify-self: start;
  }

  .building-status-card {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .functional-building .building-status-card {
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
  }

  .building-status-card > .sprite,
  .building-status-card > .sprite img {
    width: 72px;
    height: 58px;
  }

  .functional-building-summary {
    grid-column: 1 / -1;
  }

  .building-blueprint-exchange-card {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .building-blueprint-exchange-card button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .building-status-card .building-actions {
    grid-column: 1 / -1;
  }

  .functional-building .building-actions {
    justify-content: stretch;
  }

  .functional-building .building-actions button {
    width: 100%;
  }

  .slot-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bottom-nav {
    right: 10px;
    left: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .is-home .bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.welfare-panel,
.welfare-rules-panel,
.admin-redeem-panel {
  display: grid;
  gap: 14px;
}

.welfare-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 2px solid rgba(135, 95, 45, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 219, 0.94), rgba(219, 239, 196, 0.92)),
    #fff8dc;
  box-shadow: inset 0 -4px rgba(126, 88, 38, 0.08);
  padding: 16px;
}

.welfare-hero h2 {
  margin-top: 4px;
  font-size: 42px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.welfare-hero p {
  max-width: 58ch;
  margin-top: 8px;
  color: #67533c;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.welfare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.welfare-card {
  display: grid;
  gap: 7px;
  min-height: 142px;
  border: 1px solid rgba(126, 88, 38, 0.2);
  border-radius: 8px;
  background: #fff8dc;
  padding: 13px;
}

.welfare-card strong,
.welfare-card span,
.welfare-card small {
  display: block;
}

.welfare-card span {
  color: #5f4f39;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.welfare-card small {
  color: #78654d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.welfare-bind-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1.1fr);
  gap: 12px;
  align-items: end;
  border: 1px solid rgba(126, 88, 38, 0.2);
  border-radius: 8px;
  background: #fff8dc;
  box-shadow: inset 0 0 0 2px rgba(120, 180, 99, 0.1);
  padding: 13px;
}

.welfare-bind-card strong,
.welfare-bind-card span,
.welfare-bind-card small {
  display: block;
}

.welfare-bind-card span {
  margin-top: 5px;
  color: #5f4f39;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.welfare-bind-card small {
  margin-top: 4px;
  color: #78654d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.referral-milestone-list {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.referral-milestone-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(126, 88, 38, 0.16);
  border-radius: 7px;
  background: rgba(255, 253, 241, 0.64);
  padding: 7px 8px;
}

.referral-milestone-list strong {
  color: #5b7438;
  font-size: 12px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.referral-milestone-list span {
  overflow-wrap: anywhere;
  color: #66533d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.referral-milestone-list small {
  display: block;
  margin-top: 3px;
  color: #806d54;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.referral-invitee-list {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.referral-invitee-list > strong {
  color: #5f4a31;
  font-size: 13px;
  font-weight: 950;
}

.referral-invitee-row {
  display: grid;
  grid-template-columns: 82px repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
  border: 1px solid rgba(126, 88, 38, 0.16);
  border-radius: 7px;
  background: rgba(255, 253, 241, 0.64);
  padding: 7px 8px;
}

.referral-invitee-row span,
.referral-invitee-empty {
  min-width: 0;
  color: #66533d;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.referral-invitee-row span:first-child {
  color: #5b7438;
  font-variant-numeric: tabular-nums;
  font-weight: 950;
}

.referral-invitee-empty {
  border: 1px dashed rgba(126, 88, 38, 0.22);
  border-radius: 7px;
  padding: 8px;
  text-align: center;
}

.referral-reward-warehouse {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid rgba(126, 88, 38, 0.16);
  border-radius: 8px;
  background: rgba(246, 239, 203, 0.58);
  padding: 9px;
}

.referral-warehouse-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.referral-warehouse-head strong,
.referral-warehouse-head small {
  display: block;
}

.referral-warehouse-head small {
  margin-top: 2px;
  color: #806d54;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.referral-reward-bin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 7px;
}

.referral-reward-bin.is-empty {
  display: block;
  border: 1px dashed rgba(126, 88, 38, 0.22);
  border-radius: 7px;
  color: #806d54;
  font-size: 12px;
  font-weight: 700;
  padding: 9px;
  text-align: center;
}

.referral-reward-token {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 7px;
  background: rgba(255, 253, 241, 0.78);
  padding: 7px 5px;
}

.referral-reward-token img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.referral-reward-token strong {
  color: #5b7438;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.referral-reward-token small {
  width: 100%;
  margin: 0;
  color: #66533d;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.welfare-bind-form,
.welfare-redeem-form,
.admin-redeem-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-redeem-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.welfare-bind-form label,
.welfare-redeem-form label,
.admin-redeem-form label {
  display: grid;
  gap: 6px;
  color: #5f4a31;
  font-size: 13px;
  font-weight: 900;
}

.welfare-bind-form input,
.welfare-redeem-form input,
.admin-redeem-form input,
.admin-redeem-form textarea {
  width: 100%;
  min-height: 44px;
  border: 2px solid rgba(126, 88, 38, 0.25);
  border-radius: 8px;
  background: #fffdf1;
  color: var(--ink);
  padding: 9px 10px;
}

.admin-redeem-form textarea {
  min-height: 146px;
  resize: vertical;
  line-height: 1.45;
}

.admin-redeem-form label:has(textarea),
.admin-redeem-form button {
  grid-column: 1 / -1;
}

.welfare-message {
  margin: 0;
}

.welfare-redeem-note {
  margin: -4px 0 0;
  color: #78654d;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .welfare-hero,
  .welfare-bind-card,
  .welfare-bind-form,
  .welfare-redeem-form,
  .admin-redeem-form,
  .welfare-grid,
  .referral-milestone-row,
  .referral-invitee-row,
  .referral-warehouse-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .referral-warehouse-head,
  .referral-warehouse-head button {
    width: 100%;
  }

  .welfare-hero h2 {
    font-size: 34px;
  }
}
/* Multiplayer MVP shell */
.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 226, 138, 0.42), transparent 24rem),
    radial-gradient(circle at 82% 12%, rgba(117, 199, 214, 0.28), transparent 22rem),
    linear-gradient(180deg, #a7cf77, #e8cf8f);
}

.auth-card {
  width: min(760px, 100%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 246, 214, 0.88)),
    #fff7df;
  border: 3px solid rgba(61, 42, 29, 0.78);
  border-radius: 8px;
  box-shadow: 0 12px 0 rgba(61, 42, 29, 0.18), 0 22px 40px rgba(61, 42, 29, 0.14);
  padding: 22px;
}

.auth-brand {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.auth-brand img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

.auth-brand h1,
.auth-form h2 {
  margin: 0;
}

.auth-brand p,
.auth-form label {
  color: #5f4a34;
}

.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.auth-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(238, 246, 202, 0.64)),
    rgba(255, 255, 255, 0.45);
  border: 2px solid rgba(126, 88, 38, 0.24);
  border-radius: 8px;
}

.auth-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.auth-form input {
  min-height: 44px;
  border: 2px solid #7c5b3b;
  border-radius: 6px;
  padding: 0 10px;
  background: #fffdf3;
}

.auth-form small {
  color: #76644c;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.auth-message,
.market-help,
.empty-panel {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(89, 128, 85, 0.14);
  color: #3d2a1d;
}

.empty-panel {
  display: grid;
  gap: 6px;
}

.market-intel {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
  border: 1px solid rgba(94, 128, 103, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(120, 180, 99, 0.14), rgba(117, 199, 214, 0.1)),
    rgba(255, 250, 228, 0.72);
  padding: 10px;
}

.market-intel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.market-intel-head div {
  display: grid;
  gap: 2px;
}

.market-intel-head span,
.intel-card small,
.intel-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.intel-card-grid,
.economy-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.intel-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 96px;
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 8px;
  background: rgba(255, 248, 220, 0.72);
  padding: 8px;
}

.intel-card > div:not(.mini-sprite) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.intel-card .mini-chart {
  grid-column: 1 / -1;
}

.market-spark {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr);
  gap: 8px;
  align-items: center;
  max-width: 240px;
  margin-top: 4px;
}

.market-spark span,
.spark-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.mini-chart,
.mini-bars {
  width: 100%;
  height: 36px;
  overflow: visible;
}

.mini-chart polyline {
  fill: none;
  stroke: #4d9a6b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.mini-bars rect {
  fill: #d9a441;
  rx: 1.5px;
}

.economy-admin-panel {
  display: grid;
  gap: 12px;
}

.admin-bridge-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(73, 117, 132, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(117, 199, 214, 0.16), rgba(242, 185, 75, 0.12)),
    rgba(255, 250, 228, 0.72);
  padding: 10px;
}

.admin-bridge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-bridge-grid button {
  min-height: 34px;
}

.admin-bridge-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.admin-bridge-facts span {
  display: grid;
  gap: 2px;
  min-height: 48px;
  border: 1px solid rgba(126, 88, 38, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.34);
  color: #5f4a34;
  font-size: 12px;
  font-weight: 850;
  padding: 7px;
}

.admin-bridge-facts strong {
  color: #315f68;
  font-size: 11px;
  line-height: 1;
}

.economy-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.economy-metric {
  display: grid;
  gap: 4px;
  min-height: 118px;
  border: 1px solid rgba(126, 88, 38, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 244, 207, 0.62)),
    rgba(255, 248, 220, 0.82);
  padding: 10px;
}

.economy-metric span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.economy-metric strong {
  color: #3d2a1d;
  font-size: 24px;
  line-height: 1;
}

.economy-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  gap: 10px;
}

.economy-block {
  min-width: 0;
}

.economy-hot-list,
.economy-table {
  display: grid;
  gap: 8px;
}

.economy-hot-row,
.economy-table-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(126, 88, 38, 0.18);
  border-radius: 8px;
  background: rgba(255, 248, 220, 0.68);
  padding: 8px;
}

.economy-table-row {
  grid-template-columns: auto minmax(180px, 1fr) minmax(120px, 0.55fr) minmax(150px, auto);
}

.economy-row-chart {
  min-width: 120px;
}

.economy-row-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.economy-row-stats span {
  min-height: 24px;
  border: 1px solid rgba(126, 88, 38, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.34);
  color: #5f4a34;
  font-size: 11px;
  font-weight: 900;
  line-height: 24px;
  text-align: center;
}

.economy-locked .empty-state {
  min-height: 120px;
}

@media (max-width: 720px) {
  .intel-card-grid,
  .economy-metrics,
  .economy-split,
  .admin-bridge-grid,
  .admin-bridge-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .market-intel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .economy-hot-row,
  .economy-table-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .economy-row-chart,
  .economy-row-stats {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  body:not(.is-home) .world-buff,
  .world-buff {
    overflow-x: auto;
  }

  .world-buff-track {
    animation: none;
    transform: none;
  }

  .world-buff-copy[aria-hidden="true"] {
    display: none;
  }
}

.admin-test-panel {
  margin-top: 12px;
}

.admin-test-panel details {
  border: 1px solid rgba(126, 88, 38, 0.2);
  border-radius: 8px;
  background: rgba(255, 248, 222, 0.52);
  padding: 8px;
}

.admin-test-panel details + details,
.admin-test-panel .test-core {
  margin-top: 8px;
}

.admin-test-panel summary {
  cursor: pointer;
  color: #5f4a34;
  font-size: 13px;
  font-weight: 950;
}

.test-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 8px;
}

.test-actions button {
  min-height: 34px;
  padding: 6px 7px;
  font-size: 11px;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.test-grid label {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: #654a30;
  font-size: 11px;
  font-weight: 900;
}

.test-grid input,
.test-grid select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 2px solid rgba(124, 91, 59, 0.72);
  border-radius: 6px;
  background: #fffdf3;
  color: #3f3026;
  font-weight: 900;
  padding: 0 7px;
}

.test-tool-actions {
  grid-template-columns: minmax(0, 1fr);
  margin: 8px 0 0;
}

@media (max-width: 720px) {
  .profile-editor-overlay {
    align-items: end;
    padding: 10px;
  }

  .profile-editor-dialog {
    width: 100%;
    max-height: calc(100dvh - 20px);
    padding: 12px;
  }

  .profile-editor-body {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .profile-editor-identity,
  .profile-editor-details {
    gap: 10px;
  }

  .profile-editor-preview {
    grid-template-columns: 72px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    text-align: left;
  }

  .profile-editor-preview img {
    grid-row: 1 / 3;
    width: 72px;
    height: 72px;
  }

  .profile-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-avatar-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    padding: 8px;
  }

  .profile-avatar-option span {
    min-height: 48px;
  }

  .profile-avatar-option img {
    width: 42px;
    height: 42px;
  }

  .profile-editor-fields {
    grid-template-columns: 1fr;
  }

  .profile-email-panel {
    grid-template-columns: 1fr;
  }

  .profile-email-panel button {
    width: 100%;
  }

  .profile-email-locked {
    grid-template-columns: 1fr;
  }

  .profile-editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .auth-shell {
    align-items: start;
    padding: 12px;
  }

  .auth-card {
    padding: 14px;
  }

  .auth-brand {
    gap: 10px;
    margin-bottom: 12px;
  }

  .auth-brand img {
    width: 52px;
    height: 52px;
  }

  .auth-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .test-actions,
  .test-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .research-board .research-node-list,
  .inventory-grid,
  .inventory-shelf-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .research-mobile-action {
    grid-template-columns: minmax(0, 1fr);
  }

  .research-mobile-costs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .storage-ledger-strip,
  .contract-terms {
    grid-template-columns: minmax(0, 1fr);
  }

  .inventory-shelf-head {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .inventory-shelf-toggle {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .storage-ledger-panel .inventory-cell {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    align-items: center;
    justify-items: stretch;
    min-height: 0;
    text-align: left;
  }

  .storage-ledger-panel .inventory-cell .mini-sprite {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 44px;
    height: 44px;
  }

  .storage-ledger-panel .inventory-cell .mini-sprite img {
    width: 38px;
    height: 38px;
  }

  .storage-ledger-panel .inventory-cell strong {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
  }

  .storage-ledger-panel .inventory-count {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: 44px;
    font-size: 18px;
  }

  .storage-ledger-panel .inventory-cell small {
    grid-column: 2 / 4;
    text-align: left;
  }

  .bottom-nav button {
    min-height: 50px;
    padding: 4px 2px;
    font-size: 9px;
  }

  .bottom-nav-icon {
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
  }

  .test-actions,
  .test-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Admin operations console */
.admin-layout .center-column {
  min-width: 0;
}

.admin-console-panel {
  display: grid;
  gap: 12px;
}

.admin-console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 12px;
  align-items: start;
}

.admin-tool-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(91, 58, 31, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 231, 0.78), rgba(237, 212, 160, 0.72)),
    #ead39c;
  box-shadow:
    inset 0 1px rgba(255, 252, 232, 0.74),
    0 4px 0 rgba(91, 58, 31, 0.08);
  padding: 12px;
}

.admin-form-grid,
.admin-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-tool-card label,
.admin-redeem-form label {
  display: grid;
  gap: 5px;
  color: #5b3a24;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.admin-tool-card input,
.admin-tool-card select,
.admin-tool-card textarea,
.admin-redeem-form input,
.admin-redeem-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid rgba(91, 58, 31, 0.24);
  border-radius: 7px;
  background: rgba(255, 250, 230, 0.88);
  color: #4c321d;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  padding: 8px 9px;
}

.admin-tool-card textarea,
.admin-redeem-form textarea {
  resize: vertical;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-order-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

.admin-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(120px, 0.7fr);
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(91, 58, 31, 0.18);
  border-left: 5px solid #9e7a43;
  border-radius: 7px;
  background: rgba(255, 248, 224, 0.72);
  color: #4c321d;
  padding: 9px;
}

.admin-order-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-order-row strong,
.admin-order-row span,
.admin-order-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-order-row.status-fulfilled {
  border-left-color: #6f9b4f;
}

.admin-order-row.status-unmatched,
.admin-order-row.status-failed {
  border-left-color: #b65f4d;
}

.admin-order-row.status-ignored {
  border-left-color: #8b8371;
}

@media (max-width: 900px) {
  .admin-console-grid,
  .admin-form-grid,
  .admin-target-grid,
  .admin-order-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-order-list {
    max-height: none;
  }
}