/* ══════════════════════════════════════════════════════
   MATH ELEVATOR — MASTER STYLESHEET
   Per-building theming uses: #app[data-building="N"]
   ══════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ───────────────────────────────────── */
:root {
  --theme-primary:   #FFD700;
  --theme-secondary: #FFFFFF;
  --theme-accent:    #87CEEB;
  --theme-bg:        #f0f4ff;
  --theme-shaft:     #d0d8e8;
  --theme-elevator:  #FFD700;
  --theme-text:      #1a1a2e;
  --shaft-w:         110px;
  --elevator-h:      54px;
  --btn-h:           46px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #1a1a2e;
  color: var(--theme-text);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
}

#app {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--theme-bg);
  overflow: hidden;
}

/* ── SCREENS ─────────────────────────────────────────── */
.screen {
  display: none;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
  position: absolute;
  inset: 0;
}
.screen.active { display: flex; }

/* ── WELCOME SCREEN ──────────────────────────────────── */
#screen-welcome {
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 32px 24px;
  background: linear-gradient(170deg, #1a1a2e 0%, #0d3b5e 50%, #1a5276 100%);
  overflow-y: auto;
}

.welcome-title {
  font-size: 2.6rem;
  font-weight: 900;
  text-align: center;
  color: #FFD700;
  text-shadow: 0 2px 12px rgba(255,215,0,0.4);
  line-height: 1.15;
  letter-spacing: -1px;
}

.welcome-sub {
  font-size: 0.95rem;
  text-align: center;
  color: rgba(255,255,255,0.7);
  max-width: 280px;
  line-height: 1.5;
}

.elevator-logo {
  font-size: 5rem;
  filter: drop-shadow(0 4px 16px rgba(255,215,0,0.5));
}

.doorman-bubble {
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 14px 20px;
  font-size: 0.9rem;
  text-align: center;
  max-width: 320px;
  color: #fff;
  line-height: 1.5;
}

.doorman-emoji { font-size: 2.4rem; }

.name-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 300px;
}
.name-form label {
  font-weight: 700;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.name-form input {
  width: 100%;
  padding: 13px 18px;
  border: 2px solid rgba(255,215,0,0.4);
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.name-form input::placeholder { color: rgba(255,255,255,0.35); }
.name-form input:focus {
  border-color: #FFD700;
  background: rgba(255,255,255,0.14);
}

.btn-primary {
  background: #FFD700;
  color: #1a1a2e;
  border: none;
  border-radius: 14px;
  padding: 14px 36px;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(255,215,0,0.4);
  width: 100%;
  max-width: 240px;
}
.btn-primary:active { transform: scale(0.96); box-shadow: none; }

.btn-secondary {
  background: transparent;
  color: #FFD700;
  border: 2px solid rgba(255,215,0,0.5);
  border-radius: 14px;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  width: 100%;
  max-width: 240px;
}
.btn-secondary:hover  { background: rgba(255,215,0,0.1); }
.btn-secondary:active { transform: scale(0.97); }

/* ── BUILDING PREVIEW SCREEN ─────────────────────────── */
#screen-building-preview {
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 32px 24px;
  transition: background 0.5s;
  position: relative;
}
/* Dark gradient overlay at the bottom so white text always reads */
#screen-building-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 0;
}
#screen-building-preview > * { position: relative; z-index: 1; }

.building-preview-emoji {
  font-size: 5rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
}
.building-preview-name {
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  /* Always readable regardless of background */
  text-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 20px rgba(0,0,0,0.3);
}
.building-preview-doorman {
  background: rgba(0,0,0,0.32);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 0.95rem;
  text-align: center;
  max-width: 320px;
  line-height: 1.55;
  /* Force white readable text in the quote box */
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ── HUD ─────────────────────────────────────────────── */
#hud {
  height: 52px;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  padding: 0 10px 0 14px;
  gap: 6px;
  z-index: 10;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
}

#hud-building-name {
  flex: 1;
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--theme-text);
  letter-spacing: 0.2px;
}

.hud-badge {
  background: rgba(0,0,0,0.12);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--theme-text);
}

#btn-mute {
  background: rgba(0,0,0,0.12);
  border: none;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--theme-text);
  flex-shrink: 0;
}
#btn-mute:hover { background: rgba(0,0,0,0.2); }

/* ── TIMER BAR ───────────────────────────────────────── */
#timer-bar-wrap {
  height: 5px;
  background: rgba(0,0,0,0.1);
  flex-shrink: 0;
  display: none;
  position: relative;
}
#timer-bar-fill {
  height: 100%;
  background: #4caf50;
  border-radius: 0 3px 3px 0;
  transition: width 1s linear, background 0.5s;
}

/* ── TRIES DISPLAY ───────────────────────────────────── */
#tries-display {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 3px 0 2px;
  flex-shrink: 0;
  color: #4caf50;
  transition: color 0.4s;
}
#tries-display.warn   { color: #FF9800; }
#tries-display.danger { color: #f44336; animation: tries-pulse 0.7s ease-in-out infinite alternate; }
@keyframes tries-pulse { from { opacity: 1; } to { opacity: 0.55; } }

/* ── QUESTION PANEL ──────────────────────────────────── */
#question-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.08);
  border-bottom: 2px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
  min-height: 86px;
  position: relative;
}

#passenger-wrapper {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--theme-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
}
#passenger-wrapper.wave {
  animation: wave-bounce 0.35s ease-out;
}
@keyframes wave-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25) rotate(8deg); }
  70%  { transform: scale(1.1) rotate(-4deg); }
  100% { transform: scale(1); }
}

#passenger-emoji { font-size: 1.9rem; line-height: 1; }

.q-text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#speech-bubble {
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
#speech-bubble.wiggling { animation: wiggle 0.4s ease-in-out; }
@keyframes wiggle {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}

#floor-status-badge {
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(0,0,0,0.5);
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.55);
  border-radius: 20px;
  border: 1.5px solid rgba(0,0,0,0.08);
  align-self: flex-start;
}
#floor-status-badge span {
  color: #1a1a2e;
  font-size: 0.95rem;
  font-weight: 900;
}

/* ── GAME AREA ───────────────────────────────────────── */
#screen-game { flex-direction: column; }

#game-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

/* ── SHAFT ───────────────────────────────────────────── */
#shaft-wrapper {
  width: var(--shaft-w);
  flex-shrink: 0;
  position: relative;
  background: var(--theme-shaft);
  border-right: 3px solid rgba(0,0,0,0.1);
  overflow: hidden;
  transition: background 0.5s;
}

#shaft-wrapper::before,
#shaft-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 8px;
  background: rgba(0,0,0,0.06);
  z-index: 1;
}
#shaft-wrapper::before { left: 0; }
#shaft-wrapper::after  { right: 0; }

#shaft-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 0;
}

.shaft-floor {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
  color: rgba(0,0,0,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
  position: relative;
  letter-spacing: 0.5px;
}
.shaft-floor.shaft-floor-current {
  background: rgba(255,255,255,0.35);
  color: rgba(0,0,0,0.45);
}

/* ── ELEVATOR CAR — BASE ─────────────────────────────── */
#elevator-car {
  width: 72px;
  height: var(--elevator-h);
  background: var(--theme-elevator);
  border-radius: 8px 8px 4px 4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.5),
              inset 0 -1px 0 rgba(0,0,0,0.1);
  transition: top 0.6s ease-in-out;
  z-index: 5;
  overflow: hidden;
}
#elevator-car::before {
  content: '';
  position: absolute;
  top: 6px; bottom: 6px;
  left: 50%;
  width: 2px;
  background: rgba(0,0,0,0.15);
  transform: translateX(-50%);
  border-radius: 1px;
}
#elevator-car::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: rgba(0,0,0,0.15);
  border-radius: 8px 8px 0 0;
}

#elevator-floor-label {
  font-size: 1rem;
  font-weight: 900;
  color: rgba(0,0,0,0.55);
  z-index: 1;
  line-height: 1;
}

