/* The lobby: an enamel sign outside, a felt letter board in a walnut frame, a brass lift panel, a To Let board and an LED news strip. */

/* ---- the sign ---- */
.topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: max(16px, env(safe-area-inset-top)) 24px 0; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar-right { position: absolute; right: 424px; top: max(16px, env(safe-area-inset-top)); display: flex; gap: 8px; align-items: flex-start; }
.wordmark { display: none; }
.hero { position: absolute; left: 26px; top: 26px; width: min(36vw, 430px); }
.hero h1 { position: relative; padding: 18px 24px 20px; background: var(--tomato); color: #fff8e6; font-size: clamp(44px, 4.6vw, 68px); line-height: 1; border-radius: 14px; box-shadow: inset 0 0 0 5px #fff8e6, inset 0 0 0 7px var(--tomato-d), 0 8px 0 var(--tomato-d), 0 22px 34px rgba(0, 0, 0, .3); transform: rotate(-1.4deg); }
.hero h1 span { display: block; margin-top: 8px; color: var(--sun); font-size: .4em; line-height: 1.1; }
.hero p { margin: 18px 0 0 12px; padding: 13px 16px; max-width: 26em; background: var(--paper); color: var(--ink); font-size: 16.5px; line-height: 1.38; border-radius: 4px; box-shadow: 0 4px 0 var(--line), 0 12px 20px rgba(0, 0, 0, .25); transform: rotate(.5deg); }
.hints { position: absolute; left: 26px; bottom: 18px; margin: 0; padding: 6px 11px; background: var(--felt); color: #fff4d8; font: 600 15px var(--cond); border-radius: 6px; max-width: 280px; }
.banner { position: absolute; top: 240px; left: 28px; margin: 0; padding: 10px 14px; background: var(--sun); color: var(--ink); font-weight: 700; border-radius: 8px; box-shadow: 0 4px 0 var(--sun-d); }
.floor-tip { position: fixed; top: 0; left: 0; padding: 6px 12px; background: var(--felt); color: #ffb52e; font: 700 17px var(--cond); letter-spacing: .03em; pointer-events: none !important; white-space: nowrap; z-index: 6; border-radius: 6px; box-shadow: 0 0 0 3px var(--brass); }

/* ---- the directory board ---- */
.directory { position: absolute; right: 20px; top: 16px; bottom: 16px; width: 384px; display: flex; flex-direction: column; overflow: hidden; padding: 12px; border-radius: 14px; background: #4d2c16 url(/theoffice/assets/tex/wood.png?v=dece5bf9c82d) 0 0 / 256px; box-shadow: inset 0 0 0 2px rgba(255, 220, 170, .28), 0 7px 0 #2c1608, 0 24px 44px rgba(0, 0, 0, .42); }
.sheet-grip { display: none; }
.dir-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex: none; order: -1; margin-bottom: 9px; padding: 8px 14px; border-radius: 6px; background: linear-gradient(180deg, var(--brass-l), var(--brass) 55%, #b98f38); color: #33240a; font: 400 21px/1 var(--display); box-shadow: 0 2px 0 var(--brass-d), inset 0 1px 0 rgba(255, 255, 255, .6); }
.dir-head span:first-child { display: flex; align-items: center; gap: 8px; }
.dir-count { font: 700 15px var(--cond); color: #33240a; white-space: nowrap; }
.live-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #39d364; box-shadow: 0 0 0 2px rgba(0, 0, 0, .4), 0 0 8px #39d364; flex: none; }
.dir-search { display: flex; gap: 8px; align-items: center; flex: none; padding-bottom: 9px; }
.dir-search input { flex: 1; min-width: 0; min-height: 44px; border: 0; border-radius: 6px; background: var(--paper); font-weight: 700; box-shadow: inset 0 3px 0 rgba(28, 23, 18, .25); }
.wall-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--sun); color: var(--ink); font: 700 15px var(--sans); white-space: nowrap; box-shadow: 0 4px 0 var(--sun-d); margin-bottom: 4px; transition: transform .07s, box-shadow .07s; }
.wall-toggle:hover { filter: brightness(1.06); }
.wall-toggle:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sun-d); }
.wall-toggle[aria-pressed="true"] { background: var(--tomato); color: #fff; box-shadow: 0 4px 0 var(--tomato-d); }
/* Black felt with its grooves and white push-in letters, the way a real lobby board looks. */
.dir-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 8px 6px; border-radius: 5px; -webkit-overflow-scrolling: touch; background: var(--felt) repeating-linear-gradient(180deg, #221c16 0 3px, #120e0a 3px 7px); box-shadow: inset 0 3px 6px #000, inset 0 0 0 2px #000; scrollbar-color: var(--brass) transparent; }
.dir-row { display: grid; grid-template-columns: 34px 6px 1fr auto; gap: 9px; align-items: center; width: 100%; padding: 9px 8px; min-height: 56px; border: 0; background: none; border-radius: 4px; text-align: left; color: #fffdf4; transition: background .1s, color .1s, transform .07s; }
.dir-row:hover, .dir-row:focus-visible { background: #2f2a1c; color: var(--sun); }
.dir-row:active { transform: translateX(3px); }
.dir-num { font: 700 25px/1 var(--cond); text-align: right; color: var(--sun); }
.dir-mark { width: 6px; height: 36px; border-radius: 2px; background: var(--brand); display: block; overflow: hidden; }
.dir-text { min-width: 0; display: flex; flex-direction: column; }
.dir-text b { font: 700 21px/1.08 var(--cond); letter-spacing: .05em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-text small { font: 600 15.5px/1.15 var(--cond); letter-spacing: .01em; color: #e6dcc6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-busy { display: flex; align-items: center; gap: 5px; font: 700 16px var(--cond); color: #5cf08a; }
.dir-busy i { width: 9px; height: 9px; border-radius: 50%; background: #39d364; box-shadow: 0 0 7px #39d364; animation: pulse 1.3s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.dir-empty { padding: 16px 10px; color: #fffdf4; font: 700 19px/1.25 var(--cond); margin: 0; }
.dir-hint { margin: 8px 0 0; flex: none; color: #ffe9c2; font: 600 15px var(--cond); text-align: center; }

/* ---- the lift panel ---- */
.lift-wrap { margin: 12px 0 2px; padding: 12px; border-radius: 8px; background: linear-gradient(160deg, var(--brass-l), var(--brass) 45%, #ad8531); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 0 var(--brass-d); color: #33240a; }
.lift-wrap h3 { font: 400 19px/1 var(--display); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 11px; }
.lift-wrap small { font: 700 15px var(--cond); }
.lift { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.lift-btn { aspect-ratio: 1; min-height: 36px; border-radius: 50%; border: 3px solid #6e5216; background: radial-gradient(circle at 50% 38%, #f2eee2, #b7b1a1); color: #2b2316; font: 700 15px/1 var(--cond); padding: 0; display: grid; place-items: center; box-shadow: 0 3px 0 #5f4610; transition: transform .07s, box-shadow .07s, filter .1s; }
.lift-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.lift-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #5f4610; }
.lift-btn.lit { background: radial-gradient(circle at 50% 42%, #fff3b4, #ffb31f 72%); color: #2b1a00; border-color: #7a4d00; box-shadow: 0 3px 0 #5f4610, 0 0 12px 2px rgba(255, 186, 40, .85); }

/* ---- the To Let board ---- */
.open-pill { position: absolute; left: 40%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: stretch; gap: 0; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--white); box-shadow: 0 6px 0 #a9976d, 0 16px 28px rgba(0, 0, 0, .35); white-space: nowrap; transition: transform .08s, box-shadow .08s; }
.open-pill:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 8px 0 #a9976d, 0 18px 30px rgba(0, 0, 0, .35); }
.open-pill:active { transform: translateX(-50%) translateY(4px); box-shadow: 0 2px 0 #a9976d; }
.pill-status { display: flex; flex-direction: column; justify-content: center; padding: 9px 16px; background: var(--tomato); color: #fff; font: 400 24px/1 var(--display); }
.pill-status small { font: 700 15px/1.1 var(--cond); }
.pill-go { display: flex; align-items: center; padding: 0 12px 0 16px; font: 400 24px/1 var(--display); color: var(--ink); }
.pill-arrow { display: grid; place-items: center; width: 56px; background: var(--sun); color: var(--ink); }
.pill-arrow .ico { width: 28px; height: 28px; }

/* ---- the news strip ---- */
.ticker { position: absolute; left: 26px; right: 424px; bottom: 96px; display: flex; align-items: stretch; height: 44px; border-radius: 7px; background: #0d0a07; box-shadow: 0 0 0 4px #30343a, 0 5px 0 4px #15171a; overflow: hidden; }
.ticker-label { display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 400 17px/1 var(--display); color: var(--ink); background: var(--sun); white-space: nowrap; flex: none; }
.ticker-track { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ticker-rail { display: flex; align-items: center; gap: 28px; padding: 0 22px; width: max-content; animation: ticker-roll var(--dur, 40s) linear infinite; will-change: transform; }
.ticker-track:hover .ticker-rail, .ticker-track:focus-within .ticker-rail { animation-play-state: paused; }
.ticker[data-ticker="empty"] .ticker-rail { animation: none; width: auto; }
@keyframes ticker-roll { to { transform: translateX(-50%); } }
.ticker-item, .ticker-ghost { display: inline-flex; align-items: center; gap: 9px; border: 0; background: none; padding: 0; color: #ffb52e; font: 600 18.5px/1.2 var(--cond); letter-spacing: .02em; white-space: nowrap; text-decoration: none; cursor: pointer; }
.ticker-item:hover, .ticker-ghost:hover { color: #fff; }
.ticker-chip { display: inline-flex; align-items: center; gap: 6px; font: 700 18.5px/1 var(--cond); color: #fff; }
.ticker-chip b { color: var(--ink); background: var(--brand-2); padding: 2px 5px; border-radius: 3px; font-size: 15px; background: #ffb52e; }
.published .ticker-text { color: #6dffa0; }
.chatter .ticker-text { color: #e6c98e; }
.ticker-item.fresh { animation: ticker-fresh 2.4s ease-out; }
@keyframes ticker-fresh { 0% { color: #fff; } }
.ticker-quiet { padding: 0 4px; font: 600 18px var(--cond); color: #ffb52e; white-space: nowrap; }
body.flying .ticker { opacity: 0; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  .ticker-rail { animation: none; }
  .ticker-track { overflow-x: auto; scrollbar-width: none; }
  .ticker-ghost { display: none; }
}

/* ---- launched: a noticeboard of posters ---- */
.wall { flex: 1; overflow-y: auto; padding: 10px; min-height: 0; -webkit-overflow-scrolling: touch; border-radius: 5px; background: #b98a52 url(/theoffice/assets/tex/cork.png?v=416cc2da61bb) 0 0 / 200px; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55); }
.directory [hidden] { display: none !important; }
.wall .dir-empty { color: var(--ink); background: var(--paper); padding: 12px; border-radius: 3px; }
.wall-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.wall-card { display: flex; flex-direction: column; overflow: hidden; background: var(--white); color: var(--ink); border-radius: 3px; box-shadow: 0 4px 0 rgba(58, 36, 12, .55), 0 10px 14px rgba(0, 0, 0, .25); transition: transform .1s; }
.wall-card:nth-child(even) { transform: rotate(.6deg); } .wall-card:nth-child(odd) { transform: rotate(-.5deg); }
.wall-card:hover { transform: translateY(-2px) rotate(0); }
.wall-thumb { display: block; aspect-ratio: 16 / 10; background: var(--brand); overflow: hidden; }
.wall-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wall-body { padding: 10px 13px 10px; display: flex; flex-direction: column; gap: 6px; }
.wall-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.wall-floor { display: inline-flex; align-items: center; gap: 6px; font: 700 16px var(--cond); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall-floor b { padding: 1px 5px; border-radius: 3px; background: var(--ink); color: var(--sun); }
.wall-kind { font: 700 15px var(--cond); color: var(--teal); text-transform: capitalize; }
.wall-card h4 { margin: 0; font: 400 21px/1.15 var(--display); overflow-wrap: anywhere; }
.wall-card p { margin: 0; font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wall-acts { display: flex; gap: 8px; margin-top: 4px; }
.wall-acts .btn { flex: 1; }
.directory.showing-wall .dir-hint { display: none; }

/* ---- phones ---- */
@media (max-width: 760px) {
  .topbar-right { right: max(12px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); }
  .topbar-right .btn { width: 46px; padding: 0; }
  .topbar-right .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hero { left: 12px; top: max(10px, env(safe-area-inset-top)); width: min(58vw, 240px); }
  .hero h1 { font-size: 27px; padding: 11px 14px 13px; border-radius: 10px; box-shadow: inset 0 0 0 3px #fff8e6, 0 5px 0 var(--tomato-d), 0 12px 20px rgba(0, 0, 0, .3); }
  .hero p, .hints, .floor-tip { display: none; }
  .banner { top: 130px; left: 12px; right: 12px; }
  .directory { left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 66vh; height: 66dvh; padding: 0 10px 0; border-radius: 16px 16px 0 0; box-shadow: inset 0 2px 0 rgba(255, 220, 170, .3), 0 -5px 0 #2c1608; transform: translateY(calc(100% - 126px - env(safe-area-inset-bottom))); transition: transform .3s cubic-bezier(.2, 1.1, .4, 1); }
  .directory.open { transform: translateY(calc(-1 * var(--kb, 0px))); }
  .sheet-grip { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 0; background: none; border: 0; flex: none; order: -2; color: #ffe9c2; }
  .sheet-grip i { width: 46px; height: 6px; background: var(--brass); border-radius: 3px; box-shadow: 0 2px 0 var(--brass-d); }
  .grip-label { display: none; }
  .dir-head { margin-bottom: 8px; font-size: 19px; padding: 7px 12px; }
  .dir-search { padding-bottom: 8px; }
  .dir-hint { display: none; }
  .dir-list { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .wall { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .lift { grid-template-columns: repeat(7, 1fr); gap: 7px; }
  .lift-btn { font-size: 16px; min-height: 40px; }
  .open-pill, .open-pill:hover, .open-pill:active { left: 12px; right: 12px; transform: none; bottom: calc(136px + env(safe-area-inset-bottom)); justify-content: stretch; }
  .open-pill:active { transform: translateY(3px); }
  .pill-status { font-size: 19px; padding: 8px 12px; }
  .pill-status small { font-size: 14px; }
  .pill-go { flex: 1; font-size: 20px; padding: 0 8px 0 12px; }
  .pill-arrow { width: 50px; }
  /* The #ui prefix matters: without it `#ui > *` wins, and the hidden board goes on catching taps meant for the open sheet beneath it. */
  #ui .directory.open ~ .open-pill, #ui .directory.open ~ .ticker { opacity: 0; pointer-events: none; }
  .ticker { left: 12px; right: 12px; bottom: calc(208px + env(safe-area-inset-bottom)); height: 38px; }
  .ticker-label { display: none; }
  .ticker-item, .ticker-ghost, .ticker-chip { font-size: 17px; }
}
@media (pointer: coarse) { .lift-btn { min-height: 42px; } .ticker-item, .ticker-ghost { min-height: 36px; } }
/* A phone on its side, or any very short window. */
@media (max-height: 520px) and (min-width: 761px) {
  .hero { top: 8px; width: min(36vw, 320px); }
  .hero h1 { font-size: 28px; padding: 10px 14px; }
  .hero p, .hints, .ticker { display: none; }
  .directory { top: 8px; bottom: 8px; width: 320px; right: max(10px, env(safe-area-inset-right)); padding: 8px; }
  .topbar-right { right: 340px; top: 8px; }
  .open-pill, .open-pill:hover, .open-pill:active { left: max(14px, env(safe-area-inset-left)); transform: none; bottom: max(10px, env(safe-area-inset-bottom)); }
}
/* A floor's opening hours in the directory, when it works on its own. */
.dir-hours { flex: none; padding: 2px 7px; border-radius: 4px; font: 700 12.5px var(--cond); letter-spacing: .04em; text-transform: uppercase; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px #3f2c08; white-space: nowrap; }
.dir-hours.closed { opacity: .6; }

/* ---- launch parties ---- */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.confetti i { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; opacity: .95; animation: confetti-fall 3s cubic-bezier(.25, .6, .45, 1) both; }
.confetti i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; }
.confetti i:nth-child(4n) { width: 12px; height: 5px; }
@keyframes confetti-fall { 0% { transform: translate3d(0, 0, 0) rotate(0); } 100% { transform: translate3d(var(--dx, 0), 106vh, 0) rotate(var(--spin, 360deg)); opacity: .7; } }
/* The LED headline: amber dots on black, lit over the whole strip while the party lasts. */
.ticker-led { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; background: #0d0a07 radial-gradient(circle, rgba(255, 181, 46, .16) 1px, transparent 1.6px) 0 0 / 4px 4px; color: #ffb52e; font: 700 19px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px rgba(255, 181, 46, .85), 0 0 14px rgba(255, 120, 30, .5); animation: led-blink 1.1s steps(2, jump-none) 3, led-in .35s ease-out; }
.ticker-led[hidden] { display: none; }
.ticker-led::before, .ticker-led::after { content: '★'; color: #6dffa0; text-shadow: 0 0 8px #6dffa0; }
@keyframes led-blink { 50% { color: #fffdf4; } }
@keyframes led-in { from { transform: translateY(100%); } }
.dir-row.party { position: relative; background: color-mix(in srgb, var(--brand, #ffb52e) 30%, #2f2a1c); color: var(--sun); box-shadow: inset 0 0 0 2px var(--sun); }
.dir-balloons { position: absolute; right: 12px; top: 5px; display: flex; gap: 3px; pointer-events: none; }
.dir-balloons i { position: relative; width: 15px; height: 19px; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; background: var(--tomato, #e4572e); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .18), inset 3px 3px 0 rgba(255, 255, 255, .25); animation: balloon-bob 1.6s ease-in-out infinite alternate; }
.dir-balloons i:nth-child(2) { background: var(--sun, #ffb52e); animation-delay: -.5s; top: -5px; }
.dir-balloons i:nth-child(3) { background: #4ea5d9; animation-delay: -1s; }
.dir-balloons i::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 12px; background: rgba(255, 253, 244, .6); }
@keyframes balloon-bob { to { transform: translateY(-5px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .ticker-led, .dir-balloons i { animation: none; } }
@media (max-width: 760px) { .ticker-led { display: block; padding: 0 12px; line-height: 38px; font-size: 15px; letter-spacing: .04em; } .ticker-led::after { content: none; } .ticker-led::before { margin-right: 6px; } }

/* ---- the leaderboard: the same black felt and push-in letters as the directory ---- */
.leaderboard { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 6px 8px 10px; border-radius: 5px; -webkit-overflow-scrolling: touch; background: var(--felt) repeating-linear-gradient(180deg, #221c16 0 3px, #120e0a 3px 7px); box-shadow: inset 0 3px 6px #000, inset 0 0 0 2px #000; scrollbar-color: var(--brass) transparent; }
.board-col h4 { margin: 10px 0 4px; padding: 0 4px 4px; font: 700 15px/1.1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--sun); border-bottom: 1px dashed rgba(255, 196, 37, .35); }
.board-col ol { list-style: none; margin: 0; padding: 0; }
.board-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-radius: 4px; color: #fffdf4; }
.board-row:hover { background: #2f2a1c; }
.board-rank { font: 700 22px/1 var(--cond); text-align: right; color: var(--sun); }
.board-row:first-child .board-rank { color: #6dffa0; text-shadow: 0 0 8px rgba(109, 255, 160, .5); }
.board-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.board-title { font: 700 17px/1.15 var(--cond); color: #fffdf4; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-title:hover, .board-title:focus-visible { color: var(--sun); text-decoration: underline; }
.board-floor { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%; padding: 0; border: 0; background: none; color: rgba(255, 253, 244, .62); font: 600 13px/1.2 var(--cond); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-floor b { color: var(--ink); background: var(--brand, var(--sun)); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.board-floor:hover { color: var(--sun); }
.board-count { font: 700 14px/1 var(--cond); color: #ffb52e; white-space: nowrap; }
.board-none { margin: 4px 4px 2px; font: 600 14px var(--cond); color: rgba(255, 253, 244, .55); }
.leaderboard .dir-empty { color: #fffdf4; }
@media (max-width: 760px) { .board-toggle span { display: none; } .board-toggle { padding: 0 11px; } }

/* ---- Building | Outside, and the stack: the whole tower as strips, every floor at once ---- */ /* section.stack only: a plain .stack is the forms' column everywhere else */
.lobby-mode { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--felt); box-shadow: 0 0 0 3px var(--brass), 0 5px 0 var(--brass-d), 0 10px 18px rgba(0, 0, 0, .3); }
.mode-btn { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #f4dd97; font: 700 18px var(--cond); letter-spacing: .04em; cursor: pointer; }
.mode-btn[aria-pressed="true"] { background: var(--sun); color: #1c1712; box-shadow: inset 0 -3px 0 var(--sun-d); }
.mode-btn:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }
body[data-lobby="building"] { background: linear-gradient(#9cc7e4, #e9dcc0 70%); }
body[data-lobby="building"] #scene { visibility: hidden; }
body[data-lobby="building"] .hero, body[data-lobby="building"] .hints, body[data-lobby="building"] .floor-tip { display: none; }
section.stack { position: absolute; left: 26px; right: 424px; top: 76px; bottom: 156px; max-width: 640px; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; border-radius: 12px 12px 4px 4px; background: #3a2a1e; box-shadow: 0 0 0 4px #30343a, 0 12px 30px rgba(0, 0, 0, .35); scrollbar-width: thin; outline: none; cursor: grab; }
section.stack[hidden] { display: none; }
.stack-roof { display: grid; place-items: center; height: 58px; background: linear-gradient(#d93a24, #b52e1b); color: #fff8e6; font: 700 24px var(--cond); letter-spacing: .14em; text-transform: uppercase; border-bottom: 6px solid #22252a; }
.stack-ground { display: grid; place-items: center; height: 48px; background: #30343a; color: #f4dd97; font: 700 15px var(--cond); letter-spacing: .12em; text-transform: uppercase; }
.stack-list { display: flex; flex-direction: column; }
.stack-strip { display: grid; grid-template-columns: 58px 1fr 22px; align-items: center; gap: 8px; width: 100%; min-height: 96px; margin: 0; padding: 10px 12px 10px 0; border: 0; border-bottom: 5px solid #3a2a1e; border-radius: 0; background: linear-gradient(90deg, var(--brand) 0 9px, #fbf5e6 9px); color: #1c1712; text-align: left; font: inherit; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 96px; }
.stack-strip:hover, .stack-strip:focus-visible { outline: none; background: linear-gradient(90deg, var(--brand) 0 9px, #fff 9px); box-shadow: inset 0 0 0 3px var(--brand); }
.stack-num { justify-self: center; font: 700 32px/1 var(--cond); color: var(--brand); }
.stack-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.stack-text b { font: 700 20px/1.1 var(--cond); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack-text small { display: flex; align-items: center; gap: 6px; color: #5c4a3a; font: 600 15px/1.2 var(--cond); }
.stack-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2fa64a; }
.stack-staff { display: flex; align-items: flex-end; min-height: 36px; }
.stack-staff .portrait { position: relative; display: block; flex: none; overflow: hidden; width: 30px; height: 36px; margin-right: -3px; border-radius: 6px; background: var(--accent); box-shadow: 0 0 0 2px #fbf5e6; }
.stack-staff .portrait svg, .stack-staff .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.stack-staff .portrait.busy { box-shadow: 0 0 0 2px #2fa64a; }
.stack-more { margin-left: 10px; color: #5c4a3a; font: 700 15px var(--cond); }
.stack-go { color: var(--brand); font: 700 30px/1 var(--cond); }
/* Only strips on screen move. */
.stack-strip.live .stack-dot { animation: stack-pulse 1.6s ease-in-out infinite; }
.stack-strip.live .portrait.busy { animation: stack-bob 1.8s ease-in-out infinite; }
@keyframes stack-pulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes stack-bob { 50% { transform: translateY(-3px); } }
.stack-strip.moving { background: linear-gradient(90deg, var(--brand) 0 9px, transparent 9px), repeating-linear-gradient(135deg, #fbf5e6 0 16px, #f4e7c6 16px 32px); }
.stack-strip.moving .stack-text b { font-style: italic; }
.stack-strip.shut { filter: grayscale(.75); opacity: .85; }
.stack-strip.to-let { min-height: 42px; padding: 6px 12px 6px 0; cursor: default; background: #d6cfbf; box-shadow: none; contain-intrinsic-size: auto 42px; }
.stack-strip.to-let .stack-num { color: #8a7d6a; font-size: 18px; }
.stack-strip.to-let b { color: #8a7d6a; font: 700 15px var(--cond); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1100px) and (min-width: 761px) { section.stack { right: 424px; left: 20px; } }
@media (max-width: 760px) {
  .lobby-mode { left: 12px; transform: none; top: calc(max(10px, env(safe-area-inset-top)) + 84px); }
  body[data-lobby="building"] .lobby-mode { top: max(10px, env(safe-area-inset-top)); }
  .mode-btn { min-height: 38px; padding: 0 14px; font-size: 17px; }
  /* The strips run on under the sheet's peek, the pill and the ticker, so they are the bottom layer: the sheet's grip stays tappable over them. */
  section.stack { left: 0; right: 0; top: calc(max(10px, env(safe-area-inset-top)) + 58px); bottom: 0; max-width: none; border-radius: 0; box-shadow: none; z-index: -1; }
  .stack-ground { margin-bottom: 190px; }
  .stack-strip { grid-template-columns: 50px 1fr 18px; min-height: 92px; }
}
@media (prefers-reduced-motion: reduce) { .stack-strip.live .stack-dot, .stack-strip.live .portrait.busy { animation: none; } }

/* The 3D building: the scene shows through, the strips stay away, and every floor in view has a plaque by it that also opens it. */
body[data-tower="3d"] #scene { visibility: visible; }
body[data-tower="3d"] #labels { display: block; }
body[data-tower="3d"] { background: #cfe0ec; }
.tower-plaques { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.tower-plaque { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; max-width: 230px; min-height: 36px; padding: 4px 12px 4px 4px; border: 0; border-radius: 999px; background: rgba(28, 23, 18, .8); color: #fff8e6; font: 700 15px/1 var(--cond); white-space: nowrap; pointer-events: auto; cursor: pointer; will-change: transform; translate: 0 -50%; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.tower-plaque b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--brand, #d9774a); color: #fff; font-size: 16px; }
.tower-plaque span { overflow: hidden; text-overflow: ellipsis; }
.tower-plaque i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3fd06a; box-shadow: 0 0 0 3px rgba(63, 208, 106, .25); }
.tower-plaque:hover, .tower-plaque:focus-visible { outline: none; background: rgba(28, 23, 18, .94); box-shadow: 0 0 0 3px var(--brand, #d9774a); }
.tower-plaque.to-let { background: rgba(58, 54, 48, .72); color: #e8dcc4; font-size: 13px; }
.tower-plaque.to-let b { background: #7d7466; }
.tower-plaque.off { visibility: hidden; }
body.tower-flying .tower-plaques, body.tower-flying #labels { opacity: 0; transition: opacity .25s; }
/* Round, up, down, in and out: small buttons by the building, for anyone who'd rather press than drag. */
.tower-ctrl { position: fixed; right: calc(min(430px, 34vw) + 14px); bottom: 140px; z-index: 5; display: grid; grid-template-columns: repeat(2, 40px); gap: 6px; justify-items: end; }
.tower-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: rgba(28, 23, 18, .78); color: #fff8e6; cursor: pointer; box-shadow: 0 2px 0 rgba(28, 23, 18, .35); touch-action: manipulation; }
.tower-btn svg { width: 22px; height: 22px; } .tower-btn svg path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .tower-btn svg.flip { transform: scaleX(-1); }
.tower-btn:hover, .tower-btn:focus-visible { outline: none; background: rgba(28, 23, 18, .94); box-shadow: 0 0 0 3px #d9774a; }
.tower-btn.tb-whole { grid-column: 1 / -1; width: auto; height: 34px; font: 700 14px/1 var(--cond); padding: 0 10px; white-space: nowrap; }
body.tower-flying .tower-ctrl { opacity: 0; pointer-events: none; transition: opacity .25s; }
@media (max-width: 760px) {
  .tower-ctrl { left: auto; right: 6px; bottom: auto; top: 70px; grid-template-columns: 34px; gap: 4px; }
  .tower-btn { width: 34px; height: 34px; border-radius: 10px; background: rgba(28, 23, 18, .58); box-shadow: none; } .tower-btn svg { width: 19px; height: 19px; }
  .tower-btn.tb-whole { grid-column: auto; width: 34px; height: 34px; font-size: 0; }
  .tower-btn.tb-whole::before { content: ''; width: 14px; height: 20px; border: 2.5px solid currentColor; border-radius: 2px; background: linear-gradient(currentColor 0 0) center 5px / 6px 2.5px no-repeat, linear-gradient(currentColor 0 0) center 11px / 6px 2.5px no-repeat; }
}
@media (max-width: 760px) { .tower-plaque { min-height: 32px; max-width: 180px; font-size: 14px; } .tower-plaque b { min-width: 24px; height: 24px; font-size: 14px; } }