/* ===========================================================================
   THE BRANCH OFFICES — the hall, the board, the counters, the elevator, and
   the tower's LED wall. Same language as hr2-* / au-*: graphite bodies, ink
   borders, jumbotron screens (#10151d -> #0a0e14 + scanlines), gold display
   type, #6fe08c VT323 data, brass accents.

   ⚠️ Floor pieces are anchored to --ground-h. Only the bell and the tape hang
   from the ceiling, and nothing on the floor is meant to line up with them.
   =========================================================================== */
:root { --br-ch: 22px; --br-flap-h: 32px; --br-row-h: 36px; }

/* ---------------------------------------------------------------- the wall */
.br-panel {
  position: absolute; bottom: var(--ground-h); height: 132px;
  background:
    linear-gradient(#8a6d35, #8a6d35) 0 34px / 100% 5px no-repeat,
    linear-gradient(#5d4a2c, #5d4a2c) 0 42px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, #3d2f1c 0 8px, #45361f 8px 118px, #2c2113 118px 122px),
    #3d2f1c;
  border-top: 4px solid #191309;
}

/* -------------------------------------------------------- the floor directory */
.br-directory {
  position: absolute; bottom: calc(var(--ground-h) + 300px); width: 120px;
  background: linear-gradient(#10151d, #0a0e14); border: 3px solid #06080c;
  box-shadow: 0 0 0 3px #3a4148; padding: 8px 8px 6px;
}
.br-directory b { display: block; font-family: var(--font-display); font-size: 7px; color: #ffd75e; text-align: center; margin-bottom: 6px; letter-spacing: 1px; }
.br-directory .fl { display: flex; align-items: center; gap: 6px; padding: 4px 2px; cursor: pointer; border-top: 1px solid #ffffff10; }
.br-directory .fl i { font-style: normal; font-family: var(--font-display); font-size: 8px; color: #ffd75e; width: 12px; }
.br-directory .fl span { font-family: var(--font-data); font-size: 15px; line-height: 1; color: #9fe0af; }
.br-directory .fl.on span { color: #fff3dc; }
.br-directory .fl.on i { color: #fff3dc; text-shadow: 0 0 6px #ffd75e; }
.br-directory .fl:hover span { color: #ffd75e; }

/* ------------------------------------------------------------- THE BOARD */
.br-board {
  position: absolute; bottom: calc(var(--ground-h) + 170px); width: 1180px;
  background: linear-gradient(#1c1f24, #14171b); border: 4px solid #06080c;
  box-shadow: 0 0 0 4px #3a4148, 8px 8px 0 #00000059; padding: 12px 18px 14px;
}
.br-board .bolt { position: absolute; width: 10px; height: 10px; background: #d4af37; box-shadow: inset -2px -2px 0 #8a6d35; }
.br-board .bolt.a { left: 6px; top: 6px; } .br-board .bolt.b { right: 6px; top: 6px; }
.br-board .bolt.c { left: 6px; bottom: 6px; } .br-board .bolt.d { right: 6px; bottom: 6px; }
.br-board .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 2px 6px 10px; border-bottom: 3px solid #d4af37; margin-bottom: 8px; }
.br-board .hd b { font-family: var(--font-display); font-size: 15px; color: #ffd75e; text-shadow: 0 0 12px #ffc933aa, 2px 2px 0 #000; }
.br-board .hd span { font-family: var(--font-data); font-size: 17px; color: #9fe0af; letter-spacing: 1px; }
.br-row { display: flex; align-items: center; gap: 18px; height: var(--br-row-h); padding: 0 6px; }
.br-row.head { height: 22px; margin-bottom: 4px; }
.br-row.head .br-col { font-family: var(--font-display); font-size: 7px; color: #8fb39c; letter-spacing: 1px; }
.br-row.head .br-col.r { text-align: right; }
.br-row.is-branch { cursor: pointer; }
.br-row.is-branch:hover { background: #ffffff08; }
.br-row.is-ask .br-fl i { color: #ffd75e; }
.br-cell { display: inline-flex; gap: 2px; }
.br-cell.r { justify-content: flex-end; }
.br-fl {
  position: relative; display: inline-block; width: calc(var(--br-ch) - 2px); height: var(--br-flap-h);
  background: linear-gradient(#2a2e36 0 49%, #06080c 49% 51%, #1e2228 51%);
  border: 1px solid #06080c; box-shadow: inset 0 1px 0 #ffffff14;
  text-align: center; overflow: hidden; transform-origin: 50% 50%;
}
.br-fl i {
  font-style: normal; font-family: var(--font-data); font-size: calc(var(--br-flap-h) - 2px); line-height: calc(var(--br-flap-h) - 2px);
  color: #f3ead6; display: block;
}
.br-fl.on { animation: br-flap 70ms linear 1; }
@keyframes br-flap { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.08); filter: brightness(1.6); } 100% { transform: scaleY(1); } }
.br-col.lamp { width: 14px; display: inline-flex; justify-content: center; }
.br-col.lamp i { width: 10px; height: 10px; background: #2b3138; border: 1px solid #06080c; border-radius: 50%; }
.br-col.lamp.open i { background: #6fe08c; box-shadow: 0 0 8px #6fe08c; animation: br-lamp 2s ease-in-out infinite; }
.br-col.lamp.drawing i { background: #ffc933; box-shadow: 0 0 8px #ffc933; animation: br-lamp 0.6s ease-in-out infinite; }
@keyframes br-lamp { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ------------------------------------------------------ the hall's small props */
.br-bench { position: absolute; bottom: var(--ground-h); width: 200px; height: 44px; }
.br-bench i { position: absolute; bottom: 0; width: 8px; height: 30px; background: #2c2c30; }
.br-bench i:nth-child(1) { left: 10px; } .br-bench i:nth-child(2) { left: 96px; } .br-bench i:nth-child(3) { left: 182px; }
.br-bench u { position: absolute; left: 0; bottom: 26px; width: 200px; height: 18px; background: linear-gradient(#5c1d24, #3f1319); border: 3px solid #191309; }
.br-plant { position: absolute; bottom: var(--ground-h); width: 46px; height: 96px; }
.br-plant u { position: absolute; left: 8px; bottom: 0; width: 30px; height: 30px; background: #7a4a2a; border: 3px solid #191309; }
.br-plant i { position: absolute; bottom: 26px; width: 10px; height: 60px; background: #2f7a3e; border: 2px solid #1b4a24; }
.br-plant i:nth-child(1) { left: 4px; transform: rotate(-22deg); } .br-plant i:nth-child(2) { left: 18px; height: 72px; } .br-plant i:nth-child(3) { left: 32px; transform: rotate(22deg); }
.br-lectern { position: absolute; bottom: var(--ground-h); width: 44px; height: 92px; }
.br-lectern i { position: absolute; left: 16px; bottom: 0; width: 12px; height: 70px; background: #3d2f1c; border: 2px solid #191309; }
.br-lectern u { position: absolute; left: 0; bottom: 66px; width: 44px; height: 26px; background: linear-gradient(#5d4a2c, #3d2f1c); border: 3px solid #191309; transform: skewY(-8deg); }
.br-speech { min-width: 240px; max-width: 260px; height: auto; min-height: 0; white-space: normal; line-height: 1.15; }

/* ------------------------------------------------------------ the bell */
.br-bell { position: absolute; top: 44px; width: 60px; height: 76px; transform-origin: 50% 0; }
.br-bell .yoke { position: absolute; left: 24px; top: 0; width: 12px; height: 18px; background: #5d4a2c; border: 2px solid #191309; }
.br-bell .cup { position: absolute; left: 6px; top: 16px; width: 48px; height: 44px; background: linear-gradient(90deg, #d4af37, #ffd75e 40%, #8a6d35); border: 3px solid #191309; border-radius: 24px 24px 6px 6px; }
.br-bell .clapper { position: absolute; left: 24px; top: 56px; width: 12px; height: 12px; background: #3a3a3e; border: 2px solid #191309; border-radius: 50%; }
.br-bell.ring { animation: br-ring 1.4s ease-in-out 1; }
@keyframes br-ring { 0% { transform: rotate(0); } 15% { transform: rotate(-24deg); } 35% { transform: rotate(20deg); } 55% { transform: rotate(-14deg); } 75% { transform: rotate(8deg); } 100% { transform: rotate(0); } }

/* ----------------------------------------------------------- the counters */
.br-counter { position: absolute; bottom: var(--ground-h); width: 400px; height: 10px; }
.br-counter.flash .br-sign { animation: br-flash 1.2s ease-out 1; }
@keyframes br-flash { 0% { box-shadow: 0 0 0 3px #3a4148, 0 0 0 0 #ffd75e; } 30% { box-shadow: 0 0 0 3px #ffd75e, 0 0 40px #ffd75e; } 100% { box-shadow: 0 0 0 3px #3a4148, 0 0 0 0 #ffd75e00; } }
/* the same width as the window and on the same axis (66..400): the booth and
   its screen read as one column. It was 400 wide from 0 and looked off-centre. */
.br-sign {
  position: absolute; left: 66px; bottom: 262px; width: 334px; box-sizing: border-box;
  background: linear-gradient(#10151d, #0a0e14); border: 3px solid #06080c; box-shadow: 0 0 0 3px #3a4148;
  padding: 8px 12px 8px; overflow: hidden;
}
.br-sign::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, #00000040 3px 4px); }
.br-sign .nm { display: flex; align-items: center; gap: 10px; }
.br-sign .nm b { font-family: var(--font-display); font-size: 12px; line-height: 1.3; color: #ffd75e; text-shadow: 0 0 10px #ffc933aa, 2px 2px 0 #000; }
.br-sign .pot { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 4px 0 4px; } /* the pot sits centred on the sign (user, 2026-09-07) */
.br-sign .pot .n { font-family: var(--font-display); font-size: 26px; color: #fff3dc; text-shadow: 0 0 12px #ffd75e66, 2px 2px 0 #000; letter-spacing: 1px; }
.br-sign .pot .n.rolling { color: #ffd75e; }
.br-sign .pot .sym { font-style: normal; font-family: var(--font-data); font-size: 20px; color: #9fe0af; }
.br-sign .bell { display: flex; align-items: baseline; justify-content: center; gap: 10px; } /* centred under the pot (user, 2026-09-07) */
.br-sign .bell .lab { font-family: var(--font-display); font-size: 7px; color: #8fb39c; }
.br-sign .bell .cd { font-family: var(--font-data); font-size: 24px; line-height: 1; color: #6fe08c; text-shadow: 0 0 6px #6fe08c66; }
.br-sign .bell .ny { font-family: var(--font-data); font-size: 15px; color: #6b7a86; }
.br-sign .sub { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-family: var(--font-data); font-size: 15px; color: #9fe0af; white-space: nowrap; }
.br-sign .sub .last { color: #c9b98a; overflow: hidden; text-overflow: ellipsis; }
.br-counter.is-lastminute .bell .cd { color: #ff7a5c; animation: br-lamp 0.5s ease-in-out infinite; }
.br-counter.is-drawing .pot .n { color: #ffd75e; animation: br-lamp 1s ease-in-out infinite; }
.br-counter.is-shut .pot .n { color: #6b7a86; }
.br-counter.is-shut .bell .cd { color: #c9b98a; }

.br-mark { display: inline-block; flex: none; background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; position: relative; }
.br-mark b { display: none; }
.br-mark.coin { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd75e, #d4af37 60%, #8a6d35); box-shadow: inset 0 0 0 2px #8a6d35; }
.br-mark.coin b { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 9px; color: #3a2a08; }

.br-post { position: absolute; left: 4px; bottom: 0; width: 66px; height: 150px; }
.br-post .base { position: absolute; left: 3px; bottom: 0; width: 26px; height: 8px; background: #8a6d35; border: 2px solid #191309; }
.br-post .pole { position: absolute; left: 13px; bottom: 6px; width: 6px; height: 122px; background: linear-gradient(90deg, #d4af37, #8a6d35); border: 2px solid #191309; }
.br-post .knob { position: absolute; left: 8px; bottom: 126px; width: 16px; height: 16px; background: radial-gradient(circle at 35% 35%, #ffd75e, #d4af37 60%, #8a6d35); border: 2px solid #191309; border-radius: 50%; }
/* the rope: from the knob (x 24) to the hook on the frame (x 62), sagging 9 px */
.br-post .rope { position: absolute; left: 24px; bottom: 122px; width: 40px; height: 14px; border-bottom: 5px solid #7a1f2b; border-left: 3px solid #7a1f2b; border-right: 3px solid #7a1f2b; border-radius: 0 0 20px 20px / 0 0 12px 12px; box-sizing: border-box; }
.br-post .hook { position: absolute; left: 60px; bottom: 128px; width: 8px; height: 10px; background: #d4af37; border: 2px solid #191309; }
.br-win { position: absolute; left: 66px; bottom: 0; width: 334px; height: 216px; }
.br-win .frame { position: absolute; inset: 0; background: #2c2c30; border: 4px solid #191309; box-shadow: inset 0 0 0 6px #3a3a3e; }
.br-win .glass { position: absolute; left: 14px; width: 190px; top: 14px; bottom: 52px; background: linear-gradient(160deg, #b9d6e8cc, #7fa8c4aa 45%, #b9d6e8cc); }
.br-win .grille { position: absolute; left: 14px; width: 190px; top: 100px; height: 40px; background: repeating-linear-gradient(90deg, transparent 0 6px, #19130980 6px 8px); opacity: .55; }
.br-win .mullion { position: absolute; left: 204px; width: 10px; top: 10px; bottom: 48px; background: linear-gradient(90deg, #3a3a3e, #2c2c30); border-left: 2px solid #191309; border-right: 2px solid #191309; }
.br-win .fb-walker { z-index: 1; bottom: 22px !important; }
/* the service panel: wood, in the frame, with the two keys set into it */
.br-win .panel {
  position: absolute; left: 214px; right: 14px; top: 14px; bottom: 52px; box-sizing: border-box;
  background: repeating-linear-gradient(0deg, #3d2f1c 0 10px, #45361f 10px 12px), #3d2f1c;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 7px; padding: 10px 7px 6px;
}
.br-win .key {
  display: flex; align-items: center; justify-content: center; min-height: 40px; box-sizing: border-box; text-align: center; text-decoration: none; font-family: var(--font-display); font-size: 7px; line-height: 1.3;
  padding: 6px 3px; border: 3px solid #191309; box-shadow: inset 0 2px 0 #ffffff33, inset 0 -3px 0 #00000055, 0 3px 0 #191309; cursor: pointer;
}
.br-win .key.chip-in, .br-win .key.link { background: linear-gradient(#ffd75e, #d4af37); color: #3a2a08; }
.br-win .key.chip-in.lit { background: linear-gradient(#4aa36a, #388e54); color: var(--cream); text-shadow: 1px 1px 0 #00000066; }
.br-win .key:hover { filter: brightness(1.1); }
.br-win .key:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #ffffff33, inset 0 -3px 0 #00000055, 0 1px 0 #191309; }
.br-win .fine { display: block; font-family: var(--font-data); font-size: 14px; line-height: 1.05; color: #c9b98a; text-align: center; margin-top: 2px; }
.br-win .plate {
  position: absolute; left: 50%; transform: translateX(-50%); top: -13px; z-index: 3; white-space: nowrap;
  font-family: var(--font-display); font-size: 6px; letter-spacing: 1px; color: #3a2a08;
  background: linear-gradient(#ffd75e, #d4af37); border: 3px solid #191309; padding: 5px 10px;
}
.br-win .sill { position: absolute; left: -6px; right: -6px; bottom: 0; height: 52px; background: linear-gradient(#5d4a2c, #3d2f1c); border: 4px solid #191309; z-index: 2; }
.br-win .sill::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: #8a6d35; }
.br-win .tray { position: absolute; left: 60px; width: 80px; bottom: 44px; height: 8px; background: #d4af37; border: 2px solid #191309; z-index: 3; }
.br-counter.shuttered .br-win .shutter { position: absolute; left: 14px; width: 190px; top: 14px; bottom: 52px; background: repeating-linear-gradient(0deg, #3a3a3e 0 10px, #2c2c30 10px 14px); }
.br-counter.shuttered .br-win .closed { position: absolute; left: 109px; top: 96px; transform: translateX(-50%) rotate(-6deg); background: #d14e1d; color: #fff3dc; font-family: var(--font-display); font-size: 9px; padding: 6px 10px; border: 3px solid #191309; z-index: 3; }
.br-counter.shuttered .br-win .panel { justify-content: center; }
.br-counter.shuttered .br-win .plate { background: linear-gradient(#c3c9ce, #8a9096); }
.br-counter.shuttered .br-sign { opacity: .85; }
.br-counter.shuttered .br-sign .nm b, .br-counter.shuttered .br-sign .pot .n { color: #8fb39c; text-shadow: none; }
.br-mark.coin.q { background: radial-gradient(circle at 40% 35%, #6b7a86, #3a4148 60%, #1c1f24); box-shadow: inset 0 0 0 2px #06080c; }
.br-mark.coin.q b { color: #c3c9ce; }

/* ---------------------------------------------------------- OPEN A BRANCH */
.room-deskcard.br-opendesk { padding: 14px 16px; }
.br-open h3 { font-family: var(--font-display); font-size: 12px; color: var(--ember); margin: 0 0 8px; }
/* the HR desk cards are jumbotron-dark (.room-hr .room-deskcard), so the copy is screen-green on black */
.br-open p { font-family: var(--font-data); font-size: 19px; line-height: 1.2; color: #9fe0af; margin: 0 0 10px; }
.br-open p b { color: #fff3dc; }
.br-open .row { display: flex; gap: 10px; margin-bottom: 10px; }
.br-open label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-size: 7px; color: #8fb39c; }
.br-open input { font-family: var(--font-data); font-size: 20px; padding: 4px 8px; border: 3px solid var(--ink); background: #fffaf0; color: var(--ink); min-width: 0; }
.br-open .acts { display: flex; gap: 8px; align-items: stretch; }
.br-open .go {
  flex: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center;
  font-family: var(--font-display); font-size: 8px; line-height: 1.3; padding: 10px 8px; border: 3px solid var(--ink); background: var(--green); color: var(--cream);
}
.br-open .chip { font-family: var(--font-display); font-size: 7px; padding: 8px 10px; border: 3px solid var(--ink); background: #fff3dc; color: var(--ink); cursor: pointer; }
.br-open .echo { font-family: var(--font-data); font-size: 15px; color: #ffd75e; min-height: 16px; margin-top: 6px; word-break: break-word; }
.br-nameplate { position: absolute; bottom: calc(var(--ground-h) - 34px); font-family: var(--font-display); font-size: 6px; color: #ffd75e; background: #191309; padding: 4px 6px; border: 2px solid #8a6d35; }

/* ------------------------------------------------------------ the elevator */
.br-lift { position: absolute; bottom: var(--ground-h); width: 200px; height: 262px; cursor: pointer; }
.br-lift .sign { position: absolute; left: 50%; transform: translateX(-50%); top: -34px; font-family: var(--font-display); font-size: 8px; color: #ffd75e; background: #191309; padding: 6px 10px; border: 3px solid #8a6d35; white-space: nowrap; }
.br-lift .ind { position: absolute; left: 50%; transform: translateX(-50%); top: 0; display: flex; gap: 10px; background: #0a0e14; border: 3px solid #06080c; padding: 4px 10px; }
.br-lift .ind i { font-style: normal; font-family: var(--font-display); font-size: 9px; color: #2b3138; }
.br-lift .ind i.on { color: #ffd75e; text-shadow: 0 0 8px #ffd75e; }
.br-lift .frame { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; background: #3a3a3e; border: 4px solid #191309; box-shadow: inset 0 0 0 6px #8a6d35; overflow: hidden; }
.br-lift .cab { position: absolute; inset: 10px; background: linear-gradient(#5d4a2c, #3d2f1c); }
.br-lift .cab .lamp { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 40px; height: 6px; background: #fff3dc; box-shadow: 0 0 16px #fff3dc; }
.br-lift .door { position: absolute; top: 10px; bottom: 10px; width: calc(50% - 10px); background: linear-gradient(90deg, #8a6d35, #d4af37 30%, #b8933a 70%, #8a6d35); border: 3px solid #191309; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.br-lift .door.l { left: 10px; transform: translateX(-100%); }
.br-lift .door.r { right: 10px; transform: translateX(100%); }
.br-lift.shut .door, .br-lift.arrive .door { transform: translateX(0); }
.br-lift .call { position: absolute; right: -30px; bottom: 120px; width: 18px; height: 30px; background: #2c2c30; border: 3px solid #191309; }
.br-lift .call i { position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #3a3a3e; }
.br-lift .call i.lit { background: #ffd75e; box-shadow: 0 0 8px #ffd75e; }
.br-lift .plate { position: absolute; left: 50%; transform: translateX(-50%); bottom: -24px; font-family: var(--font-data); font-size: 15px; color: #c9b98a; white-space: nowrap; }
.br-lift.moving .cab .lamp { animation: br-lamp .25s linear infinite; }
.br-lift.moving .ind i { animation: br-indblink .5s steps(2, end) infinite; }
@keyframes br-indblink { 0% { color: #ffd75e; } 100% { color: #2b3138; } }
/* the city outside slides past the glass while the car moves */
.hr2-window i.b { transition: transform 1.1s cubic-bezier(.4,0,.6,1); }
.br-riding-up .hr2-window i.b { transform: translateY(170px); }
.br-riding-down .hr2-window i.b { transform: translateY(-170px); }
.br-riding-up .room-wall, .br-riding-down .room-wall { animation: br-rumble .12s linear infinite; }
@keyframes br-rumble { 0% { transform: translateY(0); } 50% { transform: translateY(1px); } 100% { transform: translateY(0); } }

/* ---------------------------------------------------------------- the tape */
.br-tape { position: absolute; top: 44px; bottom: var(--ground-h); pointer-events: none; overflow: hidden; }
.br-tape i { position: absolute; top: -20px; width: 6px; height: 18px; animation: br-fall 3s linear forwards; }
@keyframes br-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--sway, 0px), 90vh) rotate(720deg); opacity: .6; } }

/* ------------------------------------------------------ the tower's LED wall */
.fb-ledwall.br-wall span.br { display: flex; justify-content: space-between; gap: 6px; font-size: 18px; }
.fb-ledwall.br-wall span.br i { font-style: normal; color: #ffd75e; }
.fb-ledwall.br-wall span.br u { text-decoration: none; color: #9fe0af; }
.fb-ledwall.br-wall span.br em { font-style: normal; color: #6b7a86; min-width: 46px; text-align: right; }
.fb-ledwall.br-wall span.br-open { font-size: 15px; color: #c9b98a; margin-top: 4px; }
.fb-ledwall.br-wall span:last-child::after { content: ""; animation: none; }

/* --------------------------------------------- the laptop ladder: 720 and under
   The board, the signs and the elevator sign all stand on the floor, and on a
   short window their tops reach the ceiling. Everything shrinks together. */
@media (max-height: 720px) {
  :root { --br-ch: 18px; --br-flap-h: 26px; --br-row-h: 30px; }
  .br-board { bottom: calc(var(--ground-h) + 96px); width: 1000px; padding: 8px 14px 10px; }
  .br-board .hd { padding-bottom: 6px; margin-bottom: 4px; }
  .br-board .hd b { font-size: 12px; } .br-board .hd span { font-size: 14px; }
  .br-directory { bottom: calc(var(--ground-h) + 200px); }
  .br-sign { bottom: 222px; padding: 6px 10px; }
  .br-sign .nm b { font-size: 10px; } .br-sign .nm .br-mark { width: 24px !important; height: 24px !important; }
  .br-sign .pot { margin: 4px 0 2px; } .br-sign .pot .n { font-size: 20px; } .br-sign .bell .cd { font-size: 20px; }
  .br-sign .sub { font-size: 14px; }
  .br-post { height: 130px; } .br-post .pole { height: 102px; } .br-post .knob { bottom: 106px; } .br-post .rope { bottom: 102px; } .br-post .hook { bottom: 108px; }
  .br-win { height: 192px; } .br-win .panel { gap: 5px; padding-top: 5px; } .br-win .fine { font-size: 12px; }
  .br-open p { font-size: 16px; }
  .br-lift { height: 220px; }
}
@media (max-height: 560px) {
  .br-sign { bottom: 194px; } .br-win { height: 170px; } .br-win .fine { display: none; } .br-win .grille { top: 70px; }
  .br-directory { display: none; }
  .br-bell { display: none; }
}

/* ------------------------------------------------- the floor bar + the shaft */
.br-floorbar {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 6px; padding: 4px 8px;
  background: #0a0e14; border: 3px solid #06080c; box-shadow: 0 0 0 2px #3a4148;
}
.br-floorbar b { font-family: var(--font-display); font-size: 7px; color: #8fb39c; margin-right: 4px; letter-spacing: 1px; }
.br-floorbar button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-display); font-size: 7px; color: #9fe0af; background: #1c1f24; border: 2px solid #3a4148; padding: 5px 8px;
}
.br-floorbar button i { font-style: normal; color: #ffd75e; }
.br-floorbar button.on { background: #ffd75e; color: #191309; border-color: #ffd75e; }
.br-floorbar button.on i { color: #191309; }
.br-floorbar button:not(.on):hover { border-color: #ffd75e; color: #fff3dc; }
.br-shaft { position: absolute; inset: 0; z-index: 5; background: #06080c; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.br-shaft.dark { opacity: 1; }
.br-floorbar button .short { display: none; }
@media (max-width: 520px) { .br-floorbar { top: 4px; gap: 4px; padding: 3px 6px; } .br-floorbar b { display: none; } .br-floorbar button { font-size: 7px; padding: 4px 6px; white-space: nowrap; } .br-floorbar button .full { display: none; } .br-floorbar button .short { display: inline; } }

/* --------------------------------------------------- the manager's corner */
.br-cabinet { position: absolute; bottom: var(--ground-h); width: 64px; height: 118px; background: #4a4f57; border: 4px solid #191309; box-sizing: border-box; }
.br-cabinet i { position: absolute; left: 6px; right: 6px; height: 28px; background: #3a3f47; border: 2px solid #191309; }
.br-cabinet i:nth-child(1) { top: 6px; } .br-cabinet i:nth-child(2) { top: 40px; } .br-cabinet i:nth-child(3) { top: 74px; }
.br-cabinet i::after { content: ""; position: absolute; left: 50%; top: 10px; width: 14px; height: 4px; margin-left: -7px; background: #d4af37; }
.br-cabinet u { position: absolute; left: 10px; top: -14px; width: 30px; height: 12px; background: #f6ead0; border: 2px solid #191309; }
.br-cooler { position: absolute; bottom: var(--ground-h); width: 44px; height: 132px; }
.br-cooler .body { position: absolute; left: 4px; bottom: 0; width: 36px; height: 78px; background: #e8e2d4; border: 3px solid #191309; }
.br-cooler .bottle { position: absolute; left: 8px; bottom: 76px; width: 28px; height: 54px; background: linear-gradient(90deg, #8fd0f0, #bfe6f8 40%, #7fbfe0); border: 3px solid #191309; border-radius: 10px 10px 2px 2px; }
.br-cooler .tap { position: absolute; left: 30px; bottom: 56px; width: 10px; height: 8px; background: #3454a0; border: 2px solid #191309; }
.br-cooler .cups { position: absolute; left: 12px; bottom: 30px; width: 14px; height: 18px; background: repeating-linear-gradient(0deg, #fff 0 3px, #d9d2c3 3px 4px); border: 2px solid #191309; }
.br-coat { position: absolute; bottom: var(--ground-h); width: 40px; height: 150px; }
.br-coat .pole { position: absolute; left: 17px; bottom: 0; width: 6px; height: 140px; background: #3d2f1c; border: 2px solid #191309; }
.br-coat u { position: absolute; left: 6px; bottom: 0; width: 28px; height: 8px; background: #3d2f1c; border: 2px solid #191309; }
.br-coat .hook { position: absolute; bottom: 118px; width: 14px; height: 4px; background: #8a6d35; border: 2px solid #191309; }
.br-coat .hook.l { left: 4px; } .br-coat .hook.r { right: 4px; }
.br-coat .hat { position: absolute; left: 0; bottom: 124px; width: 26px; height: 18px; background: #1c1c20; border: 2px solid #191309; border-radius: 10px 10px 0 0; }
.br-coat .hat::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: -2px; height: 5px; background: #1c1c20; border: 2px solid #191309; }
/* an overcoat on the right hook, in the room's charcoal — the striped scarf that hung here fought the wainscot */
.br-coat .coat { position: absolute; right: -4px; bottom: 52px; width: 18px; height: 70px; background: linear-gradient(90deg, #2c2c30, #3a3a3e 50%, #2c2c30); border: 2px solid #191309; border-radius: 6px 6px 2px 2px; }
.br-coat .coat::after { content: ""; position: absolute; left: 6px; top: 22px; width: 4px; height: 4px; background: #d4af37; box-shadow: 0 12px 0 #d4af37; }
.br-map {
  position: absolute; bottom: calc(var(--ground-h) + 150px); width: 132px; box-sizing: border-box;
  background: #f6ead0; border: 4px solid #191309; box-shadow: 0 0 0 3px #8a6d35, 5px 5px 0 #00000040; padding: 6px;
}
.br-map b { display: block; font-family: var(--font-display); font-size: 6px; color: #191309; text-align: center; letter-spacing: 1px; margin-bottom: 4px; }
.br-map .land { position: relative; height: 70px; background: #cfe3f2; border: 2px solid #191309; overflow: hidden; }
.br-map .land i { position: absolute; background: #a9c98a; border: 2px solid #6b8f52; }
.br-map .land i.a { left: 6px; top: 8px; width: 46px; height: 30px; border-radius: 40% 60% 50% 40%; }
.br-map .land i.b { left: 58px; top: 22px; width: 50px; height: 38px; border-radius: 50% 40% 60% 50%; }
.br-map .land i.c { left: 22px; top: 44px; width: 30px; height: 20px; border-radius: 50%; }
.br-map .pin { position: absolute; width: 10px; height: 10px; border: 2px solid #191309; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #d14e1d; }
.br-map .pin.p0 { left: 20px; top: 12px; } .br-map .pin.p1 { left: 72px; top: 30px; } .br-map .pin.p2 { left: 34px; top: 46px; }
.br-map .pin.p3 { left: 90px; top: 44px; } .br-map .pin.p4 { left: 8px; top: 30px; } .br-map .pin.p5 { left: 56px; top: 8px; }
.br-map .pin.next { left: 100px; top: 12px; background: #fff3dc; border-style: dashed; animation: br-lamp 1.6s ease-in-out infinite; }
.br-map span { display: block; font-family: var(--font-data); font-size: 12px; color: #4a3b22; text-align: center; margin-top: 4px; }
@media (max-height: 720px) { .br-map { bottom: calc(var(--ground-h) + 140px); } }

/* ------------------------------------------------------------- the stairs */
.br-stairs { position: absolute; bottom: var(--ground-h); width: 132px; height: 150px; cursor: pointer; }
.br-stairs .t { position: absolute; height: 18px; background: linear-gradient(#5d4a2c, #3d2f1c); border: 3px solid #191309; box-sizing: border-box; }
.br-stairs .t::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #8a6d35; }
.br-stairs.up .t0 { left: 0; bottom: 0; width: 132px; } .br-stairs.up .t1 { left: 20px; bottom: 16px; width: 112px; }
.br-stairs.up .t2 { left: 40px; bottom: 32px; width: 92px; } .br-stairs.up .t3 { left: 60px; bottom: 48px; width: 72px; }
.br-stairs.up .t4 { left: 80px; bottom: 64px; width: 52px; } .br-stairs.up .t5 { left: 100px; bottom: 80px; width: 32px; }
.br-stairs.down .t0 { right: 0; bottom: 0; width: 132px; } .br-stairs.down .t1 { right: 20px; bottom: 16px; width: 112px; }
.br-stairs.down .t2 { right: 40px; bottom: 32px; width: 92px; } .br-stairs.down .t3 { right: 60px; bottom: 48px; width: 72px; }
.br-stairs.down .t4 { right: 80px; bottom: 64px; width: 52px; } .br-stairs.down .t5 { right: 100px; bottom: 80px; width: 32px; }
.br-stairs .landing { position: absolute; bottom: 96px; width: 40px; height: 6px; background: #8a6d35; border: 2px solid #191309; }
.br-stairs.up .landing { right: -8px; } .br-stairs.down .landing { left: -8px; }
.br-stairs .rail { position: absolute; bottom: 42px; width: 118px; height: 6px; background: #d4af37; border: 2px solid #191309; transform-origin: 0 100%; }
.br-stairs.up .rail { left: 12px; transform: rotate(-38deg); } .br-stairs.down .rail { right: 12px; transform-origin: 100% 100%; transform: rotate(38deg); }
.br-stairs .post { position: absolute; bottom: 0; width: 6px; height: 44px; background: #d4af37; border: 2px solid #191309; }
.br-stairs.up .post { left: 8px; } .br-stairs.down .post { right: 8px; }
.br-stairs .sign {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 118px; white-space: nowrap; text-align: center;
  font-family: var(--font-display); font-size: 8px; color: #ffd75e; background: #191309; padding: 6px 10px; border: 3px solid #8a6d35;
}
.br-stairs .sign small { display: block; font-family: var(--font-data); font-size: 14px; color: #c9b98a; margin-top: 3px; letter-spacing: 1px; }
.br-stairs:hover .sign { color: #fff3dc; }
@media (max-height: 560px) { .br-stairs .sign { bottom: 104px; } }

/* ---------------------------------------------- short windows: cards stay under the ceiling
   The sale room's BID DESK card is ~385 px tall and on a 560 px window its
   header climbed into the ceiling band, under the floor bar. Every desk card
   in the tower now caps itself at the wall's height and scrolls inside. */
@media (max-height: 600px) {
  /* under 760 the HR cards stand at ground+60 (level.css), and the ceiling band is 44 + a 12 px margin */
  .room-hr .room-deskcard { max-height: calc(100vh - var(--ground-h) - 60px - 56px); overflow-y: auto; box-sizing: border-box; padding-top: 12px; padding-bottom: 12px; }
  /* the bid desk: 337 px of rows against a 256 px cap at 560. The BURNED / BONUS
     POOL plates, the OUTBID line and the echo go, so the card fits whole rather
     than scrolling with a sliced line at the fold */
  .room-hr .au-desk .au-counters, .room-hr .au-desk .fine, .room-hr .au-desk .echo { display: none; }
}

/* the auctioneer's line, two lines wide, ends before the bid desk (1520) */
.room-hr .room-speech.au-say { white-space: normal; width: 190px; box-sizing: border-box; line-height: 1.15; }