#elevator-car.streak-glow {
  box-shadow: 0 0 0 3px #FFD700,
              0 0 20px 8px rgba(255,215,0,0.5),
              0 4px 14px rgba(0,0,0,0.3);
}
#elevator-car.zero-g {
  transition: top 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes shake {
  0%,100% { left: 50%; transform: translateX(-50%); }
  20%      { left: 50%; transform: translateX(calc(-50% + 8px)); }
  40%      { left: 50%; transform: translateX(calc(-50% - 8px)); }
  60%      { left: 50%; transform: translateX(calc(-50% + 5px)); }
  80%      { left: 50%; transform: translateX(calc(-50% - 3px)); }
}
#elevator-car.shaking { animation: shake 0.42s ease-in-out; }

/* ── FLOOR BUTTON PANEL ──────────────────────────────── */
#floor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 8px 10px;
  gap: 5px;
  background: rgba(0,0,0,0.03);
  scroll-behavior: smooth;
}
#floor-panel::-webkit-scrollbar { width: 4px; }
#floor-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }

.floor-btn {
  width: 100%;
  min-height: var(--btn-h);
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.85);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s, border-color 0.15s;
  flex-shrink: 0;
  color: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  letter-spacing: 0.2px;
}
.floor-btn:active { transform: scale(0.97); }
.floor-btn .btn-floor-num   { font-size: 1rem; font-weight: 900; }
.floor-btn .btn-floor-label { font-size: 0.72rem; font-weight: 600; opacity: 0.5; text-transform: uppercase; letter-spacing: 0.5px; }
.floor-btn .btn-dir         { font-size: 0.85rem; opacity: 0.45; }

.floor-btn.current {
  background: var(--theme-primary);
  border-color: transparent;
  border-left: 5px solid rgba(0,0,0,0.3);
  box-shadow: 0 3px 14px rgba(0,0,0,0.22);
  transform: scale(1.02);
  position: relative;
  z-index: 2;
}
.floor-btn.current .btn-floor-num {
  font-size: 1.1rem;
  font-weight: 900;
}
.floor-btn.current .btn-floor-label {
  opacity: 1;
  font-weight: 800;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
/* "YOU ARE HERE" text replaces the dir arrow */
.floor-btn.current .btn-dir::before {
  content: '📍 HERE';
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  opacity: 1;
  white-space: nowrap;
}

.floor-btn.above {
  background: rgba(255,167,38,0.12);
  border-color: rgba(255,152,0,0.3);
}
.floor-btn.above:hover { background: rgba(255,167,38,0.22); box-shadow: 0 2px 8px rgba(255,152,0,0.2); }

.floor-btn.below {
  background: rgba(33,150,243,0.1);
  border-color: rgba(33,150,243,0.25);
}
.floor-btn.below:hover { background: rgba(33,150,243,0.18); box-shadow: 0 2px 8px rgba(33,150,243,0.2); }

.floor-btn.legend-mode {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
}
/* Current floor highlight works in legend mode too */
.floor-btn.legend-mode.current {
  background: linear-gradient(135deg, #7a5c00, #FFD700);
  border-color: #FFD700;
  border-left: 5px solid #FFD700;
  color: #1a1a2e;
  box-shadow: 0 0 16px rgba(255,215,0,0.55);
  transform: scale(1.04);
}
.floor-btn.legend-mode.current .btn-floor-num  { color: #1a1a2e; font-weight: 900; }
.floor-btn.legend-mode.current .btn-floor-label { color: rgba(0,0,0,0.6); }
.floor-btn.legend-mode.current .btn-dir         { color: #1a1a2e; font-weight: 900; }

.floor-btn.blizzard-hidden .btn-floor-num   { color: transparent; text-shadow: 0 0 8px rgba(255,255,255,0.6); }
.floor-btn.blizzard-hidden .btn-dir         { display: none; }
.floor-btn.blizzard-hidden .btn-floor-label { display: none; }

.floor-btn.rainbow-above { background: linear-gradient(to right, rgba(255,120,0,0.15), rgba(255,200,0,0.1)); border-color: rgba(255,120,0,0.3); }
.floor-btn.rainbow-below { background: linear-gradient(to right, rgba(0,100,220,0.12), rgba(100,0,180,0.1)); border-color: rgba(0,100,220,0.25); }

/* ── PROGRESS BAR ────────────────────────────────────── */
#progress-bar-area {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  background: rgba(0,0,0,0.08);
  flex-shrink: 0;
  border-top: 2px solid rgba(0,0,0,0.08);
}
#progress-label {
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--theme-text);
  letter-spacing: 0.2px;
}
#progress-track {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.1);
  border-radius: 99px;
  overflow: hidden;
}
#progress-fill {
  height: 100%;
  background: var(--theme-primary);
  border-radius: 99px;
  transition: width 0.4s ease;
}
#passenger-faces { display: flex; gap: 1px; }
.pax-face      { font-size: 0.95rem; opacity: 0.25; transition: opacity 0.3s; }
.pax-face.done { opacity: 1; }

/* ── BUILDING COMPLETE SCREEN ────────────────────────── */
#screen-complete {
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 32px 24px;
  background: linear-gradient(160deg, #1a1a2e 0%, #0d3b5e 100%);
  color: #fff;
}
.complete-star   { font-size: 4rem; }
.complete-title  { font-size: 2rem; font-weight: 900; text-align: center; color: #FFD700; text-shadow: 0 2px 12px rgba(255,215,0,0.4); }
.complete-stars-row {
  font-size: 2.6rem;
  letter-spacing: 6px;
  text-align: center;
  animation: stars-pop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes stars-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.complete-star-msg {
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  max-width: 280px;
  color: rgba(255,255,255,0.85);
  font-style: italic;
}
.complete-reward { font-size: 3.5rem; }
.complete-sub    { font-size: 1rem; text-align: center; max-width: 300px; color: rgba(255,255,255,0.7); line-height: 1.5; }

/* ── LEGEND AVERAGE STARS ─────────────────────────────── */
#legend-avg-stars {
  background: rgba(255,215,0,0.08);
  border: 1.5px solid rgba(255,215,0,0.3);
  border-radius: 16px;
  padding: 14px 20px;
  text-align: center;
  width: 100%;
  max-width: 320px;
}
#legend-avg-label  { font-size: 0.72rem; font-weight: 800; color: rgba(255,215,0,0.6); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
#legend-avg-display { font-size: 2rem; letter-spacing: 6px; }
#legend-avg-msg    { font-size: 0.78rem; color: rgba(255,255,255,0.65); margin-top: 4px; }

/* ── CITY MAP SCREEN ─────────────────────────────────── */
#screen-map {
  padding: 20px 14px 24px;
  align-items: center;
  gap: 14px;
  overflow-y: auto;
  background: linear-gradient(160deg, #1a1a2e 0%, #0d3b5e 100%);
  color: #fff;
}
#map-title { font-size: 1.4rem; font-weight: 900; text-align: center; color: #FFD700; }

#buildings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

.building-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 2.5px solid transparent;
}
.building-card:hover   { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.building-card:active  { transform: scale(0.97); }
.building-card.locked  { opacity: 0.32; cursor: not-allowed; filter: grayscale(0.8); pointer-events: none; }
.building-card.current-building {
  border-color: #FFD700;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.4), 0 4px 16px rgba(0,0,0,0.12);
  animation: card-pulse 1.8s ease-in-out infinite;
}
@keyframes card-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,215,0,0.4), 0 4px 16px rgba(0,0,0,0.12); }
  50%      { box-shadow: 0 0 0 6px rgba(255,215,0,0.25), 0 4px 20px rgba(0,0,0,0.18); }
}
.building-card.completed { border-color: #4caf50; }
.bc-emoji  { font-size: 2.2rem; }
.bc-name   { font-size: 0.74rem; font-weight: 700; text-align: center; color: #1a1a2e; line-height: 1.3; }
.bc-status { font-size: 0.68rem; color: #aaa; font-weight: 600; }
.bc-stars  { font-size: 0.9rem; letter-spacing: 1px; color: #e6a800; }
.bc-available { color: #888; font-size: 0.65rem; }
.bc-play-btn {
  display: inline-block;
  margin-top: 2px;
  padding: 5px 14px;
  background: #1a1a2e;
  color: #FFD700;
  font-size: 0.72rem;
  font-weight: 800;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  pointer-events: none;
}

/* ── OVERLAY POPUP ───────────────────────────────────── */
#overlay-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.97);
  border-radius: 18px;
  padding: 14px 22px;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 100;
  display: none;
  pointer-events: none;
  min-width: 180px;
  color: #1a1a2e;
}

/* ── DECORATIVE ELEMENTS ─────────────────────────────── */
#cloud-drift {
  position: absolute;
  top: 8px;
  font-size: 2rem;
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
  display: none;
  animation: cloud-move 15s linear forwards;
}
@keyframes cloud-move {
  from { left: -50px; }
  to   { left: calc(100% + 10px); }
}

#sun-set {
  position: absolute;
  right: 12px;
  font-size: 2rem;
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
  transition: bottom 15s linear;
  display: none;
}

#shooting-star {
  position: absolute;
  font-size: 1.6rem;
  pointer-events: auto;
  z-index: 20;
  cursor: pointer;
  display: none;
  animation: shoot 1.8s linear forwards;
}
@keyframes shoot {
  from { left: -30px; top: 15%; }
  to   { left: calc(100% + 10px); top: 45%; }
}

#pressure-gauge {
  position: absolute;
  right: 12px;
  bottom: 50px;
  width: 14px;
  height: 80px;
  background: rgba(0,0,0,0.15);
  border-radius: 7px;
  overflow: hidden;
  display: none;
}
#pressure-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, #ff4400, #ff9900);
  border-radius: 7px;
  transition: height 0.4s;
}

