/* ─── Function panel (prezi overlay) ─────────────────────────────────────────── */

/* Dark translucent, gold-bordered panel in the same aesthetic as the splash.
   Shares the centred overlay cell with the splash; slides in from down-and-right
   as the splash slides up-and-left, synced with the stage zoom (one parallax move). */
.landing__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: min(92vw, 480px);
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 1rem;
  /* No back box — the panel is a transparent layout slot; each element carries
     its own boxing so the controls float over the map. */
  background: transparent;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(7%, 10%);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.5s ease;
}

.landing.is-panel-open .landing__panel {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

.landing__panel::-webkit-scrollbar {
  display: none;
}

/* Back lives in a fixed bottom-right slot, consistent across every function.
   It is a direct child of .landing (no transformed ancestor) so `fixed` is
   viewport-relative. Shown only while a panel is open. */
.landing__panel-back {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 6;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(184, 134, 30, 0.6);
  border-radius: 6px;
  background: rgba(28, 16, 4, 0.88);
  color: var(--brass-gold-bright);
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    background 0.18s,
    border-color 0.18s;
}

.landing.is-panel-open .landing__panel-back {
  opacity: 1;
  pointer-events: auto;
}

.landing__panel-back:hover,
.landing__panel-back:focus-visible {
  background: rgba(80, 48, 12, 0.92);
  border-color: rgba(220, 170, 50, 0.85);
  outline: none;
}

.landing__panel-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brass-gold-soft);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.8),
    0 0 14px rgba(184, 134, 30, 0.5);
  margin: 0;
}

.landing__panel-desc {
  font-size: 0.95rem;
  color: var(--brass-gold-pale);
  font-style: italic;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.landing__panel-action {
  min-width: 200px;
  padding: 0.9rem 1.6rem;
  border: 1.5px solid rgba(220, 170, 50, 0.8);
  border-radius: 6px;
  background: rgba(80, 48, 12, 0.85);
  color: var(--brass-gold-glow);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.12s;
}

.landing__panel-action:hover,
.landing__panel-action:focus-visible {
  background: rgba(110, 66, 16, 0.92);
  border-color: rgba(240, 200, 80, 0.95);
  outline: none;
  transform: translateY(-2px);
}

.landing__panel-action:active {
  transform: translateY(0);
}

/* Subdued variant for secondary actions (e.g. Sign out). */
.landing__panel-action--ghost {
  background: rgba(42, 24, 8, 0.7);
  border-color: rgba(184, 134, 30, 0.5);
  color: var(--brass-gold-bright);
}

.landing__panel-action--ghost:hover,
.landing__panel-action--ghost:focus-visible {
  background: rgba(80, 48, 12, 0.88);
  border-color: rgba(220, 170, 50, 0.85);
}

/* ─── Inline function body (forms, settings, rules) ──────────────────────────── */

.landing__panel-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.landing-form,
.landing-settings {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  text-align: left;
}

/* Each labelled element is its own box floating over the map. The translucent
   fill + frosted-glass backdrop blur lets the parallax read through while
   muting bright painted board elements that would otherwise poke through. */
.landing-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(184, 134, 30, 0.32);
  border-radius: 8px;
  background: rgba(20, 12, 4, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.landing-field__label {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brass-gold-light);
}

/* Selector carries .landing-field too, to out-specify the shared input[type] rule. */
.landing-field .landing-field__control {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(184, 134, 30, 0.4);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--brass-gold-glow);
  font: inherit;
  font-size: 1rem;
  box-sizing: border-box;
}

.landing-field__control:focus-visible {
  outline: none;
  border-color: rgba(240, 200, 80, 0.95);
}

/* Dropdown options inherit a dark surface so they read in both themes. */
.landing-field__control option {
  background: var(--brass-shadow-deepest);
  color: var(--brass-gold-glow);
}

.landing-field__control::placeholder {
  color: var(--brass-gold-darker);
}

.landing-form__error {
  margin: 0;
  font-size: 0.85rem;
  color: var(--brass-peach);
  text-align: left;
}

.landing-field__status {
  margin: 0;
  font-size: 0.82rem;
}

.landing-field__status[data-ok="true"] {
  color: var(--brass-green-faint);
}

.landing-field__status[data-ok="false"] {
  color: var(--brass-peach);
}

/* The submit/action button stretches full-width inside an inline form. */
.landing-form .landing__panel-action,
.landing-settings .landing__panel-action {
  width: 100%;
  margin-top: 0.2rem;
}