:root {
  color-scheme: dark;
  --wild-ink: #090b0d;
  --wild-panel: #11161a;
  --wild-panel-2: #171d21;
  --paper: #e3d7b8;
  --paper-ink: #252217;
  --fog: #9da9aa;
  --signal: #e8ff45;
  --rust: #e7693e;
  --ice: #bde8e2;
  --red: #f25a5f;
  --line: rgba(216, 229, 221, 0.16);
  --tile: clamp(29px, 3.2vw, 43px);
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

html,
body,
body * {
  cursor: auto !important;
}

button,
a,
[role="button"] {
  cursor: pointer !important;
}

html {
  background: var(--wild-ink);
}

body {
  min-width: 300px;
  color: #e9eee7;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 76% -10%, rgba(67, 115, 92, 0.22), transparent 35rem),
    radial-gradient(circle at 0 22%, rgba(104, 57, 45, 0.21), transparent 30rem),
    #090b0d;
  background-size: 24px 24px, 24px 24px, auto, auto, auto;
}

html.here-pseudo-fullscreen,
html.here-pseudo-fullscreen body {
  width: 100%;
  height: 100%;
  overflow: auto;
}

html.here-pseudo-fullscreen body {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
}

.here-shell {
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 28px);
}

.here-topbar {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}

.arcade-exit,
.chrome-button {
  width: max-content;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: #f1f4ec;
  background: #13181c;
  font: 850 0.72rem/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.chrome-button {
  justify-self: end;
}

.arcade-exit:hover,
.chrome-button:hover,
.arcade-exit:focus-visible,
.chrome-button:focus-visible {
  border-color: var(--signal);
  color: var(--signal);
}

.server-lamp {
  color: #aebbb7;
  font: 800 0.65rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lamp {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #efb64d;
  box-shadow: 0 0 12px rgba(239, 182, 77, 0.72);
}

.server-lamp.is-online .lamp {
  background: #47dcf2;
  box-shadow: 0 0 14px rgba(71, 220, 242, 0.78);
}

.room-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.room-trigger small {
  padding: 3px 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #89938f;
  font: 900 0.45rem/1 ui-monospace, monospace;
}

.room-trigger-dot,
.room-state-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #697572;
  box-shadow: 0 0 0 2px rgba(105, 117, 114, 0.16);
}

.room-trigger.is-online .room-trigger-dot,
.room-status-card.is-online .room-state-dot {
  background: #68d9b6;
  box-shadow: 0 0 13px rgba(104, 217, 182, 0.75);
}

.room-trigger.is-busy .room-trigger-dot,
.room-status-card.is-busy .room-state-dot {
  background: #efb64d;
  box-shadow: 0 0 13px rgba(239, 182, 77, 0.68);
}

.room-trigger.is-error .room-trigger-dot,
.room-status-card.is-error .room-state-dot {
  background: #ed6a55;
  box-shadow: 0 0 13px rgba(237, 106, 85, 0.68);
}

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  padding: clamp(28px, 5vw, 70px) clamp(4px, 2vw, 24px) clamp(22px, 4vw, 48px);
}

