:root {
  --ink: #24160d;
  --dark: #17100c;
  --wood: #4b2d1b;
  --wood-light: #7b5530;
  --paper: #d8bd83;
  --paper-bright: #ead6a6;
  --paper-shadow: #9b7443;
  --red: #9c2f24;
  --green: #3e6f38;
  --gold: #b97a25;
  --blue: #35556f;
  --purple: #604169;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 0, 0, .08) 1px, transparent 1px),
    radial-gradient(circle at 30% 20%, #5c3a20 0 12%, transparent 32%),
    #21140e;
  background-size: 18px 18px, 18px 18px, 100% 100%, 100% 100%;
}

button,
.site-link {
  border: 3px solid var(--ink);
  border-radius: 2px;
  padding: 9px 10px;
  color: var(--ink);
  font: 700 13px/1.1 Georgia, "Times New Roman", serif;
  background: #c7974d;
  box-shadow: 3px 3px 0 var(--wood);
  cursor: pointer;
}

button:hover:not(:disabled),
.site-link:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--wood);
}

.site-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.game-shell {
  width: min(1420px, calc(100% - 24px));
  margin: 12px auto 24px;
}

.paper-panel {
  position: relative;
  border: 4px solid var(--ink);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .24), transparent 35%),
    repeating-linear-gradient(0deg, rgba(95, 60, 24, .07) 0 2px, transparent 2px 6px),
    var(--paper);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .38), inset 0 0 0 3px rgba(255, 240, 190, .45);
}

.site-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 18px;
}

h1, h2, p {
  margin: 0;
}

h1 {
  font-size: clamp(28px, 4vw, 52px);
  line-height: .95;
  letter-spacing: 0;
}

h2 {
  font-size: 19px;
}

.site-header p:not(.stamp) {
  margin-top: 7px;
  font-size: 17px;
}

.save-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.stamp {
  display: inline-block;
  width: fit-content;
  margin: 0 0 6px;
  border: 3px solid currentColor;
  padding: 2px 6px;
  font: 900 12px/1 monospace;
  letter-spacing: 1px;
  transform: rotate(-2deg);
}

.approved {
  color: var(--green);
}

.violation {
  color: var(--red);
}

.pending {
  color: var(--blue);
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  gap: 7px;
  margin-top: 14px;
  padding: 10px;
}

.stat {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  border: 3px solid var(--ink);
  min-height: 58px;
  padding: 7px 42px 7px 8px;
  background: rgba(255, 244, 199, .38);
  text-align: left;
}

.stat::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: var(--stat-color, #c7974d);
  border: 3px solid var(--ink);
  box-shadow:
    2px 2px 0 rgba(0, 0, 0, .32);
  image-rendering: pixelated;
}

.stat::after {
  content: "";
  position: absolute;
  top: 17px;
  right: 19px;
  width: 6px;
  height: 6px;
  image-rendering: pixelated;
}

.stat-gold {
  --stat-color: #8c5a28;
}

