/* 两个界面共用的部分：像素字体、全屏覆盖层。 */
@font-face {
  font-family: 'Px12';
  src: url('../fonts/px12.woff2') format('woff2');
  font-display: swap;
}

:root {
  --px: 'Px12', 'SimSun', '宋体', monospace;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: #008080;
  font-family: var(--px);
  font-size: 12px;
  -webkit-font-smoothing: none;
  font-smooth: never;
  transition: transform 0.6s;
}

/* 上上下下左右左右BA */
body.flip {
  transform: rotate(180deg);
}

[hidden] {
  display: none !important;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--px);
  font-size: 16px;
  cursor: default;
}

.overlay .center {
  text-align: center;
}

.overlay.black {
  background: #000;
  color: #fff;
}

.overlay.shutting {
  background: #000080;
  color: #fff;
}

.overlay .safe {
  color: #ff8c00;
  font-size: 24px;
  text-align: center;
  padding: 16px;
}

.overlay.bsod {
  background: #0000aa;
  color: #fff;
}

.bsod-box {
  max-width: 34em;
  padding: 16px;
  line-height: 1.6;
}

.bsod-title {
  text-align: center;
}

.bsod-title::first-line {
  background: #aaa;
  color: #0000aa;
}

.blink {
  animation: blink 1s steps(1) infinite;
}

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