/* ═════════════════════════════ THE MAIL ROOM (floor 5) ═════════════════════════════
   The shared fb-* frame lives in workshop.css. Room: 1200 × 600 (phones: 400 × 900). */

.floor-mailroom {
  --fb-wall: #17302F;
  background:
    radial-gradient(45% 45% at 30% 40%, rgba(255, 214, 140, .12), transparent 70%),
    radial-gradient(40% 50% at 80% 70%, rgba(79, 209, 197, .10), transparent 70%),
    linear-gradient(180deg, #142727, #1A3433 60%, #1D302F);
}
.mr-back {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 3px, transparent 3px 44px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 3px, transparent 3px 88px),
    linear-gradient(180deg, transparent 0 calc(100% - 330px), rgba(10, 22, 22, .45) calc(100% - 330px));
}
.mr-pipes-back { top: 140px; left: 0; width: 100%; height: 56px; opacity: .8; }
.mr-notice { width: 120px; left: calc((100% - 1200px) / 2 - 150px); top: calc(140px + 36%); transform: rotate(-4deg); }
@media (max-width: 1599px) { .mr-notice { display: none; } }
.mr-vent { width: clamp(90px, 9vw, 150px); left: 44%; top: calc(140px + 15%); opacity: .8; }
@media (max-width: 1100px) { .mr-vent { display: none; } }

.mr-front .mr-valve { --vw: clamp(70px, 7vw, 120px); right: calc(50% - 632px - var(--vw)); top: 110px; width: var(--vw); }
@media (max-width: 1100px) { .mr-front .mr-valve { display: none; } }
.mr-wheel { transform-box: view-box; transform-origin: 70px 130px; animation: mr-wheel 9s ease-in-out infinite; }
@keyframes mr-wheel { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(40deg); } }