.stat-gold::before {
  width: 22px;
  height: 24px;
  border-radius: 4px 4px 8px 8px;
  background:
    linear-gradient(#5b3420 0 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 5px, #d6a333 5px 17px, transparent 17px),
    #a06a30;
}

.stat-gold::after {
  transform: translate(7px, 7px);
  background: #f0c44b;
  box-shadow:
    -14px 0 0 #f0c44b,
    -7px -5px 0 #d99b28,
    -7px 4px 0 #b97922;
}

.stat-reputation {
  --stat-color: #42b8ca;
}

.stat-reputation::before {
  width: 26px;
  height: 22px;
  clip-path: polygon(50% 0, 60% 32%, 100% 32%, 68% 52%, 80% 100%, 50% 72%, 20% 100%, 32% 52%, 0 32%, 40% 32%);
}

.stat-reputation::after {
  transform: translate(7px, -8px);
  background: #f6df7a;
  box-shadow: -14px 15px 0 #f6df7a;
}

.stat-danger {
  --stat-color: #c94b35;
}

.stat-danger::before {
  width: 24px;
  height: 24px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.stat-danger::after {
  transform: translate(0, 4px);
  background: #24160d;
  box-shadow: 0 7px 0 #24160d;
}

.stat-compliance {
  --stat-color: #ead6a6;
}

.stat-compliance::before {
  width: 22px;
  height: 26px;
  background:
    linear-gradient(90deg, transparent 0 15px, #35556f 15px 19px, transparent 19px),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(36, 22, 13, .45) 5px 7px),
    #ead6a6;
  box-shadow:
    2px 2px 0 rgba(0, 0, 0, .32);
}

.stat-compliance::after {
  transform: translate(6px, -7px) rotate(-8deg);
  background: #3e6f38;
  box-shadow:
    -6px 6px 0 #3e6f38,
    0 6px 0 #3e6f38;
}

.stat-chaos {
  --stat-color: #8d3f8f;
}

.stat-chaos::before {
  width: 25px;
  height: 25px;
  clip-path: polygon(45% 0, 63% 28%, 96% 18%, 78% 48%, 100% 72%, 66% 70%, 52% 100%, 38% 70%, 4% 72%, 26% 48%, 8% 18%, 37% 28%);
}

.stat-chaos::after {
  transform: translate(0, 0);
  background: #f1d07a;
  box-shadow:
    -8px -7px 0 #f1d07a,
    8px 7px 0 #f1d07a;
}

.stat-morale {
  --stat-color: #53b964;
}

.stat-morale::before {
  width: 24px;
  height: 20px;
  border-radius: 8px 8px 5px 5px;
  background:
    linear-gradient(90deg, transparent 0 4px, #24160d 4px 8px, transparent 8px 16px, #24160d 16px 20px, transparent 20px),
    #53b964;
}

.stat-morale::after {
  transform: translate(0, 8px);
  background: #24160d;
  box-shadow:
    -6px -20px 0 #53b964,
    6px -20px 0 #53b964,
    -6px 0 0 #24160d,
    0 3px 0 #24160d,
    6px 0 0 #24160d;
}

.stat.day {
  --stat-color: #d8bd83;
}

.stat.day::before {
  width: 24px;
  height: 24px;
  background:
    linear-gradient(90deg, transparent 0 4px, #35556f 4px 8px, transparent 8px 16px, #35556f 16px 20px, transparent 20px),
    linear-gradient(#c7974d 0 7px, #ead6a6 7px);
}

.stat.day::after {
  transform: translate(0, 4px);
  background: #24160d;
  box-shadow:
    -7px 0 0 #24160d,
    7px 0 0 #24160d,
    -7px 7px 0 #24160d,
    0 7px 0 #24160d,
    7px 7px 0 #24160d;
}

.stat span {
  display: block;
  color: #2f1d11;
  font: 900 11px/1 monospace;
  text-transform: uppercase;
}

.stat strong {
  display: block;
  margin-top: 4px;
  font-size: 25px;
  line-height: 1;
}

.main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 520px);
  gap: 16px;
  margin-top: 16px;
}

.dungeon-board {
  padding: 14px;
  min-height: 610px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 36%),
    repeating-linear-gradient(0deg, rgba(95, 60, 24, .045) 0 2px, transparent 2px 6px),
    #d9bd7a;
}

.board-header,
.panel-title {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.board-header span:last-child {
  font-weight: 700;
}

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  grid-template-rows: repeat(2, minmax(245px, 1fr));
  gap: 12px;
}

.room {
  position: relative;
  overflow: hidden;
  contain: paint;
  min-height: 245px;
  border: 4px solid #1b100a;
  border-radius: 3px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 230, 166, .12), transparent 26%, rgba(0, 0, 0, .14) 100%),
    radial-gradient(circle at 72% 35%, rgba(255, 225, 150, .08), transparent 38%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 4px, transparent 4px 38px),
    var(--room-wall, #48301f);
  color: #f3ddb3;
  box-shadow:
    inset 0 0 0 3px rgba(255, 220, 140, .09),
    inset 0 -42px 0 rgba(0, 0, 0, .2),
    inset 0 0 42px rgba(0, 0, 0, .3);
  cursor: pointer;
}

.room.selected {
  outline: 5px solid #d59b2f;
  outline-offset: -7px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 220, 140, .09),
    inset 0 -42px 0 rgba(0, 0, 0, .2),
    inset 0 0 42px rgba(0, 0, 0, .3),
    0 0 0 4px rgba(213, 155, 47, .45),
    6px 6px 0 rgba(0, 0, 0, .34);
}

.room.selected::after {
  content: "SELECTED";
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 5;
  border: 2px solid #f1d07a;
  padding: 2px 5px;
  color: #ffe7a8;
  background: rgba(45, 24, 12, .72);
  font: 900 10px/1 monospace;
  text-shadow: 1px 1px 0 #000;
}

.room-state-visual {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

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

.room-state-tag {
  position: absolute;
  right: 11px;
  top: 42px;
  z-index: 6;
  max-width: 86px;
  border: 2px solid #1b100a;
  padding: 2px 4px;
  color: #1b100a;
  background: #ead6a6;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .45);
  font: 900 8px/1 monospace;
  text-align: center;
  text-transform: uppercase;
}

.room-state-overcrowded .room-state-visual::before {
  left: 12px;
  right: 22px;
  bottom: 48px;
  height: 12px;
  border-top: 4px dotted #d8bd83;
  opacity: .8;
}

.room-state-quiet .room-state-visual::before {
  inset: 0;
  background: rgba(20, 15, 14, .18);
}

.room-state-under-inspection .room-state-visual::before,
.room-state-audited .room-state-visual::before,
.room-state-under-tax-review .room-state-visual::before {
  right: 18px;
  bottom: 58px;
  width: 56px;
  height: 20px;
  border: 3px solid #31556f;
  color: #31556f;
  background: rgba(234, 214, 166, .9);
  transform: rotate(-5deg);
}

.room-state-under-inspection .room-state-visual::after,
.room-state-audited .room-state-visual::after,
.room-state-under-tax-review .room-state-visual::after {
  right: 24px;
  bottom: 64px;
  color: #31556f;
  content: "AUDIT";
  font: 900 11px/1 monospace;
  transform: rotate(-5deg);
}

.room-state-under-tax-review .room-state-visual::after {
  content: "TAX";
}

.room-state-strike .room-state-visual::before {
  left: 16px;
  top: 62px;
  width: 116px;
  height: 20px;
  border: 3px solid #1b100a;
  background: #c94b35;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .38);
}

.room-state-strike .room-state-visual::after {
  left: 24px;
  top: 68px;
  color: #fff0c8;
  content: "STRIKE";
  font: 900 12px/1 monospace;
}

.room-state-gambling-night .room-state-visual::before {
  left: 58px;
  bottom: 64px;
  width: 7px;
  height: 7px;
  background: #ead6a6;
  box-shadow: 14px 8px 0 #c94b35, 27px 2px 0 #ead6a6, 40px 10px 0 #315da0;
}

.room-state-celebratory .room-state-visual::before,
.room-state-party .room-state-visual::before {
  inset: 30px 25px auto;
  height: 7px;
  background: repeating-linear-gradient(90deg, #f2c45c 0 9px, #c94b35 9px 18px, #53b964 18px 27px, #315da0 27px 36px);
  box-shadow: 0 12px 0 rgba(242, 196, 92, .75);
}

.room-state-malfunctioning .room-state-visual::before,
.room-state-overclocked .room-state-visual::before {
  inset: 24px 10px auto;
  height: 16px;
  background: repeating-linear-gradient(45deg, #1b100a 0 8px, #f2c45c 8px 16px);
  opacity: .82;
  animation: signFlicker 1.1s steps(2) infinite;
}

.room-state-bloodstained .room-state-visual::before,
.room-state-red-spill .room-state-visual::before {
  left: 42%;
  bottom: 36px;
  width: 58px;
  height: 15px;
  background: #8e2f22;
  box-shadow: 18px 6px 0 #9c2f24, -13px 4px 0 #6f1d18;
  opacity: .84;
}

.room-state-certified-safe .room-state-visual::before,
.room-state-biohazard-contained .room-state-visual::before {
  right: 18px;
  bottom: 58px;
  width: 58px;
  height: 18px;
  border: 3px solid #1b100a;
  background: #8ee089;
}

.room-state-certified-safe .room-state-visual::after,
.room-state-biohazard-contained .room-state-visual::after {
  right: 25px;
  bottom: 64px;
  color: #173b25;
  content: "SAFE";
  font: 900 10px/1 monospace;
}

.room-state-overflowing .room-state-visual::before {
  left: 24px;
  right: 34px;
  bottom: 38px;
  height: 13px;
  background: #d6a333;
  box-shadow: inset 0 4px 0 #fff0a5, 17px -9px 0 #f2c45c, -18px -4px 0 #d6a333;
}

.room-state-cursed .room-state-visual::before,
.room-state-unstable .room-state-visual::before {
  inset: 18px;
  border: 3px solid rgba(141, 63, 143, .65);
  box-shadow: inset 0 0 28px rgba(141, 63, 143, .42), 0 0 18px rgba(141, 63, 143, .35);
  animation: magicWobble 1.4s steps(2) infinite;
}

.room-state-leaking .room-state-visual::before,
.room-state-bubbling-aggressively .room-state-visual::before {
  left: 18px;
  right: 18px;
  bottom: 33px;
  height: 11px;
  background: #55be67;
  box-shadow: inset 8px 4px 0 #8ee089, 0 -12px 0 -6px #8ee089, 35px -18px 0 -7px #8ee089;
  animation: slimeGlow 1.1s steps(2) infinite;
}

.room-state-paper-avalanche .room-state-visual::before,
.room-state-backlog-critical .room-state-visual::before {
  left: 16px;
  right: 22px;
  bottom: 48px;
  height: 34px;
  background:
    linear-gradient(20deg, transparent 0 14%, #ead6a6 14% 24%, transparent 24% 42%, #d8bd83 42% 55%, transparent 55% 74%, #ead6a6 74% 84%, transparent 84%),
    linear-gradient(-12deg, transparent 0 20%, #ead6a6 20% 31%, transparent 31% 60%, #d8bd83 60% 71%, transparent 71%);
  opacity: .9;
}

.room-state-optimized .room-state-visual::before {
  inset: 20px 22px auto;
  height: 12px;
  background: repeating-linear-gradient(90deg, #3e6f38 0 8px, #8ee089 8px 16px);
  box-shadow: 0 0 16px rgba(143, 214, 179, .42);
}

.room::before {
  content: "";
  position: absolute;
  inset: auto 0 32px 0;
  height: 16px;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 235, 170, .08), transparent),
    repeating-linear-gradient(90deg, #1d120c 0 10px, #2b1a10 10px 20px);
  box-shadow: 0 -4px 0 rgba(0, 0, 0, .28), 0 9px 0 rgba(0, 0, 0, .18);
}

.room-info {
  position: relative;
  z-index: 4;
  width: min(178px, calc(100% - 58px));
  border: 2px solid rgba(27, 16, 10, .78);
  padding: 5px 6px;
  background:
    linear-gradient(135deg, rgba(255, 244, 199, .9), rgba(216, 189, 131, .78)),
    var(--paper);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .38);
}

.room h3 {
  margin: 0;
  color: #27160c;
  font-size: 15px;
  line-height: 1.05;
  text-shadow: none;
}

.room-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  font: 700 10px/1.1 monospace;
  color: #442914;
}

.room-info-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 4px;
}

.room-status {
  flex: 1;
  margin-top: 0;
  min-height: 0;
  color: #3d2714;
  font-size: 11px;
  line-height: 1.1;
  text-shadow: none;
}

.room-role-tag {
  position: relative;
  z-index: 4;
  display: inline-block;
  width: fit-content;
  flex: 0 0 auto;
  margin-top: 0;
  border: 2px solid #1b100a;
  padding: 1px 4px;
  color: #28170d;
  background: #d8bd83;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
  font: 900 9px/1 monospace;
  text-transform: uppercase;
}

.room-icon {
  position: absolute;
  right: 12px;
  bottom: 4px;
  z-index: 3;
  --prop-px: 2px;
  width: calc(12 * var(--prop-px));
  height: calc(12 * var(--prop-px));
  opacity: .9;
}

.room-icon .prop-sprite,
.room-icon .prop-pixel {
  position: static;
  display: block;
  box-sizing: border-box;
}

.room-icon .prop-sprite {
  display: grid;
  grid-template-columns: repeat(var(--prop-w), var(--prop-px));
  grid-auto-rows: var(--prop-px);
  width: calc(var(--prop-w) * var(--prop-px));
  height: calc(var(--prop-h) * var(--prop-px));
}

.room-icon .prop-pixel {
  width: var(--prop-px);
  height: var(--prop-px);
  background: var(--c);
}

.room-icon .prop-pixel.empty {
  background: transparent;
}

.room-entrance { --room-wall: #654125; --room-accent: #d6a333; }
.room-barracks { --room-wall: #5a3a2b; --room-accent: #44a06d; }
.room-traps { --room-wall: #4d3b36; --room-accent: #c84a32; }
.room-treasury { --room-wall: #60451f; --room-accent: #f0c65a; }
.room-slime { --room-wall: #344d32; --room-accent: #58bd67; }
.room-accounting { --room-wall: #554634; --room-accent: #d8bd83; }

.room-entrance,
.room-treasury,
.room-accounting {
  background-image:
    linear-gradient(180deg, rgba(255, 230, 166, .16), transparent 26%, rgba(0, 0, 0, .16) 100%),
    radial-gradient(circle at 18% 40%, rgba(242, 196, 92, .11), transparent 34%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .15) 0 4px, transparent 4px 38px);
}

.room-slime {
  background-image:
    linear-gradient(180deg, rgba(128, 220, 128, .1), transparent 30%, rgba(0, 0, 0, .2) 100%),
    radial-gradient(circle at 70% 65%, rgba(94, 206, 110, .16), transparent 35%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .15) 0 4px, transparent 4px 38px);
}

.room-decor {
  position: absolute;
  inset: 70px 10px 34px;
  z-index: 1;
  pointer-events: none;
  opacity: .95;
  --wood-main: #9a6030;
  --wood-dark: #4a2c18;
  --paper-note: #d8bd83;
  --metal-main: #8ea0a0;
  --gold-main: #e7b844;
  --fabric-red: #c94b35;
  --fabric-blue: #315da0;
  --plant-green: #4e9b51;
}

.room-decor span {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  box-sizing: border-box;
}

.room-decor .pixel-prop {
  --prop-px: 3px;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  transform-origin: bottom center;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .35));
}

.room-decor .pixel-prop::before,
.room-decor .pixel-prop::after {
  content: none !important;
}

.room-decor .prop-sprite,
.room-decor .prop-pixel {
  position: static;
  display: block;
  box-sizing: border-box;
}

.room-decor .prop-sprite {
  display: grid;
  grid-template-columns: repeat(var(--prop-w), var(--prop-px));
  grid-auto-rows: var(--prop-px);
  width: calc(var(--prop-w) * var(--prop-px));
  height: calc(var(--prop-h) * var(--prop-px));
  contain: strict;
}

.room-decor .prop-pixel {
  width: var(--prop-px);
  height: var(--prop-px);
  background: var(--c);
}

.room-decor .prop-pixel.empty {
  background: transparent;
}

.creature-layer {
  z-index: 2;
}

.room h3,
.room-meta,
.room-status,
.room-info {
  position: relative;
  z-index: 3;
}

.lobby-gate {
  left: 3px;
  bottom: 10px;
  --prop-px: 4px;
  width: 36px;
  height: 70px;
  border: 4px solid #111;
  background:
    linear-gradient(90deg, transparent 36%, #111 36% 46%, transparent 46% 56%, #111 56% 66%, transparent 66%),
    #986031;
  box-shadow: inset 0 0 0 4px #c48a45, 4px 4px 0 rgba(0, 0, 0, .18);
}

.wood-sign {
  left: 54px;
  top: 10px;
  --prop-px: 3px;
  border: 3px solid #111;
  padding: 2px 5px;
  color: #fff0b4;
  background: #9a6030;
  font: 800 10px/1 monospace;
  box-shadow: 3px 3px 0 #2d1a0f;
}

.torch {
  left: 43px;
  bottom: 74px;
  --prop-px: 3px;
  width: 6px;
  height: 22px;
  background: #3a2215;
}

.torch::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -12px;
  width: 16px;
  height: 16px;
  background: #f2c45c;
  box-shadow: inset 4px 4px 0 #e2502d, 0 0 14px rgba(239, 124, 37, .7);
  animation: torchFlicker 1.1s steps(2) infinite;
}

.queue-rope {
  left: 76px;
  bottom: 18px;
  --prop-px: 3px;
  width: 78px;
  height: 12px;
  border-top: 4px dotted #c43e31;
  border-left: 4px solid #111;
  border-right: 4px solid #111;
}

.warning-sign,
.wanted-poster,
.kingdom-banner,
.pinned-form {
  border: 2px solid #1b100a;
  background: #e4c982;
}

.warning-sign {
  right: 24px;
  bottom: 48px;
  width: 18px;
  height: 18px;
  color: #8e2f22;
  text-align: center;
  font: 900 14px/16px monospace;
}

.wanted-poster {
  right: 44px;
  top: 20px;
  --prop-px: 3px;
  width: 24px;
  height: 32px;
  animation: paperFlutter 4.8s steps(2) infinite;
}

.kingdom-banner {
  right: 10px;
  top: 9px;
  --prop-px: 3px;
  width: 18px;
  height: 42px;
  border: 3px solid #111;
  background: linear-gradient(#315da0 0 55%, #f2c45c 55% 72%, #315da0 72%);
}

.pinned-form {
  --prop-px: 2px;
  width: 18px;
  height: 22px;
  opacity: .8;
}

.form-a { left: 112px; top: 35px; }
.form-b { left: 135px; top: 28px; animation: paperFlutter 5.4s steps(2) infinite; }

.bunk-bed {
  left: 7px;
  bottom: 16px;
  --prop-px: 4px;
  width: 50px;
  height: 54px;
  border: 4px solid #111;
  background:
    linear-gradient(#9a6030 0 16%, #111 16% 23%, #c96a45 23% 43%, #111 43% 52%, #d8bd83 52% 72%, #111 72% 79%, #9a6030 79%);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
}

.crate-stack {
  right: 16px;
  bottom: 15px;
  --prop-px: 3px;
  width: 32px;
  height: 30px;
  border: 4px solid #111;
  background: linear-gradient(90deg, #9a6030 0 46%, #6e4324 46% 56%, #9a6030 56%);
  box-shadow: -20px 8px 0 -4px #111, -20px 8px 0 0 #8b552d;
}

.gold-nest {
  right: 62px;
  bottom: 18px;
  width: 34px;
  height: 15px;
  background: #d6a333;
  box-shadow: inset 0 4px 0 #f0cf67, 0 4px 0 #1b100a;
  animation: goldShift 4.5s steps(3) infinite;
}

.soup-pot {
  left: 76px;
  bottom: 17px;
  --prop-px: 3px;
  width: 30px;
  height: 20px;
  background: #2e5458;
  border: 4px solid #111;
  border-radius: 0 0 8px 8px;
  box-shadow: inset 0 5px 0 #5b99a0;
}

.soup-pot::before,
.cook-smoke {
  content: "";
  position: absolute;
  left: 84px;
  bottom: 46px;
  width: 10px;
  height: 10px;
  background: rgba(214, 207, 180, .5);
  animation: smokePuff 4.2s ease-out infinite;
}

.clothesline {
  left: 32px;
  top: 10px;
  width: 100px;
  height: 26px;
  border-top: 3px solid #111;
  background: linear-gradient(90deg, transparent 15%, #c43e31 15% 25%, transparent 25% 45%, #315da0 45% 56%, transparent 56% 76%, #e4c982 76% 86%, transparent 86%);
}

.rat-hole {
  left: 14px;
  bottom: 11px;
  width: 22px;
  height: 14px;
  border-radius: 12px 12px 0 0;
  background: #080808;
}

.broken-chair {
  right: 104px;
  bottom: 12px;
  width: 22px;
  height: 16px;
  border: 4px solid #111;
  border-top: 0;
  transform: rotate(-12deg);
}

.sleep-z {
  left: 24px;
  top: 42px;
  color: #d8bd83;
  font: 900 11px/1 monospace;
  animation: floatFade 4.5s ease-in-out infinite;
}

.spike-row {
  left: 12px;
  bottom: 12px;
  --prop-px: 4px;
  width: 100px;
  height: 24px;
  background: repeating-linear-gradient(135deg, transparent 0 9px, #111 9px 11px, #d8d8cf 11px 17px, #111 17px 19px, transparent 19px 26px);
  animation: spikeTwitch 2.8s steps(2) infinite;
}

.chain {
  top: 0;
  width: 8px;
  height: 80px;
  background: repeating-linear-gradient(#111 0 5px, #a4aaa5 5px 10px);
}

.chain.one { left: 48px; }
.chain.two { right: 44px; height: 58px; }

.swing-axe {
  left: 76px;
  top: 44px;
  --prop-px: 4px;
  width: 46px;
  height: 8px;
  background: #5a3820;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
  transform-origin: 4px 0;
  animation: axeSwing 3.2s ease-in-out infinite;
}

.swing-axe::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -15px;
  width: 20px;
  height: 30px;
  border: 3px solid #111;
  background: #bfc5c2;
  box-shadow: inset 7px 0 0 #777;
}

.pressure-plate {
  right: 34px;
  bottom: 15px;
  --prop-px: 3px;
  width: 42px;
  height: 8px;
  background: #a4aaa5;
  border: 3px solid #111;
}

.cracked-floor {
  left: 128px;
  bottom: 7px;
  width: 48px;
  height: 20px;
  background: linear-gradient(135deg, transparent 45%, #14100d 45% 52%, transparent 52%);
}

.trap-warning {
  right: 12px;
  top: 20px;
  border: 2px solid #111;
  color: #f2c45c;
  background: #8e2f22;
  padding: 2px 4px;
  font: 900 9px/1 monospace;
  transform: rotate(3deg);
}

.steam-vent {
  left: 18px;
  bottom: 42px;
  width: 16px;
  height: 10px;
  background: rgba(214, 207, 180, .45);
  animation: smokePuff 3.8s ease-out infinite;
}

.spark-node {
  right: 94px;
  top: 62px;
  width: 5px;
  height: 5px;
  background: #f2c45c;
  box-shadow: 8px -4px 0 #e2502d, -6px 5px 0 #f2c45c;
  animation: sparkBlink 1.8s steps(2) infinite;
}

.vault-door {
  right: 10px;
  bottom: 18px;
  --prop-px: 4px;
  width: 48px;
  height: 70px;
  border: 5px solid #111;
  background: radial-gradient(circle, #b5b9ae 0 11%, #111 12% 18%, #6e7775 19% 100%);
  box-shadow: inset 0 0 0 5px #353a38, -6px 0 0 rgba(0, 0, 0, .18);
}

.treasure-chest {
  left: 20px;
  bottom: 16px;
  --prop-px: 4px;
  width: 48px;
  height: 30px;
  border: 4px solid #111;
  background: linear-gradient(#c98531 0 42%, #111 42% 52%, #8e5227 52%);
  box-shadow: inset 18px 0 0 rgba(255, 210, 105, .18);
}

.treasure-chest::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 9px;
  width: 8px;
  height: 5px;
  background: #f2c45c;
  animation: mimicBlink 6s steps(2) infinite;
}

.coin-pile {
  bottom: 15px;
  --prop-px: 3px;
  width: 46px;
  height: 18px;
  border: 3px solid #111;
  background: #d6a333;
  box-shadow: inset 0 5px 0 #f0d773;
  animation: goldShift 4.8s steps(3) infinite;
}

.pile-a { left: 78px; }
.pile-b { left: 122px; bottom: 20px; transform: scale(.72); }

.coin-stack {
  left: 132px;
  bottom: 16px;
  --prop-px: 3px;
  width: 15px;
  height: 34px;
  background: repeating-linear-gradient(#f0cf67 0 4px, #b97a25 4px 7px);
  border: 3px solid #111;
}

.audit-shelf {
  left: 72px;
  top: 10px;
  --prop-px: 3px;
  width: 80px;
  height: 30px;
  border: 4px solid #111;
  background: repeating-linear-gradient(90deg, #e4c982 0 10px, #8e5227 10px 14px);
}

.counting-desk {
  left: 18px;
  top: 54px;
  --prop-px: 3px;
  width: 50px;
  height: 22px;
  background: #9a6030;
  border: 4px solid #111;
}

.slime-trail {
  right: 72px;
  bottom: 12px;
  width: 42px;
  height: 8px;
  background: rgba(85, 190, 103, .55);
  animation: slimeGlow 2.8s ease-in-out infinite;
}

.coin-sparkle {
  left: 109px;
  top: 58px;
  width: 6px;
  height: 6px;
  background: #fff0a5;
  box-shadow: 12px -18px 0 #f2c45c, 38px 8px 0 #fff0a5;
  animation: sparkBlink 2.4s steps(2) infinite;
}

.goo-pool {
  bottom: 12px;
  --prop-px: 4px;
  width: 64px;
  height: 22px;
  border: 4px solid #111;
  background: #3ba657;
  box-shadow: inset 8px 5px 0 #76d985, inset -8px -4px 0 #226d3a;
  animation: slimeGlow 2.2s ease-in-out infinite;
}

.pool-a { left: 18px; }
.pool-b { right: 28px; bottom: 28px; transform: scale(.72); }

.drip-pipe {
  right: 22px;
  top: 0;
  --prop-px: 3px;
  width: 46px;
  height: 12px;
  background: #7e8a84;
  border: 4px solid #111;
}

.drip-pipe::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 14px;
  width: 7px;
  height: 14px;
  background: #55be67;
  animation: dripDrop 2.4s steps(3) infinite;
}

.barrel {
  bottom: 13px;
  --prop-px: 3px;
  width: 22px;
  height: 32px;
  background: linear-gradient(90deg, #6f4b2b 0 22%, #b87845 22% 78%, #6f4b2b 78%);
  border: 4px solid #111;
}

.barrel.one { left: 92px; }
.barrel.two { left: 118px; bottom: 20px; transform: scale(.8); }

.bio-sign {
  left: 18px;
  top: 16px;
  border: 3px solid #111;
  color: #112b19;
  background: #86d87d;
  padding: 2px 5px;
  font: 900 10px/1 monospace;
}

.mushroom {
  bottom: 15px;
  --prop-px: 2px;
  width: 12px;
  height: 12px;
  background: #d8bd83;
  border-top: 8px solid #b8498c;
}

.mushroom.a { left: 152px; }
.mushroom.b { left: 170px; bottom: 12px; transform: scale(.8); }

.lost-boot {
  left: 62px;
  bottom: 13px;
  --prop-px: 2px;
  width: 20px;
  height: 12px;
  background: #25211d;
  border: 3px solid #111;
  transform: rotate(-10deg);
}

.gas-puff {
  left: 130px;
  top: 54px;
  width: 14px;
  height: 14px;
  background: rgba(151, 212, 130, .42);
  animation: smokePuff 4s ease-out infinite;
}

.bookshelf {
  left: 8px;
  top: 6px;
  --prop-px: 4px;
  width: 62px;
  height: 72px;
  border: 4px solid #111;
  background:
    linear-gradient(#9a6030 0 10%, transparent 10% 90%, #9a6030 90%),
    repeating-linear-gradient(90deg, #7b5530 0 8px, #e4c982 8px 12px, #604169 12px 16px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
}

.file-cabinet {
  right: 12px;
  bottom: 14px;
  --prop-px: 4px;
  width: 42px;
  height: 52px;
  border: 4px solid #111;
  background:
    linear-gradient(#8ea0a0 0 45%, #111 45% 52%, #7c8b8b 52%),
    #8ea0a0;
}

.paper-stack {
  bottom: 14px;
  --prop-px: 3px;
  width: 34px;
  height: 22px;
  background: #f2dfaa;
  border: 3px solid #111;
  box-shadow: 5px -5px 0 #d1c49f, 10px -10px 0 #f2dfaa;
  animation: paperFlutter 5s steps(2) infinite;
}

.stack-a { left: 84px; }
.stack-b { right: 70px; bottom: 20px; transform: scale(.8); }

.giant-stamp {
  left: 80px;
  top: 14px;
  border: 3px solid #111;
  color: #8e2f22;
  background: rgba(216, 189, 131, .7);
  padding: 3px 5px;
  font: 900 9px/1 monospace;
  transform: rotate(-6deg);
  animation: stampSlam 5.5s steps(2) infinite;
}

.candle {
  bottom: 16px;
  --prop-px: 2px;
  width: 7px;
  height: 22px;
  background: #e9ddbc;
  border: 3px solid #111;
}

.candle::before {
  content: "";
  position: absolute;
  top: -9px;
  left: -3px;
  width: 10px;
  height: 10px;
  background: #f2c45c;
  animation: torchFlicker 1.5s steps(2) infinite;
}

.candle.one { left: 72px; }
.candle.two { right: 60px; }

.compliance-poster {
  right: 18px;
  top: 18px;
  border: 3px solid #111;
  background: #d8bd83;
  padding: 2px 5px;
  font: 900 9px/1 monospace;
}

.floating-paper {
  left: 128px;
  top: 50px;
  --prop-px: 2px;
  width: 18px;
  height: 14px;
  background: #e9ddbc;
  border: 3px solid #111;
  animation: paperDrift 5.2s ease-in-out infinite;
}

.room.effect-danger {
  animation: roomDanger .55s ease-in-out 3;
}

.room.effect-slime {
  animation: roomSlime .65s ease-in-out 3;
}

.room.effect-paper {
  animation: roomPaper .6s ease-in-out 3;
}

.room.effect-audit {
  animation: roomAudit .7s ease-in-out 3;
}

.room.effect-magic {
  animation: roomMagic .7s ease-in-out 3;
}

.room.audit-active::after {
  content: "AUDIT";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  color: rgba(255, 239, 170, .8);
  background: rgba(233, 190, 72, .18);
  font: 900 32px/1 monospace;
  letter-spacing: 0;
  pointer-events: none;
  animation: auditPulse .7s steps(2) infinite;
}

.creature-layer {
  position: absolute;
  inset: 76px 12px 38px;
  pointer-events: none;
  contain: paint;
}

.creature {
  --move: 84px;
  --outline: #070707;
  --skin: #ef9a79;
  --hair: #633020;
  --shirt: #2f6db0;
  --pants: #253448;
  --trim: #f1c65b;
  --gear: #cfd5d8;
  position: absolute;
  left: var(--left, 12%);
  bottom: var(--bottom, 6px);
  width: 34px;
  height: 42px;
  image-rendering: pixelated;
  animation: walk 3.4s steps(4) infinite alternate;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .42));
}

.creature span {
  position: absolute;
  display: block;
  image-rendering: pixelated;
}

.sprite-shadow {
  left: 5px;
  bottom: 0;
  width: 24px;
  height: 5px;
  background: rgba(0, 0, 0, .45);
}

.sprite-head {
  left: 9px;
  top: 7px;
  width: 16px;
  height: 15px;
  background: var(--skin);
  box-shadow:
    -3px 0 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    0 3px 0 var(--outline),
    -3px -3px 0 var(--outline),
    3px -3px 0 var(--outline),
    3px 3px 0 var(--outline),
    4px 4px 0 rgba(255, 225, 170, .45);
}

.sprite-face {
  left: 13px;
  top: 14px;
  width: 3px;
  height: 3px;
  background: #101010;
  box-shadow: 8px 0 0 #101010, 4px 5px 0 rgba(85, 38, 28, .7);
  z-index: 5;
}

.sprite-hair {
  left: 7px;
  top: 4px;
  width: 20px;
  height: 8px;
  background: var(--hair);
  box-shadow:
    -3px 3px 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    4px 4px 0 var(--outline),
    0 5px 0 var(--hair);
  z-index: 4;
}

.sprite-body {
  left: 8px;
  top: 24px;
  width: 18px;
  height: 13px;
  background: var(--shirt);
  box-shadow:
    -3px 0 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    0 3px 0 var(--outline),
    5px 0 0 var(--trim),
    10px 0 0 rgba(255, 255, 255, .22);
  z-index: 2;
}

.sprite-arm {
  top: 25px;
  width: 6px;
  height: 11px;
  background: var(--skin);
  box-shadow:
    -2px 0 0 var(--outline),
    2px 0 0 var(--outline),
    0 2px 0 var(--outline);
  z-index: 1;
}

.sprite-arm.left {
  left: 3px;
}

.sprite-arm.right {
  right: 3px;
}

.sprite-legs {
  left: 10px;
  top: 36px;
  width: 5px;
  height: 5px;
  background: var(--pants);
  box-shadow:
    -2px 0 0 var(--outline),
    7px 0 0 var(--pants),
    9px 0 0 var(--outline),
    0 3px 0 var(--outline),
    7px 3px 0 var(--outline);
  z-index: 3;
}

.sprite-gear {
  z-index: 6;
}

.goblin {
  --skin: #54b964;
  --hair: #1d5432;
  --shirt: #23866a;
  --pants: #263c2d;
  --trim: #e8c35a;
  --move: 68px;
}

.goblin .sprite-head {
  top: 10px;
  width: 15px;
  height: 13px;
  box-shadow:
    -3px 0 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    0 3px 0 var(--outline),
    -7px 4px 0 var(--skin),
    -10px 4px 0 var(--outline),
    7px 4px 0 var(--skin),
    10px 4px 0 var(--outline),
    3px 3px 0 var(--outline);
}

.goblin .sprite-hair {
  left: 8px;
  top: 6px;
  width: 16px;
  height: 6px;
  background: #245c35;
  box-shadow:
    0 -3px 0 var(--outline),
    4px 0 0 var(--outline),
    -3px 3px 0 var(--outline),
    5px -5px 0 #d54f3b,
    8px -5px 0 #d54f3b,
    11px -5px 0 var(--outline);
}

.goblin .sprite-body {
  top: 25px;
  height: 11px;
}

.goblin .sprite-face {
  top: 15px;
  background: #0d2014;
  box-shadow: 7px 0 0 #0d2014, 4px 4px 0 #2e6437;
}

.skeleton {
  --skin: #e5dfc8;
  --hair: #f2eddc;
  --shirt: #d8d0b8;
  --pants: #776d60;
  --trim: #eee6ce;
  --move: 58px;
}

.skeleton .sprite-head {
  top: 7px;
  height: 17px;
  background: #e7e0ca;
  box-shadow:
    -3px 0 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    0 3px 0 var(--outline),
    -3px -3px 0 var(--outline),
    3px -3px 0 var(--outline),
    5px 5px 0 #aaa08c;
}

.skeleton .sprite-hair {
  display: none;
}

.skeleton .sprite-face {
  top: 14px;
  width: 4px;
  height: 4px;
  box-shadow: 8px 0 0 #101010, 4px 7px 0 #786e60;
}

.skeleton .sprite-body {
  top: 27px;
  height: 9px;
  background: #d8d0b8;
  box-shadow:
    -3px 0 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    0 3px 0 var(--outline),
    5px 0 0 #887e6f,
    11px 0 0 #887e6f;
}

.slime {
  --move: 60px;
  width: 36px;
  height: 28px;
  animation: slimeBounce 1.2s steps(3) infinite alternate;
}

.slime .sprite-shadow {
  left: 4px;
  width: 28px;
}

.slime .sprite-head,
.slime .sprite-hair,
.slime .sprite-body,
.slime .sprite-arm,
.slime .sprite-legs {
  display: none;
}

.slime .sprite-face {
  left: 12px;
  top: 20px;
  width: 4px;
  height: 4px;
  background: #102916;
  box-shadow: 10px 0 0 #102916, 5px 5px 0 #2a6b38;
}

.slime .sprite-gear {
  left: 4px;
  top: 12px;
  width: 28px;
  height: 15px;
  background: #58bd67;
  box-shadow:
    -3px 0 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    0 3px 0 var(--outline),
    5px -5px 0 #85df91,
    8px -5px 0 #85df91,
    12px -3px 0 #72d180,
    19px 4px 0 #3e9650,
    2px 7px 0 #3e9650;
  z-index: 2;
}

.hero {
  --skin: #f0a27d;
  --hair: #c34a33;
  --shirt: #2e62ad;
  --pants: #202b45;
  --trim: #f0c85f;
  --gear: #d7d1bd;
  animation: heroMarch 2.1s steps(5) infinite alternate;
}

.hero .sprite-hair {
  top: 3px;
  background: #c94b35;
  box-shadow:
    -3px 3px 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    4px 4px 0 var(--outline),
    4px -4px 0 #f1c65b,
    8px -4px 0 #f1c65b,
    11px -4px 0 var(--outline);
}

.hero .sprite-body {
  background: #2f67ba;
  box-shadow:
    -3px 0 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    0 3px 0 var(--outline),
    5px 0 0 #f0c85f,
    10px 0 0 #f0c85f;
}

.hero .sprite-gear {
  right: 0;
  top: 20px;
  width: 8px;
  height: 17px;
  background: #cfd5d8;
  box-shadow:
    -2px 0 0 var(--outline),
    2px 0 0 var(--outline),
    0 -2px 0 var(--outline),
    0 2px 0 var(--outline),
    2px 5px 0 #eef1ec;
}

.inspector {
  --skin: #d09a70;
  --hair: #d8d6cd;
  --shirt: #4c5961;
  --pants: #222a32;
  --trim: #b8498c;
  --gear: #e7cc78;
  animation: clipboardIdle 1.6s steps(2) infinite;
}

.inspector .sprite-hair {
  left: 8px;
  top: 3px;
  width: 18px;
  height: 9px;
  background: #e2ded2;
  box-shadow:
    -3px 3px 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    4px 4px 0 var(--outline),
    -5px 4px 0 #e2ded2,
    -8px 4px 0 var(--outline);
}

.inspector .sprite-body {
  background: #4b5961;
  box-shadow:
    -3px 0 0 var(--outline),
    3px 0 0 var(--outline),
    0 -3px 0 var(--outline),
    0 3px 0 var(--outline),
    5px 0 0 #b8498c,
    10px 0 0 #e6d0a0;
}

.inspector .sprite-gear {
  right: 1px;
  top: 24px;
  width: 9px;
  height: 11px;
  background: #e7cc78;
  box-shadow:
    -2px 0 0 var(--outline),
    2px 0 0 var(--outline),
    0 -2px 0 var(--outline),
    0 2px 0 var(--outline),
    3px 3px 0 #9b7443;
}

.dungeon-board {
  --sprite-px: 3px;
}

.creature {
  --px: var(--sprite-px, 3px);
  --sprite-w: 18;
  --sprite-h: 24;
  width: calc(var(--sprite-w) * var(--px));
  height: calc(var(--sprite-h) * var(--px));
  background: transparent;
  filter: none;
  transform: translateZ(0);
}

.creature .sprite-shadow {
  display: none;
}

.creature .pixel-sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(var(--sprite-w), var(--px));
  grid-auto-rows: var(--px);
  width: calc(var(--sprite-w) * var(--px));
  height: calc(var(--sprite-h) * var(--px));
  transform-origin: bottom center;
  contain: strict;
  animation: groundedStep .55s steps(2) infinite;
}

.creature .pixel {
  position: static;
  display: block;
  width: var(--px);
  height: var(--px);
  background: var(--c);
}

.creature .pixel.empty {
  background: transparent;
}

.creature-label {
  position: absolute;
  left: 50%;
  top: -17px;
  z-index: 5;
  max-width: 58px;
  transform: translateX(-50%);
  border: 2px solid #070707;
  padding: 1px 3px;
  color: #1b100a;
  background: #ead6a6;
  font: 900 8px/1 monospace;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
  pointer-events: none;
}

.hero-tax-cleric .creature-label,
.hero-dungeon-auditor .creature-label {
  color: #24435c;
  background: #d8e0d2;
}

.hero-freelance-wizard .creature-label,
.hero-influencer-bard .creature-label {
  color: #f7f0d2;
  background: #604169;
}

.hero-union-paladin .creature-label {
  color: #173b25;
  background: #8ee089;
}

.hero-barbarian-consultant .creature-label {
  color: #f7f0d2;
  background: #8e2f22;
}

.goblin,
.skeleton,
.hero,
.inspector {
  animation: goblinScurry 1.7s steps(8) infinite alternate;
  will-change: transform;
}

.skeleton {
  animation: skeletonWobble 2.05s steps(6) infinite alternate;
}

.skeleton .pixel-sprite {
  animation-name: stiffStep;
}

.hero {
  animation: heroMarch 1.8s steps(8) infinite alternate;
}

.hero .pixel-sprite {
  animation-name: marchStep;
}

.inspector {
  animation: clipboardWalk 2.35s steps(7) infinite alternate;
}

.inspector .pixel-sprite {
  animation-name: clipboardStep;
}

.slime {
  width: calc(var(--sprite-w) * var(--px));
  height: calc(var(--sprite-h) * var(--px));
  animation: slimeCrawl 2s steps(7) infinite alternate;
  will-change: transform;
}

.slime .pixel-sprite {
  animation: slimeSquish .7s steps(3) infinite;
}

.job-idle {
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .42));
}

.job-sit {
  animation: tinySit 1.8s steps(2) infinite !important;
}

.job-wait {
  animation: queueBounce 1.7s steps(2) infinite !important;
}

.job-walk {
  animation-duration: 1.3s !important;
}

.job-crate::after,
.job-coin::after,
.job-paper::after,
.job-clipboard::after,
.job-wrench::after,
.job-stamp::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: -8px;
  bottom: 15px;
  width: 15px;
  height: 13px;
  border: 2px solid #070707;
  image-rendering: pixelated;
  pointer-events: none;
}

.job-crate::after {
  background:
    linear-gradient(90deg, transparent 0 6px, #6e4324 6px 9px, transparent 9px),
    #a3642f;
  box-shadow: inset 3px 3px 0 rgba(255, 226, 155, .25), 2px 2px 0 rgba(0, 0, 0, .3);
}

.job-coin::after {
  width: 10px;
  height: 10px;
  right: -5px;
  bottom: 18px;
  border-radius: 50%;
  background: #f2c45c;
  box-shadow:
    -7px 5px 0 #d6a333,
    2px 2px 0 rgba(0, 0, 0, .35);
}

.job-paper::after,
.job-clipboard::after {
  width: 12px;
  height: 15px;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(36, 22, 13, .4) 4px 5px),
    #ead6a6;
}

.job-wrench::after {
  width: 18px;
  height: 5px;
  right: -10px;
  bottom: 20px;
  background: #9ea5a0;
  box-shadow: 8px -5px 0 -1px #9ea5a0, 2px 2px 0 rgba(0, 0, 0, .35);
  transform: rotate(-18deg);
}

.job-stamp::after {
  width: 13px;
  height: 18px;
  background:
    linear-gradient(#4b2d1b 0 8px, #9c2f24 8px 13px, #24160d 13px);
  animation: stampTool 1s steps(2) infinite;
}

.job-wobble,
.job-merge {
  animation: slimeCrawl 1.4s steps(5) infinite alternate !important;
}

.job-merge::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 3px;
  width: 14px;
  height: 9px;
  border: 2px solid #112b19;
  border-radius: 7px 7px 4px 4px;
  background: #55be67;
  box-shadow: inset 4px 2px 0 #8ee089;
  animation: blobMerge 1.5s steps(3) infinite;
}

.job-panic {
  animation: panicShake .22s steps(2) infinite !important;
}

.panic {
  animation: panicShake .22s steps(2) infinite !important;
}

/* Management-map visual refactor: keep rooms dominant and agents tiny. */
.dungeon-board {
  --sprite-px: .8px;
  --room-prop-px: 2px;
}

.rooms-grid {
  grid-template-rows: repeat(2, minmax(224px, 1fr));
}

.room {
  min-height: 224px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(255, 229, 161, .16) 0 28%, rgba(0, 0, 0, .16) 28% 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 10%, transparent 90%, rgba(0, 0, 0, .32)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 229, 161, .08) 23px 25px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(0, 0, 0, .2) 23px 25px),
    var(--room-wall, #48301f);
  box-shadow:
    inset 0 0 0 4px rgba(14, 8, 5, .72),
    inset 0 30px 0 rgba(0, 0, 0, .18),
    inset 0 -28px 0 rgba(0, 0, 0, .26),
    inset 0 0 42px rgba(0, 0, 0, .35);
}

.room::before {
  inset: 68px 10px 28px;
  height: auto;
  z-index: 0;
  border: 3px solid rgba(20, 12, 8, .65);
  background:
    linear-gradient(180deg, rgba(255, 235, 170, .08), rgba(0, 0, 0, .12)),
    repeating-linear-gradient(0deg, rgba(255, 224, 154, .06) 0 18px, rgba(0, 0, 0, .13) 18px 20px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 0, 0, .16) 24px 26px),
    rgba(45, 27, 17, .44);
  box-shadow:
    inset 0 8px 0 rgba(255, 223, 151, .06),
    inset 0 -8px 0 rgba(0, 0, 0, .18);
}

.room::after {
  z-index: 8;
}

.room.selected {
  outline: 4px solid #d59b2f;
  outline-offset: -6px;
}

.room-info {
  z-index: 7;
  width: min(166px, calc(100% - 70px));
  padding: 4px 5px;
}

.room h3 {
  font-size: 14px;
}

.room-status {
  display: -webkit-box;
  min-height: 24px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 10px;
}

.room-state-tag {
  top: 38px;
  z-index: 9;
  max-width: 78px;
  font-size: 7px;
}

.room-status-strip {
  position: absolute;
  left: 10px;
  right: 42px;
  bottom: 6px;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-top: 2px solid rgba(27, 16, 10, .82);
  padding-top: 3px;
  color: #f4dfad;
  font: 900 8px/1 monospace;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}

.room-status-strip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-icon {
  right: 10px;
  bottom: 5px;
  --prop-px: 1.5px;
  opacity: .78;
}

.room-decor {
  inset: 74px 14px 34px;
  z-index: 1;
}

.room-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 224, 154, .08);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 232, 158, .08), transparent 28%),
    radial-gradient(circle at 75% 72%, rgba(0, 0, 0, .18), transparent 32%);
}

.room-decor .pixel-prop {
  --prop-px: var(--room-prop-px);
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .42));
}

.creature-layer {
  inset: 94px 22px 40px;
  z-index: 5;
  overflow: visible;
}

.creature {
  --px: var(--sprite-px, 1px);
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .55));
}

.creature .pixel-sprite {
  animation: tinyBob .8s steps(2) infinite;
}

.goblin,
.skeleton,
.hero,
.inspector {
  animation: tinyShuffle 2.4s steps(5) infinite alternate;
}

.hero {
  animation-name: tinyHeroPatrol;
}

.skeleton {
  animation-name: tinyClerkWobble;
}

.inspector {
  animation-name: tinyInspector;
}

.slime {
  animation: tinySlimeBlob 1.7s steps(4) infinite alternate;
}

.slime .pixel-sprite {
  animation: tinySlimeSquish .8s steps(3) infinite;
}

.creature-label {
  top: -10px;
  max-width: 38px;
  border-width: 1px;
  padding: 1px 2px;
  font-size: 6px;
}

.job-crate::after,
.job-coin::after,
.job-paper::after,
.job-clipboard::after,
.job-wrench::after,
.job-stamp::after {
  right: -5px;
  bottom: 7px;
  width: 8px;
  height: 8px;
  border-width: 1px;
}

.job-paper::after,
.job-clipboard::after {
  width: 7px;
  height: 9px;
}

.job-wrench::after {
  width: 10px;
  height: 3px;
  right: -7px;
  bottom: 10px;
}

.job-stamp::after {
  width: 7px;
  height: 10px;
}

.job-coin::after {
  width: 7px;
  height: 7px;
  right: -4px;
  bottom: 9px;
}

.bubble,
.float-text {
  z-index: 10;
  border-width: 1px;
  padding: 1px 3px;
  font-size: 8px;
  max-width: 74px;
  text-align: center;
}

.bubble {
  border-radius: 0;
  color: #f8e6b8;
  background: rgba(45, 24, 12, .82);
}

.float-text {
  color: #1b100a;
}

.room-entrance::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .24) 0 20%, transparent 20% 100%),
    repeating-linear-gradient(0deg, rgba(255, 224, 154, .08) 0 18px, rgba(0, 0, 0, .14) 18px 20px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 0, 0, .16) 24px 26px),
    rgba(67, 42, 24, .65);
}

