:root {
  color: #171816;
  background: #e8e9e5;
  --mono: "SFMono-Regular", "Cascadia Mono", "JetBrains Mono", Consolas, Menlo,
    "PingFang SC", "Microsoft YaHei", monospace;
  font-family: var(--mono);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  background: #e8e9e5;
}

button,
input {
  font: inherit;
}

button,
input,
label {
  -webkit-tap-highlight-color: transparent;
}

#app {
  min-height: 100svh;
}

.experience {
  --strength: 0;
  --stage-progress: 0;
  --ink: #171816;
  --muted: #70746f;
  --accent: #b52b24;
  --gold: #c19a49;
  --thumb-bg: #e8e9e5;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 100svh;
  overflow: hidden;
  padding: 26px clamp(20px, 4vw, 56px) 18px;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 46%, rgb(255 255 255 / 65%) 0 18%, transparent 52%),
    #e8e9e5;
  transition: color 420ms ease;
}

.experience::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 45%, #3b2c24 0, #1d1918 34%, #111 74%),
    #111;
  opacity: calc(var(--strength) * 0.94);
  transition: opacity 140ms linear;
}

/* CRT 扫描线 + 轻微暗角 */
.experience::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 22% 18%, rgb(255 255 255 / 8%) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgb(0 0 0 / 22%) 100%);
  background-size: auto, 7px 7px, 100% 100%;
  mix-blend-mode: soft-light;
  opacity: 0.34;
}

.experience[data-stage="4"],
.experience[data-stage="5"] {
  --ink: #f4f1e8;
  --muted: #b8b4a9;
  --thumb-bg: #1a1715;
}

.experience[data-stage="5"] {
  --accent: #c19a49;
}

/* ---------- 顶栏 ---------- */
.masthead {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 10px;
  border-bottom: 1px dashed color-mix(in srgb, currentColor 22%, transparent);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  transition: color 360ms ease;
}

.eyebrow::before {
  content: "> ";
  color: var(--accent);
  font-weight: 700;
}

h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(30px, 4.4vw, 60px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-shadow: 0 0 22px rgb(193 154 73 / 28%);
}

.level-meter {
  display: grid;
  min-width: 128px;
  padding-top: 2px;
  border-top: 1px dashed currentColor;
  font-family: var(--mono);
  text-align: right;
}