#blizzard-overlay {
  position: absolute;
  inset: 0;
  background: rgba(176,224,230,0.55);
  pointer-events: none;
  z-index: 15;
  display: none;
  backdrop-filter: blur(2px);
}
#blizzard-overlay::after {
  content: '❄ ❄ ❄';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  opacity: 0.6;
  white-space: nowrap;
}

#animal-visitor {
  position: absolute;
  right: 0;
  top: 40%;
  font-size: 2rem;
  z-index: 20;
  display: none;
  animation: peek 1.6s ease-in-out forwards;
}
@keyframes peek {
  0%   { right: -40px; opacity: 0; }
  30%  { right: 6px;   opacity: 1; }
  70%  { right: 6px;   opacity: 1; }
  100% { right: -40px; opacity: 0; }
}

/* ── CONFETTI ────────────────────────────────────────── */
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 100;
  animation: confetti-fall 2.5s ease-in forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ── SPARKLE ─────────────────────────────────────────── */
.sparkle {
  position: fixed;
  font-size: 1rem;
  pointer-events: none;
  z-index: 60;
  animation: sparkle-out 0.65s ease-out forwards;
}
@keyframes sparkle-out {
  0%   { transform: translate(0,0) scale(1.2); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ── BUBBLE FLOAT ────────────────────────────────────── */
.bubble-float {
  position: absolute;
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 30;
  animation: bubble-rise 1.6s ease-out forwards;
}
@keyframes bubble-rise {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to   { transform: translateY(-90px) scale(0.6); opacity: 0; }
}

/* ── LEGEND SCREEN ───────────────────────────────────── */
#screen-legend {
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  padding: 20px 18px 28px;
  background: radial-gradient(ellipse at top, #2d2000 0%, #000 100%);
  overflow-y: auto;
}
/* Doorman scene sits between title and dialogue — needs room */
#doorman-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#legend-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.legend-trophy      { font-size: 3.2rem; }
#legend-title-text  {
  font-size: 1.7rem; font-weight: 900; color: #FFD700;
  text-align: center; letter-spacing: 3px;
  text-shadow: 0 0 30px rgba(255,215,0,0.55), 0 2px 0 rgba(0,0,0,0.5);
}

#doorman-sprite {
  /* Visible placeholder while JS loads the sprite */
  min-width: 160px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#doorman-sprite canvas {
  display: block;
  image-rendering: auto;
}
/* Loader ring shown before canvas is ready */
#doorman-sprite .sprite-loading {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255,215,0,0.15);
  border-top-color: #FFD700;
  border-radius: 50%;
  animation: sprite-spin 0.9s linear infinite;
}
@keyframes sprite-spin { to { transform: rotate(360deg); } }
#doorman-dialogue-box {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,215,0,0.35);
  border-radius: 16px;
  padding: 12px 18px;
  min-height: 56px;
  width: 100%;
  max-width: 320px;
  position: relative;
}
#doorman-text {
  color: rgba(255,248,220,0.95);
  font-size: 0.83rem;
  line-height: 1.65;
  font-style: italic;
  text-align: center;
  min-height: 40px;
}
#doorman-cursor {
  display: inline-block;
  color: #FFD700;
  font-weight: 900;
  font-size: 1rem;
  animation: cursor-blink 0.7s step-end infinite;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

#hall-of-fame {
  background: linear-gradient(135deg, #3d2800, #1a1100);
  border: 2px solid rgba(255,215,0,0.4);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  color: #FFD700;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 0 40px rgba(255,215,0,0.15);
}
#hall-of-fame h2   { font-size: 1.2rem; margin-bottom: 10px; }
#hof-plaque        { font-size: 0.9rem; line-height: 2; opacity: 0.9; }

/* ── MISC ────────────────────────────────────────────── */
.hidden          { display: none !important; }
#fireworks-layer { position: fixed; inset: 0; pointer-events: none; z-index: 200; display: none; }

/* ── LEVEL COMPLETE SPLASH ───────────────────────────── */
#level-complete-splash {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  animation: lcs-fade-in 0.25s ease-out;
  overflow: hidden;
}
#level-complete-splash.hidden { display: none; }

/* Spinning light rays behind the emoji */
.lcs-bg-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,215,0,0.06) 20deg,
    transparent 40deg, rgba(255,215,0,0.06) 60deg,
    transparent 80deg, rgba(255,215,0,0.06) 100deg,
    transparent 120deg, rgba(255,215,0,0.06) 140deg,
    transparent 160deg, rgba(255,215,0,0.06) 180deg,
    transparent 200deg, rgba(255,215,0,0.06) 220deg,
    transparent 240deg, rgba(255,215,0,0.06) 260deg,
    transparent 280deg, rgba(255,215,0,0.06) 300deg,
    transparent 320deg, rgba(255,215,0,0.06) 340deg,
    transparent 360deg
  );
  animation: lcs-rays-spin 4s linear infinite;
  pointer-events: none;
}

.lcs-content {
  position: relative;
  z-index: 1;
  text-align: center;
  animation: lcs-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lcs-emoji {
  font-size: 6rem;
  display: block;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 30px rgba(255,215,0,0.7));
  animation: lcs-emoji-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lcs-title {
  font-size: 2.4rem;
  font-weight: 900;
  color: #FFD700;
  letter-spacing: 3px;
  text-shadow: 0 0 40px rgba(255,215,0,0.7), 0 3px 0 rgba(0,0,0,0.6);
  animation: lcs-glow-pulse 0.9s ease-in-out infinite alternate;
  line-height: 1.2;
}

.lcs-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  margin-top: 10px;
  font-weight: 600;
}

.lcs-crowd {
  font-size: 1.6rem;
  margin-top: 20px;
  letter-spacing: 4px;
  animation: lcs-crowd-wave 0.5s ease-in-out infinite alternate;
}

