/* expo.css — what Expo Hall has ON TOP of the shared interface.
 *
 * Title, status line, intro card, buttons, walk toolbar, hint line and the
 * "All planets" link all come from ../ui/planet-ui.css like every other world.
 * This keeps the expo's night-blue colours, its loading screen, the seat prompt
 * and the avatar button / chooser (as on Sundown Isle).
 */
body { background: #0d1124; }
.grade { background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(6, 10, 30, .22) 80%, rgba(4, 6, 20, .5) 100%); }
body[data-mode="fly"] #hint, body[data-mode="loading"] #hint { opacity: 0; }

/* the intro card in the expo's colours: night blue, the four halls' colours along the top */
.surface-card { background: linear-gradient(130deg, #121a36e6, #1d1640cc); border-color: #cff3ff2b; border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #4dabf7, #ffa94d, #da77f2, #69db7c) 1; color: #eef4ff; }
.surface-card > span { color: #9fdcff; }
.surface-card p { color: #c9d3ea; }
.surface-card .primary { background: #cff3ff; color: #12182e; }
.surface-card .primary:hover { background: #ffffff; }
.surface-card button { margin-top: 6px; }
body[data-mode="walk"] #title, body[data-mode="walk"] #surface-status { color: #eef6ff !important; }

/* sit / stand, next to "Return to orbit" */
#sitbtn { background: #cff3ff; color: #12182e; border: 0; font-weight: 700; }
#sitbtn:hover { background: #ffffff; }
body.seated #walkpad { display: none !important; }

/* the seat prompt, just above the hint line */
#seat-prompt {
  position: fixed; left: 50%; bottom: 68px; transform: translateX(-50%) translateY(6px); z-index: 2;
  font: 600 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #12182e;
  background: #cff3ff; padding: 9px 16px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 6px 22px rgba(4, 8, 30, .35); opacity: 0; transition: opacity .2s, transform .2s;
}
#seat-prompt.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#seat-prompt kbd { font: 700 12px system-ui, sans-serif; background: #12182e; color: #cff3ff; border-radius: 5px; padding: 1px 6px; margin: 0 2px; }
body.touch #seat-prompt kbd { display: none; }
@media (max-width: 650px) { #seat-prompt { font-size: 11px; bottom: 60px; } }

/* your avatar: a pill with a little portrait, top right, in orbit only */
.avatar-btn {
  position: fixed; right: 20px; top: 54px; z-index: 3; display: none; align-items: center; gap: 9px;
  padding: 4px 15px 4px 4px; border-radius: 999px; border: 1px solid rgba(190, 230, 255, .32);
  background: rgba(14, 20, 44, .62); color: #eef6ff; font: 700 13px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(4, 8, 30, .3);
}
body[data-mode="orbit"] .avatar-btn { display: inline-flex; }
.avatar-btn:hover { background: rgba(30, 44, 90, .82); border-color: #cff3ff; }
.avatar-ico { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #d9ecff; box-shadow: inset 0 0 0 2px #9fdcff; flex: none; }
.avatar-ico svg { display: block; width: 100%; height: 100%; }

/* the chooser, in a window over the orbit view */
.chooser-overlay {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  background: rgba(4, 8, 24, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: chooser-in .18s ease-out;
}
@keyframes chooser-in { from { opacity: 0; } to { opacity: 1; } }
.chooser-frame {
  position: relative; width: min(1120px, 94vw); height: min(760px, 90vh); border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(190, 230, 255, .28); box-shadow: 0 30px 90px rgba(2, 4, 20, .6); background: #1b2350;
}
.chooser-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.chooser-close {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(190, 230, 255, .3); background: rgba(14, 20, 44, .75); color: #eef6ff; font: 400 22px/1 system-ui, sans-serif;
}
.chooser-close:hover { background: #cff3ff; color: #12182e; }
body.choosing .surface-card, body.choosing #hint, body.choosing .avatar-btn { visibility: hidden; }
@media (max-width: 760px) {
  .avatar-btn { top: 50px; right: 14px; padding: 3px; }
  .avatar-btn > span:last-child { display: none; }
  .chooser-frame { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; }
}

/* loading */
#loading { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #24306a, #0d1124 70%); color: #eef6ff; transition: opacity .8s; }
#loading b { display: block; font: 900 28px "Arial Black", Impact, sans-serif; letter-spacing: 6px; text-align: center;
  background: linear-gradient(90deg, #4dabf7, #ffa94d, #da77f2, #69db7c); -webkit-background-clip: text; background-clip: text; color: transparent; }
#loading span { display: block; margin-top: 12px; font: 11px monospace; letter-spacing: 2px; color: #b9cdf0; text-align: center; }
#loading.done { opacity: 0; pointer-events: none; }