:root {
  --bg-main: #101520;
  --text-main: #f2e9d0;
  --text-soft: #b4c4cf;
  --gold: #f4d07d;

  --pack-root: "assets/level_select/v1/level_select_pack_v1/assets";

  --panel-info: url("assets/level_select/v1/level_select_pack_v1/assets/panels/panel_level_info.png");

  --play-normal: url("assets/level_select/v1/level_select_pack_v1/assets/buttons/btn_play_normal.png");
  --play-hover: url("assets/level_select/v1/level_select_pack_v1/assets/buttons/btn_play_hover.png");
  --play-pressed: url("assets/level_select/v1/level_select_pack_v1/assets/buttons/btn_play_pressed.png");
  --play-disabled: url("assets/level_select/v1/level_select_pack_v1/assets/buttons/btn_locked_disabled.png");

  --node-open: url("assets/level_select/v1/level_select_pack_v1/assets/nodes/node_open.png");
  --node-locked: url("assets/level_select/v1/level_select_pack_v1/assets/nodes/node_locked.png");
  --node-current: url("assets/level_select/v1/level_select_pack_v1/assets/nodes/node_current.png");
  --node-selected: url("assets/level_select/v1/level_select_pack_v1/assets/nodes/node_selected.png");
  --node-done: url("assets/level_select/v1/level_select_pack_v1/assets/nodes/node_done.png");
  --node-boss-open: url("assets/level_select/v1/level_select_pack_v1/assets/nodes/node_boss_open.png");
  --node-boss-locked: url("assets/level_select/v1/level_select_pack_v1/assets/nodes/node_boss_locked.png");
  --node-boss-done: url("assets/level_select/v1/level_select_pack_v1/assets/nodes/node_boss_done.png");
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at 16% 10%, rgba(71, 101, 56, 0.34) 0%, transparent 36%),
    radial-gradient(circle at 82% 8%, rgba(96, 67, 128, 0.3) 0%, transparent 38%),
    linear-gradient(165deg, #0c1320 0%, #121a28 46%, #0d151a 100%);
}

.campaign-shell {
  width: min(1540px, 100%);
  border: 2px solid #3d4d61;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(8, 13, 19, 0.92);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.46);
}

.campaign-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #344558;
  background: linear-gradient(180deg, #121a29 0%, #101623 100%);
}

.campaign-title-wrap h1 {
  margin: 0;
  font-size: clamp(20px, 3vw, 34px);
  line-height: 0.92;
  color: #e95c64;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.campaign-title-wrap p {
  margin: 6px 0 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}

.campaign-status {
  min-width: 270px;
  padding: 10px 14px;
  border: 1px solid #3c5067;
  border-radius: 9px;
  background: rgba(9, 16, 28, 0.7);
}

.campaign-status .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9fb3c1;
}

.campaign-status .value {
  margin-top: 4px;
  color: #dbe8f3;
}

.campaign-status strong {
  color: var(--gold);
}

.campaign-main {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 12px;
  padding: 12px;
}

.campaign-map-panel {
  border: 2px solid #304255;
  border-radius: 12px;
  overflow: hidden;
  background: #0f1826;
}

.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1534 / 1024;
}

.map-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  user-select: none;
  pointer-events: none;
}

.map-layer.paths {
  opacity: 0.88;
}

.node-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.map-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.map-fx-sprite {
  position: absolute;
  user-select: none;
  pointer-events: none;
  image-rendering: pixelated;
  will-change: left, top, transform, opacity;
}

.map-fx-sprite.smoke {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(215, 236, 255, 0.18));
}

.map-fx-sprite.wind {
  mix-blend-mode: screen;
}

.map-fx-sprite.leaf {
  mix-blend-mode: screen;
  opacity: 0.82;
}

.level-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(42px, 3.7vw, 56px);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: var(--node-locked) center / contain no-repeat;
  color: #e9f0ef;
  font-weight: 800;
  font-size: clamp(14px, 1.3vw, 20px);
  line-height: 1;
  cursor: pointer;
  image-rendering: pixelated;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  transition: transform 100ms ease, filter 100ms ease;
}

.level-node:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.06);
  filter: brightness(1.1);
}

.level-node:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.02);
}

.level-node[data-state="open"] {
  background-image: var(--node-open);
}

.level-node[data-state="current"] {
  background-image: var(--node-current);
}

.level-node[data-state="selected"] {
  background-image: var(--node-selected);
}

.level-node[data-state="done"] {
  background-image: var(--node-done);
}

.level-node[data-state="locked"] {
  background-image: var(--node-locked);
  color: #7f8c9a;
}

.level-node[data-state="boss-open"] {
  background-image: var(--node-boss-open);
}

.level-node[data-state="boss-done"] {
  background-image: var(--node-boss-done);
}

.level-node[data-state="boss-locked"] {
  background-image: var(--node-boss-locked);
  color: #7f8c9a;
}

.level-node:disabled {
  cursor: not-allowed;
}

.level-info-panel {
  background: var(--panel-info) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  min-height: 100%;
  padding: 14px;
}

.panel-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.level-kicker {
  color: #a7bcc9;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

.level-info-panel h2 {
  margin: 0;
  color: #f7e6ba;
  font-size: 27px;
  line-height: 1.04;
}

.level-info-panel p {
  margin: 0;
  color: #c8d6dd;
}

.preview-wrap {
  margin-top: 2px;
  border: 1px solid #445467;
  border-radius: 7px;
  background: #121c2a;
  overflow: hidden;
}

#levelPreview {
  width: 100%;
  display: block;
  image-rendering: pixelated;
}

.level-meta {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.level-meta div {
  border: 1px solid #3a4a5f;
  border-radius: 8px;
  background: rgba(11, 17, 24, 0.6);
  padding: 7px 8px;
}

.level-meta dt {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: #95a8b7;
}

.level-meta dd {
  margin: 4px 0 0;
  font-size: 17px;
  color: #f4ebd1;
  font-weight: 700;
}

.play-btn {
  margin-top: auto;
  border: 0;
  min-height: 56px;
  background: var(--play-normal) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  color: #f7edd7;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.play-btn:hover:not(:disabled) {
  background-image: var(--play-hover);
}

.play-btn:active:not(:disabled) {
  background-image: var(--play-pressed);
}

.play-btn:disabled {
  background-image: var(--play-disabled);
  color: #a9afb7;
  cursor: not-allowed;
}

.hint-text {
  min-height: 34px;
  font-size: 13px;
  color: #b4c4ce;
}

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

  .level-info-panel {
    min-height: 300px;
  }

  .play-btn {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  body {
    padding: 6px;
  }

  .campaign-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .campaign-status {
    min-width: 100%;
  }

  .campaign-title-wrap h1 {
    font-size: 24px;
  }

  .level-info-panel h2 {
    font-size: 22px;
  }
}