/* ============================================================
   THE SCREAM // 入口 — 陰森 × 科技感
   ============================================================ */
:root {
  --mono:
    "SFMono-Regular", "JetBrains Mono", "Fira Code", "Consolas", "Courier New",
    monospace;
  --cyan: #7fd7ff;
  --cyan-dim: rgba(127, 215, 255, 0.55);
  --amber: #ffab5e;
  --bg: #05030a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: #e8e2d6;
  font-family: var(--mono);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* CRT 掃描線（全頁） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.16) 0 1px,
    transparent 1px 3px
  );
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 42%,
    transparent 0%,
    rgba(3, 1, 8, 0.35) 55%,
    rgba(2, 0, 6, 0.88) 100%
  );
}

/* 閃電全域閃光 */
#flash {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse at 50% 18%,
    rgba(215, 238, 255, 0.95),
    rgba(120, 165, 255, 0.35) 45%,
    transparent 75%
  );
}

/* ---------------- 中央內容 ---------------- */
.content {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}

.kicker {
  font-size: 0.8rem;
  letter-spacing: 0.42em;
  color: var(--cyan);
  opacity: 0.85;
  text-shadow: 0 0 14px rgba(127, 215, 255, 0.4);
}

h1.glitch {
  position: relative;
  font-size: clamp(3rem, 11vw, 8rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #f2e7d4;
  text-shadow:
    0 0 22px rgba(255, 120, 30, 0.35),
    0 0 70px rgba(130, 70, 255, 0.3);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.glitch::before {
  color: #55aaff;
  opacity: 0.7;
  animation: glitchA 2.4s infinite linear;
}

.glitch::after {
  color: #ff5599;
  opacity: 0.7;
  animation: glitchB 3.1s infinite linear;
}

@keyframes glitchA {
  0%,
  100% {
    clip-path: inset(0 0 85% 0);
    transform: translate(-3px, -2px);
  }
  20% {
    clip-path: inset(30% 0 40% 0);
    transform: translate(3px, 1px);
  }
  40% {
    clip-path: inset(62% 0 8% 0);
    transform: translate(-2px, 2px);
  }
  60% {
    clip-path: inset(12% 0 66% 0);
    transform: translate(2px, -1px);
  }
  80% {
    clip-path: inset(45% 0 28% 0);
    transform: translate(-3px, 0);
  }
}

@keyframes glitchB {
  0%,
  100% {
    clip-path: inset(78% 0 4% 0);
    transform: translate(3px, 2px);
  }
  25% {
    clip-path: inset(8% 0 70% 0);
    transform: translate(-3px, -1px);
  }
  50% {
    clip-path: inset(40% 0 38% 0);
    transform: translate(2px, 1px);
  }
  75% {
    clip-path: inset(20% 0 55% 0);
    transform: translate(-2px, 2px);
  }
}

/* 閃電命中時的額外抽搐 */
.glitch.hit {
  animation: hit 0.32s linear;
}

@keyframes hit {
  0% {
    transform: skewX(0);
    filter: none;
  }
  20% {
    transform: skewX(9deg) translateX(-7px);
    filter: hue-rotate(70deg);
  }
  45% {
    transform: skewX(-7deg) translateX(6px);
    filter: hue-rotate(-50deg);
  }
  70% {
    transform: skewX(3deg) translateX(-3px);
    filter: none;
  }
  100% {
    transform: none;
    filter: none;
  }
}

.sub {
  font-size: clamp(0.9rem, 2.2vw, 1.25rem);
  letter-spacing: 0.55em;
  color: #9fb8c8;
}

.sub .sep {
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255, 171, 94, 0.6);
}

#enter {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: 0.42em;
  color: #d9f2ff;
  background: rgba(8, 5, 16, 0.6);
  border: 1px solid rgba(127, 215, 255, 0.5);
  padding: 16px 44px 16px 50px;
  cursor: pointer;
  clip-path: polygon(
    14px 0,
    100% 0,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    0 100%,
    0 14px
  );
  transition:
    background 0.25s,
    color 0.25s;
  animation: pulse 2.6s ease-in-out infinite;
}

#enter .en {
  margin-left: 14px;
  color: var(--cyan);
  font-size: 0.72em;
  letter-spacing: 0.3em;
}

#enter:hover {
  background: rgba(127, 215, 255, 0.16);
  color: #ffffff;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(127, 215, 255, 0.12);
  }
  50% {
    box-shadow: 0 0 28px rgba(127, 215, 255, 0.32);
  }
}

.hint {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: rgba(159, 184, 200, 0.6);
}