@keyframes lcs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lcs-pop-in {
  from { transform: scale(0.4) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes lcs-emoji-bounce {
  0%   { transform: scale(0) rotate(-20deg); }
  60%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes lcs-glow-pulse {
  from { text-shadow: 0 0 20px rgba(255,215,0,0.5), 0 3px 0 rgba(0,0,0,0.6); }
  to   { text-shadow: 0 0 60px rgba(255,215,0,0.9), 0 3px 0 rgba(0,0,0,0.6); }
}
@keyframes lcs-crowd-wave {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}
@keyframes lcs-rays-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════════════════
   PER-BUILDING UNIQUE DESIGNS
   Selector pattern: #app[data-building="N"] target
   ══════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────
   BUILDING 1 — SUNNY TOWER 🌞
   Cheerful, bright, warm yellow sky. Clean simple cab.
   ──────────────────────────────────────────────────── */
#app[data-building="1"] #game-area {
  background: linear-gradient(180deg, #87CEEB 0%, #fffde7 100%);
}
#app[data-building="1"] #shaft-wrapper {
  background: linear-gradient(180deg, #e3f2fd, #fff9c4);
  border-right-color: rgba(255,200,0,0.25);
  box-shadow: inset -4px 0 12px rgba(255,215,0,0.15);
}
/* Sunny car: round top, yellow cab with warm glow */
#app[data-building="1"] #elevator-car {
  background: linear-gradient(160deg, #FFE566, #FFD700);
  border-radius: 36px 36px 10px 10px;
  box-shadow: 0 6px 20px rgba(255,180,0,0.5),
              inset 0 2px 0 rgba(255,255,255,0.6);
  width: 68px;
}
/* Replace door seam with a smiley window */
#app[data-building="1"] #elevator-car::before {
  content: '☀️';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  width: auto; height: auto;
  background: none;
  border-radius: 0;
}
/* Top rail = sun rays bar */
#app[data-building="1"] #elevator-car::after {
  background: linear-gradient(90deg, #FFB300, #FFD700, #FFB300);
  height: 6px;
  border-radius: 36px 36px 0 0;
}
#app[data-building="1"] #elevator-floor-label { color: #7a4f00; font-size: 0.85rem; margin-top: 14px; }
/* Sunny shaft floors */
#app[data-building="1"] .shaft-floor { color: rgba(120,80,0,0.3); border-bottom-color: rgba(255,200,0,0.15); }
#app[data-building="1"] .shaft-floor.shaft-floor-current { background: rgba(255,215,0,0.25); color: #7a4f00; }
/* Sunny floor buttons */
#app[data-building="1"] #floor-panel { background: rgba(255,253,225,0.6); }
#app[data-building="1"] .floor-btn {
  background: rgba(255,253,225,0.9);
  border-color: rgba(255,200,0,0.3);
  border-radius: 14px;
  color: #5a3e00;
}
#app[data-building="1"] .floor-btn.above {
  background: linear-gradient(135deg, rgba(255,230,50,0.2), rgba(255,200,0,0.1));
  border-color: rgba(255,180,0,0.4);
}
#app[data-building="1"] .floor-btn.below {
  background: linear-gradient(135deg, rgba(255,160,0,0.15), rgba(255,120,0,0.08));
  border-color: rgba(255,140,0,0.3);
}
#app[data-building="1"] .floor-btn.current { background: linear-gradient(135deg, #FFD700, #FFB300); color: #3d2800; }
#app[data-building="1"] #passenger-wrapper { background: linear-gradient(135deg, #FFE566, #FFD700); box-shadow: 0 4px 14px rgba(255,180,0,0.4); }
#app[data-building="1"] #speech-bubble { background: #fffde7; border: 1.5px solid rgba(255,200,0,0.3); }


/* ────────────────────────────────────────────────────
   BUILDING 2 — RAINBOW BLOCK 🌈
   Vivid, playful, every surface bursts with colour.
   ──────────────────────────────────────────────────── */
#app[data-building="2"] #game-area {
  background: linear-gradient(160deg, #fff9c4 0%, #f8bbd0 50%, #e1f5fe 100%);
}
#app[data-building="2"] #shaft-wrapper {
  background: linear-gradient(180deg,
    #FF000022 0%, #FF7F0022 14%, #FFFF0022 28%,
    #00C80022 42%, #0000FF22 57%, #8B00FF22 71%,
    #FF69B422 85%, #FF000022 100%);
  border-right: 3px solid rgba(150,0,220,0.2);
}
/* Rainbow car: striped gradient, round capsule shape */
#app[data-building="2"] #elevator-car {
  background: linear-gradient(180deg,
    #FF6B6B 0%, #FF9F43 18%, #FFDD59 36%,
    #48DBFB 54%, #5352ED 72%, #C44CD3 100%);
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(180,0,200,0.35),
              inset 0 2px 0 rgba(255,255,255,0.5);
  width: 68px;
}
#app[data-building="2"] #elevator-car::before {
  background: rgba(255,255,255,0.35);
  width: 2px;
}
#app[data-building="2"] #elevator-car::after {
  background: rgba(255,255,255,0.4);
  height: 4px;
  border-radius: 20px 20px 0 0;
}
#app[data-building="2"] #elevator-floor-label { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
/* Rainbow floor buttons — warm tones above, cool below */
#app[data-building="2"] #floor-panel { background: rgba(255,240,255,0.5); }
#app[data-building="2"] .floor-btn { border-radius: 12px; font-weight: 900; }
#app[data-building="2"] .floor-btn.above {
  background: linear-gradient(135deg, rgba(255,107,107,0.18), rgba(255,221,89,0.15));
  border-color: rgba(255,100,80,0.35);
  color: #880000;
}
#app[data-building="2"] .floor-btn.below {
  background: linear-gradient(135deg, rgba(83,82,237,0.15), rgba(196,76,211,0.12));
  border-color: rgba(83,82,237,0.3);
  color: #2d0070;
}
#app[data-building="2"] .floor-btn.current {
  background: linear-gradient(135deg, #FF6B6B, #5352ED);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  border-color: transparent;
}
#app[data-building="2"] #passenger-wrapper { background: linear-gradient(135deg, #FF6B6B, #5352ED); }
#app[data-building="2"] #speech-bubble { border-left: 3px solid #FF6B6B; }


/* ────────────────────────────────────────────────────
   BUILDING 3 — CLOUD CASTLE 🏰
   Medieval stone shaft, sky-blue air, royal gold trim.
   ──────────────────────────────────────────────────── */
#app[data-building="3"] #game-area {
  background: linear-gradient(180deg, #b8d8f8 0%, #dceefb 60%, #e8f4fd 100%);
}
#app[data-building="3"] #shaft-wrapper {
  background: repeating-linear-gradient(
    180deg,
    #c5cfe0 0px, #c5cfe0 18px,
    #bbc5d8 18px, #bbc5d8 20px
  );
  border-right: 4px solid #8c98b0;
}
#app[data-building="3"] #shaft-wrapper::before,
#app[data-building="3"] #shaft-wrapper::after { background: rgba(80,90,120,0.12); }
/* Castle car: stone-coloured, arched top (via border-radius), portcullis seam */
#app[data-building="3"] #elevator-car {
  background: linear-gradient(160deg, #d4dce8, #b8c4d8);
  border-radius: 50% 50% 6px 6px / 24px 24px 6px 6px;
  border: 2px solid #8c98b0;
  box-shadow: 0 6px 18px rgba(60,70,100,0.3),
              inset 0 2px 0 rgba(255,255,255,0.4);
  width: 70px;
}
/* Portcullis bars */
#app[data-building="3"] #elevator-car::before {
  content: '';
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 8px,
    rgba(70,80,110,0.25) 8px, rgba(70,80,110,0.25) 10px
  );
  inset: 6px 8px 6px 8px;
  left: 0; width: 100%;
  transform: none;
  border-radius: 0;
}
/* Battlements row */
#app[data-building="3"] #elevator-car::after {
  content: '▐ ▐ ▐';
  font-size: 0.55rem;
  letter-spacing: 4px;
  color: #8c98b0;
  background: #b8c4d8;
  height: auto;
  padding: 1px 6px;
  top: -1px;
  border-radius: 2px 2px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app[data-building="3"] #elevator-floor-label { color: #3a4560; font-size: 0.9rem; margin-top: 6px; }
