:root {
  --dlc-indigo: #262d74;
  --dlc-indigo-deep: #11143f;
  --dlc-night: #090a16;
  --dlc-blue: #7788ec;
  --dlc-lilac: #d7d9ff;
  --dlc-white: #f7f7ff;
  --dlc-coral: #ff6f87;
  --dlc-line: rgba(215, 217, 255, 0.22);
  --acid: var(--dlc-lilac);
  --mint: #8999f2;
  --signal: var(--dlc-coral);
  --blue: var(--dlc-blue);
}

body {
  color: var(--dlc-white);
  background: var(--dlc-night);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  letter-spacing: 0;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-color: var(--dlc-lilac);
}

/* The exhibition scene uses the official site's blue-purple poster language. */
.door-only-intro {
  background-color: var(--dlc-indigo);
  background-image: url("assets/exhibition-hall.jpg");
  background-position: center 45%;
  background-size: cover;
  animation: dlcCamera 18s ease-in-out infinite alternate;
}

.door-only-intro::before {
  display: block;
  background:
    linear-gradient(112deg, rgba(10, 12, 42, 0.94) 0 27%, transparent 27% 69%, rgba(19, 22, 70, 0.72) 69%),
    rgba(38, 45, 116, 0.66);
  mix-blend-mode: multiply;
}

.door-only-intro.has-touched-door::before {
  background:
    linear-gradient(112deg, rgba(10, 12, 42, 0.96) 0 27%, transparent 27% 69%, rgba(19, 22, 70, 0.82) 69%),
    rgba(38, 45, 116, 0.76);
  mix-blend-mode: multiply;
}

.door-only-intro::after {
  display: block;
  opacity: 0.32;
  background-image: radial-gradient(circle, rgba(230, 232, 255, 0.62) 0 1px, transparent 1.4px);
  background-position: calc(100% - 4vw) 7vh;
  background-size: 7px 7px;
  clip-path: polygon(68% 0, 100% 0, 100% 38%, 91% 29%);
}

.door-only-intro .minimal-stage {
  align-items: center;
  padding: 5vh 0;
}

.door-only-intro .minimal-stage::before {
  display: block;
  right: auto;
  bottom: 7vh;
  left: 4vw;
  width: clamp(110px, 13vw, 210px);
  height: clamp(110px, 13vw, 210px);
  border: 1px solid rgba(215, 217, 255, 0.28);
  background: transparent;
  clip-path: polygon(0 0, 100% 0, 100% 1px, 1px 1px, 1px 100%, 0 100%);
  transform: rotate(45deg);
}

.door-only-intro .minimal-door-trigger {
  width: 286px;
  height: 506px;
  margin: 0;
  filter: none;
  perspective: 900px;
}

.minimal-door-trigger .dlc-door {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  filter: none;
  transition: opacity 260ms ease, transform 260ms ease;
}

.minimal-door-trigger .dlc-door::after {
  content: none;
  display: none;
}

.minimal-door-trigger .dlc-door.is-ghost::after {
  content: none;
  display: none;
}

.minimal-door-trigger .door-frame {
  position: absolute;
  inset: 0;
  border: 9px solid #cfd1e9;
  border-bottom-width: 5px;
  background: #080914;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.minimal-door-trigger .door-panel {
  position: absolute;
  inset: 16px 14px 7px;
  overflow: hidden;
  border: 1px solid #50567b;
  background: #111326;
  box-shadow: inset 0 0 54px rgba(0, 0, 0, 0.45);
  transition: opacity 260ms ease, transform 500ms ease;
}

.minimal-door-trigger .door-panel::before,
.minimal-door-trigger .door-panel::after {
  content: "";
  position: absolute;
  right: 28px;
  left: 28px;
  border: 2px solid #292d52;
  box-shadow: inset 0 0 0 1px rgba(215, 217, 255, 0.04);
}

.minimal-door-trigger .door-panel::before {
  top: 34px;
  height: 145px;
}

.minimal-door-trigger .door-panel::after {
  bottom: 32px;
  height: 192px;
}

