/* Monster Lab — fullscreen game chrome. No page furniture: the canvas fills the
 * viewport (letterboxed to 16:9), and touch controls overlay on mobile. */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #05070d; overflow: hidden;
  overscroll-behavior: none; touch-action: none;
}
body { display: flex; align-items: center; justify-content: center; }

zvaf {
  display: flex; align-items: center; justify-content: center;
  width: 100vw; height: 100vh;
}
.monsterlab-stage {
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
}

/* the game surface — largest 16:9 rectangle that fits the screen */
.monsterlab-canvas {
  display: block;
  width: 100vw; height: 56.25vw;      /* 100 * 9/16 */
  max-width: 177.78vh; max-height: 100vh; /* 100 * 16/9 */
  image-rendering: auto;
  transform: translateZ(0);
  outline: none;
  background: #05070d;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.85);
  touch-action: none;
}

/* hide any bifrost connection badge etc. for a clean full-bleed game */
.zConnection-badge, [class*="onnection-badge"], [class*="ConnectionBadge"] { display: none !important; }

/* pull-down controls menu */
.monsterlab-menu {
  position: fixed;
  top: 14px; right: 14px;
  z-index: 35;
  width: min(260px, calc(100vw - 28px));
  color: rgba(232, 238, 255, 0.94);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: auto;
}
.monsterlab-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 34px;
  padding: 7px 11px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(150, 180, 255, 0.38);
  background: rgba(10, 14, 25, 0.74);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.monsterlab-menu summary::-webkit-details-marker { display: none; }
.monsterlab-menu summary::after {
  content: "v";
  color: rgba(180, 205, 255, 0.8);
  font-size: 11px;
}
.monsterlab-menu[open] summary::after { content: "^"; }
.monsterlab-menu-panel {
  box-sizing: border-box;
  padding: 10px 11px 11px;
  border: 1px solid rgba(150, 180, 255, 0.32);
  border-top: 0;
  background: rgba(8, 11, 20, 0.86);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.monsterlab-menu-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0 0 10px;
}
.monsterlab-menu-tab {
  min-height: 26px;
  padding: 4px 6px;
  color: rgba(214, 224, 250, 0.78);
  font: inherit;
  border: 1px solid rgba(150, 180, 255, 0.22);
  background: rgba(28, 36, 58, 0.48);
  cursor: pointer;
}
.monsterlab-menu-tab.active {
  color: rgba(245, 248, 255, 0.96);
  border-color: rgba(170, 205, 255, 0.54);
  background: rgba(78, 102, 150, 0.48);
}
.monsterlab-menu dl {
  display: grid;
  grid-template-columns: minmax(54px, max-content) 1fr;
  gap: 6px 12px;
  margin: 0;
}
.monsterlab-menu .monsterlab-menu-pane { display: none; }
.monsterlab-menu[data-mode="keyboard"] .pane-keyboard,
.monsterlab-menu[data-mode="controller"] .pane-controller,
.monsterlab-menu[data-mode="touch"] .pane-touch {
  display: grid;
}
.monsterlab-menu dt {
  color: rgba(178, 205, 255, 0.88);
  font-weight: 700;
}
.monsterlab-menu dd {
  margin: 0;
  color: rgba(232, 238, 255, 0.86);
  overflow-wrap: anywhere;
}