/* Stone-and-gold floor buttons */
#app[data-building="3"] #floor-panel { background: rgba(200,215,235,0.3); }
#app[data-building="3"] .floor-btn {
  background: rgba(212,220,232,0.85);
  border-color: #8c98b0;
  border-radius: 8px;
  color: #2a3550;
}
#app[data-building="3"] .floor-btn.above {
  background: rgba(212,220,232,0.9);
  border-color: rgba(200,175,100,0.5);
}
#app[data-building="3"] .floor-btn.below {
  background: rgba(180,195,220,0.7);
  border-color: rgba(100,120,180,0.4);
}
#app[data-building="3"] .floor-btn.current {
  background: linear-gradient(135deg, #CFB53B, #8B6914);
  color: #fff8e1;
  border-color: #CFB53B;
  box-shadow: 0 2px 12px rgba(200,170,0,0.35);
}
#app[data-building="3"] #passenger-wrapper { background: linear-gradient(135deg, #87CEEB, #b8c4d8); }
#app[data-building="3"] #speech-bubble { background: #f0f5ff; border: 1.5px solid rgba(140,152,176,0.4); border-radius: 14px 14px 14px 4px; }


/* ────────────────────────────────────────────────────
   BUILDING 4 — OCEAN TOWER 🌊
   Deep-sea submarine cab, coral/teal water world.
   ──────────────────────────────────────────────────── */
#app[data-building="4"] #game-area {
  background: linear-gradient(180deg, #006994 0%, #0099b8 40%, #00bcd4 100%);
}
#app[data-building="4"] #shaft-wrapper {
  background: linear-gradient(180deg, #004d6e, #006994, #0099b8);
  border-right: 3px solid #004060;
  box-shadow: inset -4px 0 16px rgba(0,180,230,0.2);
}
#app[data-building="4"] #shaft-wrapper::before,
#app[data-building="4"] #shaft-wrapper::after { background: rgba(0,30,60,0.3); }
/* Submarine/diving bell: round porthole cab, riveted look */
#app[data-building="4"] #elevator-car {
  background: linear-gradient(160deg, #00838f, #00626b);
  border-radius: 50% 50% 14px 14px / 30px 30px 14px 14px;
  border: 3px solid #00b5cc;
  box-shadow: 0 6px 20px rgba(0,80,120,0.5),
              0 0 0 5px rgba(0,181,204,0.15),
              inset 0 2px 0 rgba(0,200,230,0.25);
  width: 70px;
  overflow: visible;
}
/* Porthole window */
#app[data-building="4"] #elevator-car::before {
  content: '';
  width: 26px;
  height: 26px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,220,255,0.4) 0%, rgba(0,150,200,0.2) 100%);
  border: 2px solid rgba(0,200,240,0.6);
}
/* Periscope nub */
#app[data-building="4"] #elevator-car::after {
  content: '';
  width: 6px;
  height: 10px;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #00626b;
  border: 2px solid #00b5cc;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
#app[data-building="4"] #elevator-floor-label { color: #a0ffe8; font-size: 0.8rem; margin-top: 14px; }
/* Underwater floor buttons */
#app[data-building="4"] #floor-panel { background: rgba(0,60,100,0.5); }
#app[data-building="4"] .floor-btn {
  background: rgba(0,100,140,0.55);
  border-color: rgba(0,181,204,0.3);
  color: #e0ffff;
  border-radius: 12px;
}
#app[data-building="4"] .floor-btn.above {
  background: rgba(0,150,180,0.4);
  border-color: rgba(0,210,230,0.4);
  color: #ccfcff;
}
#app[data-building="4"] .floor-btn.below {
  background: rgba(0,60,100,0.6);
  border-color: rgba(0,100,180,0.4);
  color: #80d8ff;
}
#app[data-building="4"] .floor-btn.current {
  background: linear-gradient(135deg, #00bcd4, #00838f);
  color: #fff;
  border-color: #00e5ff;
  box-shadow: 0 0 12px rgba(0,229,255,0.4);
}
#app[data-building="4"] .floor-btn:hover { box-shadow: 0 0 10px rgba(0,200,230,0.35); }
#app[data-building="4"] #passenger-wrapper { background: linear-gradient(135deg, #00bcd4, #006994); }
#app[data-building="4"] #speech-bubble { background: rgba(0,100,140,0.85); color: #e0ffff; border: 1.5px solid rgba(0,200,230,0.3); }
#app[data-building="4"] #speech-bubble { color: #e0ffff; }
#app[data-building="4"] #floor-status-badge { color: rgba(180,240,255,0.7); background: rgba(0,80,120,0.5); border-color: rgba(0,200,230,0.3); }
#app[data-building="4"] #floor-status-badge span { color: #80e8ff; }


/* ────────────────────────────────────────────────────
   BUILDING 5 — STAR HOTEL 🌙
   Night-sky shaft, sleek obsidian cab with gold trim.
   ──────────────────────────────────────────────────── */
#app[data-building="5"] #game-area {
  background: radial-gradient(ellipse at top, #1a1a4e 0%, #0a0a2e 70%, #000010 100%);
}
/* Twinkling star pseudo-pattern via shaft */
#app[data-building="5"] #shaft-wrapper {
  background: linear-gradient(180deg, #0d0d3a, #1a1a4e, #0d0d3a);
  border-right: 2px solid rgba(255,215,0,0.2);
  box-shadow: inset -4px 0 20px rgba(100,80,255,0.1);
}
#app[data-building="5"] #shaft-wrapper::before { background: rgba(255,215,0,0.08); }
#app[data-building="5"] #shaft-wrapper::after  { background: rgba(255,215,0,0.04); }
/* Obsidian cab: dark glassy, gold rim */
#app[data-building="5"] #elevator-car {
  background: linear-gradient(160deg, #1c1c3e, #0d0d28);
  border-radius: 10px 10px 6px 6px;
  border: 2px solid rgba(255,215,0,0.5);
  box-shadow: 0 6px 24px rgba(0,0,0,0.6),
              0 0 0 1px rgba(255,215,0,0.1),
              inset 0 1px 0 rgba(255,215,0,0.2);
  width: 70px;
}
/* Star window */
#app[data-building="5"] #elevator-car::before {
  content: '✦';
  font-size: 1rem;
  color: #FFD700;
  background: none;
  width: auto; height: auto;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0;
  text-shadow: 0 0 8px rgba(255,215,0,0.8);
}
/* Gold header strip */
#app[data-building="5"] #elevator-car::after {
  background: linear-gradient(90deg, #B8860B, #FFD700, #B8860B);
  height: 5px;
  border-radius: 10px 10px 0 0;
}
#app[data-building="5"] #elevator-floor-label { color: #FFD700; font-size: 0.85rem; margin-top: 12px; }
/* Night-sky floor buttons */
#app[data-building="5"] #floor-panel { background: rgba(10,10,40,0.6); }
#app[data-building="5"] .floor-btn {
  background: rgba(20,20,60,0.7);
  border-color: rgba(255,215,0,0.2);
  color: #e8e0ff;
  border-radius: 10px;
}
#app[data-building="5"] .floor-btn.above {
  background: rgba(40,35,80,0.7);
  border-color: rgba(255,215,0,0.35);
  color: #ffe87c;
}
#app[data-building="5"] .floor-btn.below {
  background: rgba(15,15,50,0.7);
  border-color: rgba(100,100,220,0.3);
  color: #a0a8ff;
}
#app[data-building="5"] .floor-btn.current {
  background: linear-gradient(135deg, #3d3500, #7a6a00);
  color: #FFD700;
  border-color: #FFD700;
  box-shadow: 0 0 14px rgba(255,215,0,0.35);
}
#app[data-building="5"] .floor-btn:hover { box-shadow: 0 0 10px rgba(255,215,0,0.2); }
#app[data-building="5"] #passenger-wrapper { background: linear-gradient(135deg, #1c1c3e, #3d3580); border: 2px solid rgba(255,215,0,0.4); }
#app[data-building="5"] #speech-bubble { background: rgba(20,20,60,0.9); color: #ffe87c; border: 1.5px solid rgba(255,215,0,0.3); }
#app[data-building="5"] #floor-status-badge { color: rgba(220,210,255,0.85); background: rgba(20,15,60,0.7); border-color: rgba(180,150,255,0.35); }
#app[data-building="5"] #floor-status-badge span { color: #FFD700; }