.mr-ground {
  background:
    linear-gradient(180deg, #4E5A63 0 5px, transparent 5px),
    repeating-linear-gradient(90deg, #3A444D 0 199px, #2A323A 199px 202px),
    linear-gradient(180deg, #38424B, #2C343C);
}

/* positions: desktop room 1200 × 600 */
.mr-card    { --x: 24;  --y: 10;  --w: 470; }
.mr-desk    { --x: 12;  --y: 396; --w: 380; }
.mr-imprint { --x: 232; --y: 400; --w: 90; }
.mr-stamp   { --x: 332; --y: 366; --w: 42; z-index: 3; }
.mr-doodle  { --x: 404; --y: 432; --w: 90; }
.mr-intake  { --x: 506; --y: 244; --w: 100; }
.mr-sorter  { --x: 650; --y: 104; --w: 540; }
.mr-bin     { --x: 604; --y: 462; --w: 110; z-index: 3; }
.mr-sign    { --x: 906; --y: 50;  --w: 168; z-index: 1; }

/* the tubes */
.mr-tubes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.mr-tubes-m { display: none; }
.mr-t-out { fill: none; stroke: var(--outline); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.mr-t-glass { fill: none; stroke: #A8E6EE; stroke-opacity: .36; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.mr-t-shine { fill: none; stroke: #E8FBFF; stroke-opacity: .35; stroke-width: 3; stroke-dasharray: 60 14 8 14; stroke-linecap: round; transform: translate(-5px, -3px); }
.mr-t-path { fill: none; stroke: none; }
.mr-bands rect { fill: var(--brass); stroke: var(--outline); stroke-width: 3.5; }
.mr-cap-body { stroke: var(--outline); stroke-width: 2.5; }

/* the postcard */
.mr-card {
  z-index: 3; margin: 0; padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u));
  color: var(--outline); border-radius: calc(10 * var(--u));
  background:
    linear-gradient(#FFF6E6, #FFF1DA) padding-box,
    repeating-linear-gradient(135deg, #E23D2E 0 12px, #FFF6E6 12px 22px, #2F6FDB 22px 34px, #FFF6E6 34px 44px) border-box;
  border: calc(11 * var(--u)) solid transparent;
  box-shadow: 0 0 0 calc(4 * var(--u)) var(--outline), calc(4 * var(--u)) calc(9 * var(--u)) 0 calc(4 * var(--u)) rgba(0, 0, 0, .3);
  transform: rotate(-1.5deg); transition: transform .4s var(--spring);
}
.mr-card:focus-within { transform: rotate(0); }
.mr-card-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; min-height: calc(62 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.mr-card-k { font: 700 max(13px, calc(19 * var(--u)))/1 var(--font-display); letter-spacing: .28em; text-transform: uppercase; color: #39425F; border-bottom: 3px solid #39425F; padding-bottom: .25em; margin-top: .2em; }
.mr-card-top svg { display: block; }
.mr-stamp-art { width: calc(62 * var(--u)); height: auto; transform: rotate(4deg); position: relative; z-index: 1; }
.mr-postmark { position: absolute; right: calc(34 * var(--u)); top: calc(10 * var(--u)); width: calc(118 * var(--u)); height: auto; z-index: 2; transform: rotate(-8deg); pointer-events: none; }
.mr-card-say { display: block; font: 600 max(16px, calc(21 * var(--u)))/1.25 var(--font-display); margin: 0 0 calc(12 * var(--u)); max-width: 26ch; }
.mr-card-say span { display: block; font: 700 max(14px, calc(15 * var(--u)))/1.35 var(--font-body); color: #5A5F75; margin-top: .25em; }
.mr-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mr-row input {
  flex: 1 1 180px; min-width: 0; min-height: 48px; font-size: 16px;
  background: #FFFFFF; color: var(--outline); border: 3px solid var(--outline); border-radius: 12px;
}
.mr-row input::placeholder { color: #8A8FA8; }
.mr-row input:focus { border-color: var(--ember); box-shadow: 0 0 0 4px rgba(255, 107, 26, .25); }
.mr-row .btn { flex: 0 0 auto; }
.mr-status { min-height: 1.4em; margin: calc(10 * var(--u)) 0 0; font: 700 max(14px, calc(15 * var(--u)))/1.35 var(--font-body); color: #2E6B45; }
.mr-status.is-bad { color: #B3261E; }
.mr-card.is-bad { animation: mr-shake .45s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes mr-shake { 20%, 60% { transform: rotate(-1.5deg) translateX(-7px); } 40%, 80% { transform: rotate(-1.5deg) translateX(7px); } }
.mr-card.is-sending .mr-send { pointer-events: none; opacity: .75; }

/* desk, stamp, imprint */
.mr-stamp svg { transform-origin: 50% 100%; transition: transform .3s var(--spring); }
.mr-stamp:hover svg { transform: translateY(-4px) rotate(-6deg); }
.mr-stamp.is-stamp { animation: mr-stomp .55s var(--spring); }
@keyframes mr-stomp { 0% { transform: none; } 30% { transform: translate(calc(-80 * var(--u)), calc(-40 * var(--u))) rotate(-12deg); } 55% { transform: translate(calc(-80 * var(--u)), calc(6 * var(--u))) scaleY(.9); } 100% { transform: none; } }
.mr-imprint {
  z-index: 3; margin: 0; height: calc(22 * var(--u)); display: grid; place-items: center; transform: rotate(-9deg); pointer-events: none;
  font: 700 calc(12 * var(--u))/1 var(--font-display); letter-spacing: .12em; color: #D8372F; opacity: 0;
}
.mr-imprint.is-on { opacity: .9; outline: calc(2.5 * var(--u)) solid #D8372F; outline-offset: -2px; border-radius: 4px; animation: pop-in .25s var(--spring); }

/* the intake hatch */
.mr-hatch { transform-box: view-box; transform-origin: 50px 38px; transition: transform .35s var(--spring); }
.mr-intake.is-open .mr-hatch { transform: scaleY(-.25); }
.mr-needle { transform-box: view-box; transform-origin: 50px 108px; transform: rotate(-40deg); transition: transform .6s var(--spring); }
.mr-intake.is-fire .mr-needle { transform: rotate(70deg); transition-duration: .15s; }
.mr-intake.is-fire svg { animation: mr-kick .4s var(--spring); }
@keyframes mr-kick { 30% { transform: scale(1.06, .92); } 60% { transform: scale(.97, 1.04); } }
.mr-intake svg { transform-origin: 50% 100%; }

/* the envelope that flies from the postcard into the intake */
.mr-flyer { position: absolute; z-index: 8; left: 0; top: 0; width: calc(54 * var(--u)); opacity: 0; pointer-events: none; will-change: transform; }
.mr-flyer svg { width: 100%; height: auto; display: block; }

/* the Sort-o-Matic */
.mr-sorter svg { transform-origin: 50% 100%; }
.mr-sorter:hover svg { transform: scale(1.01, .99); transition: transform .3s var(--spring); }
.mr-sorter.is-sort svg { animation: ws-thump .45s var(--spring); }
.mr-arm { transform-box: view-box; transform-origin: 470px 330px; animation: mr-arm 2.4s ease-in-out infinite; }
@keyframes mr-arm { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-9deg); } 72% { transform: rotate(2deg); } 80% { transform: rotate(0); } }
.mr-sorter.is-sort .mr-arm { animation: mr-arm-now .45s ease-in-out; }
@keyframes mr-arm-now { 40% { transform: rotate(-12deg); } 70% { transform: rotate(3deg); } }
.mr-lamp { animation: ws-beacon 2.2s steps(1) infinite; }
.mr-lamp.l2 { animation-delay: -.7s; }
.mr-lamp.l3 { animation-delay: -1.4s; }
.mr-letter { transition: transform .3s var(--spring); }
.mr-sorted .mr-new { animation: mr-slot .5s var(--spring) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes mr-slot { from { opacity: 0; transform: translateY(-30px) scale(.6); } to { opacity: 1; transform: none; } }

/* ── the Mail Room on phones and small tablets: room 400 × 900 ── */
@media (max-width: 1020px) {
  .mr-room { --rh: 900; --gh: 70; }
  .mr-tubes-d { display: none; }
  .mr-tubes-m { display: block; }
  .mr-card   { --x: 2;   --y: 0;   --w: 396; transform: none; padding: 14px 16px 12px; }
  .mr-card-say { font-size: 18px; }
  .mr-doodle { --x: 228; --y: 464; --w: 84; }
  .mr-intake { --x: 326; --y: 618; --w: 72; }
  .mr-sorter { --x: 6;   --y: 582; --w: 312; }
  .mr-desk, .mr-stamp, .mr-imprint, .mr-bin, .mr-sign { display: none; }
}