.minimal-door-trigger .door-handle {
  position: absolute;
  z-index: 3;
  top: 51%;
  right: 29px;
  width: 43px;
  height: 7px;
  border-radius: 0;
  background: var(--dlc-lilac);
  box-shadow: 0 0 15px rgba(215, 217, 255, 0.38);
}

.minimal-door-trigger .door-handle::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -5px;
  width: 16px;
  height: 22px;
  border: 2px solid var(--dlc-lilac);
  background: #171a36;
}

.minimal-door-trigger:hover .door-frame,
.minimal-door-trigger:focus-visible .door-frame {
  border-color: var(--dlc-white);
  box-shadow: inset 0 0 0 1px var(--dlc-white);
}

.minimal-door-trigger:hover .door-panel,
.minimal-door-trigger:focus-visible .door-panel {
  border-color: #7f88be;
}

.minimal-door-trigger:focus-visible {
  outline: 1px solid var(--dlc-lilac);
  outline-offset: 12px;
}

.dlc-door:not(.is-ghost) {
  animation: classicDoorArrive 820ms cubic-bezier(0.22, 0.78, 0.24, 1) both,
    classicDoorKnock 5s ease-in-out 1.2s infinite;
}

.dlc-door.is-ghost {
  opacity: 0.48;
  animation: classicDoorPhase 620ms ease-out both, classicDoorGhost 3.2s ease-in-out 620ms infinite;
}

.dlc-door.is-ghost .door-panel {
  opacity: 0.45;
  transform: translateX(7px);
}

.knock-caption {
  top: 49%;
  left: calc(50% + 176px);
}

.knock-caption i {
  border-color: rgba(215, 217, 255, 0.88);
  border-radius: 0;
  transform: rotate(45deg);
}

/* Date lock: an editorial poster panel with a restrained terminal layer. */
.date-lock-modal {
  border: 1px solid #858ed1;
  border-radius: 0;
  padding: 38px;
  background:
    linear-gradient(135deg, transparent 0 78%, rgba(119, 136, 236, 0.12) 78%),
    rgba(13, 15, 47, 0.97);
  box-shadow: 12px 12px 0 rgba(5, 6, 20, 0.42);
}

.date-lock-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 118px;
  height: 4px;
  background: var(--dlc-lilac);
}

.modal-kicker,
.ending-label {
  color: #aeb6ff;
  font-family: Consolas, "Courier New", monospace;
}

.date-lock-modal h1,
.record-heading h2,
.simple-archive-view h2,
.ending-narrative h1 {
  font-family: STSong, SimSun, "Songti SC", serif;
  font-weight: 700;
}

.date-lock-modal h1 {
  max-width: none;
  font-size: 32px;
  letter-spacing: 0;
}

.date-answer-form input {
  border-color: #414875;
  border-radius: 0;
  background: #090b21;
  font-family: Consolas, "Courier New", monospace;
}

.date-answer-form input:focus {
  border-color: var(--dlc-lilac);
}

.date-submit {
  border-radius: 0;
  color: #171a4d;
  background: var(--dlc-lilac);
}

.date-submit:hover {
  background: var(--dlc-white);
}

.archive-clue-link {
  border-color: #6f79bc;
  border-radius: 0;
}

.archive-clue-link:hover {
  border-color: var(--dlc-lilac);
  background: rgba(119, 136, 236, 0.12);
}

.date-answer-feedback {
  color: #ff9aaa;
}

.door-is-opening .dlc-door {
  opacity: 1;
  animation: doorBecomeReal 420ms ease-out both;
}

.door-is-opening .dlc-door .door-frame {
  background: var(--dlc-white);
}

.door-is-opening .dlc-door .door-panel {
  transform-origin: left center;
  animation: openClassicDoor 900ms ease-in 280ms forwards;
}

/* QQ remains recognizable, but its chrome now belongs to the DLC identity. */
.qq-story-app {
  color: #eef0ff;
  background: var(--dlc-night);
}