.room-barracks::before {
  background:
    linear-gradient(90deg, rgba(83, 54, 35, .7) 0 32%, transparent 32%),
    repeating-linear-gradient(0deg, rgba(255, 224, 154, .06) 0 18px, rgba(0, 0, 0, .14) 18px 20px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 0, 0, .16) 24px 26px),
    rgba(56, 35, 25, .72);
}

.room-traps::before {
  background:
    linear-gradient(90deg, rgba(25, 20, 18, .68) 0 18%, rgba(95, 48, 35, .45) 18% 78%, rgba(25, 20, 18, .68) 78%),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(255, 217, 122, .08) 28px 30px),
    rgba(54, 42, 38, .82);
}

.room-treasury::before {
  background:
    radial-gradient(circle at 24% 72%, rgba(242, 196, 92, .17), transparent 25%),
    repeating-linear-gradient(0deg, rgba(255, 224, 154, .08) 0 18px, rgba(0, 0, 0, .13) 18px 20px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 0, 0, .17) 24px 26px),
    rgba(68, 45, 21, .76);
}

.room-slime::before {
  background:
    radial-gradient(ellipse at 45% 78%, rgba(66, 184, 87, .22), transparent 36%),
    repeating-linear-gradient(0deg, rgba(134, 216, 125, .07) 0 18px, rgba(0, 0, 0, .14) 18px 20px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 0, 0, .17) 24px 26px),
    rgba(34, 62, 36, .76);
}

