:root { 
  --bg: #000; 
  --ink: #fff; 
  --muted: #9aa0a6; 
  --hi: #0af; 
}

html, body { 
  height: 100%; 
  margin: 0; 
  background: var(--bg); 
  color: var(--ink); 
}

.app { 
  position: relative; 
  min-height: 100%; 
  display: flex; 
  flex-direction: column;
  z-index: 1;
}

.stage { 
  flex: 1 1 auto; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 12px; 
  overflow: hidden;
  position: relative;
  z-index: 1;
}

#screen_wrap { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 100%; 
  height: 100%; 
}

#screen {
  font-family: Consolas, "Courier New", monospace;
  line-height: 1; /* set by JS to CONFIG.lineHeight */
  background: #000; 
  color: #fff;
  padding: 12px; 
  border-radius: 12px;
  font-size: 11px; 
  white-space: pre; 
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.45);
}

/* Center UI layer (loader / play) */
.ui { 
  position: fixed; 
  inset: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  pointer-events: none; 
  z-index: 5; 
}

.ui > * { 
  pointer-events: auto; 
}

/* Bouncing loading dots */
.loader { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  flex-direction: column; 
}

.dots { 
  display: flex; 
  gap: 8px; 
}

.dot { 
  width: 12px; 
  height: 12px; 
  background: var(--hi); 
  border-radius: 50%;
  animation: bounce 0.9s infinite ease-in-out; 
}

.dot:nth-child(2) { 
  animation-delay: .15s; 
}

.dot:nth-child(3) { 
  animation-delay: .30s; 
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: translateY(0); 
    opacity: .6; 
  }
  40% { 
    transform: translateY(-8px); 
    opacity: 1; 
  }
}

.loadtxt { 
  color: #fff; 
  font: 14px system-ui,-apple-system,Segoe UI,Roboto,Arial; 
  opacity: .9; 
}

/* Controls row appears when ready */
.controls { 
  display: none; 
  gap: 12px; 
  align-items: center; 
}

.btn {
  border: 0; 
  border-radius: 12px; 
  padding: 10px 14px; 
  cursor: pointer; 
  font: 14px system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: #0af; 
  color: #000; 
  font-weight: 600; 
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}

.btn:focus-visible { 
  outline: 3px solid #6cf; 
  outline-offset: 4px; 
}

.ghost {
  border: 1px solid #2b2b2b; 
  background: #121212; 
  color: #fff; 
  font-weight: 500;
}

/* Portrait overlay */
.orient { 
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,.78); 
  color: #fff; 
  display: none;
  align-items: center; 
  justify-content: center; 
  text-align: center; 
  padding: 28px; 
  z-index: 10; 
}

.orient.show { 
  display: flex; 
}

.card { 
  max-width: 520px; 
  width: 100%; 
  background: #0b0b0b; 
  border: 1px solid #1f1f1f; 
  border-radius: 14px; 
  padding: 20px;
  box-shadow: 0 8px 36px rgba(0,0,0,.6); 
}

.hint { 
  color: var(--muted); 
  font: 14px system-ui,-apple-system,Segoe UI,Roboto,Arial; 
  margin-top: 10px; 
}

.actions { 
  margin-top: 16px; 
  display: flex; 
  gap: 10px; 
  justify-content: center; 
}

.tip { 
  font: 12px system-ui,-apple-system,Segoe UI,Roboto,Arial; 
  color: var(--muted); 
  text-align: center; 
  padding: 10px 0 18px; 
}

/* Bottom info (background loading %) */
.status { 
  position: fixed; 
  left: 12px; 
  right: 12px; 
  bottom: 10px; 
  text-align: center; 
  color: var(--muted);
  font: 12px system-ui,-apple-system,Segoe UI,Roboto,Arial; 
  z-index: 6; 
}

/* Fullscreen toggle button */
.fs-toggle {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: white !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  backdrop-filter: blur(10px);
  transition: opacity 0.3s ease, background 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.fs-toggle:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.fs-toggle:focus-visible {
  outline: 2px solid white !important;
  outline-offset: 2px;
}

.fs-toggle.fade-out {
  opacity: 0 !important;
  pointer-events: none !important;
}

.fs-toggle svg {
  width: 20px !important;
  height: 20px !important;
  fill: white !important;
  display: block !important;
}

/* Make sure both SVG icons are properly positioned */
#fsIconEnter,
#fsIconExit {
  position: absolute !important;
}

@media (prefers-reduced-motion: reduce) { 
  .ui, #screen { 
    transition: none; 
  } 
}