/* ────────────────────────────────────────────────────
   BUILDING 6 — VOLCANO HQ 🌋
   Industrial molten shaft, scorched iron elevator.
   ──────────────────────────────────────────────────── */
#app[data-building="6"] #game-area {
  background: radial-gradient(ellipse at bottom, #6b1a00 0%, #3d0a00 50%, #1a0000 100%);
}
#app[data-building="6"] #shaft-wrapper {
  background: linear-gradient(180deg, #2d0800, #4a1200, #2d0800);
  border-right: 3px solid #8b2000;
  box-shadow: inset -4px 0 16px rgba(255,80,0,0.1);
}
#app[data-building="6"] #shaft-wrapper::before,
#app[data-building="6"] #shaft-wrapper::after { background: rgba(200,40,0,0.15); }
/* Scorched iron cab with lava crack glow */
#app[data-building="6"] #elevator-car {
  background: linear-gradient(160deg, #3d1500, #2a0d00);
  border-radius: 6px;
  border: 2px solid #8b2000;
  box-shadow: 0 6px 20px rgba(200,50,0,0.5),
              0 0 0 3px rgba(255,80,0,0.08),
              inset 0 1px 0 rgba(255,100,0,0.2);
  width: 70px;
}
/* Lava crack seam — glowing */
#app[data-building="6"] #elevator-car::before {
  background: linear-gradient(180deg, transparent 0%, #FF6600 30%, #FF4400 50%, #FF6600 70%, transparent 100%);
  width: 3px;
  border-radius: 2px;
  box-shadow: 0 0 8px #FF6600, 0 0 16px rgba(255,100,0,0.5);
}
/* Riveted top plate */
#app[data-building="6"] #elevator-car::after {
  background: linear-gradient(90deg, #4a1500, #6b2000, #4a1500);
  height: 7px;
  border-bottom: 1px solid #FF4400;
  box-shadow: 0 2px 8px rgba(255,80,0,0.4);
  border-radius: 4px 4px 0 0;
}
#app[data-building="6"] #elevator-floor-label { color: #FF9944; font-size: 0.85rem; margin-top: 10px; text-shadow: 0 0 6px rgba(255,80,0,0.6); }
/* Industrial floor buttons */
#app[data-building="6"] #floor-panel { background: rgba(30,5,0,0.5); }
#app[data-building="6"] .floor-btn {
  background: rgba(60,20,5,0.7);
  border-color: rgba(180,60,0,0.35);
  color: #ffb380;
  border-radius: 6px;
  font-family: monospace;
}
#app[data-building="6"] .floor-btn.above {
  background: rgba(100,30,5,0.65);
  border-color: rgba(255,100,0,0.4);
  color: #FF9944;
}
#app[data-building="6"] .floor-btn.below {
  background: rgba(40,10,0,0.7);
  border-color: rgba(180,40,0,0.3);
  color: #cc6622;
}
#app[data-building="6"] .floor-btn.current {
  background: linear-gradient(135deg, #8b2000, #FF4400);
  color: #ffe0cc;
  border-color: #FF6600;
  box-shadow: 0 0 16px rgba(255,80,0,0.5);
}
#app[data-building="6"] #passenger-wrapper { background: linear-gradient(135deg, #FF6600, #8b2000); border: 2px solid #FF4400; }
#app[data-building="6"] #speech-bubble { background: rgba(50,15,5,0.9); color: #FF9944; border: 1.5px solid rgba(255,80,0,0.3); }
#app[data-building="6"] #floor-status-badge { color: rgba(255,180,100,0.9); background: rgba(60,10,0,0.7); border-color: rgba(220,80,0,0.35); }
#app[data-building="6"] #floor-status-badge span { color: #FF9944; }
/* Animate lava glow pulse */
@keyframes lava-pulse {
  0%,100% { box-shadow: 0 6px 20px rgba(200,50,0,0.5), 0 0 0 3px rgba(255,80,0,0.08); }
  50%      { box-shadow: 0 6px 30px rgba(255,80,0,0.7), 0 0 0 5px rgba(255,60,0,0.2); }
}
#app[data-building="6"] #elevator-car { animation: lava-pulse 2.4s ease-in-out infinite; }
#app[data-building="6"] #elevator-car.shaking { animation: shake 0.42s ease-in-out; }


/* ────────────────────────────────────────────────────
   BUILDING 7 — ICE PEAK LODGE 🔮
   Frosted crystal cab, blizzard-white icy shaft.
   ──────────────────────────────────────────────────── */
#app[data-building="7"] #game-area {
  background: linear-gradient(180deg, #e8f4f8 0%, #c9e8f0 50%, #b0dce8 100%);
}
#app[data-building="7"] #shaft-wrapper {
  background: linear-gradient(180deg, #d6eef8, #bce0f0, #d6eef8);
  border-right: 3px solid rgba(176,224,230,0.6);
  box-shadow: inset -4px 0 16px rgba(150,220,240,0.3);
}
#app[data-building="7"] #shaft-wrapper::before,
#app[data-building="7"] #shaft-wrapper::after { background: rgba(100,180,220,0.15); }
/* Crystal ice cab: faceted look, icy shimmer */
#app[data-building="7"] #elevator-car {
  background: linear-gradient(160deg, rgba(220,245,255,0.95), rgba(160,220,235,0.9));
  border-radius: 10px 10px 6px 6px;
  border: 2px solid rgba(140,210,230,0.8);
  box-shadow: 0 6px 20px rgba(100,180,220,0.4),
              0 0 0 4px rgba(200,240,255,0.3),
              inset 0 2px 0 rgba(255,255,255,0.7),
              inset 0 -2px 0 rgba(100,180,220,0.3);
  width: 70px;
}
/* Ice crystal facet lines */
#app[data-building="7"] #elevator-car::before {
  background: linear-gradient(180deg,
    transparent 0%, rgba(180,230,245,0.6) 30%,
    rgba(255,255,255,0.8) 50%,
    rgba(180,230,245,0.6) 70%, transparent 100%);
  width: 2px;
  box-shadow: 0 0 6px rgba(180,230,255,0.5);
}
/* Icicle fringe on top */
#app[data-building="7"] #elevator-car::after {
  content: '❄';
  font-size: 0.85rem;
  background: linear-gradient(90deg, #b0e0e6, #e0f4ff, #b0e0e6);
  height: auto;
  padding: 2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(100,180,220,0.8);
  border-radius: 10px 10px 0 0;
  border-bottom: 1.5px solid rgba(140,210,230,0.5);
}
#app[data-building="7"] #elevator-floor-label { color: #1B4F72; font-size: 0.88rem; margin-top: 10px; }
/* Icy floor buttons */
#app[data-building="7"] #floor-panel { background: rgba(200,235,245,0.3); }
#app[data-building="7"] .floor-btn {
  background: rgba(215,240,250,0.85);
  border-color: rgba(140,210,230,0.5);
  border-radius: 10px;
  color: #1B4F72;
}
#app[data-building="7"] .floor-btn.above {
  background: rgba(230,247,255,0.9);
  border-color: rgba(100,200,225,0.5);
}
#app[data-building="7"] .floor-btn.below {
  background: rgba(190,225,240,0.7);
  border-color: rgba(100,170,210,0.4);
}
#app[data-building="7"] .floor-btn.current {
  background: linear-gradient(135deg, #b0e0e6, #5BC8DC);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(91,200,220,0.4);
}
#app[data-building="7"] #passenger-wrapper { background: linear-gradient(135deg, #b0e0e6, #5BC8DC); box-shadow: 0 4px 14px rgba(100,200,225,0.4); }
#app[data-building="7"] #speech-bubble { background: rgba(230,248,255,0.95); border: 1.5px solid rgba(140,210,230,0.5); }