/* ---- touch controls (shown only when body has .touch) ---- */
.monsterlab-touch {
  position: fixed; inset: 0; z-index: 30; display: none;
  pointer-events: none; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
body.touch .monsterlab-touch { display: block; }
body.touch.monsterlab-in-menu .monsterlab-touch { display: none; }

.monsterlab-btn {
  position: absolute; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  background: rgba(40, 52, 84, 0.34);
  border: 1.5px solid rgba(150, 180, 255, 0.42);
  color: rgba(222, 232, 255, 0.9);
  border-radius: 50%;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.02em;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background 0.05s, transform 0.05s;
}
.monsterlab-btn.press { background: rgba(130, 170, 255, 0.55); transform: scale(0.94); }
.monsterlab-btn.big { font-size: 12px; }

/* d-pad, bottom-left */
.t-up    { left: 74px;  bottom: 156px; width: 58px; height: 58px; }
.t-left  { left: 14px;  bottom: 90px;  width: 58px; height: 58px; }
.t-right { left: 134px; bottom: 90px;  width: 58px; height: 58px; }
.t-down  { left: 74px;  bottom: 24px;  width: 58px; height: 58px; }

/* action cluster, bottom-right */
.t-jump  { right: 20px;  bottom: 26px;  width: 78px; height: 78px; }
.t-nail  { right: 108px; bottom: 60px;  width: 64px; height: 64px; }
/* dash is dormant this segment — JS adds .show once abilities.dash unlocks */
.t-dash  { right: 44px;  bottom: 116px; width: 58px; height: 58px; display: none; }
body.touch .t-dash.show { display: flex; }
.t-heal  { right: 128px; bottom: 150px; width: 56px; height: 56px; }
.t-menu  { left: 14px;   top: 14px;     width: 58px; height: 34px; border-radius: 8px; font-size: 10px; }

/* contextual READ button — hidden until JS adds .show (standing at a terminal) */
.t-read {
  left: 50%; margin-left: -48px; bottom: 214px;
  width: 96px; height: 42px; border-radius: 12px;
  font-size: 12px; display: none;
  background: rgba(36, 74, 34, 0.52);
  border-color: rgba(150, 255, 130, 0.62);
  color: rgba(226, 255, 214, 0.95);
}
body.touch .t-read.show { display: flex; }

/* MAP toggle — top-left, next to MENU; hidden until the map is found */
.t-map { left: 80px; top: 14px; width: 54px; height: 34px; border-radius: 8px; font-size: 10px; display: none;
  background: rgba(36, 60, 40, 0.5); border-color: rgba(150, 235, 160, 0.55); }
body.touch .t-map.show { display: flex; }

/* while a log/intro is open on touch, clear the controls so a tap dismisses it */
body.monsterlab-reading .monsterlab-btn { display: none !important; }
body.monsterlab-reading .monsterlab-menu { display: none; }

/* portrait: nudge to landscape (game is 16:9) */
.monsterlab-rotate {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center; text-align: center;
  color: rgba(220, 230, 255, 0.75); font: 600 20px/1.7 Georgia, serif;
  background: rgba(5, 7, 13, 0.72); pointer-events: none;
}
@media (orientation: portrait) {
  body.touch .monsterlab-rotate { display: flex; }
  body.touch .monsterlab-btn { opacity: 0.4; }
}

@media (max-width: 520px) {
  .monsterlab-menu {
    top: 10px; right: 10px;
    width: min(236px, calc(100vw - 20px));
    font-size: 11px;
  }
  .monsterlab-menu summary { min-height: 32px; padding: 6px 10px; }
}

/* Once the game mounts its canvas, drop the pre-boot placeholder text — it can
   otherwise peek out beside the letterboxed stage at some window ratios. */
.monsterlab-stage:has(canvas) > *:not(canvas) { display: none; }

/* ---- auth pages (Login / Signup) — a lab-terminal card on the SAME dark
   backdrop the game menu uses, not a plain web form dropped on a blank page.
   The fullscreen game body rules only apply to the game itself, so auth pages
   scroll and center normally. The animated backdrop itself (dust motes +
   scanlines) is drawn by monsterlab.authbg.js reusing gfx.drawScanlineDust —
   this stylesheet only places/sizes that canvas and skins the HTML on top. ---- */
body:not(:has(.monsterlab-stage)) {
  overflow: auto; height: auto; min-height: 100vh; touch-action: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 18px; box-sizing: border-box;
  position: relative;
  background: #05070d;
  font-family: ui-monospace, Consolas, monospace;
}
/* the live JS backdrop — sits behind everything, never intercepts clicks */
.monsterlab-authbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: block; }
/* real content rides above the backdrop canvas, centered independent of
   <zvaf>'s own display mode (a 3rd-party theme rule can flip it to block) —
   fixed + transform centers regardless, and scrolls internally if a tall
   form + a short viewport (mobile keyboard) would otherwise clip it. */
body:not(:has(.monsterlab-stage)) .zVaF-content {
  position: fixed; z-index: 1;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 36px); max-width: 360px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.ml-auth-title {
  color: #eafff0; font: 800 40px/1.05 Georgia, serif;
  text-shadow: 0 0 10px rgba(140,255,90,0.55), 0 0 26px rgba(120,255,120,0.35);
  text-align: center; margin: 0 0 4px;
  animation: ml-title-glow 4s ease-in-out infinite;
}
@keyframes ml-title-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(140,255,90,0.55), 0 0 26px rgba(120,255,120,0.35); }
  50%      { text-shadow: 0 0 14px rgba(140,255,90,0.75), 0 0 34px rgba(120,255,120,0.45); }
}
.ml-auth-sub {
  color: rgba(150,235,160,0.85); font: 13px ui-monospace, Consolas, monospace;
  text-align: center; margin: 0 0 22px;
}
.ml-auth-sub::before { content: "// "; opacity: 0.7; }

