/* V1.310Beta: warmer home typography and collision-safe room foreground controls. */
:root {
  --home-type-hero: #211820;
  --home-type-support: #3b3037;
  --home-type-muted: #655a60;
  --home-type-gold: #9a7436;
}

/* The bright celestial home scene needs warm ink, not glowing white or web-black. */
html body:not(.maintenance-mode)
  #appRoot#appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app):not(.team-battle-app):not(.identity-battle-app)
  .topbar h1 {
  color: var(--home-type-hero) !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 transparent !important;
  background: none !important;
  filter: none !important;
  text-shadow:
    0 1px 0 rgba(255, 249, 233, 0.56),
    0 3px 9px rgba(57, 43, 49, 0.2) !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app):not(.team-battle-app):not(.identity-battle-app)
  #subtitle {
  color: var(--home-type-support) !important;
  -webkit-text-fill-color: currentColor !important;
  font-weight: 760 !important;
  text-shadow:
    0 1px 0 rgba(255, 249, 233, 0.48),
    0 2px 6px rgba(57, 43, 49, 0.16) !important;
}

/* Keep primary and supporting labels distinct without dimming the small copy. */
html body:not(.maintenance-mode)
  #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  :is(
    .mode-select button[data-mode],
    .lobby-actions > #createBotRoom,
    .lobby-actions > #showRules,
    .lobby-actions > #showGameCodex
  ) > span {
  --ui-cinematic-ink: var(--home-type-hero) !important;
  opacity: 1 !important;
  text-shadow:
    0 1px 0 rgba(255, 250, 238, 0.92),
    0 2px 4px rgba(48, 35, 43, 0.2) !important;
}

html body:not(.maintenance-mode)
  #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  :is(
    .mode-select button[data-mode],
    .lobby-actions > #createBotRoom,
    .lobby-actions > #showRules,
    .lobby-actions > #showGameCodex
  ) > small {
  --ui-cinematic-ink: var(--home-type-muted) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 250, 238, 0.82) !important;
}