.room-accounting::before {
  background:
    linear-gradient(90deg, rgba(216, 189, 131, .08), transparent 38%),
    repeating-linear-gradient(0deg, rgba(255, 224, 154, .09) 0 18px, rgba(0, 0, 0, .12) 18px 20px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(0, 0, 0, .16) 24px 26px),
    rgba(62, 48, 35, .8);
}

.entry-arch {
  left: 8px;
  bottom: 18px;
  width: 48px;
  height: 74px;
  border: 5px solid #100906;
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  box-shadow: inset 0 0 0 5px rgba(214, 163, 51, .28);
}

.checkpoint-desk {
  left: 70px;
  bottom: 28px;
  width: 46px;
  height: 20px;
  border: 3px solid #100906;
  background:
    linear-gradient(90deg, rgba(255, 232, 160, .25) 0 22%, transparent 22%),
    #8b552d;
  box-shadow: 0 -11px 0 -5px #e4c982;
}

.queue-dot {
  bottom: 16px;
  width: 7px;
  height: 7px;
  border: 2px solid #100906;
  background: #d8bd83;
}

.queue-dot.q1 { left: 78px; }
.queue-dot.q2 { left: 98px; }
.queue-dot.q3 { left: 118px; }

.sack-bed {
  bottom: 17px;
  width: 42px;
  height: 17px;
  border: 3px solid #100906;
  border-radius: 12px 12px 5px 5px;
  color: #1b100a;
  background: #b78b58;
  font: 900 6px/13px monospace;
  text-align: center;
  transform: rotate(-3deg);
}

