/**
 * Auth shell — login UI only (Gaupa OAuth + email OTP).
 * Sits above #phaser-root during login.
 */

#auth-shell {
  --splash-frame-width: min(100vw, calc(100dvh * 7 / 12));
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: auto;
  background: #0d1117;
}

#auth-shell.auth-shell--hidden {
  display: none;
}

#auth-shell.auth-shell--visible {
  display: block;
}

#phaser-root {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}

body.phaser-renderer #game-wrapper {
  display: none;
}

body.phaser-renderer #equipment-panel {
  visibility: hidden;
}

body.phaser-renderer #phaser-root canvas {
  display: block;
}

body.phaser-renderer #phaser-root > div {
  background: transparent !important;
}

body.phaser-renderer #npc-speech-bubble {
  visibility: hidden;
}

body.phaser-renderer #loading-screen {
  display: none;
}

body.phaser-renderer.phaser-splash-active #loading-screen {
  display: block;
}

body.phaser-renderer #particle-layer,
body.phaser-renderer #smash-fx {
  display: none;
}

body.phaser-renderer #inventory-modal.hidden,
body.phaser-renderer #shop-overlay.hidden,
body.phaser-renderer #crafting-overlay.hidden {
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

#auth-shell #finalLoginMenu {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100dvh;
  width: var(--splash-frame-width);
  overflow: hidden;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

#auth-shell #finalLoginMenu.hidden {
  visibility: hidden;
  pointer-events: none;
}

#auth-shell #mainLogo {
  width: min(90%, 420px);
  height: auto;
  margin-bottom: 24px;
  display: block;
}

#auth-shell .auth-status {
  color: #c8d6e5;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  text-align: center;
  margin: 0 0 12px;
  min-height: 1.2em;
}

#auth-shell .auth-status.hidden {
  display: none;
}

#auth-shell .auth-user-info {
  color: #fff;
  text-align: center;
  margin-bottom: 16px;
}

#auth-shell .auth-user-info.hidden {
  display: none;
}

#auth-shell .auth-welcome {
  font-size: 18px;
  margin: 0;
}

#auth-shell .login-options-container {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#auth-shell .login-options-container.hidden {
  display: none;
}

#auth-shell .login-row {
  position: relative;
  width: 100%;
  min-height: 52px;
  cursor: pointer;
}

#auth-shell .row-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

#auth-shell .email-row {
  display: flex;
  align-items: center;
  padding: 0 12px;
}

#auth-shell .email-row input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 12px 8px;
  outline: none;
  position: relative;
  z-index: 1;
}

#auth-shell .submit-arrow {
  width: 36px;
  height: 36px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

#auth-shell .stone-btn .btn-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 1;
}

#auth-shell .provider-logo {
  width: 24px;
  height: 24px;
}

#auth-shell .provider-text {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

#auth-shell .login-row.hidden,
#auth-shell #auth-code-row.hidden {
  display: none;
}