/* ────────────────────────────────────────────────────
   BUILDING 8 — SPACE STATION ALPHA 🚀
   Deep-space pod, chrome hull, zero-gravity blue glow.
   ──────────────────────────────────────────────────── */
#app[data-building="8"] #game-area {
  background: radial-gradient(ellipse at 50% 20%, #0d1b3e 0%, #050510 60%, #000008 100%);
}
/* Starfield shaft */
#app[data-building="8"] #shaft-wrapper {
  background: linear-gradient(180deg, #070720, #0a0a2e, #070720);
  border-right: 2px solid rgba(0,128,255,0.3);
  box-shadow: inset -4px 0 20px rgba(0,100,255,0.1);
}
#app[data-building="8"] #shaft-wrapper::before { background: rgba(0,128,255,0.12); }
#app[data-building="8"] #shaft-wrapper::after  { background: rgba(100,180,255,0.06); }
/* Space pod: metallic silver hexagonal cab */
#app[data-building="8"] #elevator-car {
  background: linear-gradient(160deg, #2a3a5e, #1a2540);
  border-radius: 8px;
  border: 2px solid rgba(0,128,255,0.6);
  box-shadow: 0 6px 24px rgba(0,60,160,0.5),
              0 0 0 4px rgba(0,128,255,0.1),
              0 0 30px rgba(0,100,255,0.2),
              inset 0 1px 0 rgba(100,180,255,0.25);
  width: 72px;
}
/* Circular porthole */
#app[data-building="8"] #elevator-car::before {
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 50%;
  left: 50%; top: 50%;
  transform: translate(-50%, -55%);
  background: radial-gradient(circle, rgba(0,180,255,0.3) 0%, rgba(0,80,200,0.15) 100%);
  border: 2px solid rgba(0,200,255,0.5);
  box-shadow: 0 0 10px rgba(0,200,255,0.3), inset 0 0 8px rgba(0,100,255,0.2);
}
/* Antenna array on top */
#app[data-building="8"] #elevator-car::after {
  content: '';
  background: linear-gradient(90deg, #1a2540, #2a3a5e, #1a2540);
  height: 6px;
  border-bottom: 2px solid rgba(0,200,255,0.4);
  box-shadow: 0 2px 10px rgba(0,150,255,0.3);
  border-radius: 8px 8px 0 0;
}
#app[data-building="8"] #elevator-floor-label { color: #40c8ff; font-size: 0.8rem; margin-top: 12px; font-family: monospace; text-shadow: 0 0 8px rgba(0,200,255,0.6); }
/* Sci-fi HUD floor buttons */
#app[data-building="8"] #floor-panel { background: rgba(5,5,25,0.7); }
#app[data-building="8"] .floor-btn {
  background: rgba(15,25,60,0.75);
  border-color: rgba(0,128,255,0.25);
  color: #80d4ff;
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
}
#app[data-building="8"] .floor-btn.above {
  background: rgba(20,40,80,0.7);
  border-color: rgba(0,200,255,0.4);
  color: #40c8ff;
}
#app[data-building="8"] .floor-btn.below {
  background: rgba(10,20,50,0.7);
  border-color: rgba(60,60,180,0.35);
  color: #6060ff;
}
#app[data-building="8"] .floor-btn.current {
  background: linear-gradient(135deg, #003080, #0080FF);
  color: #e0f4ff;
  border-color: #00d4ff;
  box-shadow: 0 0 16px rgba(0,200,255,0.5);
}
#app[data-building="8"] .floor-btn:hover { box-shadow: 0 0 10px rgba(0,180,255,0.3); }
#app[data-building="8"] #passenger-wrapper { background: linear-gradient(135deg, #0d1b3e, #0080FF); border: 2px solid rgba(0,200,255,0.5); }
#app[data-building="8"] #speech-bubble { background: rgba(10,20,60,0.9); color: #80d4ff; border: 1.5px solid rgba(0,180,255,0.35); }
#app[data-building="8"] #floor-status-badge { color: rgba(140,210,255,0.9); background: rgba(0,10,40,0.75); border-color: rgba(0,100,220,0.35); }
#app[data-building="8"] #floor-status-badge span { color: #40c8ff; }
/* Pulse glow for space pod */
@keyframes space-pulse {
  0%,100% { box-shadow: 0 6px 24px rgba(0,60,160,0.5), 0 0 30px rgba(0,100,255,0.2); }
  50%      { box-shadow: 0 6px 24px rgba(0,80,200,0.6), 0 0 40px rgba(0,150,255,0.35); }
}
#app[data-building="8"] #elevator-car { animation: space-pulse 3s ease-in-out infinite; }
#app[data-building="8"] #elevator-car.shaking { animation: shake 0.42s ease-in-out; }


/* ────────────────────────────────────────────────────
   BUILDING 9 — JUNGLE TREEHOUSE TOWER 🌿
   Bamboo-and-rope cab, deep emerald canopy world.
   ──────────────────────────────────────────────────── */
#app[data-building="9"] #game-area {
  background: linear-gradient(180deg, #0d2818 0%, #1a4230 50%, #0d2818 100%);
}
#app[data-building="9"] #shaft-wrapper {
  background: repeating-linear-gradient(
    180deg,
    #1a4230 0px, #1a4230 22px,
    #123220 22px, #123220 24px
  );
  border-right: 4px solid #0d2818;
  box-shadow: inset -4px 0 16px rgba(0,60,20,0.4);
}
#app[data-building="9"] #shaft-wrapper::before,
#app[data-building="9"] #shaft-wrapper::after { background: rgba(0,40,10,0.4); }
/* Bamboo-wood cage cab */
#app[data-building="9"] #elevator-car {
  background: linear-gradient(160deg, #8B4513, #6b3410);
  border-radius: 10px 10px 6px 6px;
  border: 3px solid #5a2d0c;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5),
              inset 0 2px 0 rgba(200,150,80,0.3),
              inset 0 -2px 0 rgba(0,0,0,0.3);
  width: 70px;
}
/* Wood grain seam */
#app[data-building="9"] #elevator-car::before {
  background: repeating-linear-gradient(
    180deg,
    transparent 0px, transparent 5px,
    rgba(200,140,60,0.15) 5px, rgba(200,140,60,0.15) 6px
  );
  width: 3px;
  border-radius: 1px;
}
/* Rope lashing on top */
#app[data-building="9"] #elevator-car::after {
  content: '';
  background: repeating-linear-gradient(
    90deg,
    #5a2d0c 0px, #5a2d0c 8px,
    #8B6914 8px, #8B6914 10px
  );
  height: 8px;
  border-radius: 8px 8px 0 0;
}
#app[data-building="9"] #elevator-floor-label { color: #ffe4b5; font-size: 0.85rem; margin-top: 12px; }
/* Jungle leaf floor buttons */
#app[data-building="9"] #floor-panel { background: rgba(13,40,24,0.6); }
#app[data-building="9"] .floor-btn {
  background: rgba(20,60,35,0.7);
  border-color: rgba(46,204,113,0.25);
  color: #90ee90;
  border-radius: 10px;
}
#app[data-building="9"] .floor-btn.above {
  background: rgba(30,80,45,0.7);
  border-color: rgba(46,204,113,0.45);
  color: #98fb98;
}
#app[data-building="9"] .floor-btn.below {
  background: rgba(15,40,20,0.7);
  border-color: rgba(30,140,80,0.3);
  color: #52c974;
}
#app[data-building="9"] .floor-btn.current {
  background: linear-gradient(135deg, #1a6b38, #2ecc71);
  color: #e8fff0;
  border-color: #2ecc71;
  box-shadow: 0 2px 14px rgba(46,204,113,0.4);
}
#app[data-building="9"] .floor-btn:hover { box-shadow: 0 2px 10px rgba(46,204,113,0.3); }
#app[data-building="9"] #passenger-wrapper { background: linear-gradient(135deg, #2ecc71, #1a6b38); border: 2px solid rgba(46,204,113,0.5); }
#app[data-building="9"] #speech-bubble { background: rgba(20,55,30,0.9); color: #c8ffdc; border: 1.5px solid rgba(46,204,113,0.3); }
#app[data-building="9"] #floor-status-badge { color: rgba(140,240,170,0.9); background: rgba(5,20,10,0.75); border-color: rgba(46,204,113,0.3); }
#app[data-building="9"] #floor-status-badge span { color: #2ecc71; }


