.hero-zone { min-width: 0; width: 100%; }
.home-hero { min-height: calc(100vh - 112px); }
.space-window {
  width: min(1120px, 98%);
  height: min(76vh, 720px);
  min-height: 660px;
  margin: 0 auto;
  border-radius: 0;
  position: relative;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.space-window::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.42), rgba(255,255,255,.12) 28%, transparent 58%),
    linear-gradient(180deg, rgba(161,217,255,.16), transparent 52%);
  mix-blend-mode: screen;
}
.cloud, .blimp, .holo, .glass-arch { display: none; }
.hero-light-beam {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -12%;
  width: min(760px, 82%);
  height: 82%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.72), rgba(255,255,255,.22) 36%, rgba(160,213,255,.08) 62%, transparent 74%);
  mix-blend-mode: screen;
  opacity: .50;
}
.hero-rim-glow {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 185px;
  width: min(760px, 82%);
  height: 260px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 58%, rgba(255,255,255,.34), rgba(255,226,250,.16) 32%, rgba(142,213,255,.10) 50%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(2px);
}
.hero-floor-glow {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 60px;
  width: min(940px, 94%);
  height: 230px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 82%, rgba(255,255,255,.82), rgba(198,238,255,.38) 30%, rgba(161,139,232,.22) 58%, transparent 78%);
  mix-blend-mode: screen;
}
.hero-foot-light {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 118px;
  width: min(860px, 88%);
  height: 150px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(255,255,255,.88), rgba(209,246,255,.36) 30%, rgba(154,128,230,.20) 58%, transparent 76%);
  mix-blend-mode: screen;
  filter: blur(1px);
}
.hero-foot-shadow,
.hero-foot-shadow-left,
.hero-foot-shadow-center,
.hero-foot-shadow-right {
  display: none !important;
  opacity: 0 !important;
}
.hero-buddy-layer {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 104px;
  width: min(1020px, 98%);
  height: 590px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, .6vw, 10px);
  pointer-events: none;
}
.hero-buddy {
  position: relative;
  flex: 0 0 auto;
  object-fit: contain;
  filter: none;
}
.hero-buddy-left { width: clamp(245px, 27vw, 330px); transform: translateY(34px) rotate(-2deg); }
.hero-buddy-center { width: clamp(320px, 34vw, 430px); z-index: 2; transform: translateY(0); }
.hero-buddy-right { width: clamp(245px, 27vw, 330px); transform: translateY(38px) rotate(3deg); }

.brand-logo-stage {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 12px;
  width: min(620px, 66%);
  transform: translateX(-50%);
  pointer-events: none;
  display: grid;
  place-items: center;
}
.monobattle-logo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: none;
}