.overline,
.map-kicker,
.panel-kicker,
.modal-kicker {
  margin: 0 0 8px;
  color: var(--signal);
  font: 900 0.66rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.masthead h1 {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(4rem, 12vw, 10.5rem);
  font-weight: 900;
  line-height: 0.73;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.masthead h1 span {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px #d6dfd6;
}

.dek {
  max-width: 760px;
  margin: 22px 0 0;
  color: #aab4b0;
  font-size: clamp(0.84rem, 1.5vw, 1rem);
  line-height: 1.65;
}

.build-stamp {
  width: 128px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border: 2px solid var(--rust);
  border-radius: 50%;
  color: var(--rust);
  text-align: center;
  transform: rotate(7deg);
  box-shadow: inset 0 0 0 5px var(--wild-ink), inset 0 0 0 6px var(--rust);
}

.build-stamp span,
.build-stamp small {
  font: 900 0.62rem/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.09em;
}

.build-stamp strong {
  margin: 3px 0;
  font: 900 1.2rem/1 Impact, sans-serif;
  letter-spacing: 0.04em;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border: 1px solid var(--line);
  background: rgba(15, 19, 22, 0.94);
}

.status-strip.cooking-visible {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.skill-status[hidden],
.cooking-panel[hidden] {
  display: none !important;
}

.status-block {
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--line);
}

.status-block:last-child {
  border-right: 0;
}

.status-block > span,
.status-label span {
  display: block;
  margin-bottom: 5px;
  color: #7f8b89;
  font: 850 0.59rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.status-block strong,
.status-label strong {
  display: block;
  overflow: hidden;
  color: #eef3eb;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.meter-track {
  height: 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #050708;
}

.meter-track span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #c8ff36, #7abf3b);
  transition: width 180ms ease, background 180ms ease;
}

.world-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(290px, 0.75fr);
  gap: 14px;
  margin-top: 14px;
}

.map-card,
.inventory-card,
.terminal-card {
  border: 1px solid var(--line);
  background: rgba(13, 17, 20, 0.95);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.map-card {
  min-width: 0;
}

.map-card-head,
.panel-heading,
.terminal-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.map-card-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.map-card-head h2,
.panel-heading h2 {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 9px;
  color: #87918e;
  font: 750 0.56rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.map-legend span {
  white-space: nowrap;
}

.legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
}

.player-dot { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.source-dot { background: #61ceb1; }
.threat-dot { border-radius: 0; background: #ed6a55; }
.person-dot { border: 1px solid #f0d7a2; background: #8058a1; }
.peer-dot { border: 1px solid #bdf6ff; background: #2a92a8; box-shadow: 0 0 8px rgba(71, 220, 242, 0.72); }

.map-viewport {
  position: relative;
  overflow: auto;
  max-height: min(66vh, 620px);
  min-height: 430px;
  padding: clamp(12px, 2.5vw, 28px);
  background:
    radial-gradient(circle at 43% 40%, rgba(234, 214, 162, 0.08), transparent 38%),
    repeating-linear-gradient(6deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 5px),
    #0a0f0f;
  scrollbar-color: #4c5953 #0b0f10;
}

.map-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(var(--map-columns, 24), var(--tile));
  grid-template-rows: repeat(var(--map-rows, 18), var(--tile));
  width: calc(var(--tile) * var(--map-columns, 24));
  height: calc(var(--tile) * var(--map-rows, 18));
  margin: auto;
  outline: 1px solid rgba(221, 230, 215, 0.13);
  background: #242d27;
  box-shadow: 0 12px 42px rgba(0, 0, 0, 0.48);
}

.tile {
  position: relative;
  width: var(--tile);
  height: var(--tile);
  padding: 0;
  overflow: visible;
  border: 0;
  border-right: 1px solid rgba(234, 239, 221, 0.025);
  border-bottom: 1px solid rgba(234, 239, 221, 0.025);
  background: #333a31;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.018), inset -2px -3px 0 rgba(0, 0, 0, 0.07);
}

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

.tile.field {
  background:
    radial-gradient(circle at 26% 40%, rgba(211, 220, 182, 0.13) 0 1px, transparent 2px),
    linear-gradient(135deg, #384136, #30382f);
}

.tile.pine {
  background: linear-gradient(135deg, #162c24, #1b382c);
}

.tile.pine::before {
  left: 22%;
  top: 15%;
  width: 0;
  height: 0;
  border-right: calc(var(--tile) * 0.23) solid transparent;
  border-bottom: calc(var(--tile) * 0.55) solid rgba(82, 133, 91, 0.72);
  border-left: calc(var(--tile) * 0.23) solid transparent;
  filter: drop-shadow(5px 4px 0 rgba(11, 27, 20, 0.38));
}

.tile.hemlock {
  background: linear-gradient(135deg, #142d2d, #1b3a37);
}

.tile.hemlock::before,
.tile.hemlock::after {
  width: 42%;
  height: 52%;
  top: 16%;
  border-radius: 70% 30% 65% 35%;
  background: rgba(69, 137, 118, 0.57);
  transform: rotate(39deg);
}

.tile.hemlock::before { left: 12%; }
.tile.hemlock::after { right: 8%; top: 28%; transform: rotate(-28deg) scale(0.72); }

.tile.allegheny {
  background:
    repeating-linear-gradient(65deg, transparent 0 8px, rgba(108, 126, 67, 0.26) 8px 10px),
    #263522;
}

.tile.allegheny::before {
  inset: 18% 12%;
  border: 2px dashed rgba(144, 155, 82, 0.46);
  border-radius: 48%;
}

.tile.mountain {
  background: linear-gradient(145deg, #515652, #363c3a 55%, #252b2a);
}

.tile.mountain::before {
  inset: 18% 11% 9%;
  clip-path: polygon(0 100%, 40% 10%, 62% 50%, 75% 29%, 100% 100%);
  background: linear-gradient(#90958d 0 20%, #555d58 21% 100%);
  opacity: 0.66;
}

.tile.road {
  background:
    linear-gradient(90deg, transparent 47%, rgba(236, 198, 96, 0.46) 48% 52%, transparent 53%),
    #3f403d;
}

.tile.road.horizontal {
  background:
    linear-gradient(0deg, transparent 47%, rgba(236, 198, 96, 0.46) 48% 52%, transparent 53%),
    #3f403d;
}

.tile.city {
  background:
    linear-gradient(90deg, transparent 48%, rgba(205, 214, 206, 0.12) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(205, 214, 206, 0.12) 49% 51%, transparent 52%),
    #4b4b48;
}

.tile.city::before {
  inset: 15%;
  border: 1px solid rgba(241, 223, 175, 0.28);
  background: rgba(52, 44, 42, 0.72);
  box-shadow: inset 3px 3px 0 rgba(231, 189, 105, 0.13);
}

.tile.water {
  background: repeating-linear-gradient(0deg, #1d4d59 0 4px, #1a4650 4px 8px);
}

.tile.water::after {
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(177, 232, 225, 0.16) 31% 35%, transparent 36%);
}

.tile.reachable:hover,
.tile.reachable:focus-visible {
  z-index: 8;
  outline: 2px solid rgba(232, 255, 69, 0.72);
  outline-offset: -3px;
}

.tile.discovered {
  filter: none;
}

.tile:not(.discovered) {
  filter: brightness(0.5) saturate(0.55);
}

.map-object {
  position: absolute;
  z-index: 4;
  inset: 10%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: #07100f;
  background: var(--ice);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
  font: 950 clamp(0.5rem, 1vw, 0.7rem)/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: -0.04em;
  pointer-events: none;
}

.map-object.source { background: #67d6b4; }
.map-object.shop { border-radius: 2px; background: #eccd73; }
.map-object.lore { border-radius: 2px; background: #e7d8b2; }
.map-object.threat { border-radius: 2px; color: white; background: #b9423d; }
.map-object.future { color: #c7d2ce; background: #293136; }
.map-object.landmark { border-radius: 2px; color: var(--signal); background: #202a24; }
.map-object.townsfolk {
  inset: 6% 18%;
  border-color: rgba(244, 222, 175, 0.55);
  border-radius: 48% 48% 35% 35%;
  color: #fff1d1;
  background: linear-gradient(#a079bd 0 42%, #493657 43% 100%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), inset 0 7px 0 rgba(244, 214, 166, 0.3);
}

.map-object.cleared {
  opacity: 0.24;
  filter: grayscale(1);
}

.player-marker {
  position: absolute;
  z-index: 12;
  left: calc(var(--px) * var(--tile));
  top: calc(var(--py) * var(--tile));
  width: var(--tile);
  height: var(--tile);
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: left 110ms linear, top 110ms linear;
}

.player-marker::before {
  content: "";
  width: 42%;
  height: 42%;
  border: max(2px, calc(var(--tile) * 0.055)) solid #0a0d0b;
  border-radius: 50% 50% 44% 44%;
  background: var(--signal);
  box-shadow: 0 0 0 2px rgba(232, 255, 69, 0.5), 0 0 18px rgba(232, 255, 69, 0.88);
}

.player-marker::after {
  content: "YOU";
  position: absolute;
  top: -9px;
  padding: 2px 3px;
  color: #090c0a;
  background: var(--signal);
  font: 950 0.44rem/1 ui-monospace, monospace;
}

.remote-player-marker {
  position: absolute;
  z-index: 11;
  left: calc(var(--rx) * var(--tile));
  top: calc(var(--ry) * var(--tile));
  width: var(--tile);
  height: var(--tile);
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: left 125ms linear, top 125ms linear;
}

.remote-player-marker::before {
  content: "";
  width: 34%;
  height: 34%;
  border: max(2px, calc(var(--tile) * 0.045)) solid #071012;
  border-radius: 50% 50% 38% 38%;
  background: #47dcf2;
  box-shadow: 0 0 0 2px rgba(189, 246, 255, 0.42), 0 0 15px rgba(71, 220, 242, 0.82);
}

.remote-player-name {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  max-width: calc(var(--tile) * 3.4);
  overflow: hidden;
  padding: 2px 4px;
  color: #061011;
  background: #bdf6ff;
  font: 900 0.44rem/1 ui-monospace, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
}

.hit-splat {
  position: absolute;
  z-index: 30;
  left: calc(var(--hx) * var(--tile) + var(--tile) * 0.52);
  top: calc(var(--hy) * var(--tile) - 5px);
  width: clamp(38px, calc(var(--tile) * 1.05), 52px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border: 3px solid #0b0c0d;
  color: #0b0c0d;
  background: #fff;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.55);
  font: 950 clamp(0.7rem, 1.8vw, 1rem)/0.9 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
  pointer-events: none;
  animation: dice-hit 900ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}

.hit-splat span {
  display: block;
  font-size: 1.25em;
}

.hit-splat b {
  display: block;
  margin-top: 2px;
  font-size: 0.62em;
  letter-spacing: -0.03em;
}

.hit-splat.critical {
  box-shadow: 0 0 0 3px #fff, 5px 7px 0 #e7693e;
}

@keyframes dice-hit {
  0% { opacity: 0; transform: translate(-50%, 14px) rotate(-9deg) scale(0.55); }
  22% { opacity: 1; transform: translate(-50%, -14px) rotate(5deg) scale(1.1); }
  72% { opacity: 1; transform: translate(-50%, -23px) rotate(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -38px) scale(0.88); }
}

.place-banner {
  position: sticky;
  left: 50%;
  bottom: 10px;
  z-index: 15;
  width: max-content;
  max-width: calc(100% - 20px);
  margin: -27px auto 0;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid rgba(232, 255, 69, 0.43);
  color: var(--signal);
  background: rgba(7, 10, 10, 0.9);
  font: 900 0.58rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.map-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 15px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

.dpad {
  display: grid;
  grid-template: repeat(3, 44px) / repeat(3, 44px);
  gap: 3px;
}

.dpad button {
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  color: #dce5dc;
  background: #232a2d;
  font-weight: 950;
}

.dpad button:hover,
.dpad button:focus-visible {
  border-color: var(--signal);
  color: var(--signal);
}

.dpad .north { grid-area: 1 / 2; }
.dpad .west { grid-area: 2 / 1; }
.dpad-center { grid-area: 2 / 2; }
.dpad .east { grid-area: 2 / 3; }
.dpad .south { grid-area: 3 / 2; }

.action-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wild-button,
.inventory-actions button,
.command-help button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: #e7ede5;
  background: #1c2326;
  font: 850 0.68rem/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.wild-button:hover,
.wild-button:focus-visible,
.inventory-actions button:hover,
.inventory-actions button:focus-visible {
  border-color: var(--signal);
  color: var(--signal);
}

.bat-button { border-color: rgba(231, 105, 62, 0.44); }
.food-button { border-color: rgba(103, 214, 180, 0.38); }
.house-button { border-color: rgba(232, 255, 69, 0.45); }
.house-button:disabled { cursor: not-allowed !important; opacity: 0.38; }
.person-button { border-color: rgba(190, 143, 222, 0.45); }
.person-button:disabled { cursor: not-allowed !important; opacity: 0.38; }

.control-hint {
  grid-column: 2;
  margin: -4px 0 0;
  color: #75817e;
  font: 700 0.57rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.combat-readout {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(232, 255, 69, 0.24);
  color: #aeb9b4;
  background: rgba(8, 12, 13, 0.74);
  font: 750 0.58rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.combat-readout strong {
  color: var(--signal);
}

.combat-readout small {
  grid-column: 1 / -1;
  color: #7d8985;
}

kbd {
  padding: 1px 4px;
  border: 1px solid #56605d;
  border-bottom-width: 2px;
  border-radius: 2px;
  color: #cdd6cf;
  background: #202527;
  font: inherit;
}

.side-stack {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
}

.paper-card {
  position: relative;
  padding: 27px 22px 20px;
  color: var(--paper-ink);
  background:
    linear-gradient(100deg, transparent 0 96%, rgba(56, 48, 28, 0.1) 96%),
    repeating-linear-gradient(0deg, rgba(80, 70, 40, 0.05) 0 1px, transparent 1px 25px),
    var(--paper);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.33);
  transform: rotate(-0.25deg);
}

.paper-pin {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #af322d;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
}

.paper-label {
  margin: 0 0 8px;
  color: #71694f;
  font: 850 0.56rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.paper-card h2 {
  margin: 0;
  font: 900 clamp(1.75rem, 4vw, 2.7rem)/0.9 Georgia, serif;
  letter-spacing: -0.045em;
}

.lore-intro {
  margin: 13px 0 17px;
  color: #5f5844;
  font: 700 0.68rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.lore-entry {
  margin-top: 13px;
  padding: 13px 0 2px;
  border-top: 2px solid rgba(45, 39, 24, 0.22);
}

.lore-entry h3 {
  margin: 3px 0 7px;
  font: 900 1.05rem/1.1 Georgia, serif;
}

.lore-entry p {
  margin: 6px 0;
  font-size: 0.68rem;
  line-height: 1.5;
}

.lore-number {
  color: #776d51;
  font: 900 0.52rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lore-entry.complete h3 {
  color: #426534;
}

.next-lore {
  opacity: 0.82;
}

.lore-copy {
  margin: 13px 0 15px;
  font: italic 0.79rem/1.5 Georgia, serif;
}

.ingredient-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ingredient-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding-top: 8px;
  border-top: 1px solid rgba(45, 39, 24, 0.18);
}

.ingredient-list .check {
  font: 900 1.15rem/1 ui-monospace, monospace;
}

.ingredient-list li.found .check::before { content: "■"; }
.ingredient-list li.found .check { color: #477136; font-size: 0; }
.ingredient-list li.found .check::before { font-size: 1.1rem; }

.ingredient-list strong,
.ingredient-list small {
  display: block;
}

.ingredient-list strong { font-size: 0.77rem; text-transform: uppercase; }
.ingredient-list small { margin-top: 2px; color: #6a624c; font-size: 0.61rem; line-height: 1.35; }

.lore-state {
  margin-top: 14px;
  padding: 9px;
  border: 1px dashed rgba(49, 44, 29, 0.39);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.45;
}

.prealpha-note {
  margin: 11px 0 0;
  color: #6e6754;
  font: 700 0.57rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.cooking-panel {
  padding: 17px;
  border: 1px solid rgba(200, 255, 54, 0.3);
  background:
    linear-gradient(135deg, rgba(200, 255, 54, 0.075), transparent 48%),
    rgba(13, 17, 20, 0.98);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
}

.cooking-heading { margin-bottom: 9px; }
.cooking-heading h2 { margin: 2px 0 0; font: 900 1.55rem/1 Georgia, serif; }
.cooking-heading > strong { color: var(--signal); font: 900 0.68rem/1 ui-monospace, monospace; text-transform: uppercase; }

.cooking-xp-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 5px 10px;
  margin: 0 0 6px;
  color: #9da8a2;
  font: 800 0.54rem/1.35 ui-monospace, monospace;
}

.cooking-xp-line span:last-child { color: #6f7b75; }

.cooking-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #050708;
}

.cooking-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #c8ff36, #67d6b4);
  transition: width 180ms ease;
}

.recipe-copy { margin: 12px 0; color: #b8c1bc; font-size: 0.66rem; line-height: 1.5; }
.recipe-copy strong { color: #eef3eb; }

.cooking-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cooking-actions button {
  min-width: 0;
  min-height: 39px;
  padding: 7px;
  border: 1px solid rgba(200, 255, 54, 0.32);
  color: #e8ece3;
  background: #20272a;
  font: 900 0.54rem/1.2 ui-monospace, monospace;
  text-transform: uppercase;
}

.cooking-actions button:hover:not(:disabled),
.cooking-actions button:focus-visible { border-color: var(--signal); color: var(--signal); }
.cooking-actions button:disabled { cursor: not-allowed !important; opacity: 0.42; }

.inventory-card {
  padding: 17px;
}

.panel-heading {
  margin-bottom: 12px;
}

.panel-heading > span {
  color: #7e8b87;
  font: 800 0.62rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

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

.inventory-slot {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #dce4dd;
  background: #0b1012;
  text-align: center;
}

.inventory-slot.empty {
  background: rgba(8, 11, 12, 0.55);
}

.inventory-slot.worn-slot {
  border-color: rgba(240, 199, 125, 0.62);
  background: linear-gradient(135deg, rgba(240, 199, 125, 0.12), #0b1012 62%);
}

.inventory-slot .item-icon {
  display: block;
  margin-bottom: 2px;
  color: var(--signal);
  font: 950 1.15rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.inventory-slot .item-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font: 800 0.48rem/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.inventory-slot .item-detail {
  display: block;
  margin-top: 3px;
  color: #8fa098;
  font: 750 0.4rem/1.15 ui-monospace, monospace;
}

.inventory-slot .item-count {
  position: absolute;
  right: 3px;
  bottom: 2px;
  color: #fff;
  font: 900 0.62rem/1 ui-monospace, monospace;
}

.inventory-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 9px;
}

.inventory-actions button {
  min-width: 0;
  padding-inline: 4px;
  font-size: 0.56rem;
}

.terminal-card {
  margin-top: 14px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.terminal-titlebar {
  min-height: 39px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  color: #84908d;
  background: #1b2124;
  font-size: 0.59rem;
  letter-spacing: 0.08em;
}

.terminal-titlebar button {
  border: 0;
  color: #7f8b88;
  background: transparent;
  font: inherit;
  text-transform: uppercase;
}

.terminal-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
}

.terminal-dot.red { background: #db5c55; }
.terminal-dot.amber { background: #dfa949; }
.terminal-dot.green { margin-right: 12px; background: #60ad72; }

.terminal-log {
  height: 210px;
  overflow: auto;
  padding: 12px 14px;
  color: #bfcac3;
  background: #070a0b;
  scrollbar-color: #45504d #070a0b;
  font-size: clamp(0.66rem, 1.4vw, 0.76rem);
  line-height: 1.55;
}

.log-line {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.log-line::before {
  content: "> ";
  color: #52605b;
}

.log-line.system { color: var(--signal); }
.log-line.command { color: #71827b; }
.log-line.command::before { content: "$ "; color: #67d6b4; }
.log-line.danger { color: #ff8e7d; }
.log-line.reward { color: #f0ce74; }

.command-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border-top: 1px solid var(--line);
  background: #0c1012;
}

.command-form label {
  padding-left: 14px;
  color: var(--signal);
  font-weight: 900;
}

.command-form input {
  min-width: 0;
  height: 46px;
  padding: 9px;
  border: 0;
  outline: 0;
  color: #f1f4ed;
  background: transparent;
  font: 750 0.78rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.command-form input::placeholder { color: #56615e; }

.command-form button {
  align-self: stretch;
  padding: 0 15px;
  border: 0;
  border-left: 1px solid var(--line);
  color: #0a0e0c;
  background: var(--signal);
  font: 950 0.64rem/1 ui-monospace, monospace;
}

.command-help {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 8px 11px;
  border-top: 1px solid var(--line);
}

.command-help button {
  min-height: 26px;
  padding: 5px 7px;
  color: #87928e;
  background: #111719;
  font-size: 0.52rem;
}

.world-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 14px;
  border: 1px solid var(--line);
  background: var(--line);
}

.world-notes article {
  min-width: 0;
  padding: 18px;
  background: #101518;
}

.world-notes article > span {
  color: var(--rust);
  font: 950 1.8rem/1 Impact, sans-serif;
}

.world-notes h3 {
  margin: 4px 0 7px;
  font-size: 0.77rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.world-notes p {
  margin: 0;
  color: #899490;
  font-size: 0.66rem;
  line-height: 1.5;
}

.arcade-disclosure {
  margin-top: 14px;
  border-radius: 0;
  color: #737f7b;
  background: #0e1315;
}

.pellet-disclosure {
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(240, 199, 125, 0.22);
  color: #87938e;
  background: #0e1315;
  font: 750 0.58rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.welcome-modal {
  background: rgba(4, 6, 7, 0.91);
  backdrop-filter: blur(8px) grayscale(0.5);
}

.welcome-panel {
  position: relative;
  width: min(640px, 100%);
  overflow: hidden;
  border-radius: 0;
  text-align: left;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(232, 255, 69, 0.055) 50%, transparent 50.3%),
    radial-gradient(circle at 85% 5%, rgba(89, 133, 101, 0.24), transparent 42%),
    #101619;
}

.camp-panel {
  max-height: min(92vh, 880px);
  overflow-y: auto;
}

.camp-scene {
  padding: 11px 13px;
  border-left: 3px solid var(--rust);
  color: #d0d7d2 !important;
  background: rgba(231, 105, 62, 0.08);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.eviction-slip {
  display: grid;
  gap: 4px;
  margin: 11px 0;
  padding: 10px 12px;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  color: #bbc5bf;
  background: #181d1f;
  font: 800 0.63rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.eviction-slip b {
  color: #f0c77d;
}

.eviction-slip label {
  margin-top: 5px;
  color: #89948f;
  font-size: 0.52rem;
}

.eviction-slip input {
  width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid rgba(232, 255, 69, 0.34);
  border-radius: 0;
  outline: 0;
  color: #f0f3ec;
  background: #090d0e;
  font: 850 0.83rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: none;
}

.eviction-slip input:focus-visible {
  border-color: var(--signal);
  box-shadow: 0 0 0 2px rgba(232, 255, 69, 0.2);
}

.eviction-slip small {
  color: #77827e;
  font-size: 0.52rem;
  line-height: 1.4;
  text-transform: none;
}

.camp-book,
.solo-vow,
.camp-trade-lesson {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 11px;
  margin: 12px 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.035);
}

.camp-book > span {
  color: var(--signal);
  font-size: 1.5rem;
}

.camp-book strong,
.camp-book small,
.solo-vow strong,
.solo-vow small,
.camp-trade-lesson strong,
.camp-trade-lesson span {
  display: block;
}

.camp-book small,
.solo-vow small,
.camp-trade-lesson span {
  margin-top: 3px;
  color: #8f9b96;
  font-size: 0.63rem;
  line-height: 1.4;
}

.camp-gear-choices {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 13px 0;
  padding: 0;
  border: 0;
}

.camp-gear-choices legend {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  color: var(--signal);
  font: 900 0.61rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.camp-gear-choices button {
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e9eee7;
  background: #192023;
  text-align: left;
}

.camp-gear-choices button[aria-pressed="true"] {
  border-color: var(--signal);
  background: linear-gradient(135deg, rgba(232, 255, 69, 0.13), #192023 60%);
  box-shadow: inset 0 0 0 2px rgba(232, 255, 69, 0.18);
}

.camp-gear-choices button span {
  color: var(--rust);
  font: 900 0.53rem/1 ui-monospace, monospace;
}

.camp-gear-choices button strong {
  font-size: 0.78rem;
  text-transform: uppercase;
}

.camp-gear-choices button small {
  color: #94a09b;
  font-size: 0.62rem;
  line-height: 1.45;
}

.solo-vow {
  grid-template-columns: auto 1fr;
  cursor: pointer !important;
}

.solo-vow input {
  width: 24px;
  height: 24px;
  accent-color: var(--signal);
}

.camp-trade-lesson {
  border-color: rgba(240, 199, 125, 0.28);
}

.camp-choice-summary {
  min-height: 42px;
  margin: 10px 0 !important;
  color: #d4ddd7 !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.welcome-panel::after {
  content: "MQ";
  position: absolute;
  right: -13px;
  bottom: -39px;
  color: rgba(232, 255, 69, 0.045);
  font: 900 12rem/1 Impact, sans-serif;
  pointer-events: none;
}

.welcome-panel h2 {
  position: relative;
  z-index: 1;
  font: 900 clamp(2.6rem, 9vw, 5.4rem)/0.83 Impact, sans-serif;
  letter-spacing: -0.025em;
}

.welcome-panel h2 em {
  color: var(--signal);
  font-style: normal;
}

.welcome-panel > p:not(.modal-kicker),
.welcome-panel li {
  position: relative;
  z-index: 1;
  color: #aeb9b4;
  font-size: 0.78rem;
  line-height: 1.55;
}

.welcome-panel ul {
  position: relative;
  z-index: 1;
  margin: 14px 0;
  padding-left: 20px;
}

.enter-world {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 49px;
  border: 0;
  color: #09100c;
  background: var(--signal);
  font: 950 0.78rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.welcome-fullscreen {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 44px;
  margin: 0 0 8px;
  border: 1px solid rgba(232, 255, 69, 0.55);
  color: var(--signal);
  background: rgba(232, 255, 69, 0.06);
  font: 850 0.76rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.welcome-fullscreen:hover,
.welcome-fullscreen:focus-visible {
  border-color: #fff4c8;
  color: #fff4c8;
}

.enter-world:disabled {
  cursor: not-allowed !important;
  opacity: 0.35;
}

.option-house-world[hidden] { display: none; }

.option-house-world {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow: auto;
  color: #ebe7d6;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    radial-gradient(circle at 72% 10%, rgba(168, 92, 50, 0.25), transparent 35rem),
    #090c0d;
  background-size: 22px 22px, 22px 22px, auto, auto;
}

.house-topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px clamp(12px, 3vw, 36px);
  border-bottom: 1px solid rgba(232, 255, 69, 0.22);
  background: rgba(9, 12, 13, 0.93);
  backdrop-filter: blur(14px);
}

.house-topbar button {
  width: max-content;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #eef0e7;
  background: #182024;
  font: 850 0.62rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.house-topbar button:hover,
.house-topbar button:focus-visible { border-color: var(--signal); color: var(--signal); }

.house-topbar > div { text-align: center; }
.house-topbar > div span,
.house-topbar > div strong { display: block; }
.house-topbar > div span { color: var(--signal); font: 900 0.57rem/1.2 ui-monospace, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.house-topbar > div strong { margin-top: 4px; font-size: 0.78rem; }

.house-prealpha {
  justify-self: end;
  color: #84908c;
  font: 800 0.55rem/1.3 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.house-layout {
  width: min(1320px, calc(100% - clamp(20px, 5vw, 70px)));
  min-height: calc(100vh - 62px);
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.55fr);
  align-items: stretch;
  gap: clamp(16px, 3vw, 38px);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 58px) 0;
}

.house-cutaway {
  align-self: start;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.4));
}

.house-roofline {
  position: relative;
  width: 90%;
  height: 58px;
  margin: 0 auto -1px;
  overflow: hidden;
}

.house-roofline::before,
.house-roofline::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 58%;
  height: 78px;
  border: 1px solid #906241;
  background: repeating-linear-gradient(90deg, #623c2d 0 9px, #492c24 9px 17px);
}

.house-roofline::before { left: 0; transform: skewY(-25deg); transform-origin: 100% 100%; }
.house-roofline::after { right: 0; transform: skewY(25deg); transform-origin: 0 100%; }

.house-roofline span {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  width: 32px;
  height: 45px;
  border: 1px solid #96704e;
  background: #352a28;
  transform: translateX(-50%);
}

.floor-stack {
  border: 6px solid #4c4339;
  border-top-width: 9px;
  background: #201c1a;
  box-shadow: inset 14px 0 0 rgba(255, 255, 255, 0.025), inset -14px 0 0 rgba(0, 0, 0, 0.24);
}

.floor-stack > button {
  position: relative;
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 39px 1fr;
  align-content: center;
  gap: 1px 10px;
  padding: 10px 15px;
  overflow: hidden;
  border: 0;
  border-bottom: 4px solid #4c4339;
  color: #b7b4a7;
  background:
    linear-gradient(90deg, rgba(222, 175, 90, 0.06), transparent 48%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, 0.025) 47px 49px),
    #292725;
  text-align: left;
}

.floor-stack > button:last-child { border-bottom: 0; }
.floor-stack > button > span { grid-row: 1 / 3; align-self: center; color: #686b64; font: 950 1.65rem/1 Impact, sans-serif; }
.floor-stack > button strong { font-size: 0.7rem; text-transform: uppercase; }
.floor-stack > button small { color: #777a73; font: 700 0.53rem/1.2 ui-monospace, monospace; text-transform: uppercase; }

.floor-stack > button:hover,
.floor-stack > button:focus-visible,
.floor-stack > button.is-current {
  z-index: 2;
  outline: 2px solid var(--signal);
  outline-offset: -4px;
  color: #f0f1e7;
  background:
    linear-gradient(90deg, rgba(232, 255, 69, 0.15), transparent 60%),
    #31332d;
}

.floor-stack > button.is-current > span { color: var(--signal); }

.basement-floor {
  min-height: 112px !important;
  background: #191c1e !important;
}

.vault-peek {
  position: absolute;
  right: 9px;
  top: 9px;
  bottom: 9px;
  width: 82px;
  display: grid;
  place-content: center;
  border: 2px solid #68747a;
  color: #d1d8d7;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 9px, #657076 10px 11px, transparent 12px),
    repeating-linear-gradient(45deg, #252d30 0 5px, #20272a 5px 10px);
  box-shadow: inset 0 0 0 5px #14191b, 0 0 16px rgba(169, 210, 216, 0.12);
  font: 900 0.55rem/1.15 ui-monospace, monospace;
  text-align: center;
  opacity: 0.82;
}

.vault-peek b { margin-top: 3px; color: #f06a5b; font-size: 0.47rem; letter-spacing: 0.08em; }

.cutaway-caption {
  margin: 12px 4px 0;
  color: #737e7a;
  font: 700 0.56rem/1.5 ui-monospace, monospace;
}

.floor-room {
  position: relative;
  min-height: 650px;
  display: grid;
  grid-template-rows: minmax(300px, 1fr) auto;
  overflow: hidden;
  border: 8px solid #52483c;
  border-top-width: 14px;
  background: #27231f;
  box-shadow: inset 22px 0 0 rgba(255, 255, 255, 0.022), inset -22px 0 0 rgba(0, 0, 0, 0.2), 0 28px 70px rgba(0, 0, 0, 0.44);
}

.room-ceiling {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  background: repeating-linear-gradient(90deg, #312518 0 54px, #4b3927 54px 59px);
}

.room-scene {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  border-bottom: 7px solid #4c3c2e;
  background:
    linear-gradient(transparent 74%, rgba(0, 0, 0, 0.24) 75%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255, 255, 255, 0.025) 80px 81px),
    linear-gradient(#34413e 0 55%, #3c3329 56% 100%);
}

.room-window {
  position: absolute;
  top: 55px;
  width: 78px;
  height: 112px;
  border: 8px solid #443c33;
  border-radius: 45px 45px 0 0;
  background:
    linear-gradient(90deg, transparent 47%, #5b5042 48% 53%, transparent 54%),
    linear-gradient(0deg, transparent 47%, #5b5042 48% 53%, transparent 54%),
    linear-gradient(#131e28, #776f4b);
  box-shadow: 0 0 22px rgba(211, 188, 105, 0.13);
}

.room-window.left { left: 11%; }
.room-window.right { right: 11%; }

.room-stairs {
  position: absolute;
  bottom: 15px;
  width: 115px;
  padding: 10px;
  border: 1px solid #76624a;
  color: #d8c08e;
  background: repeating-linear-gradient(0deg, #3c3127 0 7px, #554432 7px 11px);
  font: 900 0.58rem/1 ui-monospace, monospace;
  text-align: center;
}

.stairs-up { right: 22px; }
.stairs-down { left: 22px; }

.room-hearth {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 104px;
  height: 125px;
  border: 12px solid #514336;
  border-bottom-width: 20px;
  background: radial-gradient(ellipse at 50% 100%, #f0b148 0 17%, #a94827 18% 29%, #181513 30% 65%, #29211c 66%);
  transform: translateX(-50%);
}

.bar-machine-prop {
  position: absolute;
  z-index: 2;
  right: 24%;
  bottom: 24px;
  width: 76px;
  height: 112px;
  display: none;
  place-content: center;
  border: 5px solid #4a3027;
  outline: 2px solid #826044;
  color: #e5c88f;
  background:
    radial-gradient(circle at 8px 8px, #c38a53 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 8px) 8px, #c38a53 0 2px, transparent 3px),
    repeating-linear-gradient(105deg, rgba(255,255,255,.04) 0 2px, transparent 2px 8px),
    #241b19;
  box-shadow: inset 0 0 18px rgba(231, 105, 62, 0.18), 8px 10px 0 rgba(0, 0, 0, 0.24);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
}

.bar-machine-prop i,
.bar-machine-prop b,
.bar-machine-prop small { display: block; }
.bar-machine-prop i { color: var(--rust); font: 950 2.1rem/1 Impact, sans-serif; font-style: normal; }
.bar-machine-prop b { margin-top: 5px; font-size: 0.47rem; letter-spacing: 0.05em; }
.bar-machine-prop small { margin-top: 4px; color: #9d7a57; font-size: 0.38rem; }

.chef-anchor {
  position: absolute;
  z-index: 3;
  left: 52%;
  bottom: 22px;
  display: none;
  grid-template-columns: 46px auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 7px 6px;
  border: 1px solid rgba(232, 255, 69, 0.6);
  color: #eff0e4;
  background: rgba(9, 14, 13, 0.9);
  box-shadow: 0 0 28px rgba(232, 255, 69, 0.12);
}

.chef-anchor i {
  grid-row: 1 / 3;
  width: 42px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 48% 48% 38% 38%;
  color: #11160f;
  background: var(--signal);
  font: 950 0.76rem/1 ui-monospace, monospace;
  font-style: normal;
}

.chef-anchor b { font-size: 0.64rem; }
.chef-anchor small { color: #9ea89e; font: 700 0.49rem/1 ui-monospace, monospace; }

.vault-cutaway {
  position: absolute;
  left: 47%;
  top: 22px;
  bottom: 23px;
  width: min(250px, 42%);
  display: none;
  place-content: center;
  border: 7px solid #505d62;
  outline: 4px dashed rgba(186, 209, 210, 0.3);
  outline-offset: 8px;
  color: #d5dfdd;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 38px, #637074 39px 43px, transparent 44px),
    repeating-linear-gradient(45deg, #1b2225 0 12px, #222a2d 12px 24px);
  box-shadow: inset 0 0 0 10px #121719, inset 0 0 50px rgba(111, 151, 155, 0.16);
  text-align: center;
}

.vault-cutaway::before {
  content: "CUTAWAY WALL";
  position: absolute;
  left: -30px;
  top: 50%;
  padding: 4px 6px;
  color: #d2d8d5;
  background: #4d4238;
  font: 900 0.47rem/1 ui-monospace, monospace;
  transform: rotate(-90deg) translateY(-50%);
}

.vault-cutaway i { display: block; color: #a9b9ba; font: 950 3.8rem/1 monospace; font-style: normal; }
.vault-cutaway strong { display: block; margin-top: 7px; font-size: 0.8rem; letter-spacing: 0.08em; }
.vault-cutaway small { display: block; margin-top: 5px; color: #f38270; font: 850 0.53rem/1.4 ui-monospace, monospace; }

.floor-room[data-floor="1"] .chef-anchor,
.floor-room[data-floor="1"] .bar-machine-prop { display: grid; }
.floor-room[data-floor="basement"] .vault-cutaway { display: grid; }
.floor-room[data-floor="basement"] .room-window,
.floor-room[data-floor="basement"] .room-hearth { display: none; }
.floor-room[data-floor="basement"] .room-scene { background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 29px), #202629; }
.floor-room[data-floor="roof"] .room-scene { background: linear-gradient(#0d1721 0 48%, #693f2e 49% 60%, #272923 61%); }
.floor-room[data-floor="roof"] .room-ceiling,
.floor-room[data-floor="roof"] .room-window,
.floor-room[data-floor="roof"] .room-hearth { display: none; }

.room-content {
  position: relative;
  z-index: 4;
  padding: clamp(22px, 4vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(15, 19, 20, 0.94);
}

.room-kicker {
  margin: 0 0 10px;
  color: var(--signal);
  font: 900 0.58rem/1 ui-monospace, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.room-content h2 {
  margin: 0;
  font: 950 clamp(3.4rem, 8vw, 7.5rem)/0.84 Impact, sans-serif;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.room-content h2 span { display: block; margin-top: 0.04em; color: transparent; -webkit-text-stroke: 1px #e7eadf; }
.room-content > p:not(.room-kicker):not(.house-command-note) { max-width: 720px; color: #a7b0aa; font-size: 0.78rem; line-height: 1.55; }

.room-status {
  width: max-content;
  max-width: 100%;
  margin: 14px 0;
  padding: 7px 9px;
  border: 1px solid rgba(232, 255, 69, 0.25);
  color: var(--signal);
  background: rgba(232, 255, 69, 0.05);
  font: 850 0.58rem/1.3 ui-monospace, monospace;
  text-transform: uppercase;
}

.house-actions {
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  gap: 7px;
}

.house-actions.cooking-visible { grid-template-columns: repeat(3, 1fr); }
.house-actions .cook-action[hidden] { display: none !important; }

.house-actions button {
  min-height: 43px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e8ece3;
  background: #20272a;
  font: 900 0.58rem/1.2 ui-monospace, monospace;
  text-transform: uppercase;
}

.house-actions button:hover:not(:disabled),
.house-actions button:focus-visible { border-color: var(--signal); color: var(--signal); }
.house-actions button:disabled { cursor: not-allowed !important; opacity: 0.3; }
.house-actions .chef-action { border-color: rgba(232, 255, 69, 0.32); }
.house-actions .cook-action { border-color: rgba(103, 214, 180, 0.42); color: #bff4e3; }

.bar-slot {
  position: relative;
  margin-top: 18px;
  padding: clamp(14px, 2.8vw, 24px);
  overflow: hidden;
  border: 4px solid #4a3027;
  outline: 1px solid #946947;
  color: #e6ded0;
  background:
    radial-gradient(circle at 13px 13px, #c18a55 0 2px, #543728 3px 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 13px) 13px, #c18a55 0 2px, #543728 3px 5px, transparent 6px),
    repeating-linear-gradient(112deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #251b19, #111618 62%);
  box-shadow: inset 0 0 44px rgba(170, 65, 35, 0.12), 0 18px 40px rgba(0,0,0,.35);
}

.slot-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.slot-head p {
  margin: 0 0 4px;
  color: #a97653;
  font: 900 0.52rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.slot-head h3 {
  margin: 0;
  color: #f0dec1;
  font: 950 clamp(1.6rem, 4vw, 2.5rem)/0.9 Impact, Haettenschweiler, sans-serif;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.slot-head > span {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid rgba(232,255,69,.28);
  color: var(--signal);
  background: rgba(232,255,69,.055);
  font: 950 0.67rem/1 ui-monospace, monospace;
  text-align: right;
}

.slot-head > span small {
  display: block;
  margin-top: 4px;
  color: #9caaa3;
  font-size: 0.48rem;
  text-transform: uppercase;
}

.slot-cabinet {
  padding: 13px;
  border: 2px solid #76513a;
  background: #080c0d;
  box-shadow: inset 0 0 0 5px #171313;
}

.slot-reels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.slot-reels output {
  min-width: 0;
  min-height: 66px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 5px solid #302621;
  color: #15100d;
  background:
    repeating-linear-gradient(0deg, rgba(79,44,25,.08) 0 1px, transparent 1px 8px),
    #dfcda7;
  box-shadow: inset 0 10px 15px rgba(65,36,22,.24), inset 0 -10px 15px rgba(65,36,22,.24);
  font: 950 clamp(0.65rem, 1.8vw, 0.9rem)/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: -0.04em;
  text-align: center;
}

.bar-slot.is-spinning .slot-reels output {
  animation: rustmouth-reel 180ms linear infinite;
}

@keyframes rustmouth-reel {
  0% { transform: translateY(-3px); filter: blur(0); }
  50% { transform: translateY(3px); filter: blur(1.5px); }
  100% { transform: translateY(-3px); filter: blur(0); }
}

.slot-status {
  min-height: 38px;
  margin: 10px 0;
  color: #c5cec8;
  font: 750 0.61rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.slot-limit {
  margin: 10px 0 0;
  color: #e8d8b5;
  font: 650 0.58rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.slot-controls {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(180px, 1.3fr);
  gap: 8px;
}

.slot-controls label {
  color: #8f9a95;
  font: 850 0.52rem/1.2 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slot-controls select,
.slot-controls button {
  width: 100%;
  min-height: 46px;
  margin-top: 5px;
  border: 1px solid #795239;
  border-radius: 0;
  color: #f1e8d9;
  background: #1b1716;
  font: 900 0.64rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.slot-controls select { padding: 8px 9px; }
.slot-controls button { color: #16100d; background: #d88a4d; text-transform: uppercase; }
.slot-controls button:hover:not(:disabled),
.slot-controls button:focus-visible { background: var(--signal); }
.slot-controls button:disabled { cursor: not-allowed !important; opacity: .42; }

.slot-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.1);
}

.slot-ledger span {
  min-width: 0;
  padding: 8px;
  color: #75827d;
  background: #111617;
  font: 800 0.48rem/1.25 ui-monospace, monospace;
  text-transform: uppercase;
}

.slot-ledger strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #dfe6df;
  font-size: 0.6rem;
  text-transform: none;
}

.slot-ledger strong.positive { color: #bfe66f; }
.slot-ledger strong.negative { color: #ff8e7d; }

.slot-odds {
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #8e9994;
  font: 700 0.57rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.slot-odds summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: #d6c09c;
  cursor: pointer !important;
  font-weight: 900;
  text-transform: uppercase;
}

.slot-odds table {
  width: 100%;
  border-collapse: collapse;
  color: #b7c0ba;
}

.slot-odds th,
.slot-odds td {
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.1);
  text-align: left;
}

.slot-odds th { color: #e2c899; background: rgba(255,255,255,.035); }
.slot-odds p { margin: 9px 0 0; }

.slot-disclosure {
  margin: 11px 0 0;
  padding: 10px;
  border: 1px dashed rgba(232,255,69,.22);
  color: #81908a;
  font: 700 0.53rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.house-command-note {
  margin: 14px 0 0;
  color: #6f7a76;
  font: 700 0.54rem/1.55 ui-monospace, monospace;
}

.house-command-form {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.house-command-form label {
  color: #78847e;
  font: 800 0.52rem/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
}

.house-command-form > div {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid rgba(232, 255, 69, 0.26);
  background: #090d0e;
}

.house-command-form input {
  min-width: 0;
  height: 42px;
  padding: 8px 10px;
  border: 0;
  outline: 0;
  color: #eef1e8;
  background: transparent;
  font: 750 0.66rem/1 ui-monospace, monospace;
}

.house-command-form button {
  border: 0;
  border-left: 1px solid rgba(232, 255, 69, 0.26);
  color: #0a100c;
  background: var(--signal);
  font: 950 0.55rem/1 ui-monospace, monospace;
}

.drawer[hidden] { display: none; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.drawer-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.72);
}

.drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(460px, 92vw);
  overflow: auto;
  padding: clamp(28px, 5vw, 48px);
  border-left: 1px solid var(--line);
  background: #11171a;
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);
}

.drawer-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  color: white;
  background: #1b2225;
  font-size: 1.4rem;
}

.drawer-panel h2 {
  margin: 0;
  font: 900 clamp(2.2rem, 7vw, 4.2rem)/0.9 Impact, sans-serif;
  text-transform: uppercase;
}

.drawer-panel > p:not(.panel-kicker) {
  color: #a0aaa6;
  font-size: 0.78rem;
  line-height: 1.6;
}

.empty-stalls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 20px 0;
}

.empty-stalls div {
  min-width: 0;
  padding: 15px 8px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  text-align: center;
}

.empty-stalls span,
.empty-stalls strong { display: block; }
.empty-stalls span { color: #697572; font: 800 0.52rem/1 monospace; }
.empty-stalls strong { margin-top: 6px; font-size: 0.68rem; text-transform: uppercase; }

.room-panel {
  width: min(560px, 96vw);
  border-left-color: rgba(71, 220, 242, 0.28);
  background:
    linear-gradient(rgba(71, 220, 242, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 220, 242, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 85% 8%, rgba(71, 220, 242, 0.12), transparent 24rem),
    #0d1417;
  background-size: 22px 22px, 22px 22px, auto, auto;
}

.room-panel h2 {
  color: #f0eee4;
  text-shadow: 4px 5px 0 rgba(27, 91, 103, 0.45);
}

.room-status-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin: 22px 0 16px;
  padding: 14px;
  border: 1px solid rgba(189, 246, 255, 0.2);
  background: rgba(7, 15, 17, 0.72);
}

.room-status-card .room-state-dot { margin-top: 4px; }
.room-status-card strong,
.room-status-card small { display: block; }
.room-status-card strong { color: #e9f6f4; font: 850 0.7rem/1.35 ui-monospace, monospace; }
.room-status-card small { margin-top: 4px; color: #84938f; font: 650 0.58rem/1.45 ui-monospace, monospace; }

.room-start-controls,
.room-active-controls {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.room-start-controls button,
.room-active-controls button,
.room-join-row input {
  min-height: 46px;
  border: 1px solid rgba(189, 246, 255, 0.24);
  border-radius: 2px;
  color: #edf7f5;
  background: #141e22;
  font: 850 0.68rem/1 ui-monospace, monospace;
}

.room-start-controls button,
.room-active-controls button { padding: 10px 13px; text-transform: uppercase; }
.room-start-controls button:hover:not(:disabled),
.room-start-controls button:focus-visible:not(:disabled),
.room-active-controls button:hover,
.room-active-controls button:focus-visible { border-color: #47dcf2; color: #47dcf2; }
.room-start-controls button:disabled { cursor: not-allowed !important; opacity: 0.4; }

.room-primary {
  color: #071112 !important;
  background: #bdf6ff !important;
  box-shadow: 5px 6px 0 rgba(27, 91, 103, 0.5);
}

.room-join-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.room-join-row label {
  display: grid;
  gap: 6px;
  color: #9badab;
  font: 850 0.54rem/1.2 ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.room-join-row input {
  width: 100%;
  padding: 9px 11px;
  color: #bdf6ff;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#online-room-code-note {
  margin: 0;
  color: #71827e;
  font: 650 0.57rem/1.45 ui-monospace, monospace;
}

.room-code-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 10px;
  padding: 13px;
  border: 1px solid rgba(232, 255, 69, 0.24);
  background: rgba(21, 28, 20, 0.72);
}

.room-code-card > span {
  color: #8f9a95;
  font: 850 0.5rem/1 ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.room-code-card output {
  grid-column: 1;
  color: var(--signal);
  font: 950 clamp(1.5rem, 7vw, 2.5rem)/1 ui-monospace, monospace;
  letter-spacing: 0.16em;
}

.room-code-card button { grid-column: 2; grid-row: 1 / 3; }
.room-leave { color: #ffc2b5 !important; border-color: rgba(237, 106, 85, 0.35) !important; }

.room-roster-card {
  margin-top: 22px;
  border-top: 1px solid rgba(189, 246, 255, 0.16);
  border-bottom: 1px solid rgba(189, 246, 255, 0.16);
  padding: 16px 0;
}

.room-roster-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.room-roster-card h3 {
  margin: 0;
  color: #edf5ef;
  font: 900 0.76rem/1 ui-monospace, monospace;
  text-transform: uppercase;
}

.room-roster-card > div > span { color: #47dcf2; font: 900 0.62rem/1 ui-monospace, monospace; }
.room-roster-card ul { display: grid; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }

.room-roster-card li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.room-roster-card li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #47dcf2;
  box-shadow: 0 0 9px rgba(71, 220, 242, 0.68);
}

.room-roster-card li strong,
.room-roster-card li small { min-width: 0; }
.room-roster-card li strong { overflow: hidden; color: #f0f5ef; font: 850 0.7rem/1.2 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.room-roster-card li small { color: #82908c; font: 650 0.54rem/1.2 ui-monospace, monospace; text-align: right; }
.room-roster-card li.is-you strong::after { content: " · YOU"; color: var(--signal); font-size: 0.54rem; }
.room-roster-card li.room-empty { grid-template-columns: 1fr; color: #74827e; font: 650 0.63rem/1.4 ui-monospace, monospace; }
.room-roster-card li.room-empty::before { display: none; }

.room-limitations {
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
}

.room-limitations summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  color: #c3ceca;
  font: 850 0.6rem/1.3 ui-monospace, monospace;
  cursor: pointer !important;
  text-transform: uppercase;
}

.room-limitations ul { margin: 0; padding: 0 28px 16px; }
.room-limitations li { margin-top: 8px; color: #8f9d98; font-size: 0.68rem; line-height: 1.5; }

.reality-lens {
  --lens-x: -120px;
  --lens-y: -120px;
  position: fixed;
  z-index: 70;
  left: 0;
  top: 0;
  width: 92px;
  height: 92px;
  border: 1px solid rgba(189, 246, 255, 0.42);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none !important;
  transform: translate3d(var(--lens-x), var(--lens-y), 0) translate(-50%, -50%);
  transition: opacity 140ms ease;
  background:
    radial-gradient(circle at 39% 34%, rgba(255, 255, 255, 0.2), transparent 10%),
    radial-gradient(circle, transparent 0 25%, rgba(75, 228, 255, 0.12) 38%, rgba(255, 73, 200, 0.1) 52%, transparent 70%);
  box-shadow:
    inset 12px 15px 20px rgba(1, 7, 10, 0.72),
    inset -9px -12px 18px rgba(189, 246, 255, 0.19),
    0 0 0 5px rgba(71, 220, 242, 0.025),
    0 0 24px rgba(71, 220, 242, 0.2),
    7px 0 0 -5px rgba(255, 50, 189, 0.58),
    -7px 0 0 -5px rgba(64, 245, 255, 0.64);
  backdrop-filter: blur(1.1px) contrast(1.18) saturate(1.5) hue-rotate(7deg);
  will-change: transform, opacity;
}

.reality-lens.is-visible { opacity: 0.78; }
.reality-lens::before,
.reality-lens::after,
.reality-lens span {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}
.reality-lens::before { inset: 10px; border: 1px solid rgba(255, 82, 210, 0.32); transform: translateX(3px); }
.reality-lens::after { inset: 17px; border: 1px solid rgba(80, 238, 255, 0.38); transform: translateX(-3px); }
.reality-lens span { inset: 33%; border: 1px solid rgba(238, 255, 221, 0.46); box-shadow: 0 0 12px rgba(232, 255, 69, 0.28); }
.reality-lens.is-imploding { animation: lens-implode 420ms cubic-bezier(.18,.75,.25,1); }

.reality-pulse {
  --pulse-x: 0px;
  --pulse-y: 0px;
  position: fixed;
  z-index: 69;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(189, 246, 255, 0.75);
  border-radius: 50%;
  pointer-events: none !important;
  transform: translate3d(var(--pulse-x), var(--pulse-y), 0) translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(255, 66, 196, 0.28), inset 0 0 14px rgba(71, 220, 242, 0.34);
  animation: reality-ripple 620ms cubic-bezier(.16,.72,.27,1) forwards;
}

.reality-pulse.is-touch { width: 20px; height: 20px; opacity: 0.52; animation-duration: 420ms; }

@keyframes lens-implode {
  0% { scale: 1; filter: brightness(1); }
  38% { scale: .36; filter: brightness(2.1) hue-rotate(45deg); }
  100% { scale: 1.08; filter: brightness(1); }
}

@keyframes reality-ripple {
  0% { opacity: .85; scale: .3; }
  100% { opacity: 0; scale: 5.8; }
}

.toast {
  border-radius: 0;
}

@media (max-width: 980px) {
  :root { --tile: clamp(30px, 5vw, 42px); }
  .world-layout { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr); }
  .side-stack.cooking-visible .inventory-card { grid-column: 1 / -1; }
  .map-viewport { max-height: 580px; }
  .house-layout { grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr); }
  .house-actions { grid-template-columns: repeat(2, 1fr); }
  .house-actions.cooking-visible { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .here-topbar { grid-template-columns: 1fr auto auto; }
  .server-lamp { grid-column: 1 / -1; grid-row: 2; padding: 7px 0 10px; text-align: center; }
  .masthead { padding-block: 35px 25px; }
  .build-stamp { width: 86px; }
  .build-stamp strong { font-size: 0.87rem; }
  .status-strip,
  .status-strip.cooking-visible { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-block { border-bottom: 1px solid var(--line); }
  .hp-meter { grid-column: 1 / -1; }
  .status-block:last-child { border-bottom: 0; }
  .side-stack { grid-template-columns: 1fr; }
  .side-stack.cooking-visible .inventory-card { grid-column: auto; }
  .map-viewport { min-height: 390px; padding: 12px; }
  .world-notes { grid-template-columns: 1fr; }
  .house-topbar { grid-template-columns: 1fr auto; }
  .house-topbar > div { grid-column: 1 / -1; grid-row: 2; padding-bottom: 4px; }
  .house-prealpha { font-size: 0.48rem; }
  .house-layout { grid-template-columns: 1fr; width: min(100% - 20px, 720px); }
  .house-cutaway { display: grid; grid-template-columns: 1fr; }
  .house-roofline { height: 36px; }
  .floor-stack { display: grid; grid-template-columns: repeat(6, 1fr); border-width: 4px; }
  .floor-stack > button { min-width: 0; min-height: 62px !important; grid-template-columns: 1fr; place-items: center; gap: 2px; padding: 6px 2px; border-right: 2px solid #4c4339; border-bottom: 0; text-align: center; }
  .floor-stack > button > span { grid-row: auto; font-size: 1rem; }
  .floor-stack > button small { display: none; }
  .vault-peek { display: none; }
  .cutaway-caption { text-align: center; }
  .floor-room { min-height: 610px; }
}

@media (max-width: 560px) {
  :root { --tile: 33px; }
  .here-shell { padding: 8px; }
  .arcade-exit,
  .chrome-button { padding-inline: 9px; font-size: 0.6rem; }
  .room-trigger { gap: 4px; }
  .room-trigger small { display: none; }
  .masthead { grid-template-columns: 1fr; }
  .masthead h1 { font-size: clamp(4rem, 21vw, 7rem); }
  .build-stamp { display: none; }
  .map-card-head { align-items: start; }
  .map-legend { display: grid; gap: 5px; }
  .map-viewport { min-height: 350px; }
  .map-footer { grid-template-columns: auto 1fr; padding: 10px; }
  .action-cluster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wild-button { min-height: 44px; font-size: 0.57rem; }
  .control-hint { grid-column: 1 / -1; }
  .combat-readout { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .combat-readout small { grid-column: auto; }
  .camp-gear-choices { grid-template-columns: 1fr; }
  .camp-gear-choices button { min-height: 96px; }
  .terminal-log { height: 250px; }
  .command-form button { padding-inline: 9px; }
  .command-help { overflow-x: auto; flex-wrap: nowrap; }
  .house-layout { padding-top: 14px; }
  .floor-room { grid-template-rows: 270px auto; min-height: 590px; border-width: 5px; border-top-width: 9px; }
  .room-scene { min-height: 270px; }
  .room-window { width: 58px; height: 86px; }
  .room-stairs { width: 83px; font-size: 0.48rem; }
  .room-hearth { width: 75px; height: 95px; }
  .chef-anchor { left: 40%; transform: scale(0.78); transform-origin: bottom left; }
  .bar-machine-prop { right: 20%; transform: scale(.78); transform-origin: bottom right; }
  .vault-cutaway { left: 38%; width: 53%; }
  .room-content h2 { font-size: clamp(3.3rem, 18vw, 5.5rem); }
  .house-actions { grid-template-columns: 1fr; }
  .slot-head { display: grid; }
  .slot-head > span { justify-self: start; text-align: left; }
  .slot-controls { grid-template-columns: 1fr; }
  .slot-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-reels output { min-height: 58px; font-size: .58rem; }
  .room-panel { width: 100vw; padding: 30px 18px 24px; }
  .room-join-row { grid-template-columns: 1fr; }
  .room-join-row button { width: 100%; }
  .room-code-card { grid-template-columns: minmax(0, 1fr); }
  .room-code-card button { grid-column: 1; grid-row: auto; }
  .room-roster-card li { grid-template-columns: auto minmax(0, 1fr); }
  .room-roster-card li small { grid-column: 2; text-align: left; }
}

@media (pointer: coarse) {
  .reality-lens { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .player-marker { transition: none; }
  .remote-player-marker { transition: none; }
  .hit-splat { animation-duration: 1ms; }
  .bar-slot.is-spinning .slot-reels output { animation: none; }
  .reality-lens {
    width: 70px;
    height: 70px;
    opacity: 0.34;
    transition: none;
    backdrop-filter: blur(.5px) contrast(1.05) saturate(1.08);
    box-shadow: inset 7px 9px 14px rgba(1, 7, 10, .45), 0 0 12px rgba(71, 220, 242, .1);
  }
  .reality-lens.is-imploding { animation: none; }
  .reality-pulse { animation: none; opacity: .2; scale: 1.3; }
}

/* HERE regional map pass: original town anchors and Lore Progress preserved. */
.map-grid { --walk-marker: #b6ff36; --action-marker: #ffffff; }
.map-grid[data-invert-markers="true"] { --walk-marker: #ffffff; --action-marker: #b6ff36; }
.tile.camp { background: radial-gradient(ellipse at center, #7b6846 0 55%, #294630 58%); }
.tile.camp::before { inset: 14%; border: 1px dashed #c4b18455; border-radius: 35%; }
.tile.trail { background: linear-gradient(130deg, #25452f 0 29%, #8b7855 31% 66%, #25452f 69%); }
.here-click-spiral { position: absolute; inset: -9%; width: 118%; height: 118%; z-index: 24; color: var(--walk-marker); pointer-events: none; filter: drop-shadow(0 0 2px #000); animation: here-spiral-arrive 850ms ease-out both; }
.here-click-spiral.is-action { color: var(--action-marker); }
.here-click-spiral path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes here-spiral-arrive { 0% { transform: scale(.78) rotate(-35deg); opacity: 1; } 55% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(1.06); opacity: 0; } }
.map-grid[data-reduced-markers="true"] .here-click-spiral { animation: none; }
.here-map-tools { display: flex; align-items: start; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.here-map-tools button, .here-map-options summary { min-height: 44px; padding: 11px 15px; }
.here-map-options { max-width: 100%; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: #14201b; }
.here-map-options summary { cursor: pointer; font-weight: 750; }
.here-map-options p { line-height: 1.6; color: #e3eddc; }
.here-map-options label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.here-map-options input { width: 20px; height: 20px; accent-color: #b6ff36; }
.here-atlas-note { margin: 12px 0 0; color: #b8c9bd; font-size: .8rem; line-height: 1.55; }
.camp-map-intro { padding: 12px 15px; border-left: 3px solid #b6ff36; background: #253529; color: #f0efd8; line-height: 1.6; }
.map-viewport.is-overview { --tile: clamp(11px, 2vw, 25px); min-height: 230px; height: auto; padding: 12px 0; }
.map-viewport.is-overview .place-banner { position: static; margin: 10px; }
.map-viewport.is-overview .map-object { font-size: clamp(5px, .7vw, 9px); }
@media (prefers-reduced-motion: reduce) { .here-click-spiral { animation: none; } }
.map-object[data-object="campShelter"] { border: 0; background: transparent; color: #f6e4b0; text-shadow: 0 1px #000; border-radius: 0; box-shadow: none; }
.map-object[data-object="campShelter"]::before { content: ""; position: absolute; inset: -7% -4%; clip-path: polygon(50% 0,100% 94%,0 94%); background: linear-gradient(120deg,#d9b97c 0 46%,#604834 47% 56%,#a9875d 57%); z-index: -1; }
.map-object[data-object="campFire"] { border-radius: 50%; border: 2px dotted #c9b58c; background: radial-gradient(ellipse at center,#ffe094 0 15%,#df7633 20% 33%,#2e2318 40%); color: #fff1c6; font-size: .4rem; text-shadow: 0 1px #000; }
.map-object[data-object="campNotice"] { border-radius: 1px; border: 2px solid #725740; background: repeating-linear-gradient(0deg,#e3d3a1 0 4px,#c7b78a 4px 5px); color: #372c1c; }

.regional-skill-strip{position:relative;display:flex;flex-wrap:wrap;gap:12px;margin:12px 0;padding:12px 18px;background:#131d19;border:1px solid #566443;border-radius:12px;color:#ebeed8}
.regional-skill-strip>div{display:grid;gap:4px;flex:1;min-width:160px}.regional-skill-strip span{color:#c8d19e;font-size:12px;text-transform:uppercase;letter-spacing:.12em}.regional-skill-strip strong{font-size:15px}.regional-skill-strip small{font-size:12px;color:#a7b5a6}
.regional-travel-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.regional-travel-controls .chrome-button{min-height:44px}.regional-travel-controls [aria-pressed=true]{background:#c7ff36;color:#16200e}
.regional-journey{font-size:13px;line-height:1.5;color:#d0d8bb;margin:10px 0}.regional-atlas,.regional-rules{width:100%;background:rgba(8,13,11,.55);border:1px solid #42513e;border-radius:10px;padding:12px;margin:10px 0}.regional-atlas summary,.regional-rules summary{cursor:pointer;min-height:24px;color:#e7e9c4;font-weight:700}.regional-atlas p,.regional-rules p{font-size:12px;line-height:1.6;color:#bfcbb8}.regional-atlas svg{display:block;width:100%;max-height:430px;background:radial-gradient(ellipse,#24312b,#0b120e);border:1px solid #3d4f3b;border-radius:8px;margin:12px 0}.regional-atlas svg text{fill:#dce5bd;font-size:13px;font-family:system-ui}.regional-atlas svg circle{fill:#c8ff36;stroke:#092811;stroke-width:3}.atlas-route{stroke:#a9ae72;stroke-width:2;stroke-dasharray:7 5}.regional-atlas #regional-destinations{display:flex;flex-wrap:wrap;gap:8px}.regional-atlas button{min-height:44px;font-size:12px;max-width:100%;white-space:normal}.regional-atlas button[aria-current=location]{border-color:#c8ff36;color:#c8ff36}
.map-grid .tile>.microtile-lines{position:absolute;inset:0;background:linear-gradient(90deg,transparent 49%,rgba(216,237,192,.11) 49%,rgba(216,237,192,.11) 51%,transparent 51%),linear-gradient(transparent 49%,rgba(216,237,192,.11) 49%,rgba(216,237,192,.11) 51%,transparent 51%);pointer-events:none}
#fractional-xp-drop{pointer-events:none;position:absolute;right:15px;top:12px;opacity:0;color:#c8ff36;text-shadow:0 1px 3px #000;font-weight:700;font-size:13px;background:#08180ddd;padding:5px 8px;border-radius:6px}#fractional-xp-drop.is-visible{opacity:1;animation:regional-xp-drop 1.8s ease-out both}@keyframes regional-xp-drop{0%{transform:translateY(12px);opacity:0}15%,70%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.here-atlas-note a{color:#c9e592;text-decoration:underline}.map-object{z-index:3}.player-marker{z-index:7}
@media(max-width:600px){.regional-skill-strip{padding:12px;gap:9px}.regional-skill-strip>div{min-width:135px}.regional-atlas svg text{font-size:16px}.regional-travel-controls{display:grid;grid-template-columns:1fr 1fr}.regional-travel-controls #continue-region{grid-column:1/-1}.regional-skill-strip strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){#fractional-xp-drop.is-visible{animation:none}.player-marker{transition:none}}