.level-meter span {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.level-output {
  margin-top: 4px;
  font-size: clamp(15px, 2vw, 22px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.level-output::before {
  content: "[ ";
  color: var(--accent);
}

.level-output::after {
  content: " ]";
  color: var(--accent);
}

/* ---------- 画像区 ---------- */
.portrait-zone {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 0;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-top: 4px;
}

.stage-ghost {
  position: absolute;
  z-index: -1;
  top: 46%;
  left: 50%;
  width: 100%;
  margin: 0;
  color: currentColor;
  font-family: var(--mono);
  font-size: clamp(150px, 27vw, 420px);
  font-weight: 900;
  letter-spacing: -0.18em;
  line-height: 0.7;
  text-align: center;
  white-space: nowrap;
  opacity: calc(0.03 + var(--strength) * 0.022);
  transform: translate(-50%, -50%) scale(calc(0.95 + var(--strength) * 0.08));
  transform-origin: center;
  transition: opacity 180ms ease;
}

/* 终端标题栏 */
.term-bar {
  display: flex;
  justify-content: space-between;
  width: min(49vh, 550px, 76vw);
  max-width: 100%;
  margin-bottom: -1px;
  padding: 5px 8px 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-bottom: 0;
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.term-bar__file::after {
  content: "▮";
  color: var(--accent);
  margin-left: 2px;
  animation: cursor-blink 1.1s steps(1) infinite;
}

@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

.portrait-shell {
  position: relative;
  width: min(49vh, 550px, 76vw);
  max-width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  filter: drop-shadow(0 26px 34px rgb(18 20 18 / 14%));
}

.portrait-shell::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 1px dashed color-mix(in srgb, currentColor 38%, transparent);
  content: "";
  pointer-events: none;
}

.portrait-shell::after {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -13px;
  left: -13px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, currentColor 0 12px, transparent 12px calc(100% - 12px), currentColor calc(100% - 12px));
  opacity: 0.4;
  pointer-events: none;
}

.portrait-ascii {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: pre;
  color: #1c1d1a;
  background:
    radial-gradient(circle at 50% 40%, rgb(248 248 246 / 96%), rgb(206 208 205 / 92%) 78%);
}

.imperial-halo {
  position: absolute;
  z-index: 0;
  inset: -9%;
  border: 1px dashed rgb(193 154 73 / 60%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 54%, rgb(193 154 73 / 15%) 54.4% 55.4%, transparent 55.8%),
    conic-gradient(from 0deg, transparent, rgb(193 154 73 / 22%), transparent 18%, transparent 32%, rgb(193 154 73 / 17%), transparent 52%, transparent 74%, rgb(193 154 73 / 20%), transparent);
  opacity: 0;
  transform: rotate(calc(var(--strength) * 28deg)) scale(0.92);
  transition: opacity 500ms ease, transform 700ms ease;
}

.experience[data-stage="5"] .imperial-halo {
  opacity: 0.85;
  transform: rotate(calc(var(--strength) * 28deg)) scale(1);
}

.scan-grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.88%, rgb(255 255 255 / 15%) 50%, transparent 50.12%),
    linear-gradient(0deg, transparent 49.88%, rgb(255 255 255 / 11%) 50%, transparent 50.12%);
  mix-blend-mode: screen;
  opacity: calc(0.14 - var(--strength) * 0.07);
}

.scan-line {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(193 154 73 / 55%), transparent);
  opacity: calc(0.12 + var(--strength) * 0.55);
  animation: scan-sweep 4.5s linear infinite;
}

@keyframes scan-sweep {
  0% {
    top: -2px;
  }
  100% {
    top: 100%;
  }
}

/* box-drawing 四角 */
.frame-corner {
  position: absolute;
  z-index: 4;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  opacity: 0.95;
}

.frame-corner--tl {
  top: -3px;
  left: 1px;
}
.frame-corner--tl::before {
  content: "┌";
}

.frame-corner--tr {
  top: -3px;
  right: 1px;
}
.frame-corner--tr::before {
  content: "┐";
}

.frame-corner--bl {
  bottom: -3px;
  left: 1px;
}
.frame-corner--bl::before {
  content: "└";
}

.frame-corner--br {
  right: 1px;
  bottom: -3px;
}
.frame-corner--br::before {
  content: "┘";
}

/* ---------- 状态读数 ---------- */
.stage-readout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: min(49vh, 550px, 76vw);
  align-items: baseline;
  margin-top: 12px;
}

.stage-readout > span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stage-index {
  text-align: right;
}