html body:not(.maintenance-mode)
  #appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  .mode-select button[data-mode].selected > span {
  --ui-cinematic-ink: var(--home-type-gold) !important;
  color: var(--home-type-gold) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  .lobby-panel label:has(#nameInput),
html body:not(.maintenance-mode)
  #appRoot#appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  :is(#nameInput, #joinCode) {
  color: var(--home-type-support) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255, 250, 238, 0.62) !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  :is(#nameInput, #joinCode)::placeholder {
  color: rgba(101, 90, 96, 0.76) !important;
  -webkit-text-fill-color: rgba(101, 90, 96, 0.76) !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  :is(#nameInputHint, #joinRoom, .version-notes, .version-notes > span, .version-notes > strong) {
  color: var(--home-type-support) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot.app.solo:not(.room-lobby-app):not(.character-select-app):not(.identity-select-app):not(.battle-app)
  #nameInputHint#nameInputHint {
  color: var(--home-type-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* The wallpaper and every decorative pseudo-layer stay permanently below hit targets. */
html body:not(.maintenance-mode)
  #appRoot#appRoot.app.room-lobby-app > .arena {
  isolation: isolate !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot.app.room-lobby-app > .arena::before,
html body:not(.maintenance-mode)
  #appRoot#appRoot.app.room-lobby-app > .arena::after,
html body:not(.maintenance-mode)
  #appRoot#appRoot.app.room-lobby-app #roomLobby.room-lobby::before,
html body:not(.maintenance-mode)
  #appRoot#appRoot.app.room-lobby-app #roomLobby.room-lobby::after {
  pointer-events: none !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden])
  :is(#roomSeatGrid, .room-lobby-actions, .room-seat-actions) {
  isolation: isolate !important;
}

html body:not(.maintenance-mode)
  #appRoot#appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden])
  :is(.room-lobby-actions > button, .room-seat-action) {
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

@media (max-width: 720px) {
  /* Room notices sit below the header instead of covering the room code/copy control. */
  html body:not(.maintenance-mode):has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden])
    ) > #toast.toast:not([hidden]) {
    top: max(188px, calc(env(safe-area-inset-top) + 146px)) !important;
    right: auto !important;
    bottom: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    max-width: calc(100vw - 28px) !important;
    padding: 7px 13px 8px !important;
    border-radius: 8px !important;
  }

  /* 1v1/identity rails sit higher; keep the settings stack above their hit area. */
  html body:not(.maintenance-mode):has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:is([data-mode="1v1"], [data-mode="identity"]):not([hidden])
    ) > #settingsToggle.settings-toggle {
    --settings-bottom: max(194px, calc(env(safe-area-inset-bottom) + 190px));
  }

  html body:not(.maintenance-mode):has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:is([data-mode="1v1"], [data-mode="identity"]):not([hidden])
    ) > #settingsDockPanel.settings-dock-panel {
    --settings-bottom: max(240px, calc(env(safe-area-inset-bottom) + 236px));
  }

  html body:not(.maintenance-mode).settings-dock-open:has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:is([data-mode="1v1"], [data-mode="identity"]):not([hidden])
    ) > :is(#languageToggle.language-toggle, #musicToggle.music-toggle) {
    bottom: max(246px, calc(env(safe-area-inset-bottom) + 242px)) !important;
  }

  html body:not(.maintenance-mode).settings-dock-open:has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:is([data-mode="1v1"], [data-mode="identity"]):not([hidden])
    ) > :is(#soundEffectsToggle.sound-effects-toggle, #vfxQualityToggle.vfx-quality-toggle) {
    bottom: max(296px, calc(env(safe-area-inset-bottom) + 292px)) !important;
  }

  html body:not(.maintenance-mode).settings-dock-open:has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:is([data-mode="1v1"], [data-mode="identity"]):not([hidden])
    ) > #battleWallpaperToggle.battle-wallpaper-toggle {
    bottom: max(346px, calc(env(safe-area-inset-bottom) + 342px)) !important;
  }
}

@media (max-width: 720px) and (max-height: 680px) {
  /* Short multiplayer rooms need the settings stack above the final seat controls. */
  html body:not(.maintenance-mode):has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="1v1"]):not([data-mode="identity"]):not([hidden])
    ) > #settingsToggle.settings-toggle {
    --settings-bottom: max(160px, calc(env(safe-area-inset-bottom) + 156px));
  }

  html body:not(.maintenance-mode):has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="1v1"]):not([data-mode="identity"]):not([hidden])
    ) > #settingsDockPanel.settings-dock-panel {
    --settings-bottom: max(206px, calc(env(safe-area-inset-bottom) + 202px));
  }

  html body:not(.maintenance-mode).settings-dock-open:has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="1v1"]):not([data-mode="identity"]):not([hidden])
    ) > :is(#languageToggle.language-toggle, #musicToggle.music-toggle) {
    bottom: max(212px, calc(env(safe-area-inset-bottom) + 208px)) !important;
  }

  html body:not(.maintenance-mode).settings-dock-open:has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="1v1"]):not([data-mode="identity"]):not([hidden])
    ) > :is(#soundEffectsToggle.sound-effects-toggle, #vfxQualityToggle.vfx-quality-toggle) {
    bottom: max(262px, calc(env(safe-area-inset-bottom) + 258px)) !important;
  }

  html body:not(.maintenance-mode).settings-dock-open:has(
      #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([data-mode="1v1"]):not([data-mode="identity"]):not([hidden])
    ) > #battleWallpaperToggle.battle-wallpaper-toggle {
    bottom: max(312px, calc(env(safe-area-inset-bottom) + 308px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode)
    #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden])
    :is(.room-lobby-actions, .room-seat-actions) {
    scroll-behavior: auto !important;
  }
}