:root {
  --bg:#8c1015;
  --red:#e20613;
  --white:#fff;
  --transition-ms:600ms;
  font-family: Arial, Helvetica, sans-serif;
  color-scheme: dark;
}
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body { background:var(--bg); color:var(--white); -webkit-font-smoothing:antialiased; }
.screen, .background { position:absolute; inset:0; overflow:hidden; }
.background { background:linear-gradient(135deg,#890b10,#ad1517); }
.corner { position:absolute; inset:0; background:var(--red); opacity:.6; }
.corner--top { clip-path:polygon(13% 0,83% 0,49% 48%); }
.corner--bottom { clip-path:polygon(50% 64%,84% 100%,16% 100%); }
.view {
  border:0; display:block; position:absolute; inset:0; width:100%; height:100%;
  opacity:0; visibility:hidden; pointer-events:none; background:transparent;
  z-index:1; transition:opacity var(--transition-ms) ease, visibility 0s linear var(--transition-ms);
}
.view.is-visible {
  opacity:1; visibility:visible; pointer-events:auto; z-index:2;
  transition:opacity var(--transition-ms) ease, visibility 0s;
}
.start-screen {
  position:absolute; inset:0; z-index:3; display:flex; justify-content:center;
  align-items:center; text-align:center; padding:24px; transition:opacity 450ms ease, visibility 0s;
}
.start-screen.is-hidden { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 450ms ease, visibility 0s linear 450ms; }
.start-content { max-width:1000px; }
.tiny-label { font-size:clamp(12px,1vw,22px); letter-spacing:.28em; font-weight:700; opacity:.77; }
h1 { font-size:clamp(36px,6.5vw,116px); letter-spacing:-.05em; line-height:1; margin:24px 0; }
.line { background:#f0c894; width:100px; height:4px; margin:22px auto; }
#start-message { font-size:clamp(16px,1.4vw,25px); opacity:.92; }
.retry-link { color:white; display:inline-block; padding:12px 20px; border:1px solid rgba(255,255,255,.6); border-radius:10px; text-decoration:none; margin-top:16px; }
[hidden] { display:none !important; }
.debug-panel {
  position:absolute; right:20px; bottom:20px; z-index:12;
  background:rgba(19,17,23,.95); color:white; padding:18px 22px;
  border:1px solid rgba(255,255,255,.2); border-radius:14px;
  box-shadow:0 10px 35px rgba(0,0,0,.35); width:min(540px,calc(100vw - 40px));
  font-size:15px; line-height:1.5; font-variant-numeric:tabular-nums;
}
.debug-title { font-weight:800; display:flex; justify-content:space-between; gap:10px; }
#debug-state { color:#b9f3cf; }
.debug-lines { margin:10px 0 14px; white-space:pre-line; }
.debug-links { display:flex; gap:18px; margin-bottom:10px; flex-wrap:wrap; }
.debug-links a { color:#ffdddd; }
.debug-panel small { font-size:12px; opacity:.7; }
@media (prefers-reduced-motion:reduce) {
  .view, .start-screen { transition:none !important; }
}