/* ---------------- HUD 上下列 ---------------- */
.hud {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

.hud-top {
  top: 0;
  padding: 46px 22px 0;
}

.hud-bottom {
  bottom: 0;
  padding: 0 22px 46px;
}

.hud .hud-left,
.hud .hud-right {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.tag {
  padding: 4px 10px;
  border: 1px solid rgba(127, 215, 255, 0.22);
  background: rgba(5, 3, 10, 0.55);
  color: var(--cyan);
}

.tag.dim {
  opacity: 0.6;
  color: #9fb8c8;
}

.tag.warn {
  color: var(--amber);
  border-color: rgba(255, 171, 94, 0.35);
}

.tag b {
  color: #fff;
  font-weight: 400;
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7dff9a;
  margin-right: 8px;
  box-shadow: 0 0 8px #7dff9a;
  animation: blink 1.6s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.tag-btn {
  cursor: pointer;
  font-family: var(--mono);
  letter-spacing: 0.18em;
  background: rgba(5, 3, 10, 0.55);
}

.tag-btn:hover {
  background: rgba(127, 215, 255, 0.16);
}

/* ---------------- 四角框線 ---------------- */
.corner {
  position: fixed;
  width: 38px;
  height: 38px;
  z-index: 10;
  opacity: 0.6;
  pointer-events: none;
}

.c-tl {
  top: 12px;
  left: 12px;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}
.c-tr {
  top: 12px;
  right: 12px;
  border-top: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}
.c-bl {
  bottom: 12px;
  left: 12px;
  border-bottom: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
}
.c-br {
  bottom: 12px;
  right: 12px;
  border-bottom: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
}

/* ---------------- Boot overlay ---------------- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 1, 5, 0.93);
}

#boot.show {
  display: flex;
  animation: bootIn 0.3s ease-out;
}

@keyframes bootIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#boot-log {
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: #9fe8c8;
  white-space: pre-wrap;
  max-width: 640px;
  padding: 0 24px;
  text-shadow: 0 0 12px rgba(80, 255, 180, 0.25);
}

#boot-log::after {
  content: "▌";
  color: var(--cyan);
  animation: blink 1s infinite;
}

/* ---------------- Toast ---------------- */
#toast {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  color: #ffd9a8;
  background: rgba(10, 6, 18, 0.88);
  border: 1px solid rgba(255, 171, 94, 0.4);
  padding: 10px 22px;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  white-space: nowrap;
}

#toast.show {
  opacity: 1;
}

/* ---------------- WebGL 失敗 fallback ---------------- */
/* 2D 備援背景 (WebGL 不可用時取代 canvas) */
#fallback-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
  background: radial-gradient(
    120% 90% at 50% 110%,
    #241040 0%,
    #120823 45%,
    #070310 100%
  );
}

#fallback-bg .swirl {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(
      40% 30% at 30% 25%,
      rgba(255, 150, 40, 0.65),
      transparent 70%
    ),
    radial-gradient(
      35% 28% at 72% 40%,
      rgba(255, 195, 80, 0.5),
      transparent 70%
    ),
    radial-gradient(50% 40% at 55% 15%, rgba(150, 60, 30, 0.5), transparent 75%),
    radial-gradient(
      60% 50% at 45% 80%,
      rgba(90, 30, 140, 0.55),
      transparent 75%
    );
  filter: blur(30px);
  animation: swirlDrift 16s ease-in-out infinite alternate;
}

@keyframes swirlDrift {
  from {
    transform: translate3d(-4%, -2%, 0) rotate(-2deg) scale(1);
  }
  to {
    transform: translate3d(4%, 3%, 0) rotate(3deg) scale(1.12);
  }
}

#fallback-bg .grid-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -12%;
  height: 55%;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(122, 58, 255, 0.28) 0 1px,
      transparent 1px 30px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 229, 255, 0.16) 0 1px,
      transparent 1px 46px
    );
  transform: perspective(420px) rotateX(56deg);
  transform-origin: 50% 0;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  mask-image: linear-gradient(180deg, transparent 0, #000 30%);
}

#fallback-bg .bolt-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    60% 45% at 50% 0%,
    rgba(220, 236, 255, 0.95),
    rgba(120, 160, 255, 0.3) 55%,
    transparent 75%
  );
  opacity: 0;
  animation: cssBolt 6.5s infinite;
}

@keyframes cssBolt {
  0%,
  86%,
  100% {
    opacity: 0;
  }
  87% {
    opacity: 0.75;
  }
  88.5% {
    opacity: 0.12;
  }
  90% {
    opacity: 0.5;
  }
  93% {
    opacity: 0;
  }
}

body.no-webgl #fallback-bg {
  display: block;
}

body.no-webgl #scene {
  display: none;
}

/* 警告橫幅 (取代原本的滿屏 fallback) */
#fallback {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(680px, calc(100vw - 48px));
  background: rgba(16, 8, 28, 0.92);
  border: 1px solid rgba(255, 171, 94, 0.45);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  padding: 14px 18px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-align: left;
  color: #ffd9a8;
}

#fallback pre {
  margin: 8px 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #ffb27a;
  white-space: pre-wrap;
  word-break: break-all;
}

#fallback .fb-hint {
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.7;
  color: rgba(159, 184, 200, 0.75);
}

/* ---------------- 小螢幕 ---------------- */
@media (max-width: 640px) {
  .hud {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }
  .tag {
    padding: 3px 6px;
  }
  .content {
    gap: 12px;
  }
  .sub {
    letter-spacing: 0.3em;
  }
  #enter {
    letter-spacing: 0.28em;
    padding: 14px 30px 14px 34px;
  }
}