/*
 * The lift (includes/pieces/lift.php): a lobby wall in cream enamel; a semicircular brass floor dial
 * whose needle points at the starting age; under it a brass doorway with brushed-steel doors that slide
 * open onto a lit car (a CSS 3D room: back wall, sides, ceiling and floor), the floor's amount on a
 * plate on its back wall; beside it the call panel. Below, the ceiling: the taxable maximum.
 */

.lift { --brass: linear-gradient(150deg, #f4dea0 0%, #cf9f40 36%, #8c6219 62%, #e6c06a 100%); }

/* The lobby wall, lit from above, with the floor along its foot. */
.lift__lobby { padding: 16px 12px 0; border-radius: 10px; background: linear-gradient(#fbf6ea, #efe6d1 75%), #f3ecdb; box-shadow: inset 0 -16px 0 #3a3f46, inset 0 -18px 0 #8c6219, inset 0 0 0 1px rgba(0, 0, 0, .12); }
.lift__frame { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "panel" "dial" "door"; justify-items: center; align-items: end; gap: 12px; max-width: 560px; margin: 0 auto; }

/* The floor dial. */
.lift__dial { grid-area: dial; position: relative; width: 100%; max-width: 330px; justify-self: center; aspect-ratio: 380 / 200; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.lift__dial-svg { display: block; width: 100%; height: 100%; }
.lift__dial-dots { fill: #6b5a3a; }
.lift__dial-ticks { fill: none; stroke: #15171a; stroke-width: 4.5; }
.lift__dial-nums text { font: 700 36px var(--board-font); fill: #15171a; text-anchor: middle; }
.lift__needle { position: absolute; left: 47.37%; top: 30%; width: 5.26%; height: 72%; transform-origin: 50% 88.89%; transform: rotate(var(--a)); }
.lift__needle svg { display: block; width: 100%; height: 100%; }
.lift__needle path { fill: #15171a; }
.lift__hub { position: absolute; left: 50%; top: 94%; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff4cc 0, #e3b85a 32%, #9a6c1b 72%, #5e400c 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }

/* The doorway: a brass frame, the car behind, the doors in front. */
.lift__portal { grid-area: door; position: relative; width: min(100%, 250px); padding: 10px 10px 0; border-radius: 5px 5px 0 0; background: var(--brass); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 12px 18px -12px rgba(0, 0, 0, .55); }
.lift__shaft { position: relative; aspect-ratio: 3 / 4; overflow: hidden; container-type: inline-size; background: #0f1113; perspective: 430px; perspective-origin: 50% 38%; box-shadow: inset 0 0 0 2px #4a330a; }
.lift__room { position: absolute; inset: 0; transform-style: preserve-3d; }
.lift__room i { position: absolute; display: block; }
.lift__room .w-back { inset: 0; transform: translateZ(-60cqw); background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 33.3%), linear-gradient(#8a6038, #6b4627); }
.lift__room .w-l, .lift__room .w-r { top: 0; bottom: 0; width: 60cqw; background: linear-gradient(transparent 52%, #c9a14b 52% 54%, transparent 54%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 50%), linear-gradient(90deg, #4f331b, #6b4627); }
.lift__room .w-l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.lift__room .w-r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.lift__room .w-top { left: 0; right: 0; top: 0; height: 60cqw; transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(90deg, transparent 49.5%, #c9bf9f 49.5% 50.5%, transparent 50.5%), linear-gradient(transparent 49%, #c9bf9f 49% 51%, transparent 51%), #fff8e2; }
.lift__room .w-floor { left: 0; right: 0; bottom: 0; height: 60cqw; transform-origin: 50% 100%; transform: rotateX(90deg); background: repeating-linear-gradient(45deg, #24272c 0 3px, #2e3238 3px 6px); }
.lift__shaft::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255, 248, 226, .12), transparent 30%, rgba(0, 0, 0, .25)); }

/* The plate on the car's back wall: the floor's amount. */
.piece p.lift__plate { position: absolute; left: 50%; top: 44%; z-index: 1; width: 82%; margin: 0; padding: 8px 6px 9px; border-radius: 4px; background: #f7f2e5; color: #15171a; text-align: center; box-shadow: var(--p-enamel), 0 2px 4px rgba(0, 0, 0, .5);
	transform: translate(-50%, -50%) translateZ(-52cqw); }
.lift__plate-k, .lift__plate-v, .lift__plate-s { display: block; }
.lift__plate-k { font: 700 1.32rem/1.1 var(--board-font); letter-spacing: .05em; text-transform: uppercase; }
.lift__plate-v { margin: 2px 0; font: 700 2.7rem/1 var(--board-font); letter-spacing: .01em; color: #8e1f19; font-variant-numeric: tabular-nums; }
.lift__plate-s { font-size: 1.32rem; line-height: 1.2; }

.lift__doors { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; pointer-events: none; }
.lift__leaf { position: absolute; top: 0; bottom: 0; width: 50%; transform: translate3d(0, 0, 1px); transition: transform .6s cubic-bezier(.5, 0, .25, 1);
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px), linear-gradient(90deg, #7f858e, #d4d8dd 38%, #b2b8c0 66%, #7a8089); }
.lift__leaf--l { left: 0; box-shadow: inset -1px 0 0 #2b2f35, inset 0 -8px 10px -8px rgba(0, 0, 0, .5); }
.lift__leaf--r { right: 0; box-shadow: inset 1px 0 0 #e9ecef, inset 0 -8px 10px -8px rgba(0, 0, 0, .5); }
.lift__doors.is-open .lift__leaf--l { transform: translate3d(-101%, 0, -2px); }
.lift__doors.is-open .lift__leaf--r { transform: translate3d(101%, 0, -2px); }
.lift__sill { display: block; height: 8px; margin: 0 -10px; background: linear-gradient(#e9ecef, #8e949d); box-shadow: 0 1px 0 #2b2f35; }

/* The call panel: one lit button for each floor, its amount on an enamel label. */
.piece .lift__panel { grid-area: panel; display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 4px; width: 100%; max-width: 330px; margin: 0; padding: 8px 6px; list-style: none; border-radius: 8px; background: var(--brass); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 4px 8px -4px rgba(0, 0, 0, .5); }
.piece .lift__call { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; }
.lift__btn { place-items: center; flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 3px solid #6b4a10; background: radial-gradient(circle at 40% 35%, #3a3f46, #0b0c0e 75%); color: #f3efe5; font: 700 1.3rem/1 var(--board-font); cursor: pointer; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), 0 2px 0 rgba(0, 0, 0, .45); }
.lift__btn:focus-visible { outline: 3px solid #15171a; outline-offset: 2px; border-radius: 50%; box-shadow: 0 0 0 2px #f7f2e5, inset 0 2px 0 rgba(255, 255, 255, .14); }
.lift__btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(0, 0, 0, .45); }
.lift__call.is-on .lift__btn { background: radial-gradient(circle at 40% 35%, #ffe07a, var(--signal) 70%); color: var(--signal-ink); }
.js .lift__btn.needs-js, .lift__btn--still { display: inline-grid; }
.lift__amt { padding: 3px 4px 2px; border-radius: 3px; background: #f7f2e5; color: #15171a; font: 700 .95rem/1 var(--board-font); letter-spacing: .02em; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.lift__call.is-on .lift__amt { background: #15171a; color: var(--signal); }

.piece p.lift__say { margin: 16px 0 0; font-size: 1.1rem; line-height: 1.5; color: var(--ink); }

/* The ceiling: pay counted up to the taxable maximum, and none above it. */
.lift__ceiling { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--stone-2); }
.piece p.lift__ceil-k { margin: 0 0 38px; font: 700 .95rem/1.3 var(--board-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.lift__beamway { position: relative; height: 22px; margin: 0 14px; border-radius: 3px; background: var(--stone); box-shadow: inset 0 0 0 1px var(--stone-2); }
.lift__count { position: absolute; left: 0; top: 0; bottom: 0; width: calc(min(var(--pay), var(--cap)) * 100%); border-radius: 3px 0 0 3px; background: linear-gradient(#e2bb5c, #b5862e); }
.lift__over { position: absolute; top: 3px; bottom: 3px; left: calc(var(--cap) * 100%); width: calc(max(0, var(--pay) - var(--cap)) * 100%); background: repeating-linear-gradient(135deg, #c0271f 0 4px, transparent 4px 8px); }
.lift__beam { position: absolute; top: -10px; bottom: -10px; left: calc(var(--cap) * 100%); width: 10px; margin-left: -5px; border-radius: 1px; background: linear-gradient(90deg, #5d636c, #c2c7ce 45%, #6f757e); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.lift__beam-k { position: absolute; bottom: calc(100% + 12px); left: calc(var(--cap) * 100%); transform: translateX(-50%); font-size: .95rem; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.lift__beam-k b { font: 700 1.1rem/1 var(--board-font); letter-spacing: .02em; }
.js .lift__scrub.needs-js { display: block; }
.lift__scrub { margin-top: 10px; margin-bottom: -8px; }
.piece p.lift__ceil-say { margin: 16px 0 0; font-size: 1.02rem; line-height: 1.5; color: var(--ink); }

@media (min-width: 640px) {
	.lift__lobby { padding: 22px 24px 0; }
	.lift__frame { grid-template-columns: 330px auto; grid-template-areas: "dial ." "door panel"; justify-content: center; justify-items: stretch; column-gap: 22px; }
	.lift__dial { max-width: none; }
	.lift__portal { width: auto; }
	.piece .lift__panel { flex-direction: column; justify-content: flex-start; gap: 8px; width: auto; margin: 0 0 18px; padding: 10px; }
	.piece .lift__call { flex-direction: row; gap: 8px; }
	.lift__amt { padding: 4px 7px 3px; font-size: 1.1rem; }
	.lift__shaft { aspect-ratio: 5 / 6; perspective: 600px; }
	.lift__plate-v { font-size: 3.2rem; }
}
@media (max-width: 359px) {
	.lift__lobby { padding-left: 8px; padding-right: 8px; }
	.piece .lift__panel { gap: 2px; padding: 8px 3px; }
	.lift__btn { width: 44px; height: 44px; }
	.lift__amt { padding: 3px 1px 2px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.lift__leaf { transition: none; }
}