/* ============================================================================
   PLAZA LIVE FLOOR — a bounded "paper" floor of wandering avatars.

   Positions are cosmetic ambient motion (web/src/floor/world.js); identities are
   real (SSE). Everything reads from the --rd-* tokens, so a venue's branding
   (applied at runtime via core/theme.js) re-skins the floor automatically.
   ============================================================================ */

/* The plaza page lays its content out as a column: the floor takes the room, the
   roster sits beneath it. */
.plaza-fill { display: flex; flex-direction: column; gap: .6rem; }
.floor-wrap { flex: 1 1 auto; min-height: 9rem; }
.floor-roster { flex: 0 0 auto; max-height: 34%; }

.floor {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 32% 24%, var(--rd-accent-soft), transparent 60%),
    var(--rd-paper-2);
  border: 1px solid var(--rd-rule);
  border-radius: var(--rd-radius);
  box-shadow: inset 0 0 2.6rem rgba(60, 35, 5, .10);
  overflow: hidden;
}

/* One avatar node. Positioned by the engine via left/top %, centred on its point. */
.floor-entity {
  position: absolute;
  left: 50%; top: 50%;
  width: 3.4rem; height: 3.4rem;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.floor-entity .stage { width: 2.6rem; height: 2.6rem; pointer-events: none; }
.floor-entity .floor-name {
  margin-top: -.18rem;
  max-width: 5.5rem;
  font-family: var(--rd-font-mono);
  font-size: .54rem;
  letter-spacing: .02em;
  color: var(--rd-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mascot: a SUBTLE badge over an otherwise-normal avatar (no prominent fixture). */
.floor-entity[data-kind="mascot"] .floor-badge {
  position: absolute; top: -.1rem; right: .55rem; z-index: 2;
  font-size: .72rem; line-height: 1; color: var(--rd-accent);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
.floor-entity[data-kind="mascot"] .stage { filter: drop-shadow(0 0 .25rem var(--rd-accent-soft)); }

/* Cosmetic tap popover — NAME ONLY. Never shows another patron's tier/standing
   (progression is private + discovered, not displayed). */
.floor-popover {
  position: absolute; z-index: 5;
  transform: translate(-50%, -135%);
  padding: .2rem .55rem;
  background: var(--rd-card);
  border: 1px solid var(--rd-rule);
  border-radius: var(--rd-radius);
  font-family: var(--rd-font-display); font-size: .72rem; color: var(--rd-ink);
  box-shadow: .1rem .15rem .5rem -.2rem rgba(60, 35, 5, .4);
  white-space: nowrap; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .floor-entity { transition: none; }
}

.resident-plaza { display: grid; gap: 1rem; justify-items: center; align-content: center; width: min(30rem, calc(100% - 2rem)); margin: auto; padding: 1.5rem; max-height: 100%; overflow: auto; text-align: center; }
.resident-plaza-art { display: grid; place-items: center; width: 8rem; height: 8rem; background: var(--rd-accent-soft); border-radius: 50%; }
.lens-form[hidden] { display: none !important; }

.resident-plaza > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .75rem 1.25rem; border-radius: 16px; color: var(--rd-accent); font: 600 1rem var(--rd-font-body); text-decoration: none; }
.resident-plaza > .resident-plaza-enter { width: min(17rem, 100%); color: #fff; background: var(--rd-accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--rd-accent) 18%, transparent); }
.resident-plaza > a:focus-visible { outline: 3px solid var(--rd-accent); outline-offset: 3px; }

/* Quick sign-in handoffs stay quiet; slower requests get a small progress cue. */
.connect-loading { flex: 1; display: grid; place-items: center; min-height: 0; }
.connect-loading-spinner {
  display: block;
  width: 1.5rem; height: 1.5rem;
  border: .125rem solid var(--rd-rule);
  border-top-color: var(--rd-accent);
  border-radius: 50%;
  opacity: 0;
}
.connect-loading.is-visible .connect-loading-spinner { opacity: 1; animation: connect-loading-turn .9s linear infinite; }
@keyframes connect-loading-turn { to { transform: rotate(360deg); } }

.brand-config { padding: .75rem 0; border-top: 1px solid var(--rd-rule); overflow-wrap: anywhere; }
.brand-config summary { min-height: 2.75rem; cursor: pointer; font-family: var(--rd-font-display); font-weight: 600; }
.brand-config > p, .brand-config > a { display: block; margin: .5rem 0; font-size: .85rem; }

/* Keep the admin work area within its grid slot as brand rules expand. */
body[data-surface="admin"] .lens-shell .lens-main { grid-template-rows: auto minmax(0, 1fr); }
body[data-surface="admin"] .lens-deck { align-content: stretch; grid-template-rows: minmax(0, 1fr) auto; }
body[data-surface="admin"] .lens-panel.is-active { grid-template-rows: auto minmax(0, 1fr); }
body[data-surface="admin"] .lens-panel-body { display: block; overflow: auto; overscroll-behavior: contain; padding-bottom: .75rem; }
body[data-surface="admin"] .lens-showcase, body[data-surface="admin"] .lens-stream { overflow: visible; }
@container (max-width: 760px) {
  body[data-surface="admin"] .lens-shell .lens-main { grid-template-rows: minmax(0, .35fr) auto minmax(0, 1fr); }
}
@media (max-height: 480px) {
  body[data-surface="admin"] .lens-shell .lens-main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "menu" "deck"; }
  body[data-surface="admin"] .lens-stage { display: none; }
}

.admin-operations [hidden] { display: none !important; }
.operations-navigation { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.operations-navigation button[aria-pressed="true"] { background: var(--rd-accent); color: var(--rd-card); }
.admin-operations section > * + * { margin-top: .65rem; }
.operations-fields { display: grid; gap: .6rem; }
.operations-fields label, .admin-operations label { display: grid; gap: .3rem; }
.admin-operations textarea { width: 100%; min-height: 7rem; resize: vertical; font: inherit; color: var(--rd-ink); background: var(--rd-card); border: 1px solid var(--rd-rule); padding: .6rem; }
.operations-results { display: grid; gap: .4rem; }
.lens-panel button.operations-account { display: grid; justify-items: start; text-align: left; height: auto; white-space: normal; clip-path: none; overflow-wrap: anywhere; }
.operations-account span { font: .8rem var(--rd-font-mono); }
.selected-account { overflow-wrap: anywhere; font-size: .9rem; }
.operations-record { border-top: 1px solid var(--rd-rule); padding: .8rem 0; overflow-wrap: anywhere; }
.operations-record summary { cursor: pointer; min-height: 2.75rem; font-family: var(--rd-font-display); font-weight: 600; }
.operations-record p { white-space: pre-wrap; }
.operations-records dl { display: grid; gap: .35rem; }
.operations-records dt { color: var(--rd-ink-3); font-size: .8rem; }
.operations-records dd { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.operations-run { display: block; min-height: 2.75rem; padding: .5rem 0; font-size: .85rem; overflow-wrap: anywhere; }