.server-pill span, .green-dot { width: 8px; height: 8px; border-radius: 50%; background: #21d077; display: inline-block; box-shadow: 0 0 0 4px rgba(33,208,119,.10); }
.server-pill i { width: 18px; height: 18px; display: inline-block; background: linear-gradient(90deg, #21d077 20%, transparent 20% 34%, #21d077 34% 54%, transparent 54% 68%, #21d077 68%); border-radius: 2px; }


html:has(body.is-authenticated) {
  height: 100dvh !important;
  overflow: hidden !important;
}
body.is-authenticated {
  height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
body.is-authenticated .dashboard-shell {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  height: 100dvh !important;
  overflow: hidden !important;
}
body.is-authenticated .dashboard {
  height: 100% !important;
  min-height: 0 !important;
  margin: 10px auto 0 !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
}
body.is-authenticated .home-hero {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.is-authenticated .home-hero .space-window {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}


.app-page {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
  align-self: start;
}
.app-page[hidden] { display: none !important; }
.page-card {
  min-height: min(76vh, 720px);
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 38px;
  padding: clamp(24px, 4vw, 48px);
  background: rgba(255,255,255,.78);
  box-shadow: 0 24px 70px rgba(84,72,155,.16);
  backdrop-filter: blur(28px);
}
.page-card h1 {
  margin: 8px 0 14px;
  color: #5f50cf;
  font-size: clamp(40px, 7vw, 78px);
  line-height: .92;
  letter-spacing: -.06em;
}
.page-copy p, .page-card p { color: #6f6888; font-weight: 850; line-height: 1.6; max-width: 620px; }
.honest-note { display: block; color: #857ca2; font-weight: 850; line-height: 1.5; }
.character-studio {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
  grid-template-areas: 'copy preview' 'controls preview';
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}
.page-copy { grid-area: copy; }
.studio-preview {
  grid-area: preview;
  min-height: 560px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: radial-gradient(circle at 50% 26%, rgba(255,255,255,.92), rgba(227,220,255,.52) 54%, rgba(206,232,255,.34));
}
.lumo-editor-preview { width: min(480px, 100%); height: 520px; display: block; }
.studio-controls { grid-area: controls; display: grid; gap: 16px; }
.tool-row, .skin-row, .palette, .honest-card-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.tool, .skin-card, .mode-card, .practice-start-card, .primary-action {
  border: 1px solid rgba(111,96,209,.18);
  border-radius: 20px;
  padding: 14px 18px;
  background: rgba(255,255,255,.78);
  color: #6557d8;
  font-weight: 1000;
  box-shadow: 0 10px 24px rgba(112,98,210,.10);
}
.tool.active, .skin-card.selected, .mode-card.active, .primary-action { color: white; background: linear-gradient(135deg, #7162e9, #9b8cff); }
.skin-card, .mode-card, .practice-start-card { min-width: 190px; text-align: left; display: grid; gap: 5px; }
.skin-card small, .mode-card small, .practice-start-card small { color: #877f9f; font-weight: 800; }
.mode-card.active small, .primary-action small { color: rgba(255,255,255,.82); }
.mode-card.locked { opacity: .68; cursor: not-allowed; }
.swatch { width: 44px; height: 44px; border-radius: 16px; border: 4px solid rgba(255,255,255,.8); background: var(--sw, #c9b6f2); box-shadow: 0 8px 18px rgba(97,82,180,.16); }
.swatch.rainbow { background: conic-gradient(from 0deg, #ff9cc8, #ffe28a, #9ff0cb, #8fd5ff, #c9b6f2, #ff9cc8); }
.swatch.active { outline: 3px solid #7162e9; }
.disabled-system-card { display: grid; align-content: center; text-align: center; justify-items: center; }
.mission-list { display: grid; gap: 14px; padding: 0; list-style: none; max-width: 520px; }
.mission-list li { padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.72); color: #6557d8; font-weight: 1000; box-shadow: 0 10px 24px rgba(112,98,210,.10); }
.start-practice-card { margin-top: 20px; width: min(360px, 100%); }
@media (max-width: 860px) {
  .character-studio { grid-template-columns: 1fr; grid-template-areas: 'copy' 'preview' 'controls'; }
  .studio-preview { min-height: 420px; }
  .lumo-editor-preview { height: 390px; }
}


/* Background-only home: Arm requested all foreground decorations removed. */
.background-only-window,
.home-hero .space-window {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.home-hero .space-window::before,
.home-hero .space-window::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.home-hero .hero-light-beam,
.home-hero .hero-rim-glow,
.home-hero .hero-floor-glow,
.home-hero .hero-foot-light,
.home-hero .hero-foot-shadow,
.home-hero .hero-buddy-layer,
.home-hero .hero-buddy,
.home-hero .brand-logo-stage,
.home-hero .monobattle-logo {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}


/* Character-only home: background plus exactly three PNG characters, no logo/glow/shadow decorations. */
.character-window,
.home-hero .character-window {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.home-hero .character-window::before,
.home-hero .character-window::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.home-hero .character-window .hero-buddy-layer {
  position: absolute !important;
  z-index: 4 !important;
  left: 50% !important;
  bottom: clamp(54px, 9dvh, 104px) !important;
  width: min(1020px, 112%) !important;
  height: min(58dvh, 590px) !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: clamp(0px, .5vw, 8px) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.home-hero .character-window .hero-buddy {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  filter: none !important;
}
.home-hero .character-window .hero-buddy-left {
  width: clamp(150px, 27vw, 330px) !important;
  transform: translateY(34px) rotate(-2deg) !important;
}
.home-hero .character-window .hero-buddy-center {
  width: clamp(205px, 34vw, 430px) !important;
  z-index: 2 !important;
  transform: translateY(0) !important;
}
.home-hero .character-window .hero-buddy-right {
  width: clamp(150px, 27vw, 330px) !important;
  transform: translateY(38px) rotate(3deg) !important;
}
@media (max-width: 620px) {
  .home-hero .character-window .hero-buddy-layer {
    width: min(540px, 124%) !important;
    height: min(54dvh, 390px) !important;
    bottom: clamp(56px, 9dvh, 96px) !important;
    gap: 0 !important;
  }
  .home-hero .character-window .hero-buddy-left,
  .home-hero .character-window .hero-buddy-right {
    width: clamp(142px, 32vw, 165px) !important;
  }
  .home-hero .character-window .hero-buddy-center {
    width: clamp(198px, 46vw, 225px) !important;
  }
}


/* Headroom + centered web logo: keep characters fully visible under the top menu. */
.home-hero .character-window .hero-logo-center {
  position: absolute !important;
  z-index: 5 !important;
  left: 50% !important;
  top: clamp(8px, 2.2dvh, 24px) !important;
  width: min(360px, 32vw) !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.home-hero .character-window .monobattle-scene-logo {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  filter: none !important;
}
.home-hero .character-window .hero-buddy-layer {
  bottom: clamp(28px, 5.2dvh, 64px) !important;
  height: min(50dvh, 500px) !important;
}
.home-hero .character-window .hero-buddy-left {
  width: clamp(136px, 23.5vw, 292px) !important;
  transform: translateY(26px) rotate(-2deg) !important;
}
.home-hero .character-window .hero-buddy-center {
  width: clamp(184px, 30vw, 376px) !important;
  transform: translateY(0) !important;
}
.home-hero .character-window .hero-buddy-right {
  width: clamp(136px, 23.5vw, 292px) !important;
  transform: translateY(30px) rotate(3deg) !important;
}
@media (max-width: 620px) {
  .home-hero .character-window .hero-logo-center {
    top: clamp(6px, 1.3dvh, 14px) !important;
    width: min(230px, 45vw) !important;
  }
  .home-hero .character-window .hero-buddy-layer {
    height: min(48dvh, 340px) !important;
    bottom: clamp(34px, 5.5dvh, 62px) !important;
  }
  .home-hero .character-window .hero-buddy-left,
  .home-hero .character-window .hero-buddy-right {
    width: clamp(122px, 28vw, 145px) !important;
  }
  .home-hero .character-window .hero-buddy-center {
    width: clamp(168px, 40vw, 198px) !important;
  }
}