/* Room coordinates are shared by the vector furniture and the nine portrait overlays. */
.office-lounge { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 28px; min-height: 0; }
.office-lounge .lounge-copy { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 4px; }
.office-lounge .lounge-copy h2 { font-size: 26px; line-height: 1.5; margin: 9px 0 7px; }
.office-lounge .lounge-copy p { max-width: none; margin: 0; font-size: 12px; }
.office-lounge .lounge-note { margin: 0; flex-shrink: 0; text-align: right; line-height: 1.9; color: #a4b3c6; font-size: 10px; }
.office-scene-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.office-scene-toolbar.is-unneeded { display: none; }
.office-zone-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid #c9d9ef21; background: #08111d8f; border-radius: 14px; }
.office-zone-button { position: relative; isolation: isolate; overflow: hidden; min-height: 40px; padding: 9px 16px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #b2c0d2; font: inherit; font-size: 11px; cursor: pointer; transition: color .2s,background .2s,border-color .2s; white-space: nowrap; }
.office-zone-button:hover { color: #f0f5fc; background: #a7c9e411; }
.office-zone-button[aria-pressed="true"] { color: #e6f4ee; background: linear-gradient(145deg,#b0d3c624,#86a8c914); border-color: #d8efdf38; box-shadow: inset 0 1px #f2fffa18; }
.office-zone-button:focus-visible,.office-panorama:focus-visible { outline: 2px solid #b6e1d7; outline-offset: 4px; }
.office-pan-hint { color: #8ea4be; font-size: 10px; }
.office-panorama { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid #b9cdd52b; border-radius: 22px; background: #17232e; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #92aaa74a transparent; }
.office-panorama::-webkit-scrollbar { height: 5px; }.office-panorama::-webkit-scrollbar-thumb { background: #92aaa74a; border-radius: 5px; }
.office-lounge .office-floor { position: relative; display: block; width: 100%; min-width: 1000px; height: auto; aspect-ratio: 1200 / 680; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: none; box-shadow: none; container-type: inline-size; }
.office-panorama.is-overview .office-floor { min-width: 0; }
.office-lounge .office-floor::before,.office-lounge .office-floor::after { display: none; }
.office-scene-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.office-floor .office-seat { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; left: var(--seat-x); top: var(--seat-y); bottom: auto; right: auto; transform: translate(-50%,-50%); width: 8.5cqw; height: 9.2cqw; min-width: 0; max-width: none; z-index: 2; }
.office-floor .office-seat::before { display: none; }
.office-floor .office-avatar { position: absolute; top: 0; width: 5.5cqw; height: 6.25cqw; border: 0; background: transparent; box-shadow: none; border-radius: 20%; }
.office-floor .office-seat:hover .office-avatar { transform: translateY(-2px); }
.office-floor .office-seat > strong { position: absolute; top: 6.8cqw; margin-top: 0; color: #e8edf6; font-size: clamp(8px,.85cqw,12px); font-weight: 550; line-height: 1.5; padding: .1cqw .6cqw; background: #101b27d9; border-radius: 6px; white-space: nowrap; }
.office-floor .office-seat > .seat-activity { position: absolute; top: 8.6cqw; color: #b1c1cf; font-size: clamp(7px,.68cqw,10px); margin-top: .15cqw; line-height: 1.5; white-space: nowrap; }
.office-floor .office-seat.is-me .office-avatar { outline: none; background: transparent; }
.office-floor .office-seat.is-me > strong { border: 1px solid #bcdccb73; color: #e1f5eb; background: #34544edb; }
.office-floor .office-seat.is-me > .seat-activity { color: #b7dcca; }
.seat-hand-prop { position: absolute; z-index: 2; pointer-events: none; }
.seat-hand-prop.laptop { top: calc(4.05cqw - var(--hand-lift,0cqw)); left: 50%; width: 2.75cqw; height: 1.8cqw; transform: translateX(-50%) rotate(var(--desk-tilt,0deg)); border: .13cqw solid #ced5d7; border-radius: .25cqw; background: linear-gradient(140deg,#a6b8c4,#697e93); box-shadow: 0 .2cqw .25cqw #15202a42; }
.seat-hand-prop.laptop::before { content: ''; position: absolute; left: 45%; top: 35%; width: .4cqw; height: .4cqw; border-radius: 50%; background: #edf2f4a1; }
.seat-hand-prop.laptop::after { content: ''; position: absolute; bottom: -.36cqw; left: -.3cqw; width: 3.1cqw; height: .27cqw; background: #c8d0d4; border-radius: .05cqw .05cqw .35cqw .35cqw; }
.seat-hand-prop.cup { top: calc(3.9cqw - var(--hand-lift,0cqw)); right: 2.3cqw; width: .9cqw; height: 1cqw; border-radius: .15cqw .15cqw .4cqw .4cqw; background: #ede2cb; border: .08cqw solid #c8b28a; }
.seat-hand-prop.cup::after { content: ''; position: absolute; width: .35cqw; height: .45cqw; border: .14cqw solid #d8c5a4; border-left: 0; right: -.4cqw; top: .1cqw; border-radius: 0 .4cqw .4cqw 0; }
.office-floor .seat-0 { --seat-x: 43%; --seat-y: 64%; --desk-tilt: -7deg; }
.office-floor .seat-1 { --seat-x: 38%; --seat-y: 13.4%; }
.office-floor .seat-2 { --seat-x: 72%; --seat-y: 42.7%; --desk-tilt: -3deg; }
.office-floor .seat-3 { --seat-x: 86.5%; --seat-y: 51%; --desk-tilt: 3deg; }
.office-floor .seat-4 { --seat-x: 56%; --seat-y: 72%; --desk-tilt: 7deg; }
.office-floor .seat-5 { --seat-x: 70.4%; --seat-y: 66.9%; --desk-tilt: -2deg; }
.office-floor .seat-6 { --seat-x: 87.5%; --seat-y: 72%; --desk-tilt: 2deg; }
.office-floor .seat-7 { --seat-x: 76.7%; --seat-y: 86.2%; --desk-tilt: -4deg; }
.office-floor .seat-8 { --seat-x: 86.5%; --seat-y: 32.5%; --desk-tilt: -2deg; }
@media(max-width:760px) {
 .office-lounge { padding: 21px 15px 15px; gap: 16px; }
 .office-lounge .lounge-copy { align-items: flex-start; gap: 12px; padding: 0 2px; }
 .office-lounge .lounge-copy h2 { font-size: 20px; margin: 8px 0 7px; }
 .office-lounge .lounge-copy p { font-size: 11px; line-height: 1.8; }
 .office-lounge .lounge-note { display: none; }
 .office-scene-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
 .office-zone-nav { display: grid; grid-template-columns: .7fr 1fr 1fr .8fr; gap: 2px; padding: 3px; }
 .office-zone-button { min-height: 44px; padding: 8px 3px; font-size: 10px; }
 .office-pan-hint { font-size: 9px; text-align: center; }
 .office-panorama { border-radius: 15px; }
 .office-panorama:not(.is-overview) .office-floor { min-width: 900px; }
 .office-panorama.is-overview .office-seat > strong,.office-panorama.is-overview .seat-activity { display: none; }
 .office-panorama.is-overview .office-seat.is-me .office-avatar { filter: drop-shadow(0 0 2px #bef2d3a3); }
}
@media(prefers-reduced-motion:reduce) { .office-floor .office-seat:hover .office-avatar { transform: none; }.office-zone-button { transition: none; } }

/* A quiet putting loop, sharing the same coordinates as the centered balcony green. */
.balcony-putting-course { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.office-floor .pose-putt .office-avatar svg { overflow: visible; }
.office-floor .pose-putt:hover .office-avatar { transform: none; }
.golf-stroke { transform-box: view-box; transform-origin: 69px 86px; animation: golf-putt-stroke 7s ease-in-out infinite; }
.golf-ball { animation: golf-putt-roll 7s infinite; }
@keyframes golf-putt-stroke {
 0%,14%,45%,100% { transform: none; }
 20% { transform: translate(-5px,-1px) rotate(-5deg); }
 28%,34% { transform: translate(4px,1px) rotate(4deg); }
}
@keyframes golf-putt-roll {
 0%,24% { transform: translateX(0); opacity: 1; animation-timing-function: cubic-bezier(.16,.52,.36,1); }
 58%,76% { transform: translateX(326px); opacity: 1; }
 82%,93% { transform: translateX(326px); opacity: 0; }
 94% { transform: translateX(0); opacity: 0; }
 100% { transform: translateX(0); opacity: 1; }
}
@media(prefers-reduced-motion:reduce) { .golf-stroke,.golf-ball { animation: none; } }

/* One quiet rim for the whole lounge; the illustration has no nested frame. */
.office-lounge.panel { border: 1px solid #b8ccd24a; border-top-color: #dce7ec70; box-shadow: 0 16px 42px #00000024; }
.office-lounge.panel::after { display: none; }
.office-lounge .office-panorama { border: 0; background: transparent; border-radius: 14px; box-shadow: none; }
.office-zone-nav { border: 0; background: #080f1970; }
.office-lounge .lounge-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.lounge-tool-buttons { display: flex; gap: 5px; }
.office-tool { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 0; border-radius: 10px; background: #d4e7ed0a; color: #b8c9d3; font: inherit; font-size: 11px; cursor: pointer; transition: color .2s, background .2s; }
.office-tool:hover { background: #d4e7ed18; color: #f3faf8; }
.office-tool.nickname-tool { color: #c0e8d9; }
.office-tool:focus-visible { outline: 2px solid #b6e1d7; outline-offset: 3px; }
.office-tool:disabled { opacity: .5; cursor: default; }
.office-floor .office-seat { will-change: auto; }
.office-floor .office-seat.is-away { z-index: 3; will-change: transform; }
.office-floor .office-seat.is-away .seat-hand-prop { opacity: 0; }
.office-floor .office-seat.is-away .office-avatar { transform: none; }
.office-floor .chibi-figure { transform-box: view-box; transform-origin: 46px 65px; transition: transform .2s ease; }
.office-floor .is-walking .chibi-figure { transform: scaleX(var(--walk-turn,1)); }
.office-floor .is-walking .portrait-head,.office-floor .is-walking .portrait-back-hair { translate: var(--walk-look-x,0px) 0; }
.office-floor .office-seat.is-walking .office-avatar svg { animation: office-step-bob .68s ease-in-out infinite; }
.office-floor .is-walking .chibi-left-leg { animation: office-leg-step .68s ease-in-out infinite; }
.office-floor .is-walking .chibi-right-leg { animation: office-leg-step .68s ease-in-out -.34s infinite; }
.office-floor .is-walking .chibi-left-arm { animation: office-arm-swing .68s ease-in-out -.34s infinite; }
.office-floor .is-walking .chibi-right-arm { animation: office-arm-swing .68s ease-in-out infinite; }
.office-floor .office-seat > .office-speech { position: absolute; z-index: 5; bottom: calc(100% + .25cqw); left: 50%; width: max-content; max-width: 18cqw; padding: .7cqw 1.05cqw; border: 0; border-radius: 1.1cqw 1.1cqw 1.1cqw .2cqw; background: #f5f3ec; color: #35383e; -webkit-text-fill-color: #35383e; text-shadow: none; box-shadow: 0 .4cqw 1.2cqw #040b1736; font-size: clamp(10px,.96cqw,13px); font-weight: 600; line-height: 1.6; letter-spacing: .01em; white-space: normal; text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%,.5cqw) scale(.95); transform-origin: 50% 100%; transition: opacity .16s, transform .38s cubic-bezier(.2,.8,.2,1), visibility .28s; pointer-events: none; }
.office-speech::after { content: ''; position: absolute; bottom: -.45cqw; left: 45%; width: .8cqw; height: .8cqw; background: inherit; transform: rotate(45deg); border-radius: 0 0 .2cqw; }
.office-floor .office-seat.is-speaking > .office-speech { opacity: 1; visibility: visible; transform: translate(-50%,0) scale(1); }
.office-floor .seat-1 > .office-speech { bottom: auto; top: .2cqw; left: calc(100% + 1.1cqw); transform: translate(0,.5cqw) scale(.95); }
.office-floor .seat-1.is-speaking > .office-speech { transform: none; }
.office-floor .seat-1 > .office-speech::after { left: -.35cqw; bottom: 40%; }
.office-floor .office-seat.is-me > strong { border: 0; box-shadow: 0 1px 4px #0002; }
.office-paused .office-seat *, .office-paused .golf-ball { animation-play-state: paused !important; }
@keyframes office-step-bob { 0%,50%,100% { transform: translateY(0); } 25%,75% { transform: translateY(-.6px); } }
/* Feet step along the route; the hips stay close together rather than splaying sideways. */
@keyframes office-leg-step {
 0%,50%,100% { transform: translate(0,0) scaleY(1); }
 25% { transform: translate(calc(var(--walk-stride-x,0px) * -1),-1.8px) scaleY(.87); }
 75% { transform: translate(var(--walk-stride-x,0px),.5px) scaleY(1.03); }
}
@keyframes office-arm-swing { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.office-nickname-list { display: grid; gap: 8px; }
.office-nickname-row { display: grid; grid-template-columns: 36px minmax(80px,1fr) minmax(100px,1fr); align-items: center; gap: 12px; padding: 10px 0; }
.office-nickname-row > span:not(.avatar) { display: grid; gap: 4px; }
.office-nickname-row strong { color: #eef4f6; font-size: 13px; font-weight: 550; }
.office-nickname-row small { color: #9bacbd; font-size: 10px; line-height: 1.5; }
.office-nickname-row input { width: 100%; min-width: 0; min-height: 44px; }
@media(max-width:760px) {
 .office-lounge .lounge-copy { flex-direction: column; gap: 12px; }
 .office-lounge .lounge-tools { align-items: flex-start; width: 100%; }
 .office-lounge .lounge-tool-buttons { width: 100%; justify-content: space-between; }
 .office-tool { min-height: 44px; padding: 9px 12px; }
 .office-floor .office-seat > .office-speech { max-width: 24cqw; }
 .office-panorama.is-overview .office-seat > .office-speech { display: none; }
 .office-nickname-row { grid-template-columns: 30px minmax(70px,1fr) minmax(95px,1fr); gap: 9px; }
}
@media(prefers-reduced-motion:reduce) {
 .office-floor .office-seat * { animation: none !important; transition: none !important; }
 .office-tool { transition: none; }
}

.office-floor .office-seat > .office-speech { left: calc(50% + var(--speech-shift,0px)); }
.office-floor .seat-1 > .office-speech { left: calc(100% + 1.1cqw + var(--speech-shift,0px)); }
.office-floor .office-seat > .office-speech.speech-offscreen { opacity: 0; visibility: hidden; }

.office-floor .office-avatar svg { overflow: visible; }
.office-avatar .portrait-glasses { opacity: 0; transition: opacity .3s ease; }
.office-avatar.has-glasses .portrait-glasses { opacity: 1; }
@media(prefers-reduced-motion:reduce) { .office-avatar .portrait-glasses { transition: none; } }

/* Curry alternates between the balcony and a laptop in the shared lounge. */
.office-floor .pose-putt .office-work-avatar, .office-floor .pose-putt .office-boss-laptop { opacity: 0; }
.office-floor .pose-putt.is-away .office-putt-avatar { opacity: 0; }
.office-floor .pose-putt.is-away .office-work-avatar { opacity: 1; }
.office-floor .pose-putt.is-working .office-boss-laptop { opacity: 1; }
.office-lounge.boss-away .golf-ball { visibility: hidden; animation-play-state: paused; }
.office-lounge.boss-away .golf-stroke { animation-play-state: paused; }
.office-floor .seat-1.is-away > .office-speech { bottom: calc(100% + .25cqw); top: auto; left: calc(50% + var(--speech-shift,0px)); transform: translate(-50%,.5cqw) scale(.95); }
.office-floor .seat-1.is-away.is-speaking > .office-speech { transform: translate(-50%,0) scale(1); }
.office-floor .seat-1.is-away > .office-speech::after { left: 45%; bottom: -.45cqw; }