.sack-bed.sack-a { left: 62px; }
.sack-bed.sack-b { left: 108px; bottom: 20px; transform: rotate(4deg); }

.locker-row {
  right: 10px;
  top: 14px;
  width: 48px;
  height: 34px;
  border: 3px solid #100906;
  background:
    repeating-linear-gradient(90deg, #5c6c63 0 14px, #39483f 14px 16px),
    #5c6c63;
  box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .18);
}

.mess-table {
  left: 72px;
  top: 52px;
  width: 46px;
  height: 20px;
  border: 3px solid #100906;
  background: #7b4a29;
  box-shadow: 9px 5px 0 -4px #d8bd83, -10px 5px 0 -4px #d8bd83;
}

.trap-lane {
  left: 18px;
  right: 18px;
  bottom: 17px;
  height: 64px;
  border: 3px solid rgba(12, 8, 6, .86);
  background:
    repeating-linear-gradient(90deg, rgba(242, 196, 92, .22) 0 10px, transparent 10px 20px),
    rgba(31, 24, 21, .42);
}

.inspection-line {
  left: 22px;
  right: 22px;
  bottom: 48px;
  height: 4px;
  background: repeating-linear-gradient(90deg, #f2c45c 0 12px, #1b100a 12px 20px);
}

.maintenance-box {
  right: 68px;
  bottom: 22px;
  width: 24px;
  height: 18px;
  border: 3px solid #100906;
  background: #69736e;
}

.ledger-rail {
  left: 70px;
  top: 48px;
  width: 70px;
  height: 12px;
  border-top: 3px solid #100906;
  border-bottom: 3px solid #100906;
  background: repeating-linear-gradient(90deg, #ead6a6 0 8px, #8e5227 8px 11px);
}

.lockbox-grid {
  left: 82px;
  bottom: 52px;
  width: 52px;
  height: 34px;
  border: 3px solid #100906;
  background:
    repeating-linear-gradient(0deg, transparent 0 14px, #100906 14px 17px),
    repeating-linear-gradient(90deg, #7e8a84 0 15px, #100906 15px 18px);
}

.security-line {
  left: 16px;
  right: 58px;
  bottom: 12px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #f2c45c 0 10px, #100906 10px 16px);
}

.waste-channel {
  left: 58px;
  right: 34px;
  bottom: 14px;
  height: 14px;
  border: 3px solid #102313;
  background: #27783e;
  box-shadow: inset 12px 3px 0 rgba(142, 224, 137, .45);
}

.containment-ring {
  left: 18px;
  bottom: 18px;
  width: 82px;
  height: 58px;
  border: 3px dashed rgba(142, 224, 137, .88);
  border-radius: 50%;
}

.drain-grate {
  right: 68px;
  bottom: 18px;
  width: 20px;
  height: 14px;
  border: 3px solid #102313;
  background: repeating-linear-gradient(90deg, #7e8a84 0 3px, #102313 3px 5px);
}

.clerk-desk {
  left: 72px;
  bottom: 28px;
  width: 56px;
  height: 28px;
  border: 3px solid #100906;
  background:
    linear-gradient(90deg, transparent 0 55%, rgba(0, 0, 0, .18) 55%),
    #8b552d;
  box-shadow: inset 8px 4px 0 rgba(255, 226, 155, .22);
}

.inbox-tower {
  right: 60px;
  top: 28px;
  width: 28px;
  height: 52px;
  border: 3px solid #100906;
  background: repeating-linear-gradient(0deg, #ead6a6 0 8px, #bca16a 8px 11px);
  transform: rotate(-2deg);
}

.stamp-pad {
  left: 136px;
  bottom: 36px;
  width: 18px;
  height: 10px;
  border: 2px solid #100906;
  background: #8e2f22;
}

.red-tape-line {
  left: 18px;
  right: 16px;
  bottom: 18px;
  height: 5px;
  background: repeating-linear-gradient(90deg, #8e2f22 0 12px, #e4c982 12px 17px);
}

.bubble,
.float-text {
  position: absolute;
  z-index: 4;
  left: var(--x, 50%);
  top: var(--y, 50%);
  border: 2px solid var(--ink);
  padding: 2px 4px;
  color: var(--ink);
  background: var(--paper-bright);
  font: 800 11px/1 monospace;
  pointer-events: none;
  animation: floatFade 2.2s ease-out forwards;
}

.float-text {
  color: #fff0c8;
  background: rgba(60, 30, 16, .86);
  text-shadow: 1px 1px 0 #000;
}

.bubble,
.float-text {
  z-index: 10;
  border-width: 1px;
  padding: 1px 3px;
  max-width: 74px;
  font: 800 8px/1 monospace;
  text-align: center;
}

.bubble {
  color: #f8e6b8;
  background: rgba(45, 24, 12, .82);
}

.visual-effect {
  position: absolute;
  z-index: 4;
  left: var(--x, 50%);
  top: var(--y, 50%);
  pointer-events: none;
}

.effect-smoke,
.effect-dust,
.effect-gas {
  width: 18px;
  height: 18px;
  background: rgba(220, 210, 185, .55);
  box-shadow: 12px -6px 0 rgba(220, 210, 185, .35), -10px 4px 0 rgba(220, 210, 185, .28);
  animation: smokePuff 1.3s ease-out forwards;
}

.effect-gas {
  background: rgba(120, 220, 112, .45);
  box-shadow: 12px -6px 0 rgba(120, 220, 112, .28), -10px 4px 0 rgba(120, 220, 112, .24);
}

.effect-fire {
  width: 18px;
  height: 22px;
  background: #f2c45c;
  box-shadow: inset 6px 6px 0 #e2502d, 0 0 16px rgba(226, 80, 45, .7);
  animation: fireFlicker 1.1s steps(3) forwards;
}

.effect-magic {
  width: 8px;
  height: 8px;
  background: #8bd3e6;
  box-shadow:
    14px -8px 0 #8d3f8f,
    -12px 6px 0 #7a4fd2,
    4px 16px 0 #f7f0d2,
    0 0 18px rgba(141, 63, 143, .72);
  animation: sparkBurst 1.2s steps(4) forwards;
}

.effect-slime-spill {
  width: 48px;
  height: 16px;
  background: #55be67;
  border: 3px solid #112b19;
  box-shadow: inset 8px 4px 0 #8ee089;
  animation: spillSpread 2s ease-out forwards;
}

.effect-sparks {
  width: 5px;
  height: 5px;
  background: #f2c45c;
  box-shadow: 12px -6px 0 #e2502d, -10px 5px 0 #f2c45c, 4px 12px 0 #fff0a5;
  animation: sparkBurst 1s steps(3) forwards;
}

.effect-paper-burst {
  width: 16px;
  height: 12px;
  background: #e9ddbc;
  border: 2px solid #1b100a;
  box-shadow: 20px -8px 0 #d8bd83, -18px 4px 0 #e9ddbc, 8px 18px 0 #d8bd83;
  animation: paperBurst 1.8s ease-out forwards;
}

.incident-prop {
  position: absolute;
  z-index: 3;
  left: var(--x, 46%);
  bottom: var(--b, 15px);
  pointer-events: none;
  animation: propPop 5.8s ease-out forwards;
}

.work-prop {
  position: absolute;
  z-index: 4;
  left: var(--x, 48%);
  bottom: var(--b, 34px);
  pointer-events: none;
  image-rendering: pixelated;
  animation: workPop 2.4s steps(4) forwards;
}

.work-job-crate {
  width: 24px;
  height: 18px;
  border: 3px solid #1b100a;
  background:
    linear-gradient(90deg, transparent 0 10px, #5c3520 10px 13px, transparent 13px),
    #9a6030;
  box-shadow: inset 4px 4px 0 rgba(255, 226, 155, .2);
}

.work-danger-flicker {
  width: 34px;
  height: 14px;
  border: 2px solid #1b100a;
  color: #1b100a;
  background: #d8bd83;
  font: 900 8px/12px monospace;
  text-align: center;
  animation: signFlicker 1.4s steps(2) forwards;
}

.work-danger-flicker::before {
  content: "DANGER";
}

.work-coin-sparkle {
  width: 6px;
  height: 6px;
  background: #fff0a5;
  box-shadow:
    10px 3px 0 #f2c45c,
    -8px 8px 0 #d6a333,
    3px 15px 0 #fff0a5;
}

.work-chest-open {
  width: 30px;
  height: 18px;
  border: 3px solid #1b100a;
  background: linear-gradient(#7a4a25 0 40%, #f2c45c 40% 58%, #9a6030 58%);
  box-shadow: inset 5px 3px 0 rgba(255, 240, 160, .35);
}

.work-slime-blob,
.work-slime-drip {
  width: 24px;
  height: 13px;
  border: 3px solid #112b19;
  border-radius: 12px 12px 5px 5px;
  background: #55be67;
  box-shadow: inset 7px 3px 0 #8ee089;
}

.work-slime-drip {
  width: 8px;
  height: 22px;
  border-radius: 5px;
  animation: dripDrop 1.7s ease-out forwards;
}

.work-loose-form {
  width: 18px;
  height: 14px;
  border: 2px solid #1b100a;
  background: #ead6a6;
  box-shadow:
    14px -8px 0 #d8bd83,
    -12px 10px 0 #ead6a6;
  animation: paperBurst 2s ease-out forwards;
}

.work-stamp-hit {
  width: 38px;
  height: 16px;
  border: 3px solid #9c2f24;
  color: #9c2f24;
  background: rgba(234, 214, 166, .86);
  font: 900 9px/12px monospace;
  text-align: center;
  transform: rotate(-5deg);
}

.work-stamp-hit::before {
  content: "APPROVED";
}

.work-queue-mark {
  width: 42px;
  height: 10px;
  border-top: 4px dotted #c43e31;
  opacity: .9;
}

.work-torch-flare {
  width: 14px;
  height: 20px;
  background: #f2c45c;
  box-shadow: inset 5px 6px 0 #e2502d, 0 0 18px rgba(226, 80, 45, .8);
  animation: fireFlicker 1s steps(3) forwards;
}

.work-strike-banner {
  width: 58px;
  height: 18px;
  border: 3px solid #1b100a;
  color: #fff0c8;
  background: #c94b35;
  font: 900 9px/12px monospace;
  text-align: center;
}

.work-strike-banner::before {
  content: "STRIKE";
}

.work-dice {
  width: 10px;
  height: 10px;
  border: 2px solid #1b100a;
  background: #ead6a6;
  box-shadow: 15px 5px 0 #c94b35, 3px 3px 0 rgba(0, 0, 0, .3);
}

.work-party-spark,
.work-curse-spark {
  width: 6px;
  height: 6px;
  background: #f2c45c;
  box-shadow:
    12px -6px 0 #53b964,
    -10px 5px 0 #c94b35,
    4px 14px 0 #315da0;
}

.work-curse-spark {
  background: #8d3f8f;
  box-shadow:
    12px -6px 0 #7a4fd2,
    -10px 5px 0 #8bd3e6,
    4px 14px 0 #f7f0d2;
}

.work-red-spill {
  width: 38px;
  height: 12px;
  background: #8e2f22;
  box-shadow: inset 8px 3px 0 #c94b35, 12px 5px 0 #6f1d18;
}

.work-safe-sign {
  width: 34px;
  height: 15px;
  border: 2px solid #1b100a;
  color: #173b25;
  background: #8ee089;
  font: 900 8px/11px monospace;
  text-align: center;
}

.work-safe-sign::before {
  content: "SAFE";
}

.prop-broken-sign {
  width: 38px;
  height: 18px;
  border: 3px solid #1b100a;
  background: #d8bd83;
  transform: rotate(-12deg);
}

.prop-gold-spill {
  width: 45px;
  height: 14px;
  background: #d6a333;
  box-shadow: inset 0 4px 0 #fff0a5, 0 3px 0 #1b100a;
}

.prop-fire-puddle {
  width: 36px;
  height: 18px;
  background: #e2502d;
  box-shadow: inset 10px 0 0 #f2c45c, 0 0 14px rgba(226, 80, 45, .7);
}

.prop-paper-stack {
  width: 32px;
  height: 20px;
  background: #e9ddbc;
  border: 2px solid #1b100a;
  box-shadow: 5px -5px 0 #d8bd83;
}

.prop-barricade {
  width: 46px;
  height: 22px;
  background: repeating-linear-gradient(45deg, #8e2f22 0 8px, #d8bd83 8px 16px);
  border: 3px solid #1b100a;
}

.prop-mushroom {
  width: 24px;
  height: 20px;
  background: #d8bd83;
  border-top: 12px solid #b8498c;
}

.prop-warning-cone {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 32px solid #e2502d;
  filter: drop-shadow(0 3px 0 #1b100a);
}

.prop-cursed-object {
  width: 24px;
  height: 24px;
  background: #604169;
  border: 3px solid #1b100a;
  box-shadow: 0 0 12px rgba(160, 90, 190, .8);
  animation: magicWobble 1s steps(2) infinite, propPop 5.8s ease-out forwards;
}

.audit-mode .room {
  filter: saturate(.78) contrast(1.08);
}

.side-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
}

.mandate-panel {
  grid-column: 1 / -1;
}

.actions-panel {
  grid-column: 1 / -1;
}

.room-panel,
.registry-panel {
  grid-column: span 1;
}

.mandate-panel,
.incident-panel,
.actions-panel,
.news-panel,
.room-panel,
.registry-panel,
.log-panel {
  padding: 10px;
}

.mandate-summary {
  margin-bottom: 6px;
  font-weight: 800;
  line-height: 1.12;
}

.mandate-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px 12px;
  margin: 0 0 8px;
  padding-left: 20px;
  font-size: 11px;
  line-height: 1.18;
}

.business-model-box {
  border: 3px solid var(--ink);
  margin-bottom: 6px;
  padding: 7px;
  background:
    repeating-linear-gradient(0deg, rgba(95, 60, 24, .08) 0 2px, transparent 2px 5px),
    rgba(255, 244, 199, .32);
}

.model-kicker {
  display: block;
  margin-bottom: 5px;
  color: #513118;
  font: 900 10px/1 monospace;
  text-transform: uppercase;
}

.business-model-box strong {
  display: block;
  color: #2c1a10;
  font-size: 15px;
  line-height: 1.1;
}

.business-model-box p {
  margin-top: 4px;
  color: #4d3520;
  font-size: 12px;
  line-height: 1.25;
}

.risk-meter {
  border: 3px solid var(--ink);
  padding: 7px;
  background:
    repeating-linear-gradient(0deg, rgba(95, 60, 24, .08) 0 2px, transparent 2px 5px),
    rgba(255, 244, 199, .36);
}

.risk-meter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  font: 900 12px/1 monospace;
  text-transform: uppercase;
}

.risk-meter-top strong {
  font-size: 16px;
}

.risk-track {
  height: 15px;
  border: 3px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 12px),
    #5f7a45;
  overflow: hidden;
}

.risk-fill {
  width: 0;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 3px, transparent 3px 8px),
    #4c8f45;
  transition: width .25s steps(5);
}

.risk-fill.risk-warning {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 3px, transparent 3px 8px),
    #c08a2f;
}

.risk-fill.risk-critical {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .15) 0 3px, transparent 3px 8px),
    #a53429;
}

.risk-text {
  margin-top: 5px;
  min-height: 0;
  color: #513118;
  font-size: 12px;
  line-height: 1.25;
}

.advisor-box {
  margin-top: 6px;
  border: 3px solid var(--ink);
  padding: 6px;
  background: rgba(255, 244, 199, .3);
}

.advisor-box .stamp {
  margin-bottom: 5px;
  font-size: 10px;
}

.advisor-box p {
  color: #4d3520;
  font-size: 12px;
  line-height: 1.25;
}

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

.news-panel::after {
  content: "KINGDOM WIRE";
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: rgba(83, 49, 24, .16);
  font: 900 18px/1 monospace;
  transform: rotate(-4deg);
  pointer-events: none;
}

.news-feed {
  display: grid;
  gap: 7px;
}

.news-item {
  position: relative;
  border: 3px solid var(--ink);
  padding: 7px;
  background:
    linear-gradient(90deg, rgba(255, 244, 199, .42), transparent 62%),
    repeating-linear-gradient(0deg, rgba(95, 60, 24, .08) 0 2px, transparent 2px 5px),
    rgba(255, 244, 199, .3);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .18);
}

.news-item.latest {
  background:
    linear-gradient(135deg, rgba(242, 196, 92, .24), transparent 50%),
    repeating-linear-gradient(0deg, rgba(95, 60, 24, .08) 0 2px, transparent 2px 5px),
    rgba(255, 244, 199, .42);
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  color: #513118;
  font: 900 9px/1 monospace;
  text-transform: uppercase;
}

.news-topic {
  border: 2px solid currentColor;
  padding: 1px 4px;
  color: #31556f;
  background: rgba(255, 244, 199, .42);
}

.news-item p {
  margin: 0;
  color: #2c1a10;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.22;
}

.news-item footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: #6b4525;
  font: 800 9px/1.1 monospace;
  text-transform: uppercase;
}

.news-item .impact-line {
  margin: 0;
}

.news-item .impact-title {
  font-size: 8px;
}

.news-item .impact-chip {
  border-width: 1px;
  padding: 1px 3px;
  font-size: 7px;
}

.briefing-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 7px),
    rgba(20, 12, 8, .68);
}