.qq-story-titlebar {
  min-height: 58px;
  border-bottom-color: #353b78;
  background: #151947;
}

.qq-logo {
  color: #171a4d;
  background: var(--dlc-lilac);
}

.account-avatar {
  border-radius: 2px;
  color: white;
  background: var(--dlc-blue);
}

.qq-system span:first-child {
  color: #aeb6ff;
}

.qq-story-layout {
  min-height: calc(100svh - 58px);
}

.qq-story-rail {
  min-height: calc(100svh - 58px);
  border-right: 1px solid #30366e;
  background: #0f1234;
}

.rail-button {
  border-radius: 2px;
  color: #8188b6;
}

.rail-button:hover,
.rail-button.active {
  color: var(--dlc-white);
  background: #353c83;
}

.rail-button.active {
  box-shadow: inset 2px 0 var(--dlc-lilac);
}

.story-conversations {
  border-right-color: #353b78;
  background: #191d4d;
}

.story-list-search {
  border: 1px solid #3c4382;
  border-radius: 2px;
  color: #9299c5;
  background: #101334;
}

.story-conversation:hover,
.story-conversation.selected {
  background: #2a3070;
}

.story-conversation.selected {
  box-shadow: inset 3px 0 var(--dlc-lilac);
}

.story-conversation small,
.group-header small,
.record-heading small,
.message-meta strong,
.search-result-count,
.simple-archive-view header p {
  color: #9299bd;
}

.archive-progress {
  border-top-color: #353b78;
}

.archive-progress > strong,
.record-heading p,
.archive-search-result time,
.archive-file-list > div > i {
  color: #b9bfff;
}

.archive-progress > div {
  background: #0f1232;
}

.archive-progress i {
  background: var(--dlc-lilac);
}

.qq-story-main {
  position: relative;
  grid-template-rows: 70px 58px 50px minmax(0, 1fr);
  max-height: calc(100svh - 58px);
  background: #111436;
}

.group-header,
.archive-search-form,
.archive-tabs {
  border-bottom-color: #353b78;
}

.group-header {
  background: #151947;
}

.group-header strong {
  font-family: STSong, SimSun, "Songti SC", serif;
  font-size: 16px;
}

.return-door,
.archive-search-form button,
.calendar-controls select,
.answer-found,
.answer-found button,
.trace-earlier,
.archive-search-result,
.no-search-result,
.ddl-easter-egg,
.member-grid > div,
.archive-image,
.settings-modal,
.reset-progress {
  border-radius: 2px;
}

.return-door {
  border-color: #5a63a4;
  color: #c4c8ee;
}

.return-door:hover {
  border-color: var(--dlc-lilac);
  color: white;
}

.archive-search-form {
  background: #0d102e;
}

.archive-search-form > i {
  color: #9ea6e2;
}

.archive-search-form button {
  color: #d7d9ff;
  background: #30366e;
}

.archive-search-form button[type="submit"] {
  color: #171a4d;
  background: var(--dlc-lilac);
}

.archive-tabs {
  background: #151947;
}

.archive-tabs button {
  color: #8990bd;
}

.archive-tabs button.active {
  color: white;
}

.archive-tabs button.active::after {
  background: var(--dlc-lilac);
}

.archive-content {
  background:
    radial-gradient(circle, rgba(119, 136, 236, 0.11) 0 1px, transparent 1.2px) 100% 0 / 8px 8px no-repeat,
    #0d102b;
}

.calendar-panel {
  border-right-color: #353b78;
  background: #0d102b;
}

.calendar-heading strong {
  font-family: STSong, SimSun, "Songti SC", serif;
  font-size: 15px;
}

.calendar-heading small,
.calendar-heading > span,
.calendar-weekdays span {
  color: #7d85b4;
}

.calendar-controls select {
  border-color: #3e4683;
  color: #e2e4ff;
  background: #181c4a;
}

.calendar-day {
  border-radius: 0;
  color: #565d8c;
}

.calendar-day.key-date {
  color: #7981ae;
  background: #171b45;
}

