/* Pixel Earth — cozy wooden-panel UI over a pixel world. */

:root {
  --wood: #0d0b29;
  --wood-2: #15123d;
  --wood-edge: #5a52b0;
  --cream: #f5efe2;
  --cream-dim: #aaa4cc;
  --gold: #f0d060;
  --leaf: #8cc063;
  --berry: #d65a5a;
  --night: #1a2030;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --font-pixel: "Pixelify Sans", "Segoe UI", sans-serif;
  --font-num: "VT323", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; width: 100%;
  background: var(--night);
  color: var(--cream);
  font-family: var(--font-pixel);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: none;
}

#world {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#worldmap {
  position: fixed; inset: 0; z-index: 35;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#worldmap[hidden] { display: none; }

#btn-map-close {
  position: fixed; z-index: 36;
  top: calc(12px + var(--safe-top)); right: 12px;
  padding: 9px 14px;
  font-family: var(--font-pixel); font-size: 15px; font-weight: 600;
  color: var(--cream); background: var(--wood);
  border: 2px solid var(--wood-edge); border-radius: 10px;
  box-shadow: 0 3px 0 #06051a;
  cursor: pointer;
}
#btn-map-close[hidden] { display: none; }

/* ============================================================ buttons == */

.btn {
  display: block; width: 100%;
  margin: 8px 0; padding: 11px 16px;
  font-family: var(--font-pixel); font-size: 16px; font-weight: 600;
  color: var(--cream); text-align: center;
  background: var(--wood-2);
  border: 2px solid var(--wood-edge);
  border-radius: 10px;
  box-shadow: 0 3px 0 #06051a, inset 0 1px 0 rgba(255,255,255,0.08);
  cursor: pointer;
  transition: transform 0.06s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #06051a; }
.btn.primary {
  background: linear-gradient(#9bc46c, #79a84e);
  border-color: #2e8c78; color: #243216;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.btn.danger { border-color: #8a4a45; color: #e8a09a; }
.btn.big { font-size: 19px; padding: 14px 16px; }
.btn.small { display: inline-block; width: auto; margin: 0; padding: 5px 12px; font-size: 13px; }
.btn small { font-weight: 400; font-size: 11px; opacity: 0.75; }

/* ======================================================= start screen == */

#start-screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(240,208,96,0.07), transparent 50%),
    linear-gradient(#1a2030 0%, #232c44 55%, #2e3a2a 100%);
}
#start-screen.gone { display: none; }

.start-card {
  position: relative;
  width: 100%; max-width: 360px;
  padding: 26px 22px calc(14px + var(--safe-bot));
  background: var(--wood);
  border: 3px solid var(--wood-edge);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), inset 0 2px 0 rgba(255,255,255,0.06);
  text-align: center;
  animation: card-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.game-title {
  margin: 0; font-size: 44px; line-height: 1; font-weight: 700;
  color: var(--gold);
  text-shadow: 0 3px 0 #8a6a20, 0 6px 12px rgba(0,0,0,0.5);
  letter-spacing: 1px;
}
.game-title span { color: var(--leaf); text-shadow: 0 3px 0 #4a6e30, 0 6px 12px rgba(0,0,0,0.5); }
.tagline {
  margin: 6px 0 18px; font-family: var(--font-num);
  font-size: 18px; color: var(--cream-dim); letter-spacing: 0.5px;
}
/* testworld1: always visible test-build marker on the start screen */
.testworld-badge {
  display: inline-block; margin: -8px 0 16px; padding: 3px 8px;
  font-family: var(--font-num); font-size: 15px; letter-spacing: 1px;
  color: #15123d; background: #f7d26b; border: 2px solid #15123d;
}

.outfit-row {
  display: flex; justify-content: center; gap: 10px; margin: 0 0 18px;
}
.outfit-swatch {
  width: 52px; height: 58px; padding: 4px;
  background: var(--wood-2);
  border: 2px solid var(--wood-edge); border-radius: 10px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.outfit-swatch canvas { image-rendering: pixelated; width: 36px; height: 45px; }
.outfit-swatch.sel { border-color: var(--gold); background: #564028; box-shadow: 0 0 12px rgba(240,208,96,0.35); }

.or { font-family: var(--font-num); font-size: 16px; color: var(--cream-dim); margin: 10px 0 2px; }

.search-row { display: flex; gap: 8px; }
.search-row input {
  flex: 1; min-width: 0;
  padding: 10px 12px; font-family: var(--font-pixel); font-size: 15px;
  color: var(--cream); background: #06051a;
  border: 2px solid var(--wood-edge); border-radius: 10px; outline: none;
}
.search-row input:focus { border-color: var(--gold); }
.search-row .btn { width: auto; margin: 0; }

#place-status { min-height: 18px; font-family: var(--font-num); font-size: 15px; color: var(--gold); margin-top: 6px; }

.credits { margin: 14px 0 0; font-size: 10px; opacity: 0.45; }

/* ================================================================= HUD == */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 20; }

.hud-top {
  position: absolute; top: calc(10px + var(--safe-top)); left: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.hud-top-main {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.hud-state-row {
  display: flex; justify-content: flex-end; gap: 6px; flex-wrap: nowrap;
}

.level-wrap { display: flex; align-items: center; gap: 6px; }
.level-badge {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--wood); border: 2px solid var(--gold); border-radius: 12px;
  font-family: var(--font-num); font-size: 24px; color: var(--gold);
  box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}
.level-badge.frame-forest { box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 0 3px #2e8c78, 0 0 16px rgba(125,190,93,0.55); }
.level-badge.frame-ember { box-shadow: 0 3px 8px rgba(0,0,0,0.4), 0 0 0 3px #b85d32, 0 0 16px rgba(232,148,63,0.62); }
.xp-track {
  width: 90px; height: 10px;
  background: var(--wood); border: 2px solid var(--wood-edge); border-radius: 6px;
  overflow: hidden;
}
#xp-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), #f7e9a0);
  transition: width 0.4s;
}

.hud-pills { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.pill {
  padding: 4px 9px; border-radius: 999px;
  background: rgba(6, 5, 26, 0.88); border: 1.5px solid var(--wood-edge);
  font-family: var(--font-num); font-size: 16px; line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
.pill b { color: var(--gold); font-weight: 400; }
.pill.zone-safe { border-color: var(--leaf); color: #c9fbe8; }
.pill.zone-wild { border-color: #d4a832; color: var(--gold); }
.pill.zone-wilds { border-color: var(--wood-edge); color: var(--cream-dim); }
.pill.alt-pill { border-color: #8aa6c0; color: #dcecf8; }
.pill.gps-ok { border-color: var(--leaf); }
.pill.gps-wait { border-color: var(--gold); color: var(--cream); }
.pill.gps-weak { border-color: #d4a832; color: var(--gold); }
.pill.gps-bad { border-color: var(--berry); color: #e8a09a; }
.pill.zone-pulse { animation: zone-pulse 0.7s ease-out; }
@keyframes zone-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); box-shadow: 0 0 14px rgba(240,208,96,0.5); }
  100% { transform: scale(1); }
}

.map-mode-panel {
  position: absolute; z-index: 21;
  top: calc(86px + var(--safe-top)); left: 50%; transform: translateX(-50%);
  width: min(386px, calc(100% - 24px));
  display: grid; gap: 5px;
  padding: 8px 10px;
  color: var(--cream);
  background: linear-gradient(rgba(42,35,31,0.9), rgba(28,24,22,0.9));
  border: 2px solid var(--wood-edge); border-radius: 12px;
  box-shadow: 0 7px 18px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.map-mode-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0;
}
.map-mode-head b {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; color: var(--gold); text-shadow: 0 1px 0 #06051a;
}
.map-mode-head span {
  flex: 0 0 auto;
  font-family: var(--font-num); font-size: 15px; color: var(--cream-dim);
}
.map-mode-caret { display: none; }

/* Normal exploration: the world is the star — collapse to a slim chip.
   Tags/detail stay in the DOM and return on tap (.expanded). */
.map-mode-panel.mode-normal {
  width: auto; max-width: calc(100% - 24px);
  padding: 6px 14px; border-radius: 999px;
  pointer-events: auto; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map-mode-panel.mode-normal:not(.expanded) .map-mode-tags,
.map-mode-panel.mode-normal:not(.expanded) .map-mode-detail { display: none; }
.map-mode-panel.mode-normal .map-mode-caret {
  display: inline; font-size: 12px; color: var(--cream-dim);
}
.map-mode-panel.mode-normal.expanded {
  width: min(386px, calc(100% - 24px));
  border-radius: 12px;
}
.map-mode-panel.mode-normal.expanded .map-mode-caret { transform: rotate(180deg); }
.map-mode-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 20px;
}
.map-mode-tag {
  min-height: 19px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(6, 5, 26,0.72); border: 1.5px solid rgba(109,86,56,0.9);
  font-family: var(--font-num); font-size: 14px; line-height: 1;
  color: var(--cream-dim);
}
.map-mode-detail {
  min-height: 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-num); font-size: 15px; line-height: 1.1;
  color: var(--cream);
}
.map-mode-panel.mode-dungeon { border-color: #8f6ee0; background: linear-gradient(rgba(48,32,72,0.92), rgba(26,18,44,0.92)); }
.map-mode-panel.mode-dungeon .map-mode-tag { border-color: #8f6ee0; color: #d9cbff; }
.map-mode-panel.mode-event { border-color: #d34e5a; background: linear-gradient(rgba(74,32,38,0.92), rgba(42,24,28,0.92)); }
.map-mode-panel.mode-event .map-mode-tag { border-color: #d34e5a; color: #ffc4c8; }
.map-mode-panel.mode-pvp { border-color: #d9a33a; background: linear-gradient(rgba(62,42,30,0.92), rgba(35,26,20,0.92)); }
.map-mode-panel.mode-pvp .map-mode-tag { border-color: #d9a33a; color: #ffe0a0; }
.map-mode-panel.mode-normal .map-mode-tag.good { border-color: var(--leaf); color: #c9fbe8; }

/* ------------------------------------------------------------ bottom -- */

.hud-bottom {
  position: absolute; left: 0; right: 0;
  bottom: calc(14px + var(--safe-bot));
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 12px;
}

#joystick {
  width: 104px; height: 104px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(6, 5, 26,0.85), rgba(6, 5, 26,0.9));
  border: 2.5px solid var(--wood-edge);
  pointer-events: auto; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
  opacity: 0.85; transition: opacity 0.15s;
}
#joystick:active { opacity: 1; }
#joystick.hidden { display: none; }
#joy-thumb {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(#5a52b0, #15123d);
  border: 2px solid #8a6f4d;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.12);
  pointer-events: none;
}

.hud-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-left: auto; }

.round-btn {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--wood); border: 2px solid var(--wood-edge);
  font-size: 20px; cursor: pointer; pointer-events: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
}
.round-btn:active { transform: scale(0.93); }
#quest-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px; border-radius: 10px;
  background: var(--berry); border: 2px solid #06051a;
  font-family: var(--font-num); font-size: 13px; color: #fff;
  display: none; align-items: center; justify-content: center;
}

#btn-action {
  display: none;
  width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #f7e9a0, var(--gold) 70%);
  border: 3px solid #f2c96a;
  box-shadow: 0 6px 18px rgba(240,208,96,0.45), 0 4px 0 #8a6a20;
  cursor: pointer; pointer-events: auto;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  animation: action-pulse 1.4s ease-in-out infinite;
  font-family: var(--font-pixel);
}
#btn-action.show { display: flex; }
#btn-action:active { transform: scale(0.94); }
@keyframes action-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
#action-icon { font-size: 28px; line-height: 1.1; }
#action-label { font-size: 12px; font-weight: 700; color: #5a4410; }

/* short displays: shrink the bottom cluster so the world stays visible */
@media (max-height: 700px) {
  #joystick { width: 92px; height: 92px; }
  #joy-thumb { width: 40px; height: 40px; }
  .round-btn { width: 42px; height: 42px; font-size: 18px; }
  .hud-actions { gap: 6px; }
  #btn-action { width: 72px; height: 72px; }
}

/* ============================================================= modals == */

.modal-bg {
  position: fixed; inset: 0; z-index: 40;
  display: none; align-items: center; justify-content: center;
  background: rgba(6, 5, 26, 0.6); backdrop-filter: blur(3px);
  pointer-events: auto; padding: 20px;
}
.modal-bg.show { display: flex; }

.modal {
  width: 100%; max-width: 340px; max-height: 78vh; overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  background: var(--wood); border: 3px solid var(--wood-edge); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
  animation: card-in 0.32s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.modal h2 { margin: 0 0 14px; font-size: 22px; color: var(--gold); }
.modal-foot-note { font-family: var(--font-num); font-size: 15px; opacity: 0.6; margin: 10px 0 2px; }
.menu-row { font-size: 15px; margin-bottom: 10px; color: var(--cream-dim); }
.menu-section-title {
  font-family: var(--font-num); font-size: 15px; color: var(--gold);
  margin: 13px 0 5px; text-align: left;
  border-bottom: 1px solid var(--wood-edge); padding-bottom: 2px;
}
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menu-grid .btn { margin: 0; padding: 11px 6px; font-size: 14px; }
.menu-grid .btn small { font-size: 10px; }

.inv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 4px 0;
  background: var(--wood-2); border-radius: 8px; font-size: 15px;
}
.inv-row.dim { opacity: 0.45; }
.inv-icon { font-size: 20px; }
.inv-n { margin-left: auto; font-family: var(--font-num); font-size: 21px; color: var(--gold); }

.quest-row {
  padding: 10px 12px; margin: 6px 0;
  background: var(--wood-2); border-radius: 10px;
  border-left: 4px solid var(--wood-edge);
}
.quest-row.done { border-left-color: var(--leaf); }
.quest-label { font-size: 14px; margin-bottom: 6px; }
.quest-label small {
  display: block; margin-top: 3px;
  font-family: var(--font-num); font-size: 12px; color: var(--cream-dim);
}
.quest-row.board { border-left-color: #8a6fd0; }
.quest-bar {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: #06051a; margin-bottom: 6px;
}
.quest-bar > div { height: 100%; background: var(--leaf); transition: width 0.3s; }
.quest-row.done .quest-bar > div { background: var(--gold); }
.quest-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-num); font-size: 15px; color: var(--cream-dim);
}

.poi-card { text-align: center; }
#poi-kicker { font-family: var(--font-num); font-size: 17px; color: var(--gold); }
#poi-name { margin: 8px 0 4px; }
.poi-cat { font-family: var(--font-num); font-size: 16px; color: var(--cream-dim); margin-bottom: 8px; }
.poi-hub {
  display: grid; gap: 3px;
  padding: 9px 10px; margin: 8px 0;
  text-align: left; background: var(--wood-2);
  border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.poi-hub b { color: var(--gold); font-size: 14px; }
.poi-hub span {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.poi-actions { display: grid; gap: 7px; margin: 8px 0 10px; }
.poi-action {
  display: grid; gap: 2px; justify-items: center;
  min-height: 58px; padding-block: 8px;
}
.poi-action span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.poi-action small {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-num); color: var(--cream-dim); font-size: 12px;
}
.poi-market {
  display: grid; gap: 6px;
  margin-top: 2px; padding-top: 8px;
  border-top: 1.5px solid rgba(238, 216, 166, 0.22);
}
.poi-market-title {
  display: flex; justify-content: space-between; gap: 8px; align-items: end;
  color: var(--gold); font-size: 13px; letter-spacing: 0;
}
.poi-market-title small {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.poi-market-row {
  min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px;
  align-items: center;
  padding: 8px 9px;
  color: var(--cream); background: #33261e;
  border: 1.5px solid var(--wood-edge); border-radius: 8px;
  font-family: var(--font-pixel); cursor: pointer;
}
.poi-market-row.sell { border-color: #7ef0c6; }
.poi-market-row.buy { border-color: #b29b55; }
.poi-market-row span,
.poi-market-row small {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.poi-market-row span { font-size: 12px; }
.poi-market-row small {
  grid-column: 1 / 2;
  font-family: var(--font-num); color: var(--cream-dim); font-size: 12px;
}
.poi-market-row b {
  grid-row: 1 / span 2; grid-column: 2;
  color: var(--gold); font-size: 11px;
}
.poi-market-row:disabled { opacity: 0.5; cursor: default; }
.poi-board {
  display: grid; gap: 6px;
  margin-top: 2px; padding-top: 8px;
  border-top: 1.5px solid rgba(238, 216, 166, 0.22);
}
.poi-board-title {
  text-align: left; color: var(--gold);
  font-size: 13px; letter-spacing: 0;
}
.poi-board-row {
  min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px;
  align-items: center;
  padding: 8px 9px;
  color: var(--cream); background: transparent;
  border: 1.5px solid var(--wood-edge); border-radius: 8px;
  font-family: var(--font-pixel); cursor: pointer;
}
.poi-board-row span,
.poi-board-row small {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.poi-board-row span { font-size: 12px; }
.poi-board-row small {
  grid-column: 1 / 2;
  font-family: var(--font-num); color: var(--cream-dim); font-size: 12px;
}
.poi-board-row b {
  grid-row: 1 / span 2; grid-column: 2;
  color: var(--gold); font-size: 11px;
}
.poi-board-row:disabled { opacity: 0.5; cursor: default; }

/* ============================================================== toasts == */

#toast {
  position: absolute; left: 50%; bottom: calc(130px + var(--safe-bot));
  transform: translateX(-50%) translateY(10px);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(6, 5, 26, 0.94); border: 2px solid var(--wood-edge);
  font-size: 15px; white-space: nowrap;
  opacity: 0; transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#big-toast {
  position: absolute; left: 50%; top: 26%;
  transform: translate(-50%, -50%) scale(0.8);
  text-align: center; opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
#big-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#big-toast-title {
  font-size: 30px; font-weight: 700; color: var(--gold);
  text-shadow: 0 3px 0 #8a6a20, 0 6px 14px rgba(0,0,0,0.6);
}
#big-toast-sub { font-family: var(--font-num); font-size: 18px; color: var(--cream); text-shadow: 0 2px 4px rgba(0,0,0,0.7); margin-top: 4px; }

#float-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.float-xp {
  position: absolute; top: 58%;
  font-family: var(--font-num); font-size: 22px; color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  animation: float-up 1.4s ease-out forwards;
}
@keyframes float-up {
  from { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  to { opacity: 0; transform: translateY(-70px); }
}

#boot-status {
  position: fixed; left: 50%; bottom: calc(40px + var(--safe-bot)); z-index: 30;
  transform: translateX(-50%);
  max-width: calc(100% - 220px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(6, 5, 26, 0.9); border: 2px solid var(--wood-edge);
  font-family: var(--font-num); font-size: 14px; color: var(--cream-dim);
  pointer-events: none;
}

/* ====================================================== dungeon mode == */

:root { --rune: #b89bf0; --rune-deep: #3a2a52; }

#dungeon-hud {
  position: absolute; z-index: 22;
  top: calc(200px + var(--safe-top)); left: 50%; transform: translateX(-50%);
  width: min(340px, calc(100% - 24px));
  padding: 8px 12px;
  background: linear-gradient(rgba(46,28,66,0.92), rgba(32,18,48,0.92));
  border: 2px solid #6a4fa0; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(184,155,240,0.25);
  pointer-events: none; text-align: center;
}
#dungeon-hud[hidden] { display: none; }
.dg-hud-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dg-hud-name { font-size: 15px; font-weight: 700; color: var(--rune); text-shadow: 0 1px 0 #1c1030; }
.dg-hud-leave {
  pointer-events: auto;
  padding: 3px 9px; font-family: var(--font-pixel); font-size: 12px;
  color: #e8a09a; background: #3a2030; border: 1.5px solid #9a3a5a; border-radius: 8px;
  cursor: pointer;
}
.dg-hud-pips { display: flex; justify-content: center; gap: 7px; margin: 7px 0 4px; }
.dg-pip {
  width: 12px; height: 12px; transform: rotate(45deg);
  background: #4a3a66; border: 1.5px solid #2a1c40; border-radius: 2px;
  transition: background 0.25s, box-shadow 0.25s;
}
.dg-pip.done { background: var(--leaf); border-color: #4a6e30; }
.dg-pip.active { background: var(--gold); border-color: #f2c96a; box-shadow: 0 0 8px rgba(240,208,96,0.7); animation: action-pulse 1.2s ease-in-out infinite; }
.dg-pip.boss { width: 15px; height: 15px; }
.dg-hud-step { font-family: var(--font-num); font-size: 16px; color: var(--cream-dim); }

/* ------------------------------------------------------ intro card --- */

.dungeon-card { border-color: #6a4fa0; text-align: center; }
.dg-kicker { font-family: var(--font-num); font-size: 17px; color: var(--rune); }
.dungeon-card h2 { color: var(--rune); margin: 4px 0 8px; }
.dg-meta { font-family: var(--font-num); font-size: 16px; color: var(--cream-dim); margin-bottom: 10px; }
.dg-intro { font-size: 14px; line-height: 1.5; color: var(--cream); margin: 0 0 14px; }
.dg-rewards-title { font-family: var(--font-num); font-size: 15px; color: var(--gold); text-align: left; margin-bottom: 4px; }
.dg-rewards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px; }
.dg-reward-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge);
  font-family: var(--font-num); font-size: 15px;
}

/* dungeon-select cards */
.dg-card {
  text-align: left; padding: 10px 12px; margin: 8px 0;
  background: var(--wood-2); border: 2px solid var(--wood-edge); border-radius: 12px;
}
.dg-card.cleared { border-color: var(--leaf); }
.dg-card-top { display: flex; align-items: baseline; justify-content: space-between; }
.dg-card-name { font-size: 16px; font-weight: 700; color: var(--rune); }
.dg-card-diff { font-family: var(--font-num); font-size: 15px; color: var(--gold); }
.dg-card-meta { font-family: var(--font-num); font-size: 14px; color: var(--cream-dim); margin: 3px 0; }
.dg-card-rewards { font-family: var(--font-num); font-size: 14px; color: var(--cream); margin-bottom: 8px; }
.dg-card-key {
  width: fit-content; max-width: 100%;
  margin: -2px 0 8px; padding: 4px 7px;
  border: 1px solid rgba(240,208,96,0.25); border-radius: 7px;
  background: rgba(43,33,24,0.18);
  font-family: var(--font-num); font-size: 12px; color: var(--cream-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dg-card-key.ready { color: var(--gold); border-color: rgba(240,208,96,0.55); background: rgba(240,208,96,0.10); }
.dg-enter { margin: 0; }

/* ------------------------------------------------------ combat screen - */

#combat-screen {
  position: fixed; inset: 0; z-index: 45;
  background: #0d0a16;
  animation: combat-in 0.35s ease-out;
}
#combat-screen[hidden] { display: none; }
@keyframes combat-in { from { opacity: 0; } to { opacity: 1; } }

#battle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
/* Pokémon-style status boxes (cream plates with a chunky outline) */
.poke-box {
  position: absolute; z-index: 4;
  width: min(300px, 64%);
  padding: 8px 12px;
  background: linear-gradient(#f5efe2, #e3d8c0);
  border: 3px solid #15123d; border-radius: 12px;
  box-shadow: 0 4px 0 #b3a890, 0 7px 16px rgba(0,0,0,0.4);
  color: #15123d;
  animation: card-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.enemy-box { top: calc(14px + var(--safe-top)); left: 12px; }
.player-box { right: 12px; bottom: calc(154px + var(--safe-bot)); }
.poke-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.poke-name { font-size: 17px; font-weight: 700; color: #15123d; }
.hp-line { display: flex; align-items: center; gap: 6px; }
.hp-lbl { font-family: var(--font-num); font-size: 15px; font-weight: 700; color: #c9a23f; }
.hp-num { text-align: right; margin-top: 3px; }
.combat-phase { font-family: var(--font-num); font-size: 15px; color: #8d5a6e; }
.combat-phase.flash { animation: phase-flash 0.7s ease-out; }
@keyframes phase-flash { 0% { color: var(--berry); transform: scale(1.2); } 100% { color: var(--rune); transform: none; } }
.combat-objective {
  margin-top: 5px; padding: 4px 6px;
  background: rgba(43,33,24,0.1); border: 1.5px solid rgba(141,90,110,0.45); border-radius: 7px;
  font-family: var(--font-num); font-size: 12px; color: #5d466f;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.hp-bar {
  position: relative; height: 18px; border-radius: 9px; overflow: hidden;
  background: #1a120a; border: 2px solid var(--wood-edge);
}
.hp-bar > div { height: 100%; width: 100%; transition: width 0.35s ease-out; }
.hp-bar.enemy > div { background: linear-gradient(#e0894b, #c95a4a); }
.hp-bar.player > div { background: linear-gradient(#9bc46c, #6e9a4f); }
.hp-text { font-family: var(--font-num); font-size: 15px; color: #5a4a32; }
.hp-line .hp-bar { flex: 1; height: 13px; }

.combat-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.dmg-float {
  position: absolute; font-family: var(--font-num); font-weight: 700; font-size: 28px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.6); animation: float-up 0.95s ease-out forwards;
}
.dmg-float.enemy { color: #ffd76a; }
.dmg-float.player { color: #ff8a7a; }
.dmg-float.crit { font-size: 36px; color: #fff0a0; }
.dmg-float.heal { color: #9bf06c; }

.battle-menu {
  position: absolute; z-index: 4;
  bottom: calc(12px + var(--safe-bot)); left: 50%; transform: translateX(-50%);
  width: min(480px, calc(100% - 20px));
  padding: 10px 12px 12px;
  background: linear-gradient(#0d0b29, #15123d);
  border: 3px solid #5a52b0; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55), inset 0 2px 0 rgba(255,255,255,0.06);
}
.combat-log {
  min-height: 24px; text-align: center; font-family: var(--font-num);
  font-size: 18px; color: var(--cream); margin-bottom: 10px;
}

.combat-party-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  max-height: 108px;
  overflow-y: auto;
  margin: -2px 0 9px;
  padding: 2px 1px;
}
.combat-party-panel[hidden] { display: none; }
.party-assist {
  min-width: 0; min-height: 44px;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px;
  color: var(--cream); background: #2f271f;
  border: 1.5px solid #5a52b0; border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 0 #1b130e;
  font-family: var(--font-pixel); cursor: pointer;
}
.party-assist .pa-icon { flex: 0 0 22px; font-size: 19px; line-height: 1; text-align: center; }
.party-assist .pa-body { min-width: 0; display: grid; gap: 1px; text-align: left; }
.party-assist b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; letter-spacing: 0;
}
.party-assist small {
  font-family: var(--font-num); font-size: 11px; color: var(--cream-dim);
}
.party-assist.scout { border-color: #7ef0c6; }
.party-assist.guardian { border-color: #7f9fca; }
.party-assist.healer { border-color: #ba7da0; }
.party-assist.ranger { border-color: #b29b55; }
.party-assist.fighter { border-color: #bd7558; }
.party-assist.engineer { border-color: #8aa1a8; }
.party-assist:disabled { opacity: 0.45; cursor: default; }
.party-assist.used { filter: grayscale(0.35); }

.combat-actions { display: flex; gap: 8px; }
.cbtn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 10px 4px;
  font-family: var(--font-pixel); color: var(--cream);
  background: var(--wood-2); border: 2px solid var(--wood-edge); border-radius: 12px;
  box-shadow: 0 3px 0 #06051a; cursor: pointer;
}
.cbtn span { font-size: 22px; line-height: 1; }
.cbtn b { font-size: 14px; }
.cbtn small { font-family: var(--font-num); font-size: 12px; opacity: 0.7; min-height: 12px; }
.cbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #06051a; }
.cbtn.attack { border-color: #8a6f4d; }
.cbtn.power { border-color: #9c6c2a; }
.cbtn.objective { border-color: #7b64a0; }
.cbtn.heal { border-color: #2e8c78; }
.cbtn:disabled { opacity: 0.4; box-shadow: 0 3px 0 #06051a; cursor: default; }

/* ------------------------------------------------------ reward card -- */

.reward-card { text-align: center; border-color: var(--gold); }
.reward-burst { font-size: 56px; animation: card-in 0.5s cubic-bezier(0.2,1.6,0.4,1); }
.reward-card h2 { color: var(--gold); margin: 4px 0; }
.reward-sub { font-family: var(--font-num); font-size: 17px; color: var(--cream-dim); margin-bottom: 12px; }
.reward-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.reward-line {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--wood-2); border-radius: 8px;
  font-size: 15px;
}
.reward-line .r-icon { font-size: 20px; }
.reward-line .r-amt { margin-left: auto; font-family: var(--font-num); font-size: 20px; color: var(--gold); }
.reward-line.badge { border: 1.5px solid var(--leaf); }

/* ====================================================== collection ==== */

.bestiary-section-title {
  font-family: var(--font-num); font-size: 16px; color: var(--gold);
  margin: 10px 0 6px; text-align: left;
}
.badge-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.badge-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--wood-2); border: 1.5px solid var(--leaf);
  font-family: var(--font-num); font-size: 14px;
}
.badge-empty { font-family: var(--font-num); font-size: 14px; color: var(--cream-dim); opacity: 0.7; }
.collection-books {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px;
  margin-bottom: 8px;
}
.collection-book-card {
  display: grid; gap: 5px; min-width: 0;
  padding: 8px; background: var(--wood-2);
  border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.collection-book-card.complete { border-color: var(--leaf); }
.collection-book-head {
  display: flex; justify-content: space-between; gap: 6px; align-items: baseline;
}
.collection-book-head b, .collection-book-head span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.collection-book-head b { color: var(--cream); font-size: 13px; }
.collection-book-head span { color: var(--gold); font-family: var(--font-num); font-size: 13px; flex-shrink: 0; }
.collection-book-rows { display: grid; gap: 2px; }
.collection-book-rows small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-num); color: var(--cream-dim); font-size: 11px;
}
.skill-row {
  padding: 8px 10px; margin: 6px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.skill-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 5px;
}
.skill-head b { color: var(--cream); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-head span, .skill-desc {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skill-head span { color: var(--gold); flex-shrink: 0; }
.skill-desc { margin-top: 5px; color: var(--leaf); }
.bestiary-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.beast-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0;
  padding: 8px 4px;
  background: var(--wood-2); border: 2px solid var(--wood-edge); border-radius: 10px;
}
.beast-card.seen { border-color: var(--gold); }
.beast-card.tamed { border-color: #8cc063; }
.beast-card.active { border-color: var(--leaf); box-shadow: 0 0 10px rgba(140,192,99,0.5); }
#companion-grid .beast-card { justify-content: center; min-height: 108px; }
.beast-card canvas { image-rendering: pixelated; height: 44px; width: auto; }
.beast-card.unseen canvas { filter: brightness(0) opacity(0.55); }
.beast-name { font-size: 11px; text-align: center; line-height: 1.1; }
.beast-card.unseen .beast-name { color: var(--cream-dim); opacity: 0.6; }
.beast-kills { font-family: var(--font-num); font-size: 12px; color: var(--gold); }
.pet-summary {
  grid-column: 1 / -1;
  padding: 7px 10px; background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
  font-family: var(--font-num); color: var(--cream-dim); font-size: 14px;
}
.pet-meta {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-num); color: var(--leaf); font-size: 11px;
}
.pet-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; margin-top: 3px;
}
.pet-actions .btn.small { min-width: 42px; padding-inline: 5px; font-size: 11px; }

/* ====================================================== crafting ====== */

.craft-equipped {
  font-family: var(--font-num); font-size: 14px; color: var(--cream-dim);
  background: var(--wood-2); border-radius: 8px; padding: 7px 10px; margin-bottom: 8px;
}
.craft-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 5px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 10px;
}
.craft-row.poor { opacity: 0.55; }
.craft-info { flex: 1; min-width: 0; }
.craft-name { font-size: 14px; }
.craft-desc { font-family: var(--font-num); font-size: 13px; color: var(--leaf); margin-left: 4px; }
.craft-cost { font-family: var(--font-num); font-size: 15px; color: var(--gold); margin-top: 2px; }
.craft-make { flex-shrink: 0; }

/* ====================================================== season pass === */

.season-board {
  display: grid; gap: 7px; margin: 8px 0 10px;
}
.season-hero {
  display: grid; gap: 3px;
  padding: 10px;
  background: linear-gradient(135deg, #263620, #352719);
  border: 1.5px solid var(--gold); border-radius: 10px;
}
.season-hero b { color: var(--gold); font-size: 16px; }
.season-hero span, .season-hero em {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 13px; line-height: 1.25; font-style: normal;
}
.season-hero em { color: var(--leaf); }
.season-progress { margin: 0; }
.season-score-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px;
}
.season-score-chip {
  min-width: 0; padding: 7px 6px; text-align: center;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.season-score-chip b, .season-score-chip span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.season-score-chip b { color: var(--cream); font-family: var(--font-num); font-size: 16px; }
.season-score-chip span { color: var(--cream-dim); font-family: var(--font-num); font-size: 11px; }
.season-section-title {
  margin: 9px 0 5px;
  color: var(--gold); font-size: 14px; font-weight: 700;
}
.season-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 5px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 10px;
  opacity: 0.6;
}
.season-row.premium { border-color: rgba(106, 79, 160, 0.72); }
.season-row.premium.unlocked, .season-row.premium.claimed { border-color: var(--gold); }
.season-rank-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 5px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 10px;
  opacity: 0.65;
}
.season-row.unlocked, .season-rank-row.unlocked { opacity: 1; border-color: var(--gold); }
.season-row.claimed, .season-rank-row.claimed { opacity: 1; border-color: var(--leaf); }
.season-info { flex: 1; min-width: 0; }
.season-req { font-family: var(--font-num); font-size: 13px; color: var(--cream-dim); margin-left: 4px; }
.season-rw { font-family: var(--font-num); font-size: 14px; color: var(--gold); margin-top: 2px; }
.season-premium-note {
  display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center;
  padding: 8px; margin-bottom: 6px;
  background: #211d2c; border: 1.5px solid #6a4fa0; border-radius: 9px;
}
.season-premium-note.active { border-color: var(--gold); }
.season-premium-note b, .season-premium-note span {
  display: block; overflow: hidden; text-overflow: ellipsis;
}
.season-premium-note b { grid-column: 1; grid-row: 1; white-space: nowrap; }
.season-premium-note span { grid-column: 1; grid-row: 2; white-space: normal; line-height: 1.2; }
.season-premium-note .btn { grid-column: 2; grid-row: 1 / span 2; }
.season-premium-note b { color: var(--gold); font-size: 13px; }
.season-premium-note span { color: var(--cream-dim); font-family: var(--font-num); font-size: 12px; }
.season-leaderboard { display: grid; gap: 5px; margin-bottom: 8px; }
.season-leader-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center;
  padding: 8px; background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.season-leader-row.player { border-color: var(--leaf); }
.season-leader-row b, .season-leader-row span, .season-leader-row em {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.season-leader-row b { color: var(--cream); font-size: 13px; }
.season-leader-row span { color: var(--cream-dim); font-family: var(--font-num); font-size: 12px; }
.season-leader-row em {
  grid-column: 2; grid-row: 1 / span 2;
  color: var(--gold); font-family: var(--font-num); font-size: 13px; font-style: normal;
}

/* ====================================================== style shop ===== */

.style-shop-card { border-color: #d4a832; }
.housing-shop-card { border-color: #7ef0c6; }
.fair-note {
  padding: 8px 10px; margin: 7px 0 10px;
  font-family: var(--font-num); font-size: 14px; color: #c9fbe8;
  background: #223022; border: 1.5px solid #2e8c78; border-radius: 9px;
}
.style-row {
  display: grid; grid-template-columns: 34px 1fr auto auto; gap: 8px; align-items: center;
  padding: 8px; margin: 6px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 10px;
  opacity: 0.72;
}
.style-row.unlocked, .style-row.owned, .style-row.active { opacity: 1; }
.style-row.owned { border-color: #6a4fa0; }
.style-row.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(240,208,96,0.32); }
.style-icon { font-size: 23px; text-align: center; }
.style-info { min-width: 0; }
.style-info b, .style-info span, .style-info p { display: block; }
.style-info b { color: var(--cream); font-size: 14px; }
.style-info span, .style-info p, .style-price {
  font-family: var(--font-num); font-size: 13px; color: var(--cream-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.style-info p { color: var(--gold); opacity: 0.85; }
.style-price { color: var(--leaf); white-space: nowrap; }
@media (max-width: 420px) {
  .style-row { grid-template-columns: 30px 1fr auto; }
  .style-price { display: none; }
}

/* ====================================================== world ops ====== */

.worldops-card { border-color: #2e8c78; }
.ops-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; margin-bottom: 10px;
  background: linear-gradient(135deg, #263827, #2e2442);
  border: 2px solid #2e8c78; border-radius: 12px;
}
.ops-hero b { display: block; color: var(--gold); font-size: 17px; }
.ops-hero span, .ops-danger { font-family: var(--font-num); font-size: 14px; color: var(--cream-dim); }
.ops-danger { color: #c9fbe8; text-align: right; }
.ops-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
.ops-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; background: var(--wood-2);
  border: 1.5px solid var(--wood-edge); border-radius: 10px;
}
.ops-card.action { cursor: pointer; border-color: #9c6c2a; }
.ops-card > span { font-size: 22px; line-height: 1; width: 26px; text-align: center; }
.ops-card b { display: block; color: var(--cream); font-size: 14px; margin-bottom: 2px; }
.ops-card p { margin: 0; color: var(--cream-dim); font-family: var(--font-num); font-size: 14px; line-height: 1.15; }
.ops-safety-panel {
  padding: 10px; margin: 8px 0 10px;
  background: #172320; border: 1.5px solid #2e8c78; border-radius: 10px;
}
.safety-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px;
}
.safety-head b, .safety-head span, .safety-head em { display: block; }
.safety-head b { color: var(--gold); font-size: 15px; }
.safety-head span, .safety-head em {
  font-family: var(--font-num); font-size: 13px; color: var(--cream-dim); font-style: normal;
}
.safety-head em { color: #c9fbe8; white-space: nowrap; }
.safety-rule-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
}
.safety-rule {
  min-height: 46px; padding: 7px 5px;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 8px;
  text-align: center;
}
.safety-rule.ok { border-color: var(--leaf); }
.safety-rule.locked { border-color: #9a3a5a; }
.safety-rule b, .safety-rule span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.safety-rule b { color: var(--cream); font-size: 12px; }
.safety-rule span { font-family: var(--font-num); color: var(--cream-dim); font-size: 12px; }
.safety-reasons {
  margin-top: 8px; display: grid; gap: 4px;
  font-family: var(--font-num); font-size: 13px; color: var(--cream-dim);
}
.safety-reasons div {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ops-proof-panel {
  padding: 10px; margin: 8px 0 10px;
  background: #06051a; border: 1.5px solid #2e8c78; border-radius: 10px;
}
.ops-proof-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.ops-proof-head b { color: var(--gold); font-size: 14px; }
.proof-empty { font-family: var(--font-num); color: var(--cream-dim); font-size: 14px; }
.proof-row {
  padding: 8px; margin: 6px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.proof-row.approved { border-color: var(--leaf); }
.proof-row.rejected { border-color: #9a3a5a; opacity: 0.75; }
.proof-main b, .proof-main span, .proof-main small { display: block; }
.proof-main b { color: var(--cream); font-size: 13px; }
.proof-main span, .proof-main small {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proof-main small { color: var(--gold); opacity: 0.8; }
.proof-actions { display: flex; gap: 6px; margin-top: 7px; }
.ops-boss-panel {
  padding: 10px; margin: 8px 0 10px;
  background: #21181d; border: 1.5px solid #9a3a5a; border-radius: 10px;
}
.ops-boss-panel.warning { border-color: #f2c96a; }
.ops-boss-panel.live { border-color: #d34e5a; }
.world-boss-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 7px;
}
.world-boss-head b, .world-boss-head span, .world-boss-head em { display: block; }
.world-boss-head b { color: var(--gold); font-size: 15px; }
.world-boss-head span, .world-boss-head em, .world-boss-schedule {
  font-family: var(--font-num); font-size: 13px; color: var(--cream-dim); font-style: normal;
}
.world-boss-head em { color: #ffc4c8; text-align: right; white-space: nowrap; }
.ops-boss-panel.warning .world-boss-head em { color: var(--gold); }
.ops-boss-panel.live .world-boss-head em { color: #ffc4c8; }
.world-boss-schedule {
  padding: 6px 8px; margin-bottom: 7px;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.world-boss-steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
}
.world-boss-steps span {
  min-height: 30px; padding: 6px 7px;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 8px;
  font-family: var(--font-num); font-size: 12px; color: var(--cream-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.world-boss-steps span.active { border-color: var(--gold); color: var(--cream); }
.ops-event-panel {
  padding: 10px; margin: 8px 0 10px;
  background: #201b28; border: 1.5px solid #6a4fa0; border-radius: 10px;
}
.ops-event-empty { font-family: var(--font-num); color: var(--cream-dim); font-size: 14px; }
.ops-event-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px;
}
.ops-event-head b, .ops-event-head span { display: block; }
.ops-event-head b { color: var(--gold); font-size: 15px; }
.ops-event-head span, .ops-event-head em {
  font-family: var(--font-num); font-size: 13px; color: var(--cream-dim); font-style: normal;
}
.ops-event-head em { color: var(--leaf); text-align: right; white-space: nowrap; }
.ops-event-objective {
  padding: 8px; margin: 6px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.ops-event-objective.done { border-color: var(--leaf); }
.ops-conflict-panel {
  padding: 10px; margin: 8px 0 10px;
  background: #22171f; border: 1.5px solid #d34e5a; border-radius: 10px;
}
.ops-conflict-panel[hidden] { display: none; }
.conflict-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px;
}
.conflict-head b, .conflict-head span, .conflict-head em { display: block; }
.conflict-head b { color: var(--gold); font-size: 15px; }
.conflict-head span, .conflict-head em {
  font-family: var(--font-num); font-size: 13px; color: var(--cream-dim); font-style: normal;
}
.conflict-head em { color: #ffc4c8; text-align: right; white-space: nowrap; }
.conflict-score-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px;
}
.conflict-score {
  min-height: 48px; padding: 7px;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 8px;
}
.conflict-score.you { border-color: var(--gold); }
.conflict-score b, .conflict-score span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conflict-score b { color: var(--cream); font-size: 13px; }
.conflict-score span { font-family: var(--font-num); color: var(--cream-dim); font-size: 13px; }
.conflict-section-title {
  margin: 8px 0 5px;
  font-family: var(--font-num); font-size: 14px; color: var(--gold);
}
.conflict-point, .conflict-history-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  padding: 8px; margin: 6px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.conflict-point.held { border-color: var(--leaf); }
.conflict-point b, .conflict-point span, .conflict-history-row b, .conflict-history-row span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conflict-point b, .conflict-history-row b { color: var(--cream); font-size: 13px; }
.conflict-point span, .conflict-history-row span {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 13px;
}
.conflict-actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px;
}
.conflict-actions .btn { margin: 0; padding: 8px 6px; font-size: 12px; }
@media (max-width: 420px) {
  .conflict-actions { grid-template-columns: 1fr; }
}
.ops-integrity-panel {
  padding: 10px; margin: 8px 0 10px;
  background: #162224; border: 1.5px solid #4d8c86; border-radius: 10px;
}
.integrity-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin-bottom: 7px;
}
.integrity-metric {
  min-height: 50px; padding: 7px 5px;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 8px;
  text-align: center;
}
.integrity-metric.good { border-color: var(--leaf); }
.integrity-metric.review { border-color: var(--gold); }
.integrity-metric.severe { border-color: #9a3a5a; }
.integrity-metric b, .integrity-metric span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.integrity-metric b { color: var(--cream); font-size: 13px; line-height: 1.25; }
.integrity-metric span { font-family: var(--font-num); color: var(--cream-dim); font-size: 11px; margin-top: 2px; }
.integrity-row {
  padding: 8px; margin: 6px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.integrity-row.good { border-color: var(--leaf); }
.integrity-row.review, .integrity-row.warn { border-color: var(--gold); }
.integrity-row.severe { border-color: #9a3a5a; }
.integrity-row b, .integrity-row span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.integrity-row b { color: var(--cream); font-size: 13px; }
.integrity-row span { font-family: var(--font-num); color: var(--cream-dim); font-size: 13px; }
.ops-pvp-panel {
  padding: 10px; margin: 8px 0 10px;
  background: #251923; border: 1.5px solid #9c6c2a; border-radius: 10px;
}
.pvp-summary {
  padding: 8px; margin: 6px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.pvp-summary.ready { border-color: var(--gold); }
.pvp-summary.locked { border-color: #9a3a5a; opacity: 0.8; }
.pvp-summary b, .pvp-summary span { display: block; }
.pvp-summary b { color: var(--cream); font-size: 14px; }
.pvp-summary span {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pvp-row {
  padding: 8px; margin: 6px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.pvp-row.win { border-color: var(--leaf); }
.pvp-row.loss { border-color: #9a3a5a; }
.pvp-row b, .pvp-row span, .pvp-row small { display: block; }
.pvp-row b { color: var(--cream); font-size: 13px; }
.pvp-row span, .pvp-row small {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pvp-row small { color: var(--gold); opacity: 0.86; }

/* ====================================================== social hub ===== */

.social-card { border-color: #6a4fa0; }
.social-privacy {
  padding: 9px 10px; margin-bottom: 10px;
  background: #202837; border: 1.5px solid #6a4fa0; border-radius: 10px;
}
.social-privacy b, .social-privacy span { display: block; }
.social-privacy b { color: var(--gold); font-size: 14px; }
.social-privacy span {
  font-family: var(--font-num); font-size: 13px; color: var(--cream-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.social-section-title {
  margin: 9px 0 5px;
  color: var(--gold); font-size: 14px; font-weight: 700;
}
.social-member, .safe-chat-row, .social-report-row, .friendly-duel-status, .friendly-duel-row {
  padding: 8px; margin: 6px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.social-member.leader { border-color: var(--gold); }
.friendly-duel-status.ready, .friendly-duel-row.win { border-color: var(--leaf); }
.friendly-duel-status.locked, .friendly-duel-row.loss { border-color: #6a4fa0; }
.social-member b, .social-member span, .social-member em,
.safe-chat-row b, .safe-chat-row span, .safe-chat-row small,
.social-report-row b, .social-report-row span, .social-report-row small,
.friendly-duel-status b, .friendly-duel-status span,
.friendly-duel-row b, .friendly-duel-row span, .friendly-duel-row small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.social-member b, .safe-chat-row b, .social-report-row b, .friendly-duel-status b, .friendly-duel-row b { color: var(--cream); font-size: 13px; }
.social-member span, .social-member em,
.safe-chat-row span, .safe-chat-row small,
.social-report-row span, .social-report-row small,
.friendly-duel-status span, .friendly-duel-row span, .friendly-duel-row small {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 13px; font-style: normal;
}
.social-member em, .safe-chat-row small, .social-report-row small, .friendly-duel-row small { color: var(--leaf); }
.social-empty { font-family: var(--font-num); color: var(--cream-dim); font-size: 14px; }

/* ====================================================== guild hub ====== */

.guild-card { border-color: #f2c96a; }
.guild-create {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  margin-bottom: 10px;
}
.guild-summary {
  padding: 10px; margin-bottom: 10px;
  background: linear-gradient(135deg, #2d2617, #23342a);
  border: 1.5px solid #f2c96a; border-radius: 10px;
}
.guild-empty { font-family: var(--font-num); color: var(--cream-dim); font-size: 14px; }
.guild-name { color: var(--gold); font-size: 18px; font-weight: 700; margin-bottom: 5px; }
.guild-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 6px; margin-bottom: 8px;
}
.guild-stats span {
  padding: 5px 6px; text-align: center;
  font-family: var(--font-num); font-size: 13px; color: var(--cream);
  background: rgba(23, 17, 12, 0.55); border: 1px solid rgba(184, 144, 32, 0.45); border-radius: 8px;
}
.guild-xp { margin: 0 0 6px; }
.guild-foot { font-family: var(--font-num); font-size: 13px; color: var(--cream-dim); }
.guild-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.guild-section-title {
  margin: 9px 0 5px;
  color: var(--gold); font-size: 14px; font-weight: 700;
}
.guild-hall-preview {
  display: grid; grid-template-columns: 40px 1fr; gap: 9px; align-items: center;
  padding: 9px; margin-bottom: 7px;
  background: linear-gradient(135deg, #30231b, #28331f);
  border: 1.5px solid #f2c96a; border-radius: 10px;
}
.guild-hall-preview.theme-moss { background: linear-gradient(135deg, #243923, #34442b); border-color: #6c9d50; }
.guild-hall-preview.theme-rust { background: linear-gradient(135deg, #3a2a1e, #3f3630); border-color: #9c6c2a; }
.guild-banner-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  font-size: 22px; background: var(--guild-emblem, #0d0b29); border: 1.5px solid rgba(247,233,160,0.42); border-radius: 9px;
  box-shadow: inset 0 0 0 2px rgba(32,23,15,0.35);
}
.guild-hall-copy { min-width: 0; }
.guild-hall-copy b, .guild-hall-copy span, .guild-hall-copy em {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.guild-hall-copy b { color: var(--cream); font-size: 14px; }
.guild-hall-copy span, .guild-hall-copy em {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 13px; font-style: normal;
}
.guild-hall-copy em { color: var(--leaf); }
.guild-fair-note {
  padding: 7px 8px; margin-bottom: 7px;
  font-family: var(--font-num); font-size: 13px; color: #c9fbe8;
  background: #1e2c21; border: 1.5px solid #2e8c78; border-radius: 9px;
}
.guild-room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 9px; }
.guild-hall-room {
  min-width: 0; padding: 7px;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.guild-hall-room.unlocked { border-color: rgba(92, 184, 92, 0.62); }
.guild-hall-room.locked { opacity: 0.58; }
.guild-hall-room b, .guild-hall-room span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.guild-hall-room b { color: var(--cream); font-size: 12px; }
.guild-hall-room span { font-family: var(--font-num); color: var(--cream-dim); font-size: 12px; }
.guild-emblem-panel {
  padding: 8px; margin-bottom: 9px;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.guild-emblem-head {
  display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 7px;
}
.guild-emblem-head b { color: var(--cream); font-size: 13px; }
.guild-emblem-head span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-num); color: var(--cream-dim); font-size: 12px;
}
.guild-emblem-grid, .guild-color-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.guild-emblem-btn, .guild-color-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1.5px solid rgba(247,233,160,0.32); border-radius: 8px;
  background: #0d0b29; color: var(--cream); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.guild-emblem-btn { font-size: 19px; }
.guild-color-btn { color: transparent; }
.guild-emblem-btn.active, .guild-color-btn.active {
  border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240,208,96,0.22), inset 0 1px 0 rgba(255,255,255,0.1);
}
.guild-shop-row {
  display: grid; grid-template-columns: 34px 1fr auto auto; gap: 7px; align-items: center;
  padding: 8px; margin: 6px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
  opacity: 0.72;
}
.guild-shop-row.unlocked, .guild-shop-row.owned, .guild-shop-row.active { opacity: 1; }
.guild-shop-row.owned { border-color: #6a4fa0; }
.guild-shop-row.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(240,208,96,0.28); }
.housing-shop-row.unlocked { border-color: #7ef0c6; box-shadow: inset 0 0 0 1px rgba(143,176,106,0.18); }
.guild-shop-icon { font-size: 22px; text-align: center; }
.guild-shop-info { min-width: 0; }
.guild-shop-info b, .guild-shop-info span, .guild-shop-info p { display: block; }
.guild-shop-info b { color: var(--cream); font-size: 13px; }
.guild-shop-info span, .guild-shop-info p, .guild-shop-price {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-num); font-size: 12px; color: var(--cream-dim);
}
.guild-shop-info p { color: var(--gold); opacity: 0.85; }
.guild-shop-price { color: var(--leaf); white-space: nowrap; }
.guild-members { display: grid; gap: 6px; }
.guild-member {
  display: grid; grid-template-columns: 1fr minmax(116px, auto); gap: 3px 8px; align-items: center;
  padding: 8px; background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.guild-member b { color: var(--cream); font-size: 14px; }
.guild-member span, .guild-member em {
  font-family: var(--font-num); font-size: 13px; color: var(--cream-dim); font-style: normal;
}
.guild-member span { grid-column: 1; }
.guild-member em { color: var(--leaf); text-align: right; }
.guild-role-select {
  grid-column: 2; grid-row: 1 / span 2; align-self: stretch;
  min-width: 116px; max-width: 150px;
  padding: 6px 7px;
  color: var(--cream); background: #06051a;
  border: 1.5px solid var(--wood-edge); border-radius: 8px;
  font-family: var(--font-pixel); font-size: 12px;
}
.guild-raid-board {
  display: grid; gap: 6px; margin-bottom: 8px;
}
.raid-board-head, .raid-phase-row, .raid-reward {
  padding: 8px;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.raid-board-head {
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
  border-color: rgba(184, 144, 32, 0.7);
}
.raid-board-head b, .raid-phase-row b, .raid-reward b {
  display: block; color: var(--cream); font-size: 13px;
}
.raid-board-head span, .raid-phase-row span, .raid-reward span, .raid-reward em {
  display: block; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-num); color: var(--cream-dim); font-size: 12px; line-height: 1.25; font-style: normal;
}
.raid-phase-row.done { border-color: rgba(92, 184, 92, 0.6); }
.raid-reward { border-color: rgba(184, 144, 32, 0.55); }
.raid-reward.claimed { border-color: rgba(92, 184, 92, 0.7); }
.raid-reward em { color: var(--leaf); margin-top: 2px; }
@media (max-width: 420px) {
  .guild-room-grid { grid-template-columns: 1fr; }
  .guild-shop-row { grid-template-columns: 30px 1fr auto; }
  .guild-shop-price { display: none; }
}

/* ====================================================== content tools == */

.content-tools-card { border-color: #f2c96a; }
.admin-section {
  padding: 10px; margin: 8px 0;
  background: var(--wood-2); border: 1.5px solid var(--wood-edge); border-radius: 10px;
}
.admin-title { color: var(--gold); font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.admin-input {
  width: 100%; min-width: 0;
  padding: 8px 10px; margin: 4px 0;
  color: var(--cream); background: #06051a;
  border: 2px solid var(--wood-edge); border-radius: 8px;
  font-family: var(--font-pixel); font-size: 14px;
}
.admin-check {
  display: flex; align-items: center; gap: 8px;
  margin: 6px 0;
  font-family: var(--font-num); font-size: 14px; color: var(--cream-dim);
}
.admin-check input { accent-color: #f2c96a; }
.admin-row { display: flex; gap: 7px; align-items: center; }
.admin-row .btn { margin: 6px 0 0; }
.admin-node-row {
  display: grid; grid-template-columns: 22px 92px 1fr 28px; gap: 5px; align-items: center;
  margin: 5px 0;
}
.admin-node-row span {
  font-family: var(--font-num); font-size: 18px; color: var(--gold); text-align: center;
}
.admin-node-row select, .admin-node-row input {
  min-width: 0; padding: 7px 6px;
  color: var(--cream); background: #06051a;
  border: 1.5px solid var(--wood-edge); border-radius: 8px;
  font-family: var(--font-pixel); font-size: 12px;
}
.admin-icon-btn {
  height: 28px; width: 28px;
  color: #e8a09a; background: #3a2030;
  border: 1.5px solid #9a3a5a; border-radius: 8px;
  font-family: var(--font-pixel); cursor: pointer;
}
.admin-empty { font-family: var(--font-num); color: var(--cream-dim); font-size: 14px; }
.admin-route-card {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px; margin: 5px 0;
  background: #06051a; border: 1.5px solid var(--wood-edge); border-radius: 9px;
}
.admin-route-card div { flex: 1; min-width: 0; }
.admin-route-card b { display: block; color: var(--cream); font-size: 14px; }
.admin-route-card span, .admin-route-card small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-num); color: var(--cream-dim); font-size: 13px;
}
.admin-route-card small { color: var(--gold); opacity: 0.8; }

/* ====================================================== home interior = */

#home-screen { position: fixed; inset: 0; z-index: 46; background: #15101e; animation: combat-in 0.3s ease-out; }
#home-screen[hidden] { display: none; }
#home-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home-bar {
  position: absolute; top: calc(10px + var(--safe-top)); left: 50%; transform: translateX(-50%);
  width: min(460px, calc(100% - 20px)); z-index: 2;
  display: grid; grid-template-columns: minmax(104px, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 14px;
  background: linear-gradient(rgba(46,28,66,0.9), rgba(32,18,48,0.8));
  border: 2px solid #6a4fa0; border-radius: 12px;
}
.home-bar-main { display: grid; gap: 2px; min-width: 0; }
.home-title { font-size: 17px; font-weight: 700; color: var(--rune); }
.home-room-subtitle {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-num); font-size: 12px; color: var(--cream-dim);
}
.home-room-strip {
  display: flex; gap: 4px; overflow-x: auto; max-width: min(240px, 45vw);
  padding: 2px;
}
.home-room-tab {
  flex: 0 0 auto; height: 30px; padding: 0 8px;
  color: var(--cream); background: #2b2039; border: 1.5px solid #6a4fa0; border-radius: 8px;
  font-family: var(--font-pixel); font-size: 11px; cursor: pointer;
}
.home-room-tab.active { color: #221a10; background: var(--gold); border-color: #f6d777; }
.home-room-tab.locked { opacity: 0.45; cursor: default; }
#home-done {
  padding: 6px 12px; font-family: var(--font-pixel); font-size: 14px; font-weight: 600;
  color: var(--cream); background: var(--wood); border: 2px solid var(--wood-edge);
  border-radius: 10px; cursor: pointer;
}
.home-panel {
  position: absolute; left: 50%; bottom: calc(76px + var(--safe-bot)); transform: translateX(-50%);
  z-index: 3; width: min(420px, calc(100% - 24px)); max-height: min(310px, 42vh); overflow-y: auto;
  padding: 10px;
  color: var(--cream); background: linear-gradient(#0d0b29, #261b14);
  border: 2px solid #8a6b3a; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.home-panel[hidden] { display: none; }
.home-panel-head {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center;
}
.home-panel-icon { font-size: 24px; text-align: center; }
.home-panel-title { display: grid; gap: 2px; min-width: 0; }
.home-panel-title b { color: var(--gold); font-size: 15px; }
.home-panel-title span, .home-panel-note {
  font-family: var(--font-num); color: var(--cream-dim); font-size: 13px; line-height: 1.25;
}
.home-panel-close {
  width: 30px; height: 30px; color: #e8a09a; background: #3a2030;
  border: 1.5px solid #9a3a5a; border-radius: 8px; font-family: var(--font-pixel);
}
.home-panel-actions { display: grid; gap: 7px; margin-top: 9px; }
.home-action-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center;
  padding: 7px; background: #06051a; border: 1.5px solid var(--wood-edge); border-radius: 8px;
}
.home-action-row span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-num); font-size: 13px; color: var(--cream-dim);
}
.home-action-row b { color: var(--cream); font-size: 13px; }
.home-mini-btn {
  min-width: 46px; height: 30px; padding: 0 8px;
  color: #15123d; background: var(--leaf); border: 0; border-radius: 8px;
  font-family: var(--font-pixel); font-size: 12px; cursor: pointer;
}
.home-mini-btn.alt { color: var(--cream); background: #5d466f; }
.home-mini-btn:disabled { opacity: 0.45; cursor: default; }
.home-tools {
  position: absolute; bottom: calc(10px + var(--safe-bot)); left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100% - 16px)); z-index: 2;
  display: flex; gap: 6px; overflow-x: auto; padding: 8px;
  background: linear-gradient(#0d0b29, #15123d);
  border: 2px solid #5a52b0; border-radius: 14px;
}
.home-tool {
  flex: 0 0 auto; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: var(--wood-2); border: 2px solid var(--wood-edge); border-radius: 10px; cursor: pointer;
}
.home-tool.sel { border-color: var(--gold); background: #564028; box-shadow: 0 0 8px rgba(240,208,96,0.4); }
.home-tool canvas { image-rendering: pixelated; max-width: 36px; max-height: 36px; }

@media (max-width: 430px) {
  .home-bar { grid-template-columns: minmax(120px, 1fr) auto; }
  .home-room-strip { grid-column: 1 / -1; max-width: 100%; }
}