/* DOOM — in-game UI layered over the engine canvas:
   #canvas sizing, the fullscreen toggle (#fsBtn), and the in-game
   flavor switcher (floating top-right + inline picker variant). */

#canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  width: 100svw;
  height: 100svh;
  background: var(--pure-black);
  outline: 0;
}

#fsBtn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 5;
  background: var(--doom-overlay-strong, rgba(20, 20, 24, 0.6));
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.35;
  transition: opacity 0.2s;
}
#fsBtn:hover {
  opacity: 1;
  background: var(--doom-overlay-hover, rgba(30, 30, 36, 0.9));
}
#fsBtn.hidden {
  display: none;
}
body.mobile #fsBtn {
  display: none !important;
}

/* In-game flavor switcher. Sits beside the fullscreen button (top-right)
   while playing; the menu pops down. Visible on mobile too — switching
   flavors is more useful than the fullscreen toggle on touch devices,
   so we don't hide it like #fsBtn. */
/* Floating in-game switcher (top-right of canvas while playing). */
#flavorSwitcher.floating {
  position: fixed;
  top: 12px;
  right: 100px;
  z-index: 6;
  font-family: inherit;
}
.flavor-switcher.hidden {
  display: none;
}
body.mobile #flavorSwitcher.floating {
  /* Push down a bit so it's clear of any phone notch/status. */
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
}
.flavor-switch-btn {
  -webkit-appearance: none;
  appearance: none;
  background: var(--doom-overlay-strong, rgba(20, 20, 24, 0.6));
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.35;
  transition: opacity 0.2s;
}
.flavor-switch-btn:hover,
.flavor-switcher.open .flavor-switch-btn {
  opacity: 1;
  background: var(--doom-overlay-hover, rgba(30, 30, 36, 0.9));
}
/* Inline picker variant: full opacity by default since it's the only
   way into Manual mode and shouldn't be near-invisible. */
.flavor-switcher.inline .flavor-switch-btn {
  opacity: 0.9;
  font-size: 12px;
  padding: 8px 14px;
}
.flavor-switch-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--doom-overlay-deep, rgba(15, 15, 18, 0.96));
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  box-shadow: var(--shadow-modal);
  backdrop-filter: blur(4px);
  z-index: 10;
}
/* Inline picker menu opens centered under the button (the picker page
   is centered, so right-anchoring would push it off-screen on small
   widths). */
.flavor-switcher.inline .flavor-switch-menu {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
.flavor-switch-menu.hidden {
  display: none;
}
.flavor-switch-menu button {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 100ms;
}
.flavor-switch-menu button:hover {
  background: var(--doom-menu-hover, rgba(255, 255, 255, 0.06));
}
.flavor-switch-menu button[disabled] {
  cursor: default;
  opacity: 0.55;
  background: var(--doom-menu-disabled, rgba(255, 255, 255, 0.04));
}
.flavor-switch-menu button .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  /* Flavour-specific dot colours map to scoped --doom-dot-* tokens so
   * the HTML stays markup-pure and the audit sees zero bare literals.
   * Tokens defined in styles/base.css alongside the rest of the
   * doom-scoped palette. */
  background: var(--doom-dot-classic, #c8392e);
}
.flavor-switch-menu button[data-switch='classic'] .dot {
  background: var(--doom-dot-classic, #c8392e);
}
.flavor-switch-menu button[data-switch='freedoom'] .dot {
  background: var(--doom-dot-freedoom, #d9883a);
}
.flavor-switch-menu button[data-switch='legend'] .dot {
  background: var(--doom-dot-legend, #4fa861);
}
.flavor-switch-menu button[data-switch='mario'] .dot {
  background: var(--doom-dot-mario, #2a73d8);
}
.flavor-switch-menu button[data-switch='metroid'] .dot {
  background: var(--doom-dot-metroid, #c39e3a);
}
.flavor-switch-menu button[data-switch='castlevania'] .dot {
  background: var(--doom-dot-castlevania, #7a3fb1);
}
.flavor-switch-menu button[data-switch='moddb'] .dot {
  background: var(--doom-dot-moddb, #d96aa6);
}
.flavor-switch-menu button[data-switch='manual'] .dot {
  background: var(--doom-dot-manual, #888888);
}
.flavor-switch-menu button[data-active='true']::after {
  content: '✓';
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
}
.flavor-switch-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}
/* Bigger touch targets on mobile so the menu doesn't feel cramped
   when the user opens it from the inline picker. */
body.mobile .flavor-switch-menu {
  min-width: 240px;
}
body.mobile .flavor-switch-menu button {
  padding: 12px 12px;
  font-size: 13px;
}

#exited .outcome {
  font-size: 14px;
  color: var(--text);
}
#exited .outcome.ok {
  color: var(--ok);
}
#exited .outcome.err {
  color: var(--warn);
}
#exited .detail {
  font-size: 11px;
  color: var(--dim);
  max-width: 500px;
  line-height: 1.6;
}
#exited .reason {
  font-size: 11px;
  color: var(--dim);
  font-family: inherit;
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
  z-index: 20;
}
.modal.hidden {
  display: none;
}
.modal .body {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal h3 {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}
.modal p {
  margin: 0;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.5;
}