.calendar-day.key-date.unlocked {
  border-color: #707ac3;
  color: white;
  background: #2c3373;
}

.calendar-day.selected {
  border-color: var(--dlc-lilac);
  color: #161943;
  background: var(--dlc-lilac);
}

.timeline-record {
  border-left-color: #42497c;
  color: #9ba2ce;
}

.timeline-record.active {
  border-left-color: var(--dlc-lilac);
  color: white;
  background: #20265c;
}

.record-panel {
  background:
    linear-gradient(145deg, transparent 0 74%, rgba(119, 136, 236, 0.08) 74%),
    #111436;
}

.record-heading {
  border-bottom-color: #383f7b;
}

.record-heading h2 {
  font-size: 24px;
}

.record-heading > span {
  color: #252a63;
}

.record-summary {
  color: #9ba2c9;
}

.story-message p {
  border: 1px solid #3a4177;
  border-radius: 2px;
  color: #eceeff;
  background: #1b2051;
}

.story-message.organizer p {
  border-color: #949de7;
  color: #171a4d;
  background: #cdd1ff;
}

.message-meta time {
  color: #656d9e;
}

.tone-cyan {
  background: #91d7e2;
}

.tone-amber {
  background: #ffd49d;
}

.tone-violet {
  background: #c9b6f5;
}

.tone-red {
  background: #ff9ba8;
}

.tone-green {
  background: #a7dfbd;
}

.answer-found {
  border-color: #6770b4;
  background: #20265a;
}

.answer-found span,
.timeline-complete {
  color: #a6acd2;
}

.answer-found strong {
  color: var(--dlc-lilac);
}

.answer-found button,
.trace-earlier {
  color: #171a4d;
  background: var(--dlc-lilac);
}

.origin-quote {
  color: var(--dlc-lilac);
  font-family: STSong, SimSun, "Songti SC", serif;
  font-size: 28px;
}

.timeline-complete {
  border-left-color: var(--dlc-lilac);
}

.archive-search-result,
.no-search-result,
.ddl-easter-egg,
.member-grid > div {
  border-color: #394077;
  background: #171b47;
}

.archive-search-result:hover {
  border-color: var(--dlc-lilac);
  background: #20265a;
}

.archive-search-result small,
.no-search-result,
.ddl-easter-egg,
.member-grid small,
.archive-file-list small,
.settings-modal p {
  color: #9299bd;
}

.archive-file-list > div {
  border-bottom-color: #353b78;
}

.archive-image {
  border-color: #555e9e;
  filter: saturate(0.35) sepia(0.15) hue-rotate(188deg);
}

.archive-image span {
  background: rgba(19, 23, 70, 0.88);
}

.settings-modal {
  border-color: #6e78bd;
  background: #151947;
}

.reset-progress {
  border-color: var(--dlc-coral);
  color: #ff9aaa;
}

/* Endings use the same monochrome event-poster composition. */
.story-ending {
  background-color: var(--dlc-indigo);
  background-image: url("assets/exhibition-hall.jpg");
}

.story-ending::before {
  background:
    linear-gradient(110deg, rgba(13, 15, 49, 0.9) 0 46%, rgba(38, 45, 116, 0.74) 46%),
    rgba(38, 45, 116, 0.68);
}

.story-ending::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 34vw;
  height: 34vw;
  opacity: 0.36;
  background-image: radial-gradient(circle, rgba(231, 232, 255, 0.7) 0 1px, transparent 1.4px);
  background-size: 7px 7px;
  clip-path: polygon(30% 0, 100% 0, 100% 100%);
}

.ending-door-open {
  width: 260px;
  height: 460px;
  perspective: 900px;
}

.ending-door-open .dlc-door {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  animation: none;
  filter: none;
}

.ending-door-open .door-frame {
  position: absolute;
  inset: 0;
  border: 9px solid var(--dlc-lilac);
  border-bottom-width: 5px;
  background: var(--dlc-white);
  box-shadow: inset 0 0 90px #aeb6ff;
}