.stage-name {
  min-width: 4.5em;
  margin: 0;
  color: currentColor;
  font-family: var(--mono);
  font-size: clamp(34px, 5vh, 54px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-align: center;
  text-shadow: 0 0 calc(var(--strength) * 22px) rgb(193 154 73 / 46%);
}

.stage-name::before {
  content: "[ ";
  color: var(--accent);
  font-weight: 400;
}

.stage-name::after {
  content: " ]";
  color: var(--accent);
  font-weight: 400;
}

.stage-name.is-bump {
  animation: stage-bump 360ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

@keyframes stage-bump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.experience[data-stage="5"] .stage-name {
  color: #d5b56e;
}

/* ---------- 控制面板 ---------- */
.control-panel {
  --rail-inset: 13px;
  position: relative;
  z-index: 10;
  width: min(760px, 100%);
  margin: 8px auto 0;
  padding: 12px 16px 8px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, currentColor 3%, transparent);
}

.range-wrap {
  position: relative;
  height: 46px;
}

.tick-track {
  position: absolute;
  top: 10px;
  right: var(--rail-inset);
  left: var(--rail-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  pointer-events: none;
}

.tick {
  display: block;
  width: 2px;
  height: 7px;
  justify-self: center;
  background: currentColor;
  opacity: 0.22;
  transition: height 120ms ease, opacity 120ms ease, background 120ms ease;
}

.tick:nth-child(6n + 1) {
  height: 16px;
  opacity: 0.5;
}

.tick.is-active {
  height: 12px;
  background: var(--accent);
  opacity: 0.95;
}

.tick.is-active:nth-child(6n + 1) {
  height: 22px;
}

.strength-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 46px;
  margin: 0;
  cursor: ew-resize;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}

.strength-slider::-webkit-slider-runnable-track {
  height: 2px;
  background: color-mix(in srgb, currentColor 28%, transparent);
}

.strength-slider::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -10px;
  border: 2px solid currentColor;
  border-radius: 2px;
  appearance: none;
  background:
    linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 8px, var(--accent) 8px 12px, transparent 12px 16px),
    var(--thumb-bg);
  box-shadow: 3px 3px 0 rgb(0 0 0 / 24%);
}

.strength-slider::-moz-range-track {
  height: 2px;
  background: color-mix(in srgb, currentColor 28%, transparent);
}

.strength-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 3px 3px 0 rgb(0 0 0 / 24%);
}

.strength-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.stage-markers {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 var(--rail-inset);
  list-style: none;
}

.stage-marker {
  width: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color 140ms ease, transform 140ms ease;
}

.stage-marker::before {
  content: "";
  display: block;
  width: 1px;
  height: 5px;
  margin: 0 auto 2px;
  background: currentColor;
  opacity: 0.4;
}

.stage-marker.is-passed {
  color: color-mix(in srgb, var(--accent) 72%, currentColor);
}

.stage-marker.is-current {
  color: currentColor;
  font-weight: 700;
  transform: translate(-50%, -2px);
}

.stage-marker.is-current::before {
  content: "▾";
  width: auto;
  height: auto;
  background: none;
  color: var(--accent);
}

.drag-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-align: center;
}

.drag-hint::before {
  content: "> ";
  color: var(--accent);
  font-weight: 700;
}

.drag-hint span {
  display: inline-block;
  margin: 0 6px;
  color: var(--accent);
}

/* ---------- 页脚 ---------- */
.footer-note {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, currentColor 20%, transparent);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.footer-note span:first-child::before {
  content: "[ OK ] ";
  color: var(--gold);
}

@media (max-width: 700px) {
  .experience {
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 16px 12px 14px;
  }

  .eyebrow {
    max-width: 190px;
    font-size: 8px;
    line-height: 1.4;
  }

  h1 {
    font-size: clamp(26px, 10vw, 44px);
  }

  .level-meter {
    min-width: 88px;
  }

  .level-meter span {
    font-size: 8px;
  }

  .portrait-shell,
  .stage-readout,
  .term-bar {
    width: min(80vw, 50vh, 430px);
  }

  .portrait-zone {
    justify-content: center;
    padding-top: 8px;
  }

  .stage-readout > span {
    font-size: 8px;
  }

  .stage-name {
    font-size: clamp(30px, 10vw, 44px);
  }

  .control-panel {
    margin-top: 8px;
    padding: 10px 10px 6px;
  }

  .stage-marker {
    font-size: 8px;
    letter-spacing: 0;
  }

  .footer-note {
    display: none;
  }
}

@media (max-height: 760px) and (min-width: 701px) {
  .experience {
    padding-top: 18px;
  }

  .portrait-shell,
  .stage-readout,
  .term-bar {
    width: min(43vh, 440px, 70vw);
  }

  .stage-name {
    font-size: 32px;
  }

  .drag-hint,
  .footer-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .imperial-halo {
    transform: none !important;
  }

  .scan-line {
    display: none;
  }
}