.briefing-overlay[hidden] {
  display: none;
}

.briefing-open {
  overflow: hidden;
}

.briefing-modal {
  width: min(620px, 100%);
  padding: 18px;
}

.briefing-copy {
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.35;
}

.briefing-rules {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding-left: 26px;
  line-height: 1.3;
}

.briefing-rules li {
  padding-left: 3px;
}

.briefing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.shutdown-mode .dungeon-board::after {
  content: "TEMPORARILY SHUT DOWN";
  position: absolute;
  inset: 44% 8%;
  z-index: 9;
  display: grid;
  place-items: center;
  border: 5px solid #8e2f22;
  color: #8e2f22;
  background: rgba(232, 211, 163, .86);
  font: 900 30px/1 monospace;
  text-align: center;
  transform: rotate(-2deg);
  pointer-events: none;
}

.registry-panel {
  --sprite-px: 2px;
}

.registry-panel details {
  display: grid;
  gap: 10px;
}

.registry-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  list-style: none;
}

.registry-panel summary::-webkit-details-marker {
  display: none;
}

.registry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(44px, 1fr));
  gap: 5px;
}

.registry-item {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-width: 0;
  border: 3px solid var(--ink);
  padding: 6px 3px 5px;
  background: rgba(255, 244, 199, .3);
}