.ending-door-open .door-panel {
  position: absolute;
  inset: 16px 14px 7px;
  border: 1px solid #50567b;
  background: #111326;
  transform: perspective(700px) rotateY(-78deg);
  transform-origin: left center;
}

.ending-door-open .door-panel::before,
.ending-door-open .door-panel::after {
  content: "";
  position: absolute;
  right: 28px;
  left: 28px;
  border: 2px solid #292d52;
}

.ending-door-open .door-panel::before {
  top: 34px;
  height: 132px;
}

.ending-door-open .door-panel::after {
  bottom: 32px;
  height: 170px;
}

.ending-door-open .door-handle {
  display: none;
}

.ending-narrative h1 {
  font-size: 48px;
}

.ending-narrative > p:not(.ending-label),
.ending-narrative blockquote {
  color: rgba(239, 240, 255, 0.8);
}

.ending-narrative blockquote {
  border-left-color: var(--dlc-coral);
}

.ending-actions button {
  border-radius: 0;
  color: #181b4d;
  background: var(--dlc-lilac);
}

.ending-actions button:hover {
  background: white;
}

@keyframes dlcCamera {
  from { background-position: 48% 45%; }
  to { background-position: 52% 43%; }
}

@keyframes classicDoorArrive {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes classicDoorKnock {
  0%, 68%, 78%, 100% { transform: translateX(0); }
  69% { transform: translateX(-2px); }
  70% { transform: translateX(3px); }
  71% { transform: translateX(-2px); }
  73% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
}

@keyframes classicDoorPhase {
  0% { opacity: 1; transform: translateX(0); }
  24% { opacity: 0.18; transform: translateX(-12px); }
  48% { opacity: 0.7; transform: translateX(8px); }
  72% { opacity: 0.24; transform: translateX(-4px); }
  100% { opacity: 0.48; transform: translateX(4px); }
}

@keyframes classicDoorGhost {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 0.34; }
}

@keyframes openClassicDoor {
  to { transform: perspective(700px) rotateY(-84deg); }
}

@media (max-width: 760px) {
  .door-only-intro .minimal-stage {
    padding-bottom: 7vh;
  }

  .door-only-intro .minimal-door-trigger {
    width: 218px;
    height: 386px;
  }

  .minimal-door-trigger .door-panel::before {
    top: 26px;
    height: 104px;
  }

  .minimal-door-trigger .door-panel::after {
    bottom: 24px;
    height: 140px;
  }

  .knock-caption {
    top: 49%;
    left: calc(50% + 126px);
  }

  .date-lock-modal {
    padding: 32px 20px 24px;
    box-shadow: 7px 7px 0 rgba(5, 6, 20, 0.42);
  }

  .qq-story-layout {
    display: block;
    min-height: 0;
  }

  .qq-story-rail {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    width: 100%;
    min-height: 48px;
    height: 48px;
    flex-direction: row;
    gap: 4px;
    padding: 4px 8px;
    border-right: 0;
    border-bottom: 1px solid #30366e;
  }

  .qq-story-rail .rail-spacer {
    flex: 1;
  }

  .qq-story-rail .rail-button {
    width: 40px;
    height: 40px;
  }

  .qq-story-rail .rail-button.active {
    box-shadow: inset 0 -2px var(--dlc-lilac);
  }

  .story-conversations {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid #353b78;
  }

  .story-list-search,
  .archive-progress {
    display: none;
  }

  .story-conversation.selected {
    min-height: 64px;
  }

  .qq-story-main {
    display: grid;
    grid-template-rows: auto auto auto auto;
    min-height: 0;
    max-height: none;
  }

  .archive-content,
  .record-panel {
    overflow: visible;
  }

  .calendar-panel {
    border-right: 0;
    border-bottom-color: #353b78;
  }

  .ending-door-open {
    width: 190px;
    height: 338px;
  }

  .ending-narrative h1 {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .door-only-intro,
  .dlc-door,
  .dlc-door.is-ghost {
    animation: none !important;
  }
}