/* ============ 开机自检画面（致敬 Severance · MDR） ============ */
.boot {
  --mdr: #9fe0f7;          /* 青蓝主色 */
  --mdr-dim: #5d97ad;
  --mdr-glow: rgba(120, 210, 245, .45);
  position: fixed; inset: 0; z-index: 10000;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 20%, #10202e 0%, #0a141f 55%, #060d15 100%);
  color: var(--mdr);
  font-family: var(--font-mono);
  padding: 3.5vh 4vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 顶部：标题框 + % Complete + 球标 */
.mdr-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  width: 100%;
}
.mdr-title {
  border: 2px solid var(--mdr);
  padding: 4px 18px 5px;
  font-size: clamp(15px, 1.7vw, 21px);
  font-weight: 700; letter-spacing: .03em;
  box-shadow: 0 0 10px var(--mdr-glow), inset 0 0 8px rgba(120,210,245,.12);
  text-shadow: 0 0 8px var(--mdr-glow);
  flex: 1;
}
.mdr-right { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
#mdr-progress {
  font-size: clamp(14px, 1.5vw, 19px); font-weight: 700;
  text-shadow: 0 0 8px var(--mdr-glow);
}
/* 上下的双线分隔 */
.mdr-rule {
  width: 100%; height: 7px; margin: 10px 0;
  border-top: 2px solid var(--mdr);
  border-bottom: 1px solid var(--mdr-dim);
  box-shadow: 0 0 8px var(--mdr-glow);
}
/* 中间：字母海（MDR 式） */
.boot-mid {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
}
.mdr-hint {
  text-align: center;
  font-size: 12px; letter-spacing: .18em;
  color: var(--mdr-dim);
  margin: 4px 0 2px;
}
.mdr-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  align-content: space-evenly; justify-items: center;
  padding: 1.5vh 1vw;
}
.mdr-grid span {
  font-size: clamp(13px, 1.6vw, 20px);
  font-weight: 700;
  cursor: pointer; user-select: none;
  padding: 2px 4px;
  text-shadow: 0 0 8px var(--mdr-glow);
  transition: scale .12s ease, color .15s ease;
  animation: mdrFloat var(--dur, 3s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes mdrFloat {
  from { translate: 0 calc(var(--amp, 2px) * -1); }
  to   { translate: 0 var(--amp, 2px); }
}
.mdr-grid span.sel {
  color: #fff;
  text-shadow: 0 0 14px rgba(255,255,255,.9), 0 0 6px var(--mdr-glow);
}
.mdr-grid span.win { animation: mdrWin .5s ease forwards; }
@keyframes mdrWin { 50% { scale: 1.7; } 100% { scale: 0; opacity: 0; } }
.mdr-grid span.tap { animation: mdrFloat var(--dur, 3s) ease-in-out var(--delay, 0s) infinite alternate, mdrTap .22s ease; }
@keyframes mdrTap { 40% { scale: 1.55; } }
.mdr-picked { cursor: pointer; }
.mdr-picked {
  min-height: 34px;
  text-align: center;
  font-size: 21px; font-weight: 700;
  letter-spacing: .5em; text-indent: .5em;
  text-shadow: 0 0 10px var(--mdr-glow);
}
.mdr-picked.shake { animation: mdrShake .38s ease; color: #ff9d8c; }
@keyframes mdrShake {
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-4px); }
  90% { transform: translateX(2px); }
}
.mdr-picked.win { color: #fff; }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* DDBS 彩蛋：打字机故事浮层 */
.mdr-story {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  background: rgba(5, 11, 18, .94);
  padding: 8vh 8vw;
  cursor: pointer;
}
.mdr-story pre {
  white-space: pre-wrap;
  max-width: 620px;
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 2.1;
  color: var(--mdr);
  text-shadow: 0 0 8px var(--mdr-glow);
}
.mdr-story-enter { color: inherit; }

/* 底部：O1-O5 分箱 + 进度 */
.mdr-bins { display: flex; gap: 14px; width: 100%; }
.mdr-bins .bin { flex: 1; }
.bin-label {
  border: 2px solid var(--mdr);
  text-align: center; padding: 3px 0 4px;
  font-size: clamp(12px, 1.3vw, 16px); font-weight: 700; letter-spacing: .08em;
  text-shadow: 0 0 8px var(--mdr-glow);
  box-shadow: 0 0 8px rgba(120,210,245,.2);
}
.bin-pct {
  position: relative;
  border: 2px solid var(--mdr);
  margin-top: 5px; height: 22px;
  overflow: hidden;
}
.bin-pct i {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: rgba(140, 215, 245, .28);
  transition: width .25s ease;
}
.bin-pct em {
  position: relative; z-index: 1;
  font-style: normal; font-size: 12px; font-weight: 700;
  padding-left: 7px; line-height: 20px;
  text-shadow: 0 0 6px var(--mdr-glow);
}
.mdr-hex {
  text-align: center;
  font-size: 12px; letter-spacing: .18em;
  color: var(--mdr-dim);
  margin-top: 8px;
}
.boot-skip {
  position: absolute; bottom: 2.4vh; right: 4vw;
  font-family: var(--font-mono);
  font-size: 13px; color: var(--mdr-dim);
  border: 1px solid var(--mdr-dim); padding: 3px 11px;
  background: rgba(6, 13, 21, .6);
}
.boot-skip:hover { color: var(--mdr); border-color: var(--mdr); }

.boot.fade-out { animation: bootFade .35s ease forwards; }
@keyframes bootFade { to { opacity: 0; visibility: hidden; } }

/* 进桌面时 CRT 一闪 */
.desktop.power-on { animation: powerOn .45s ease; }
@keyframes powerOn {
  0%   { filter: brightness(2.5) contrast(2); transform: scaleY(.004); }
  35%  { transform: scaleY(1); filter: brightness(1.6); }
  100% { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .desktop.power-on { animation: none; }
  .boot.fade-out { animation: none; opacity: 0; visibility: hidden; }
}