.registry-item > span {
  max-width: 100%;
  font: 800 10px/1 monospace;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-align: center;
}

.registry-sprite {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: calc(18 * var(--sprite-px));
  height: calc(24 * var(--sprite-px) + 8px);
}

.registry-sprite .creature {
  display: block;
  position: relative;
  left: auto;
  bottom: auto;
  --move: 0px;
  animation-duration: 1.2s;
}

.incident-content p,
.room-details p {
  margin-bottom: 7px;
  line-height: 1.35;
}

.quiet {
  color: #5b432a;
  font-style: italic;
}

.choice-list,
.actions-list {
  display: grid;
  gap: 5px;
}

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

.choice-list button,
.actions-list button {
  width: 100%;
  padding: 6px 7px;
  text-align: left;
}

.action-cost {
  display: block;
  margin-top: 2px;
  font: 800 11px/1.2 monospace;
  color: #513118;
}

.impact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}

.impact-title {
  margin-right: 2px;
  color: #513118;
  font: 900 10px/1 monospace;
  text-transform: uppercase;
}

.impact-chip {
  display: inline-block;
  border: 2px solid currentColor;
  padding: 1px 4px;
  background: rgba(255, 244, 199, .34);
  font: 900 9px/1 monospace;
  text-transform: uppercase;
}

.impact-good {
  color: var(--green);
}

.impact-cost {
  color: var(--red);
}

.impact-risk {
  color: #8b641c;
}

.impact-neutral {
  color: var(--blue);
}

.action-note {
  display: block;
  margin-top: 3px;
  color: #4d3520;
  font: 700 10px/1.15 Georgia, "Times New Roman", serif;
}

.room-details dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin: 0 0 8px;
}

.room-role-card {
  border: 3px solid var(--ink);
  margin-bottom: 8px;
  padding: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(95, 60, 24, .08) 0 2px, transparent 2px 5px),
    rgba(255, 244, 199, .36);
}

.room-role-card h3 {
  margin: 5px 0 6px;
  font-size: 15px;
}

.room-current-state {
  border: 3px solid var(--ink);
  margin: 0 0 8px;
  padding: 8px;
  background:
    repeating-linear-gradient(0deg, rgba(95, 60, 24, .08) 0 2px, transparent 2px 5px),
    rgba(255, 244, 199, .28);
}

.room-current-state.is-active {
  background:
    linear-gradient(135deg, rgba(242, 196, 92, .24), transparent 48%),
    repeating-linear-gradient(0deg, rgba(95, 60, 24, .08) 0 2px, transparent 2px 5px),
    rgba(255, 244, 199, .38);
}

.room-current-state strong {
  display: block;
  margin: 3px 0;
  color: #2c1a10;
  font-size: 15px;
  line-height: 1.05;
}