/* the sign-in / create-account panel — same recipe as the canvas drawPanel:
   dark translucent fill, thin green stroke, a faint top highlight strip. */
body:not(:has(.monsterlab-stage)) .zDialog-container.zCard {
  background: rgba(5, 12, 8, 0.82) !important;
  border: 1px solid rgba(140, 220, 150, 0.4) !important;
  border-radius: 3px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 40px rgba(90,255,120,0.06);
  position: relative;
  overflow: hidden;
}
body:not(:has(.monsterlab-stage)) .zDialog-container.zCard::before {
  content: ""; position: absolute; top: 0; left: 1px; right: 1px; height: 2px;
  background: rgba(255,255,255,0.07); pointer-events: none;
}
body:not(:has(.monsterlab-stage)) .zDialog-title.zCard-title {
  color: rgba(210, 235, 215, 0.92) !important;
  font: 700 12px/1.4 ui-monospace, Consolas, monospace !important;
  text-transform: uppercase; letter-spacing: 0.1em; text-align: center;
  border-bottom: 1px solid rgba(120,180,130,0.25);
  padding-bottom: 12px;
}
body:not(:has(.monsterlab-stage)) .zLabel {
  color: rgba(150, 235, 160, 0.72) !important;
  font: 10px/1 ui-monospace, Consolas, monospace !important;
  text-transform: uppercase; letter-spacing: 0.09em;
}
body:not(:has(.monsterlab-stage)) .zForm-control {
  background: rgba(10, 18, 14, 0.9) !important;
  border: 1px solid rgba(120, 180, 130, 0.3) !important;
  border-radius: 2px !important;
  color: #eafff0 !important;
  font: 13px ui-monospace, Consolas, monospace !important;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
body:not(:has(.monsterlab-stage)) .zForm-control::placeholder { color: rgba(150,190,160,0.4); }
body:not(:has(.monsterlab-stage)) .zForm-control:focus {
  outline: none !important;
  border-color: rgba(150, 255, 160, 0.75) !important;
  background: rgba(14, 26, 18, 0.95) !important;
  box-shadow: 0 0 0 1px rgba(150,255,160,0.2), 0 0 14px rgba(120,255,120,0.18) !important;
}
body:not(:has(.monsterlab-stage)) .zDialog-actions .zBtn.zBtn-primary {
  width: 100%;
  background: rgba(35, 70, 40, 0.6) !important;
  border: 1px solid rgba(150, 220, 160, 0.45) !important;
  border-radius: 2px !important;
  color: #eafff0 !important;
  font: 700 13px/1 ui-monospace, Consolas, monospace !important;
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
body:not(:has(.monsterlab-stage)) .zDialog-actions .zBtn.zBtn-primary:hover,
body:not(:has(.monsterlab-stage)) .zDialog-actions .zBtn.zBtn-primary:focus-visible {
  background: rgba(60, 140, 70, 0.68) !important;
  border-color: rgba(200, 255, 190, 0.85) !important;
  box-shadow: 0 0 18px rgba(120,255,120,0.25) !important;
}
body:not(:has(.monsterlab-stage)) .zDialog-actions .zBtn.zBtn-primary:active { transform: translateY(1px); }
body:not(:has(.monsterlab-stage)) .zDialog-feedback:not(:empty) {
  margin-top: 14px; padding: 8px 10px; border-radius: 2px;
  font: 11px ui-monospace, Consolas, monospace;
  color: rgba(255, 150, 140, 0.92);
  background: rgba(60, 15, 15, 0.35);
  border: 1px solid rgba(255,120,110,0.35);
}

/* "Create an account" / "Back" — a quiet ghost link, not a second heavy button */
.ml-auth-link { margin-top: 14px; }
body:not(:has(.monsterlab-stage)) .ml-auth-link.zBtn {
  display: block; width: 100%;
  background: transparent !important;
  border: 1px solid rgba(120, 180, 130, 0.28) !important;
  border-radius: 2px !important;
  color: rgba(160, 220, 170, 0.75) !important;
  font: 12px ui-monospace, Consolas, monospace !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: color .15s, border-color .15s, background .15s;
}
body:not(:has(.monsterlab-stage)) .ml-auth-link.zBtn:hover {
  color: #eafff0 !important;
  border-color: rgba(150, 235, 160, 0.55) !important;
  background: rgba(60, 140, 70, 0.15) !important;
}

/* the reset-password token field — a readonly carrier value, not a real
   input the visitor is meant to type into (see zUI.ResetPassword.zolo) */
body:not(:has(.monsterlab-stage)) .ml-auth-token-field {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}