/* Comic front office: scoped to the existing timer scene. */
.game-hub .office-image{opacity:1}
.game-hub .haunted-office::before{background:radial-gradient(ellipse at 50% 28%,#030b188f,transparent 62%),linear-gradient(180deg,#03081822,transparent 42%,#03091215 72%,#03071290);animation:none}
.game-hub .hub-panel{z-index:3}
.game-hub .hub-kicker{color:#e3d3b9;text-shadow:2px 2px 0 #050b13,0 0 16px #050b13;font-weight:650}
.game-hub .hub-title{font-family:Impact,'Arial Narrow',Haettenschweiler,sans-serif;color:#ffd59a;letter-spacing:.13em;font-weight:400;text-shadow:2px 2px 0 #0b0e1a,-1px -1px 0 #0b0e1a,0 5px 16px #000; -webkit-text-stroke:1px #0b0e1a;paint-order:stroke fill}
.game-hub .timer-main{color:#fff2d6;-webkit-text-stroke:3px #101422;paint-order:stroke fill;text-shadow:5px 6px 0 #0b101c,0 10px 26px #0009;filter:drop-shadow(0 0 20px #050b1266)}
.game-hub .timer-main.expired{color:#ef9169}
.game-hub .timer-caption{color:#ffe4b5;font-weight:650;text-shadow:2px 2px 0 #080f1b,0 2px 12px #000}
.game-hub .desk-photo{border-color:#b18c4f;box-shadow:3px 4px 0 #070d16,7px 12px 12px #0009}
.game-hub .desk-photo img{filter:brightness(.92)}
.game-hub .desk-birthday{filter:brightness(.95) contrast(1.12) drop-shadow(3px 3px 0 #070d16) drop-shadow(4px 12px 5px #0008)}
.game-hub .desk-nameplate{color:#ffe0a8;background:#101827e8;border:2px solid #0a101b;box-shadow:2px 3px 0 #050a10,0 0 0 1px #bc914f;font-weight:650}
.game-hub .window-light{background:repeating-linear-gradient(112deg,transparent 0 11%,#b1dfff0d 11.5% 12%,transparent 12.5% 18%);animation:officeMoonGust 3.6s ease-in-out infinite;transform-origin:50% 0}
@keyframes officeMoonGust{0%,100%{opacity:.35;transform:translateX(-2%) skewX(-4deg)}26%{opacity:.7;transform:translateX(2%) skewX(5deg)}48%{opacity:.45;transform:translateX(-1%) skewX(-3deg)}70%{opacity:.85;transform:translateX(3%) skewX(7deg)}}
.office-floaters{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.office-floater{position:absolute;width:clamp(94px,12vw,185px);aspect-ratio:1;filter:drop-shadow(5px 9px 4px #0008);will-change:transform;animation:officeLevitate 6.8s ease-in-out infinite}
.office-floater .floater-art{position:absolute;inset:0;overflow:hidden}
.office-floater img{position:absolute;top:0;width:var(--sprite-width,300%);max-width:none;height:100%;left:var(--sprite-offset,0%);pointer-events:none}
.office-floater.phone{left:5%;top:44%;--object-index:0;--lift:-48px;--drift:28px;--turn:-12deg;animation-delay:-2.1s}
.office-floater.headset{right:7%;top:33%;aspect-ratio:668/724;--sprite-width:325.1497%;--sprite-offset:-108.3832%;--lift:-36px;--drift:-18px;--turn:18deg;animation-duration:5.6s;animation-delay:-.8s}
.office-floater.laptop{right:2%;bottom:18%;width:clamp(115px,15vw,225px);aspect-ratio:780/724;--sprite-width:278.4615%;--sprite-offset:-178.4615%;--lift:-42px;--drift:24px;--turn:-10deg;animation-duration:8.2s;animation-delay:-4.3s}
@keyframes officeLevitate{0%,100%{transform:translate3d(0,5px,0) rotate(-5deg)}22%{transform:translate3d(var(--drift),var(--lift),0) rotate(var(--turn))}46%{transform:translate3d(-9px,-12px,0) rotate(7deg)}72%{transform:translate3d(calc(var(--drift) * -.6),calc(var(--lift) * .65),0) rotate(calc(var(--turn) * -.7))}}
.blind-shiver{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none;will-change:transform;animation:blindRattle 1.65s ease-in-out infinite;transform-origin:0 0}
.blind-shiver.left{clip-path:polygon(0 0,20% 0,24% 33%,0 16%)}
.blind-shiver.right{clip-path:polygon(77.7% 0,86.5% 0,86.4% 31.7%,77.3% 35.4%);transform-origin:100% 0;animation-delay:-.8s;animation-duration:1.9s}
@keyframes blindRattle{0%,100%{transform:rotate(0) skewY(0)}18%{transform:rotate(1.2deg) skewY(.5deg)}32%{transform:rotate(-.8deg) skewY(-.4deg)}53%{transform:rotate(1.7deg) skewY(.7deg)}67%{transform:rotate(-.5deg) skewY(-.3deg)}83%{transform:rotate(.8deg) skewY(.3deg)}}
@media(max-width:700px){.game-hub .timer-main{-webkit-text-stroke:2px #101422;text-shadow:3px 4px 0 #0b101c,0 8px 18px #0008}.office-floater{width:78px}.office-floater.phone{left:0;top:39%;--drift:12px;--lift:-25px}.office-floater.headset{right:1%;top:37%;--drift:-8px;--lift:-25px}.office-floater.laptop{right:-1%;bottom:43%;width:95px;--drift:-12px;--lift:-18px}}
@media(max-width:700px){.blind-shiver{display:none}}
@media(prefers-reduced-motion:reduce){.office-floaters,.blind-shiver{display:none}.game-hub .window-light{animation:none!important;opacity:.35}}

/* Append after refinement.css. Decorative weather belongs inside .haunted-office,
   which already sits behind the timer, safe, keepsakes, and interactive controls. */
.office-weather {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  --weather-reach: 1;
}
.office-weather *, .office-weather *::before, .office-weather *::after {
  box-sizing: border-box;
  pointer-events: none;
}
.office-weather__paper {
  position: absolute;
  top: var(--y);
  left: -7vw;
  width: var(--size);
  aspect-ratio: .74;
  opacity: 0;
  animation: office-weather-left var(--flight) cubic-bezier(.36,.05,.43,.98) var(--delay) infinite;
  will-change: transform, opacity;
  --paper-strength: .91;
}
.office-weather__paper--right {
  right: -7vw;
  left: auto;
  animation-name: office-weather-right;
}
.office-weather__paper--cross {
  left: -14vw;
  animation-name: office-weather-cross;
  animation-timing-function: linear;
}
.office-weather__paper--wide { aspect-ratio: 1.3; }
.office-weather__paper--far { --paper-strength: .56; }
.office-weather__paper i {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid #242625;
  border-radius: 1px 1px 8px 1px;
  background: linear-gradient(135deg,#fff0cc 0%,#dcc99f 59%,#a99979 100%);
  box-shadow: 3px 4px 0 #08121180;
  transform-origin: 54% 35%;
  animation: office-weather-flutter var(--flutter) ease-in-out var(--delay) infinite;
}
.office-weather__paper i::before {
  content: "";
  position: absolute;
  inset: 17% 15% 23%;
  background: repeating-linear-gradient(180deg,#3a46465c 0 1px,transparent 1px 6px);
  border-top: 3px solid #283a397a;
}
.office-weather__paper i::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 22%;
  aspect-ratio: 1;
  background: linear-gradient(135deg,#b09b72 48%,#3b3c34 49%,#3b3c34 56%,#e4d1a5 57%);
  border-radius: 1px 0 6px 0;
}
.office-weather__trail {
  position: absolute;
  width: 24%;
  height: 81%;
  top: 17%;
  left: -3%;
  opacity: 0;
  animation: office-weather-gust-left 5.1s ease-in-out -1.1s infinite;
  will-change: transform, opacity;
}
.office-weather__trail svg { width:100%;height:100%;overflow:visible; }
.office-weather__trail path { stroke:#d1e6d3;stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke; }
.office-weather__trail--right { left:auto;right:-3%;animation-name:office-weather-gust-right;animation-duration:6.7s;animation-delay:-3.8s; }
.office-weather__trail--right svg { transform:scaleX(-1); }
.office-weather__trail--floor,.office-weather__trail--low {
  left:-10%;top:auto;bottom:3%;width:120%;height:28%;
  animation-name:office-weather-gust-floor;animation-duration:4.8s;animation-delay:-2.4s;
}
.office-weather__trail--low { bottom:-13%;height:33%;animation-duration:7.3s;animation-delay:-5.7s; }
@keyframes office-weather-left {
  0% {transform:translate3d(-3vw,10vh,0);opacity:0}
  12% {opacity:var(--paper-strength)}
  28% {transform:translate3d(calc(20vw * var(--weather-reach)),-6vh,0)}
  48% {transform:translate3d(calc(23vw * var(--weather-reach)),-16vh,0)}
  66% {transform:translate3d(calc(12vw * var(--weather-reach)),-24vh,0);opacity:var(--paper-strength)}
  82% {transform:translate3d(calc(19vw * var(--weather-reach)),-31vh,0);opacity:.64}
  100% {transform:translate3d(-11vw,-39vh,0);opacity:0}
}
@keyframes office-weather-right {
  0% {transform:translate3d(3vw,13vh,0);opacity:0}
  12% {opacity:var(--paper-strength)}
  27% {transform:translate3d(calc(-20vw * var(--weather-reach)),-7vh,0)}
  46% {transform:translate3d(calc(-23vw * var(--weather-reach)),-15vh,0)}
  64% {transform:translate3d(calc(-12vw * var(--weather-reach)),-25vh,0);opacity:var(--paper-strength)}
  82% {transform:translate3d(calc(-19vw * var(--weather-reach)),-33vh,0);opacity:.64}
  100% {transform:translate3d(12vw,-40vh,0);opacity:0}
}
@keyframes office-weather-cross {
  0% {transform:translate3d(-6vw,10vh,0);opacity:0}
  10% {opacity:var(--paper-strength)}
  30% {transform:translate3d(35vw,-5vh,0)}
  49% {transform:translate3d(59vw,-12vh,0);opacity:var(--paper-strength)}
  65% {transform:translate3d(80vw,-3vh,0)}
  83% {transform:translate3d(105vw,-9vh,0);opacity:.63}
  100% {transform:translate3d(135vw,-22vh,0);opacity:0}
}
@keyframes office-weather-flutter {
  0%,100% {transform:perspective(350px) rotate(var(--turn)) rotateY(16deg) skewY(-5deg) scale(.9,1)}
  27% {transform:perspective(350px) rotate(calc(var(--turn) + 65deg)) rotateY(134deg) skewY(8deg) scale(1,.88)}
  54% {transform:perspective(350px) rotate(calc(var(--turn) + 156deg)) rotateY(224deg) skewY(-7deg) scale(.94,1.05)}
  78% {transform:perspective(350px) rotate(calc(var(--turn) + 82deg)) rotateY(310deg) skewY(4deg) scale(1,.94)}
}
@keyframes office-weather-gust-left {
  0%,17%,88%,100% {opacity:0;transform:translate3d(-3vw,8vh,0) rotate(-7deg)}
  35% {opacity:.2}
  64% {opacity:.35;transform:translate3d(2vw,-6vh,0) rotate(4deg)}
  86% {opacity:0;transform:translate3d(0,-16vh,0) rotate(8deg)}
}
@keyframes office-weather-gust-right {
  0%,17%,88%,100% {opacity:0;transform:translate3d(3vw,8vh,0) rotate(7deg)}
  35% {opacity:.18}
  64% {opacity:.32;transform:translate3d(-2vw,-6vh,0) rotate(-4deg)}
  86% {opacity:0;transform:translate3d(0,-16vh,0) rotate(-8deg)}
}
@keyframes office-weather-gust-floor {
  0%,12%,90%,100% {opacity:0;transform:translate3d(-20vw,5vh,0) rotate(-3deg)}
  35% {opacity:.22}
  63% {opacity:.31;transform:translate3d(8vw,-3vh,0) rotate(2deg)}
  88% {opacity:0;transform:translate3d(24vw,-7vh,0) rotate(4deg)}
}
@media(max-width:700px) {
  .office-weather {--weather-reach:.65}
  .office-weather__paper {width:calc(var(--size) * .62)}
  /* Ten sheets remain. Crosswinds stay in the lower half. */
  .office-weather__paper:nth-of-type(even) {display:none}
  .office-weather__trail {width:18%;top:38%;height:55%}
  .office-weather__trail--floor {top:auto;bottom:0;width:120%;height:23%}
  .office-weather__trail--low {display:none}
}
@media(prefers-reduced-motion:reduce) {
  .office-weather {display:none}
  .office-weather *, .office-weather *::before, .office-weather *::after {animation:none!important}
}