/* v0.17 — CC0 Dark Dwellers UI skin + OFL Fusion Pixel typography. */
@font-face {
  font-family: 'Fusion Pixel';
  src: url('../fonts/fusion-pixel-12px-proportional-zh-hans.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --gold: #ffc65c;
  --gold-dim: #c47b35;
  --bg-deep: #090615;
  --panel: #29204f;
  --panel-line: #7567c9;
  --text: #f4ecff;
  --text-dim: #bbb0d7;
  --red: #ff557d;
  --green: #72e69a;
  --blue: #63d4ff;
  --font-pix: 'Fusion Pixel', 'SimSun', monospace;
  --font-cn: 'Fusion Pixel', 'SimSun', monospace;
}

html, body, button, input, select { font-family: var(--font-cn); }
body {
  color: var(--text);
  background: #07040e;
  cursor: url('../assets/ui/dark-dwellers/cursor-0.png') 1 1, default;
  font-synthesis: none;
  -webkit-font-smoothing: none;
}
button, .card, .map-card, input[type='range'] {
  cursor: url('../assets/ui/dark-dwellers/cursor-1.png') 1 1, pointer;
}
#game { box-shadow: 0 0 0 2px #24164c, 0 0 70px rgba(89, 48, 170, 0.5); }

.screen {
  background:
    radial-gradient(circle at 50% 28%, rgba(70, 43, 126, 0.22), transparent 46%),
    linear-gradient(180deg, rgba(6, 3, 15, 0.54), rgba(8, 4, 18, 0.86));
  box-shadow: inset 0 0 90px rgba(3, 1, 10, 0.74);
}
.menu-screen { background: linear-gradient(180deg, rgba(7, 3, 16, 0.10), rgba(7, 3, 16, 0.38)); }
.panel-col { padding-top: 22px; }

.logo-main, .menu-big, .page-title, .modal-title, .result-title,
.menu-board-title, .menu-altar-title, .info-title, .boss-name {
  font-family: var(--font-pix);
  font-weight: 900;
  color: #ffe6a0;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  filter: none;
  text-shadow: 2px 2px 0 #25102e, 4px 4px 0 rgba(0,0,0,0.72), 0 0 14px rgba(255,93,171,0.28);
}
.menu-big {
  position: relative;
  font-size: 76px;
  letter-spacing: 12px;
  color: #f3e7ff;
  text-shadow: 3px 3px 0 #2a145c, 6px 6px 0 #09040f, 0 0 26px rgba(113,75,225,0.75);
  animation: abyssTitle 3.4s steps(12) infinite;
}
.menu-big::after {
  bottom: -10px;
  width: 72%;
  height: 5px;
  background: linear-gradient(90deg, transparent, #ff4b9c 20%, #7c5cff 50%, #ff4b9c 80%, transparent);
  box-shadow: 0 0 13px rgba(255,75,156,0.7);
}
@keyframes abyssTitle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.page-title {
  min-width: 310px;
  min-height: 46px;
  padding: 7px 34px 5px;
  border-style: solid;
  border-width: 0 28px;
  border-image: url('../assets/ui/dark-dwellers/header.png') 0 24 fill stretch;
  color: #fff0bf;
  font-size: 27px;
  line-height: 32px;
  text-align: center;
}
.logo-sub, .credits, .hint { font-family: var(--font-pix); }

.btn {
  min-height: 38px;
  padding: 4px 18px 6px;
  color: #f9efff;
  background: transparent;
  border-style: solid;
  border-width: 6px 15px;
  border-image: url('../assets/ui/dark-dwellers/button-neutral-0.png') 6 18 fill stretch;
  outline: 0;
  box-shadow: 0 5px 0 rgba(4, 1, 10, 0.72), 0 0 14px rgba(74, 53, 155, 0.25);
  text-shadow: 2px 2px 0 #1a0a2d;
  font-family: var(--font-pix);
  font-weight: 800;
  transition: transform 0.08s, filter 0.12s;
}
.btn:hover {
  border-image-source: url('../assets/ui/dark-dwellers/button-neutral-1.png');
  transform: translateY(-2px);
  filter: drop-shadow(0 0 7px rgba(104,185,255,0.65));
  box-shadow: 0 6px 0 rgba(4,1,10,0.72);
}
.btn:active {
  border-image-source: url('../assets/ui/dark-dwellers/button-neutral-2.png');
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(4,1,10,0.8);
}
.btn.disabled, .btn:disabled {
  border-image-source: url('../assets/ui/dark-dwellers/button-neutral-3.png');
  filter: grayscale(0.55);
  opacity: 0.65;
}
.btn.primary, .btn.ruby, .btn.danger {
  color: #fff7d6;
  border-image-source: url('../assets/ui/dark-dwellers/button-primary-0.png');
  background: transparent;
  border-color: transparent;
  box-shadow: 0 5px 0 #290817, 0 0 16px rgba(238,39,133,0.35);
}
.btn.primary:hover, .btn.ruby:hover, .btn.danger:hover {
  border-image-source: url('../assets/ui/dark-dwellers/button-primary-1.png');
  box-shadow: 0 6px 0 #290817, 0 0 22px rgba(255,139,67,0.62);
}
.btn.primary:active, .btn.ruby:active, .btn.danger:active {
  border-image-source: url('../assets/ui/dark-dwellers/button-primary-2.png');
}
.btn.toggle.on { border-image-source: url('../assets/ui/dark-dwellers/button-neutral-1.png'); color: #d9fff1; }
.menu-col .btn { height: 48px; font-size: 17px; }
.btn.sub { height: 34px; font-size: 12px; }

.card, .info-box, .shop-item, .codex-cell, .enc-card, .achv-row,
.modal-box, .lu-card, .chest-item, .coop-char, .coop-member, .coop-map,
.coop-lu-box, .coop-code, .enc-stat, .menu-board, .menu-altar, .settings-body {
  background: transparent;
  border-style: solid;
  border-width: 12px;
  border-image: url('../assets/ui/dark-dwellers/panel-base.png') 15 fill stretch;
  border-radius: 0;
  box-shadow: 0 7px 0 rgba(3,1,9,0.58), 0 0 22px rgba(68,48,146,0.2);
}
.card, .shop-item, .codex-cell, .enc-card, .achv-row, .lu-card,
.chest-item, .coop-char, .coop-member, .coop-map, .enc-stat {
  border-width: 9px;
  border-image-slice: 15 fill;
}
.card-grid { gap: 8px; max-width: 880px; }
.card:not(.map-card) { width: 135px; }
.card-name { font-size: 13px; line-height: 1.25; white-space: nowrap; }
.card:hover, .shop-item:hover, .codex-cell:hover, .lu-card:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 0 6px rgba(109,119,255,0.45));
}
.card.selected, .coop-char.sel, .coop-map.sel, .chest-item.evolved {
  background: transparent;
  border-image-source: url('../assets/ui/dark-dwellers/panel-selected.png');
  box-shadow: 0 7px 0 rgba(3,1,9,0.55), 0 0 24px rgba(255,49,155,0.48);
}
.modal-box, .menu-altar { border-image-source: url('../assets/ui/dark-dwellers/panel-accent.png'); }
.menu-altar, .menu-board {
  width: 214px;
  height: 292px;
  padding: 22px 20px;
  color: var(--text);
}
.menu-altar-icon {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 0;
  background: url('../assets/ui/dark-dwellers/slot-1.png') center / 100% 100% no-repeat;
  box-shadow: none;
}
.menu-altar-title, .menu-board-title { color: #ffe5a8; border-color: rgba(255,198,92,0.34); }
.menu-altar-gold, .board-val { color: #ffd46b; text-shadow: 1px 1px 0 #240b24; }
.board-label { color: #d7c9f5; }
.menu-version { color: rgba(223,211,255,0.78); }
.info-desc, .card-sub, .coop-label { color: var(--text-dim); }
.card .pix, .codex-cell .pix, .enc-card .pix, .lu-card .pix {
  filter: drop-shadow(2px 3px 0 rgba(4,1,10,0.75));
}

.coop-input {
  background: #120c27;
  border: 2px solid #695bb3;
  box-shadow: inset 0 0 0 2px #241b49, 0 3px 0 #07040f;
  color: #f5edff;
  font-family: var(--font-pix);
}
.coop-input:focus { border-color: #ff689f; box-shadow: 0 0 12px rgba(255,75,156,0.35); }
.settings-body { gap: 7px; padding: 8px 14px; border-width: 9px; }
.settings-body .btn { min-height: 32px; padding: 2px 12px 4px; border-width: 5px 12px; }
.settings-body .set-danger { margin-top: 6px; }
input[type='range'] {
  height: 12px;
  appearance: none;
  background: #100922;
  border: 2px solid #695bb3;
  box-shadow: inset 0 0 0 1px #080410;
}
input[type='range']::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  appearance: none;
  background: #ffcc68;
  border: 3px solid #4d286d;
  border-radius: 0;
  box-shadow: 2px 2px 0 #080410;
}

.xp-wrap {
  height: 14px;
  background: #100a24;
  border: 2px solid #362865;
  box-shadow: inset 0 0 0 1px #0a0714, 0 2px 0 rgba(0,0,0,0.65);
}
.xp-fill { background: repeating-linear-gradient(90deg, #2f6dc2 0 10px, #54c8ef 10px 18px); box-shadow: 0 0 8px rgba(84,200,239,0.65); }
.hp-wrap, .boss-bar {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #080411;
  box-shadow: none;
}
.hp-wrap { width: 196px; height: 24px; padding: 5px 8px; }
.hp-wrap::after, .boss-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: url('../assets/ui/dark-dwellers/bar-hp.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.hp-fill { height: 100%; background: repeating-linear-gradient(90deg, #2d9a58 0 10px, #63df7b 10px 18px); }
.hp-fill.low { background: repeating-linear-gradient(90deg, #a51e48 0 10px, #ff557d 10px 18px); }
.shield-fill { top: 5px; left: 8px; height: calc(100% - 10px); }
.hp-text { z-index: 6; line-height: 24px; font-family: var(--font-pix); font-size: 10px; }
.boss-bar { position: relative; height: 18px; padding: 4px 8px; }
.boss-bar::after { background-image: url('../assets/ui/dark-dwellers/bar-boss.png'); }
.boss-fill { height: 100%; background: repeating-linear-gradient(90deg, #99183f 0 12px, #f04d66 12px 21px); }
.boss-name { color: #ff8daf; }
.slot {
  width: 34px;
  height: 34px;
  padding: 5px;
  border: 0;
  background: url('../assets/ui/dark-dwellers/slot-0.png') center / 100% 100% no-repeat;
  box-shadow: none;
}
.slot-lv { color: #ffe27d; right: -1px; bottom: -2px; }
.hud-stat, .hud-nextev {
  background: #17102e;
  border: 2px solid #57499a;
  border-radius: 0;
  box-shadow: 0 3px 0 rgba(0,0,0,0.55);
}
.hud-timer { color: #fff5d4; text-shadow: 2px 2px 0 #24143d, 0 0 12px rgba(113,75,225,0.5); }

.toast {
  background: #1b1235;
  border: 2px solid #6e5abb;
  box-shadow: 0 4px 0 rgba(0,0,0,0.55), 0 0 16px rgba(96,65,188,0.35);
}
.toast-title { color: #ffd472; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #100a22; border-left: 2px solid #2e2255; }
::-webkit-scrollbar-thumb { background: #5a3aa0; border: 2px solid #17102f; }
::-webkit-scrollbar-thumb:hover { background: #c1277b; }

@media (max-width: 700px) {
  .menu-big { font-size: 54px; letter-spacing: 8px; }
  .page-title { min-width: 250px; font-size: 23px; }
}