.room-current-state p {
  margin: 0;
  color: #4d3520;
  font-size: 12px;
  line-height: 1.25;
}

.room-current-state .impact-line {
  margin-top: 7px;
}

.room-current-state .impact-chip {
  font-size: 8px;
}

.state-timer {
  display: inline-block;
  margin-top: 6px;
  border: 2px solid #1b100a;
  padding: 1px 4px;
  color: #1b100a;
  background: #c7974d;
  font: 900 9px/1 monospace;
  text-transform: uppercase;
}

.room-role-card dl {
  margin-bottom: 0;
}

.panel-tag {
  margin-top: 0;
  background: #c7974d;
}

.room-details dt {
  font-weight: 800;
  font-size: 12px;
}

.room-details dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
}

.log-panel {
  margin-top: 16px;
}

.event-log {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  max-height: 180px;
  overflow: auto;
  margin: 0;
  padding-left: 22px;
}

.event-log li {
  line-height: 1.25;
  padding: 2px 0;
}

.log-tag,
.log-day {
  display: inline-block;
  margin-right: 5px;
  border: 2px solid currentColor;
  padding: 1px 4px;
  font: 900 10px/1 monospace;
  text-transform: uppercase;
}

.log-day {
  color: #5b432a;
}

.log-audit { color: #2c5c78; }
.log-raid { color: #8e2f22; }
.log-incident { color: #6b4525; }
.log-monster { color: #3e6f38; }
.log-treasury { color: #8b641c; }
.log-slime { color: #2d7a43; }
.log-compliance { color: #31556f; }

@keyframes walk {
  0% { transform: translateX(0) translateY(0) scaleX(1); }
  50% { transform: translateX(calc(var(--move) / 2)) translateY(-2px) scaleX(1); }
  100% { transform: translateX(var(--move)) translateY(0) scaleX(-1); }
}

@keyframes goblinScurry {
  0% { transform: translateX(0) scaleX(1); }
  92% { transform: translateX(var(--move)) scaleX(1); }
  100% { transform: translateX(var(--move)) scaleX(-1); }
}

@keyframes skeletonWobble {
  0% { transform: translateX(0) scaleX(1); }
  92% { transform: translateX(var(--move)) scaleX(1); }
  100% { transform: translateX(var(--move)) scaleX(-1); }
}

@keyframes heroMarch {
  0% { transform: translateX(0) scaleX(1); }
  92% { transform: translateX(var(--move)) scaleX(1); }
  100% { transform: translateX(var(--move)) scaleX(-1); }
}

@keyframes slimeCrawl {
  0% { transform: translateX(0) scaleX(1); }
  92% { transform: translateX(var(--move)) scaleX(1); }
  100% { transform: translateX(var(--move)) scaleX(-1); }
}

@keyframes tinySit {
  0%, 100% { transform: translateY(7px) scaleY(.82); }
  50% { transform: translateY(6px) scaleY(.86); }
}

@keyframes queueBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes stampTool {
  0%, 70%, 100% { transform: translateY(0); }
  82% { transform: translateY(8px); }
}

@keyframes blobMerge {
  0%, 100% { transform: translateX(0) scaleX(.8); opacity: .8; }
  50% { transform: translateX(-8px) scaleX(1.2); opacity: 1; }
}

@keyframes groundedStep {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-1px) rotate(1deg); }
}

@keyframes stiffStep {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-1px) rotate(.5deg); }
}

@keyframes marchStep {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes clipboardStep {
  0%, 100% { transform: translateY(0) rotate(.5deg); }
  50% { transform: translateY(-1px) rotate(-.5deg); }
}

@keyframes slimeSquish {
  0%, 100% { transform: translateY(0) scaleX(1.1) scaleY(.88); }
  50% { transform: translateY(-2px) scaleX(.98) scaleY(1.08); }
}

@keyframes shadowStep {
  0%, 100% { opacity: .5; transform: scaleX(1); }
  50% { opacity: .38; transform: scaleX(.88); }
}

@keyframes clipboardIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px) rotate(-2deg); }
}

@keyframes clipboardWalk {
  0% { transform: translateX(0) scaleX(1); }
  92% { transform: translateX(var(--move)) scaleX(1); }
  100% { transform: translateX(var(--move)) scaleX(-1); }
}

@keyframes panicShake {
  0% { transform: translateX(var(--panic-drift, 0)) rotate(-6deg); }
  50% { transform: translateX(calc(var(--panic-drift, 0) + 5px)) rotate(6deg); }
  100% { transform: translateX(calc(var(--panic-drift, 0) - 5px)) rotate(-4deg); }
}

@keyframes floatFade {
  0% { opacity: 0; transform: translateY(8px); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-38px); }
}

@keyframes roomDanger {
  0%, 100% { box-shadow: inset 0 -22px 0 rgba(0, 0, 0, .26); }
  50% { box-shadow: inset 0 -22px 0 rgba(0, 0, 0, .26), inset 0 0 0 999px rgba(170, 45, 22, .32); }
}

@keyframes roomSlime {
  50% { filter: hue-rotate(45deg) saturate(1.4); }
}

@keyframes roomPaper {
  50% { box-shadow: inset 0 -22px 0 rgba(0, 0, 0, .26), inset 0 0 0 999px rgba(231, 212, 153, .36); }
}

@keyframes roomAudit {
  50% { box-shadow: inset 0 -22px 0 rgba(0, 0, 0, .26), inset 0 0 0 999px rgba(78, 142, 184, .38); }
}

@keyframes roomMagic {
  50% { box-shadow: inset 0 -22px 0 rgba(0, 0, 0, .26), inset 0 0 0 999px rgba(132, 70, 154, .36); }
}

@keyframes auditPulse {
  50% { opacity: .35; }
}

@keyframes torchFlicker {
  50% { transform: scaleY(1.2) translateY(-2px); filter: brightness(1.3); }
}

@keyframes smokePuff {
  0% { opacity: 0; transform: translateY(10px) scale(.5); }
  20% { opacity: .85; }
  100% { opacity: 0; transform: translateY(-30px) scale(1.5); }
}

@keyframes spikeTwitch {
  50% { transform: translateY(-5px); }
}

@keyframes axeSwing {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(24deg); }
}

@keyframes sparkBlink {
  50% { opacity: .25; transform: scale(1.4); }
}

@keyframes goldShift {
  50% { transform: translateY(-2px); filter: brightness(1.15); }
}

@keyframes mimicBlink {
  0%, 86%, 100% { background: #f2c45c; }
  90% { background: #080808; }
}

@keyframes slimeGlow {
  50% { filter: brightness(1.25); transform: translateY(-1px); }
}

@keyframes dripDrop {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(55px); opacity: 0; }
}

@keyframes paperFlutter {
  50% { transform: rotate(4deg) translateY(-2px); }
}

@keyframes paperDrift {
  50% { transform: translate(10px, -8px) rotate(8deg); }
}

@keyframes stampSlam {
  0%, 72%, 100% { transform: rotate(-6deg) translateY(0); }
  76% { transform: rotate(-6deg) translateY(14px); filter: brightness(.8); }
}

@keyframes fireFlicker {
  0% { opacity: 0; transform: scale(.5); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4) translateY(-8px); }
}

@keyframes spillSpread {
  0% { opacity: 0; transform: scaleX(.2); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1.4); }
}

@keyframes sparkBurst {
  0% { opacity: 1; transform: scale(.5); }
  100% { opacity: 0; transform: scale(2) rotate(20deg); }
}

@keyframes paperBurst {
  0% { opacity: 0; transform: translateY(12px) rotate(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-36px) rotate(18deg); }
}

@keyframes propPop {
  0% { opacity: 0; transform: translateY(10px) scale(.7); }
  12%, 82% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px) scale(.9); }
}

@keyframes workPop {
  0% { opacity: 0; transform: translateY(8px) scale(.8); }
  15%, 78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-12px) scale(1); }
}

@keyframes signFlicker {
  0%, 20%, 46%, 100% { opacity: 1; filter: brightness(1); }
  32%, 62% { opacity: .45; filter: brightness(1.35); }
}

@keyframes magicWobble {
  50% { transform: rotate(8deg) scale(1.08); }
}

@keyframes tinyBob {
  50% { transform: translateY(-1px); }
}

@keyframes tinyShuffle {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(var(--move, 40px) * .18)) translateY(-1px); }
}

@keyframes tinyHeroPatrol {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(var(--move, 40px) * .22)); }
}

@keyframes tinyClerkWobble {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px) translateY(-1px); }
}

@keyframes tinyInspector {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

@keyframes tinySlimeBlob {
  0% { transform: translateX(0) scaleY(.92); }
  100% { transform: translateX(calc(var(--move, 36px) * .14)) scaleY(1); }
}

@keyframes tinySlimeSquish {
  50% { transform: scaleX(1.08) scaleY(.9); }
}

@media (max-width: 1050px) {
  .main-layout {
    grid-template-columns: 1fr;
  }

  .stats-bar {
    grid-template-columns: repeat(4, 1fr);
  }

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

@media (max-width: 740px) {
  .game-shell {
    width: calc(100% - 10px);
    margin: 5px auto 16px;
  }

  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
  }

  h1 {
    font-size: 30px;
  }

  .save-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .save-controls #briefingBtn {
    grid-column: 1 / -1;
  }

  .stats-bar,
  .side-panel,
  .event-log {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 8px;
  }

  .stat {
    min-height: 52px;
    padding: 6px;
    padding-right: 40px;
  }

  .stat strong {
    font-size: 21px;
  }

  .stat.day {
    grid-column: 1 / -1;
  }

  .main-layout {
    gap: 10px;
    margin-top: 10px;
  }

  .dungeon-board {
    min-height: 0;
    padding: 10px;
  }

  .board-header,
  .panel-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
  }

  .rooms-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 8px;
  }

  .room {
    min-height: 220px;
  }

  .room-info {
    width: min(178px, calc(100% - 40px));
  }

  .side-panel {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .mandate-panel,
  .actions-panel,
  .news-panel,
  .room-panel,
  .registry-panel {
    grid-column: auto;
  }

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

  .incident-panel,
  .actions-panel,
  .news-panel,
  .room-panel,
  .registry-panel,
  .mandate-panel,
  .log-panel {
    padding: 10px;
  }

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

  .event-log {
    grid-template-columns: 1fr;
    max-height: 260px;
  }

  .briefing-modal {
    max-height: calc(100vh - 28px);
    overflow: auto;
    padding: 14px;
  }
}

@media (max-width: 430px) {
  .stats-bar {
    grid-template-columns: 1fr;
  }

  .stat.day {
    grid-column: auto;
  }

  .room {
    min-height: 205px;
  }

  .room-info {
    width: min(160px, calc(100% - 32px));
  }

  .room h3 {
    font-size: 14px;
  }

  .room-status {
    font-size: 10px;
  }

  .creature-layer {
    inset-inline: 6px;
  }

  .briefing-actions,
  .save-controls {
    grid-template-columns: 1fr;
  }

  .save-controls #briefingBtn {
    grid-column: auto;
  }
}