/* ────────────────────────────────────────────────────
   BUILDING 10 — THE LEGENDARY PENTHOUSE 🏆
   Pure black velvet with blazing gold. Opulent.
   ──────────────────────────────────────────────────── */
#app[data-building="10"] #game-area {
  background: radial-gradient(ellipse at 50% 0%, #1a1400 0%, #0d0d00 50%, #000 100%);
}
#app[data-building="10"] #shaft-wrapper {
  background: linear-gradient(180deg, #0a0900, #100f00, #0a0900);
  border-right: 3px solid rgba(255,215,0,0.3);
  box-shadow: inset -4px 0 20px rgba(255,180,0,0.08);
}
#app[data-building="10"] #shaft-wrapper::before { background: rgba(255,215,0,0.1); }
#app[data-building="10"] #shaft-wrapper::after  { background: rgba(255,160,0,0.06); }
/* Gold throne cab: ornate, embossed, glowing */
#app[data-building="10"] #elevator-car {
  background: linear-gradient(160deg, #c8a800, #FFD700, #c8a800);
  border-radius: 10px 10px 6px 6px;
  border: 2px solid #8B6914;
  box-shadow: 0 6px 30px rgba(255,180,0,0.6),
              0 0 0 3px rgba(255,215,0,0.2),
              0 0 50px rgba(255,150,0,0.15),
              inset 0 3px 0 rgba(255,255,255,0.5),
              inset 0 -3px 0 rgba(120,80,0,0.3);
  width: 72px;
}
/* Crown emblem */
#app[data-building="10"] #elevator-car::before {
  content: '👑';
  font-size: 1rem;
  background: none;
  width: auto; height: auto;
  left: 50%; top: 50%;
  transform: translate(-50%, -55%);
  border-radius: 0;
}
/* Gold banded top */
#app[data-building="10"] #elevator-car::after {
  background: linear-gradient(90deg, #8B6914, #FFD700, #CFB53B, #FFD700, #8B6914);
  height: 7px;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 2px 12px rgba(255,180,0,0.6);
}
#app[data-building="10"] #elevator-floor-label { color: #2d1a00; font-size: 0.85rem; margin-top: 14px; font-weight: 900; }
/* Luxury black-and-gold floor buttons */
#app[data-building="10"] #floor-panel { background: rgba(5,4,0,0.7); }
#app[data-building="10"] .floor-btn {
  background: rgba(15,12,0,0.85);
  border-color: rgba(255,215,0,0.2);
  color: #c8a800;
  border-radius: 8px;
  letter-spacing: 0.4px;
}
#app[data-building="10"] .floor-btn.above {
  background: rgba(25,20,0,0.85);
  border-color: rgba(255,215,0,0.4);
  color: #FFD700;
}
#app[data-building="10"] .floor-btn.below {
  background: rgba(10,8,0,0.85);
  border-color: rgba(200,160,0,0.25);
  color: #a08000;
}
#app[data-building="10"] .floor-btn.current {
  background: linear-gradient(135deg, #3d2e00, #7a5c00);
  color: #FFD700;
  border-color: #FFD700;
  box-shadow: 0 0 20px rgba(255,200,0,0.5);
}
#app[data-building="10"] .floor-btn:hover { box-shadow: 0 0 12px rgba(255,200,0,0.3); }
#app[data-building="10"] #passenger-wrapper { background: linear-gradient(135deg, #c8a800, #FFD700); border: 2px solid rgba(255,215,0,0.6); box-shadow: 0 4px 20px rgba(255,180,0,0.5); }
#app[data-building="10"] #speech-bubble { background: rgba(15,12,0,0.92); color: #FFD700; border: 1.5px solid rgba(255,200,0,0.35); }
#app[data-building="10"] #floor-status-badge { color: rgba(255,215,0,0.95); background: rgba(10,8,0,0.8); border-color: rgba(255,215,0,0.4); }
#app[data-building="10"] #floor-status-badge span { color: #FFD700; }
/* Majestic golden pulse */
@keyframes legend-glow {
  0%,100% { box-shadow: 0 6px 30px rgba(255,180,0,0.6), 0 0 50px rgba(255,150,0,0.15); }
  50%      { box-shadow: 0 6px 40px rgba(255,200,0,0.8), 0 0 70px rgba(255,180,0,0.3); }
}
#app[data-building="10"] #elevator-car { animation: legend-glow 2s ease-in-out infinite; }
#app[data-building="10"] #elevator-car.shaking { animation: shake 0.42s ease-in-out; }


/* ══════════════════════════════════════════════════════
   SHAFT FLOOR LABEL VISIBILITY FIXES
   Dark-themed buildings need light shaft text.
   ══════════════════════════════════════════════════════ */

/* Building 3 — Cloud Castle: stone shaft, slightly visible labels */
#app[data-building="3"] .shaft-floor { color: rgba(60,70,110,0.35); border-bottom-color: rgba(80,90,130,0.15); }
#app[data-building="3"] .shaft-floor.shaft-floor-current { background: rgba(200,170,80,0.2); color: rgba(60,70,110,0.7); }

/* Building 4 — Ocean Tower: deep blue shaft */
#app[data-building="4"] .shaft-floor { color: rgba(0,220,255,0.3); border-bottom-color: rgba(0,150,200,0.15); }
#app[data-building="4"] .shaft-floor.shaft-floor-current { background: rgba(0,200,230,0.2); color: rgba(100,240,255,0.8); }

/* Building 5 — Star Hotel: dark navy shaft */
#app[data-building="5"] .shaft-floor { color: rgba(200,190,255,0.25); border-bottom-color: rgba(150,130,255,0.1); }
#app[data-building="5"] .shaft-floor.shaft-floor-current { background: rgba(255,215,0,0.12); color: rgba(255,215,0,0.7); }

/* Building 6 — Volcano HQ: dark red shaft */
#app[data-building="6"] .shaft-floor { color: rgba(255,120,0,0.35); border-bottom-color: rgba(200,60,0,0.15); }
#app[data-building="6"] .shaft-floor.shaft-floor-current { background: rgba(255,80,0,0.18); color: rgba(255,160,60,0.85); }

/* Building 7 — Ice Peak: pale shaft, still needs slightly more visible labels */
#app[data-building="7"] .shaft-floor { color: rgba(30,80,115,0.35); border-bottom-color: rgba(100,180,220,0.15); }
#app[data-building="7"] .shaft-floor.shaft-floor-current { background: rgba(91,200,220,0.2); color: rgba(30,80,115,0.75); }

/* Building 8 — Space Station: black shaft */
#app[data-building="8"] .shaft-floor { color: rgba(0,180,255,0.3); border-bottom-color: rgba(0,100,200,0.12); }
#app[data-building="8"] .shaft-floor.shaft-floor-current { background: rgba(0,128,255,0.18); color: rgba(60,200,255,0.85); }

/* Building 9 — Jungle: dark green shaft */
#app[data-building="9"] .shaft-floor { color: rgba(100,220,140,0.3); border-bottom-color: rgba(46,204,113,0.1); }
#app[data-building="9"] .shaft-floor.shaft-floor-current { background: rgba(46,204,113,0.18); color: rgba(150,255,190,0.85); }

/* Building 10 — Penthouse: black velvet shaft */
#app[data-building="10"] .shaft-floor { color: rgba(255,210,0,0.22); border-bottom-color: rgba(255,180,0,0.1); }
#app[data-building="10"] .shaft-floor.shaft-floor-current { background: rgba(255,200,0,0.12); color: rgba(255,215,0,0.7); }