:root {
  color-scheme: dark;
  --ink: #e7efdf;
  --muted: #93a398;
  --green: #58f29a;
  --amber: #e2b866;
  --red: #ff6b5e;
  --cyan: #67d8e8;
  --panel: #111714;
  --panel-2: #171f1b;
  --line: #34443b;
  --black: #090d0c;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  min-width: 320px;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.crawler-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  min-height: 620px;
}

.game-header {
  align-items: center;
  background: #0d1210;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  min-height: 70px;
  padding: 10px 18px;
}

.brand { color: var(--ink); display: flex; flex-direction: column; min-width: 0; text-decoration: none; }
.brand span { color: var(--green); font-size: 21px; font-weight: 900; overflow-wrap: anywhere; }
.brand span.long-game-name { font-size: 14px; }
.brand strong { color: var(--muted); font-size: 10px; }

.vitals { display: flex; gap: 22px; }
.vitals > div { display: grid; gap: 2px; min-width: 54px; }
.vitals span { color: var(--muted); font-size: 10px; }
.vitals strong { color: var(--amber); font-size: 15px; }
.vitals i { background: #2a1715; display: block; height: 4px; width: 100px; }
.vitals b { background: var(--red); display: block; height: 100%; width: 0; }

.game-header nav { align-items: center; display: flex; gap: 14px; justify-content: flex-end; }
.game-header nav a { color: var(--cyan); font-size: 12px; text-decoration: none; }
.icon-button, .section-title button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  height: 36px;
  min-width: 36px;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  min-height: 0;
}

.viewport-panel {
  background: #0b100e;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  padding: 14px;
}

