@if (authService.auth()) {
  @if (!authService.isLoggedIn()) {
    <div class="anon-panel">
      <div class="lantern-desaturated"></div>
      <span class="anon-label">Sign in to join the expedition</span>
    </div>
  } @else if (store.initializing()) {
    <div class="onboarding-panel onboarding-panel--loading">
      <span class="onboarding-glyph onboarding-glyph--pulse">○</span>
      <p class="onboarding-text">Reading the fog&hellip;</p>
    </div>
  } @else if (showSummary()) {
    <app-summary-panel
      [missionState]="store.state()!"
      (continueExpedition)="onContinueAfterSummary()"
    />
  } @else if (!store.state() || !missionIsActive()) {
    @if (store.starting()) {
      <div class="onboarding-panel onboarding-panel--loading">
        <span class="onboarding-glyph onboarding-glyph--pulse">○</span>
        <p class="onboarding-text">Entering the fog&hellip;</p>
      </div>
    } @else {
      <div class="onboarding-panel">
        @if (terminalOutcome()) {
          <p class="onboarding-outcome">{{ terminalOutcome() }}</p>
        }
        @if (store.error()) {
          <p class="onboarding-error">Something went wrong. Try again.</p>
        }
        @if (!selectedCharacter()) {
          <p class="onboarding-text">Who enters the fog?</p>
          <div class="character-search-row">
            <input
              class="character-filter"
              type="text"
              placeholder="Filter survivors…"
              [ngModel]="characterFilter()"
              (ngModelChange)="characterFilter.set($event)"
              aria-label="Filter survivor list"
            />
          </div>
          <div class="character-list" role="listbox" aria-label="Survivor selection">
            @if (!characterFilter()) {
              <button
                class="character-btn character-btn--random"
                role="option"
                (click)="onSelectRandomCharacter()"
                aria-label="Choose a random survivor"
              >
                ◈ Random
              </button>
            }
            @for (name of filteredSurvivors(); track name) {
              <button
                class="character-btn"
                role="option"
                (click)="onSelectCharacter(name)"
                [attr.aria-label]="name"
              >
                @if (avatarUrl(name); as src) {
                  <img class="character-thumb" [src]="src" [alt]="name" />
                }
                {{ name }}
              </button>
            }
          </div>
        } @else if (!selectedDifficulty()) {
          <p class="onboarding-text">
            <span class="character-chosen">{{ selectedCharacter() }}</span>
            enters the fog.
          </p>
          <p class="onboarding-text">Choose your path.</p>
          <div class="difficulty-row">
            <button class="diff-btn" (click)="onSelectDifficulty(1)" aria-label="Common expedition">
              <span class="diff-pips">◆</span>
              <span class="diff-label">Common</span>
            </button>
            <button class="diff-btn" (click)="onSelectDifficulty(2)" aria-label="Perilous expedition">
              <span class="diff-pips">◆◆</span>
              <span class="diff-label">Perilous</span>
            </button>
            <button class="diff-btn" (click)="onSelectDifficulty(3)" aria-label="Dire expedition">
              <span class="diff-pips">◆◆◆</span>
              <span class="diff-label">Dire</span>
            </button>
          </div>
          <button class="back-btn" (click)="onBackToCharacter()">&#8592; Back</button>
        } @else {
          <p class="onboarding-text">How long will you endure?</p>
          <div class="difficulty-row">
            <button class="diff-btn" (click)="onSelectDuration(10)" aria-label="10 minute expedition">
              <span class="diff-label">10 min</span>
            </button>
            <button class="diff-btn" (click)="onSelectDuration(20)" aria-label="20 minute expedition">
              <span class="diff-label">20 min</span>
            </button>
            <button class="diff-btn" (click)="onSelectDuration(30)" aria-label="30 minute expedition">
              <span class="diff-label">30 min</span>
            </button>
          </div>
          <button class="back-btn" (click)="onBackToDifficulty()">&#8592; Back</button>
        }
      </div>
    }
  } @else {
    @if (view() === 'expanded') {
      <button class="backdrop" (click)="onLanternClick()" aria-label="Close panel"></button>
    }
    @switch (view()) {
      @case ('minimised') {
        <app-minimised-panel
          [missionState]="store.state()!"
          (lanternClick)="onLanternClick()"
        />
      }
      @case ('ambient') {
        <app-ambient-event
          [event]="pendingEvent()!"
          (dismissed)="onAmbientDismiss()"
        />
      }
      @case ('expanded') {
        <app-expanded-panel
          [missionState]="store.state()!"
          (panelClose)="onLanternClick()"
          (abandonRequest)="onAbandon()"
        />
      }
    }
  }
}