:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", system-ui, sans-serif;
  background: #171312;
  color: #f4eee6;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgb(123 25 27 / 42%) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 75%, rgb(179 147 83 / 25%) 0 2px, transparent 3px),
    radial-gradient(ellipse at center, #32201d, #171312 70%);
}

.terminal {
  width: min(100%, 560px);
  min-height: 360px;
  padding: 42px;
  border: 1px solid rgb(206 174 118 / 48%);
  border-radius: 8px;
  background: rgb(32 25 23 / 92%);
  box-shadow: 0 20px 80px rgb(0 0 0 / 48%), inset 0 0 0 5px rgb(127 35 34 / 12%);
  position: relative;
}

.terminal::before,
.terminal::after {
  position: absolute;
  color: rgb(205 176 121 / 11%);
  font-family: Georgia, serif;
  font-size: 10rem;
  line-height: 1;
  pointer-events: none;
}
.terminal::before { content: "♠"; top: -38px; left: -16px; }
.terminal::after { content: "♦"; right: -18px; bottom: -50px; }

.screen { display: grid; gap: 18px; }
.hidden { display: none; }
.seal { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #b89458; border-radius: 50%; color: #ddbd82; font-size: 1rem; }
h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 600; }
.description, .hint { margin: 0; color: #cbbfaf; line-height: 1.7; }
.hint { font-size: .85rem; }
.challenge { margin: 0; color: #ffd166; font-size: 1.5rem; font-weight: 700; text-align: center; }

form { display: grid; gap: 10px; }
label { font-size: .92rem; color: #ded0bb; }
input, button {
  min-height: 48px;
  border-radius: 9px;
  font: inherit;
}
input {
  padding: 0 13px;
  border: 1px solid #786754;
  color: inherit;
  background: #241d1b;
  outline: none;
}
input:focus { border-color: #c9a466; box-shadow: 0 0 0 3px rgb(201 164 102 / 18%); }
button {
  cursor: pointer;
  border: 0;
  padding: 0 18px;
  color: #fff8ee;
  font-weight: 700;
  background: linear-gradient(135deg, #a42d2c, #772220);
}
button:hover { filter: brightness(1.1); }
button:disabled { cursor: wait; opacity: .65; }
.secondary { color: #ead9bd; background: #4e3b2d; }
.message { min-height: 1.4em; margin: 0; color: #ffb4ad; }
#voice-message { color: #e0ceb2; }
code { overflow-wrap: anywhere; padding: 18px; border: 1px dashed #bd9a60; border-radius: 5px; color: #f2d59d; background: #2b221c; font-size: 1rem; }

@media (max-width: 480px) { .terminal { padding: 28px 22px; } }