.room-heading { align-items: end; display: flex; justify-content: space-between; padding: 0 2px 10px; }
.room-heading span { color: var(--muted); font-size: 10px; }
.room-heading h1 { font-size: clamp(17px, 2.2vw, 26px); margin: 3px 0 0; }
.status { border: 1px solid var(--line); padding: 5px 7px; }
.status.online { border-color: #307b50; color: var(--green); }

.canvas-wrap {
  background: #050806;
  border: 1px solid #425247;
  min-height: 280px;
  overflow: hidden;
  position: relative;
}

#dungeon { display: block; height: 100%; image-rendering: pixelated; inset: 0; outline: 0; position: absolute; width: 100%; }
#dungeon:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }

.move-pad {
  bottom: 14px;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(3, 42px);
  left: 14px;
  position: absolute;
}
.move-pad button {
  background: rgba(9, 13, 12, .9);
  border: 1px solid #637269;
  color: var(--ink);
  height: 42px;
  padding: 0;
}
.move-pad button[data-command="look"] { color: var(--amber); }
.move-pad button:disabled { cursor: default; opacity: .24; }

.entity-actions {
  align-items: center;
  background: rgba(9, 13, 12, .94);
  border: 1px solid var(--amber);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: calc(100% - 28px);
  max-width: calc(100% - 28px);
  overflow-y: auto;
  padding: 8px;
  position: absolute;
  right: 14px;
  top: 14px;
}
.entity-actions strong { color: var(--amber); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-actions button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 34px;
  overflow-wrap: anywhere;
}
.entity-actions .action-close {
  color: var(--muted);
  min-height: 30px;
  min-width: 30px;
  padding: 0 8px;
}
.entity-actions.inventory-actions {
  flex-wrap: wrap;
  margin-top: 8px;
  max-width: 100%;
  position: static;
  width: 100%;
}
.entity-actions.room-actions {
  grid-column: 1 / -1;
  margin-top: 8px;
  max-height: none;
  max-width: 100%;
  position: static;
  width: 100%;
}
#room-actions-host:empty { display: none; }
.hidden { display: none !important; }

.room-description {
  color: #bac7bd;
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-height: 68px;
  overflow: auto;
  padding: 10px 2px 0;
}

.side-panel {
  background: var(--panel);
  border-left: 1px solid var(--line);
  display: grid;
  grid-template-rows: minmax(110px, .7fr) minmax(110px, .7fr) minmax(180px, 1.4fr);
  min-height: 0;
}
.side-panel.has-shop {
  grid-template-rows: minmax(90px, .6fr) minmax(90px, .6fr) minmax(100px, .7fr) minmax(180px, 1.4fr);
}
.side-panel section { min-height: 0; padding: 12px; }
.side-panel section + section { border-top: 1px solid var(--line); }
.inventory-section { display: flex; flex-direction: column; }
.inventory-section .entity-list { flex: 1; max-height: none; min-height: 0; }
.section-title { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; }
.section-title h2 { color: var(--muted); font-size: 11px; margin: 0; text-transform: uppercase; }
.section-title span { color: var(--amber); font-size: 11px; }
.section-title button { height: 26px; min-width: 26px; }

.entity-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: calc(100% - 26px); overflow: auto; }
.entity-list button {
  align-items: center;
  background: #19211d;
  border: 1px solid #3c4b42;
  color: var(--ink);
  display: flex;
  gap: 7px;
  min-height: 34px;
  padding: 5px 8px;
}
.entity-list button[data-kind="npc"] { border-color: #713d37; }
.entity-list button[data-kind="player"] { border-color: #376b73; }
.entity-list button[data-kind="item"] { border-color: #6f603f; }
.entity-list button i { background: var(--amber); height: 7px; width: 7px; }
.entity-list button[data-kind="npc"] i { background: var(--red); }
.entity-list button[data-kind="player"] i { background: var(--cyan); }
.empty { color: #68766d; font-size: 11px; margin: 4px 0; }

.event-log {
  color: #aab8ae;
  font-size: 11px;
  height: calc(100% - 26px);
  line-height: 1.45;
  overflow: auto;
  scrollbar-color: var(--green) #151d19;
  white-space: pre-wrap;
}
.event-log .command { color: var(--green); }
.event-log .danger { color: var(--red); }

.command-deck {
  align-items: center;
  background: #0d1210;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(240px, 1fr);
  min-height: 66px;
  padding: 10px 14px;
}
.quick-actions { display: flex; gap: 6px; }
.quick-actions button {
  background: #18201c;
  border: 1px solid var(--line);
  color: var(--muted);
  min-height: 40px;
}
.command-deck form {
  align-items: center;
  background: #050806;
  border: 1px solid #526258;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 44px;
}
.command-deck form span { color: var(--green); padding-left: 12px; }
.command-deck input { background: transparent; border: 0; color: var(--ink); min-width: 0; outline: 0; padding: 10px; }
.command-deck form button { align-self: stretch; background: var(--green); border: 0; color: #07100a; font-weight: 900; padding: 0 18px; }

.login-overlay {
  align-items: center;
  background-color: rgba(4, 7, 6, .88);
  background-image: url('/static/assets/dungeon/stone-floor.png');
  background-blend-mode: multiply;
  background-position: center;
  background-size: cover;
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 10;
}
.login-dialog {
  background: #0d1310;
  border: 1px solid #65746a;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .35);
  max-width: 440px;
  padding: 30px;
  width: 100%;
}
.eyebrow { color: var(--green); font-size: 10px; margin: 0 0 8px; }
.login-dialog h1 { color: var(--amber); font-family: Georgia, serif; font-size: 30px; margin: 0; }
.login-copy { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 10px 0 22px; }
.login-dialog form { display: grid; gap: 8px; }
.login-dialog label { color: var(--muted); font-size: 10px; margin-top: 4px; }
.login-dialog input { background: #050806; border: 1px solid #4b5b51; color: var(--ink); min-height: 44px; outline: 0; padding: 10px; }
.login-dialog input:focus { border-color: var(--green); }
.login-dialog form button { background: var(--green); border: 0; color: #07100a; font-weight: 900; margin-top: 8px; min-height: 46px; }
.login-error { color: var(--red); font-size: 11px; min-height: 16px; margin: 2px 0 0; }
.terminal-link { color: var(--cyan); display: inline-block; font-size: 11px; margin-top: 14px; }

@media (max-width: 900px) {
  .crawler-shell { height: auto; min-height: 100dvh; }
  .game-header { grid-template-columns: 1fr auto; }
  .vitals { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
  .game-layout { grid-template-columns: 1fr; }
  .viewport-panel { min-height: 66dvh; }
  .side-panel { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(170px, 1fr); }
  .side-panel.has-shop { grid-template-rows: auto auto minmax(170px, 1fr); }
  .side-panel.has-shop .inventory-section { grid-column: 1 / -1; }
  .log-section { grid-column: 1 / -1; }
  .command-deck { grid-template-columns: 1fr; }
  .quick-actions { overflow-x: auto; }
  .quick-actions button { flex: 1 0 72px; }
}

@media (max-width: 560px) {
  .crawler-shell { height: 100dvh; min-height: 0; overflow: hidden; }
  .game-header { gap: 8px; min-height: 58px; padding: 8px 10px; }
  .game-header nav a { display: none; }
  .vitals { gap: 8px; }
  .vitals i { width: 74px; }
  .game-layout { min-height: 0; overflow-y: auto; }
  .viewport-panel { min-height: 530px; padding: 9px; }
  .canvas-wrap { min-height: 350px; }
  .room-description { max-height: 90px; }
  .side-panel { grid-template-columns: 1fr; grid-template-rows: auto auto 210px; min-height: 390px; }
  .side-panel.has-shop { grid-template-rows: auto auto auto 210px; }
  .side-panel.has-shop .inventory-section { grid-column: auto; }
  .log-section { grid-column: auto; }
  .command-deck { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .quick-actions { gap: 4px; overflow: visible; }
  .quick-actions button { flex: 1 1 0; font-size: 12px; min-width: 0; padding-inline: 4px; }
  .login-dialog { padding: 22px; }
  .login-dialog h1 { font-size: 25px; }
  .entity-actions:not(.inventory-actions) { align-items: stretch; flex-direction: column; }
  .entity-actions.room-actions {
    bottom: calc(116px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    left: 10px;
    margin: 0;
    max-height: 52dvh;
    overflow-y: auto;
    position: fixed;
    right: 10px;
    top: auto;
    width: auto;
    z-index: 6;
  }
  .entity-actions.room-actions > button:not(.action-close) {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}