/* ============================================================
   SCENE — full-bleed lamplit workroom behind a static device.
   Camera drift exists only as slow parallax ambience; the
   console itself never moves. One warm accent (amber #e8a33d)
   is reserved for shelf signage / labels. Condensed display
   type via a narrow system stack + scaleX compression.
   ============================================================ */

:root{
  --amber:#e8a33d;
  --amber-hi:#ffc46a;
  --ivory:#ece4d2;
  --ink:#141a1d;
  --wall-a:#233236;
  --wall-b:#152124;
  --desk-a:#5a4632;
  --desk-b:#33271c;
  --wood-hi:#6d563d;
  --display:'Haettenschweiler','Arial Narrow','Roboto Condensed','Oswald',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  overflow:hidden;background:var(--ink);
  font-family:ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;color:var(--ivory);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}

#scene{position:fixed;inset:0;overflow:hidden;}
.par-layer{position:absolute;inset:-4%;will-change:transform;}

/* ---- wall ---- */
.wall-base{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 62% -10%,#2f4448 0%,var(--wall-a) 38%,var(--wall-b) 82%,#0d1619 100%);}
.wall-wainscot{position:absolute;left:0;right:0;top:64%;height:36%;
  background:linear-gradient(#203036,#16242a 12%,#101d22);
  border-top:2px solid #35505a55;box-shadow:0 -14px 30px #00000066 inset;}
.wall-wainscot::after{content:"";position:absolute;left:8%;right:8%;top:18%;height:52%;
  border-top:1px solid #3d5b6422;border-bottom:1px solid #3d5b6411;}
.wall-poster{position:absolute;left:7%;top:11%;width:min(150px,13vw);aspect-ratio:3/4;
  background:linear-gradient(160deg,#f3ead6,#dccfb2);border-radius:2px;transform:rotate(-2deg);
  box-shadow:0 10px 24px #00000070;opacity:.16;}
.wall-poster::after{content:"MUSEUM OF TIMEKEEPING — CLOSED FOR REVISIONS";
  position:absolute;inset:14% 10%;font-family:var(--display);letter-spacing:.06em;
  color:#20272a;font-size:clamp(7px,1.2vh,11px);}
.window-glow{position:absolute;right:-6%;top:-24%;width:46%;height:90%;
  background:radial-gradient(50% 60% at 60% 40%,#5b8694300,transparent 70%);mix-blend-mode:screen;opacity:.25;}

/* ---- lamp ---- */
.lamp-cone{position:absolute;left:63%;top:-32%;width:74vmin;height:96vmin;transform:translateX(-50%);
  background:conic-gradient(from 168deg at 50% 0%,transparent 40%,#ffd98e14 47%,#ffd98e21 50%,#ffd98e14 53%,transparent 60%);
  filter:blur(2px);}
.lamp-cone::after{content:"";position:absolute;left:50%;top:78%;width:120%;height:60%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 20%,#ffcf8233,#00000000 70%);}
.lamp-hood{position:absolute;left:63%;top:-2.5%;width:104px;height:34px;transform:translateX(-50%);
  background:linear-gradient(#3a4a51,#232f34);border-radius:52px 52px 8px 8px/30px 30px 6px 6px;
  box-shadow:0 10px 26px #00000080;}
.lamp-hood::before{content:"";position:absolute;left:14px;right:14px;bottom:-4px;height:8px;
  background:radial-gradient(closest-side,#ffe9bd,#ffb95400 88%);filter:blur(1px);}
.lamp-cord{position:absolute;left:63%;top:-6%;width:2px;height:14px;background:#39454c;transform:translateX(-50%);}

/* ---- dust motes (parallax ambience) ---- */
#dust span{position:absolute;width:3px;height:3px;border-radius:50%;
  background:#ffd98e;font-size:0;opacity:.22;filter:blur(.4px);}

/* ---- desk ---- */
#desk{position:absolute;left:0;right:0;bottom:0;height:31%;min-height:150px;}
.desk-top{position:absolute;inset:0 0 12% 0;background:
  linear-gradient(#71593e,#57432e 26%,var(--desk-b));
  box-shadow:0 -18px 42px #00000059 inset;}
.desk-edge{position:absolute;left:0;right:0;bottom:0;height:13%;
  background:linear-gradient(#241a12,#191009);border-top:1px solid #8a6c4926;}
.desk-grain{position:absolute;left:0;right:0;top:0;bottom:12%;opacity:.10;pointer-events:none;
  background:repeating-linear-gradient(93deg,#00000000 0 26px,#00000018 27px 28px,repeating-linear-gradient(0deg,#0000 0 5px,#ffffff09 6px));}
.desk-grain.g2{background:repeating-linear-gradient(87deg,#ffecb305 0 60px,transparent 61px 140px);}
.desk-vignette{position:absolute;inset:-6% -2% 0;background:
  radial-gradient(120% 105% at 58% 8%,transparent 42%,#000000a8 88%);pointer-events:none;}
.prop{position:absolute;pointer-events:none;}
.prop-pencilcup{left:2%;bottom:6%;width:38px;height:42px;
  background:linear-gradient(#7c6a52,#5c4d3a);border-radius:4px 4px 10px 10px;
  box-shadow:0 10px 18px #00000066;}
.prop-pencilcup::before,.prop-pencilcup::after{content:"";position:absolute;bottom:78%;width:5px;height:44px;
  background:linear-gradient(#d9a13c,#8a5b16);transform-origin:bottom;}
.prop-pencilcup::before{left:8px;transform:rotate(-12deg);}
.prop-pencilcup::after{left:22px;transform:rotate(7deg);background:linear-gradient(#c65848,#7d2f24);}
.prop-mug{right:5%;bottom:36%;width:44px;height:38px;
  background:linear-gradient(#4c6a72,#31474e);border-radius:4px 4px 9px 9px;box-shadow:0 10px 16px #00000066;}
.prop-mug::before{content:"";position:absolute;right:-14px;top:6px;width:16px;height:18px;
  border:4px solid #31474e;border-left-width:7px;border-radius:50%;}
.mug-steam{position:absolute;top:-26px;left:12px;width:6px;height:26px;border-radius:50%;
  background:linear-gradient(#ffffff2e,transparent);filter:blur(2px);animation:steam 4.2s ease-in-out infinite;}
.mug-steam.s2{left:24px;animation-delay:1.6s;}
@keyframes steam{0%,100%{transform:translateY(4px) scaleY(.7);opacity:.2;}50%{transform:translateY(-6px) scaleY(1.15);opacity:.5;}}
.prop-schematic{left:24%;bottom:29%;width:130px;height:74px;transform:rotate(-7deg);
  background:linear-gradient(#efe6cf,#ddd2b4);border-radius:2px;box-shadow:0 8px 16px #00000052;opacity:.5;}
.prop-schematic::after{content:"";position:absolute;inset:8px;
  background:
   linear-gradient(#25404a66 2px,transparent 2px) 0 0/100% 8px,
   linear-gradient(90deg,#25404a66 2px,transparent 2px) 0 0/8px 100%,
   radial-gradient(circle at 62% 40%,#b3502f99 0 6px,transparent 7px);}
.prop-screwdriver{left:17%;bottom:24%;width:92px;height:7px;transform:rotate(24deg);
  background:linear-gradient(90deg,#37474e 0 26%,#a33c2d 26% 100%);border-radius:4px;opacity:.85;
  box-shadow:0 6px 10px #00000045;}

/* ============ SHELF ============ */
#shelf{position:absolute;z-index:6;left:max(10px,2.4vw);bottom:calc(min(31vh,300px) * .5);width:190px;}
.shelf-title{font-family:var(--display);letter-spacing:.32em;font-size:11px;text-transform:uppercase;
  color:var(--amber);text-shadow:0 1px 0 #00000090;margin-bottom:8px;transform:scaleY(1.08);}
.shelf-board{position:absolute;left:-10px;right:-6px;top:-14px;height:12px;border-radius:3px;
  background:linear-gradient(#7a6142,#4e3c27 70%,#3a2c1c);box-shadow:0 6px 14px #00000073;}
.cart-rack{list-style:none;display:flex;gap:13px;align-items:flex-end;padding:8px 6px 0;}
.cart-slot{position:relative;display:flex;flex-direction:column;align-items:center;}
.shelf-plaque{margin-top:9px;font-family:var(--display);font-size:8.5px;letter-spacing:.12em;
  color:var(--amber);background:#241b0f;border:1px solid #5e4520;border-bottom-color:#120c06;
  padding:2px 4px;border-radius:2px;white-space:nowrap;transform:scaleY(1.12);
  text-shadow:0 0 6px #e8a33d55;}
.shelf-caption{margin-top:12px;font-family:var(--display);letter-spacing:.2em;font-size:9px;color:#cdbb98;opacity:.75;}
.shelf-caption::first-letter{color:var(--amber);}

/* cartridge body */
.cart{position:relative;width:52px;height:64px;transition:transform .18s ease;display:block;}
.cart:hover .cart-body,.cart:focus-visible .cart-body{transform:translateY(-5px);}
.cart:hover{filter:brightness(1.08);}
.cart-body{position:absolute;inset:0;display:block;border-radius:6px 6px 3px 3px;
  background:linear-gradient(160deg,#8b8f94,#5f646a 55%,#464b50);
  box-shadow:inset 0 2px 3px #ffffff40,inset 0 -6px 10px #00000045,0 4px 10px #00000052;
  transition:transform .18s ease;}
.cart-lips{position:absolute;top:-9px;left:8px;right:8px;height:10px;border-radius:3px 3px 0 0;
  background:repeating-linear-gradient(90deg,#31383d 0 3px,#22282c 3px 6px);
  box-shadow:inset 0 -3px 4px #00000080;}
.cart-label{position:absolute;left:5px;right:5px;top:11px;bottom:11px;border-radius:2px;
  padding:5px 4px 4px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:3px;
  box-shadow:inset 0 0 0 1px #00000030;}
.cart-label b{font-family:var(--display);font-weight:400;font-size:9.5px;line-height:1.05;letter-spacing:.04em;}
.cart-label i{font-style:normal;font-size:6px;letter-spacing:.18em;opacity:.8;text-transform:uppercase;}
.verdicts-art .cart-label{background:linear-gradient(#fdf3dc,#ecd9ae);color:#7c2016;}
.grid-art .cart-label{background:linear-gradient(#dbe7df,#b3cec1);color:#1e4436;}
.piston-art .cart-label{background:linear-gradient(#2c3440,#1b212c);color:#ffd98e;}
.cart.busy{pointer-events:none;}
.cart.in-flight{position:fixed;z-index:60;margin:0;transition:transform .62s cubic-bezier(.5,.05,.3,1),opacity .2s;}
.cart.returning{position:fixed;z-index:60;margin:0;transition:transform .5s cubic-bezier(.35,0,.35,1);}

/* ============ OPERATOR CARD ============ */
#manual{position:absolute;z-index:6;right:max(12px,2.6vw);bottom:8.5%;width:198px;
  transform:rotate(-5deg);perspective:700px;}
#manualFlip{width:100%;text-align:left;font-family:var(--display);letter-spacing:.14em;font-size:11px;
  color:#33291c;padding:7px 9px 0;}
#manualFlip small{display:block;font-family:system-ui;font-size:7.5px;letter-spacing:.08em;color:#5c4c34;opacity:.8;}
.manual-sheet{position:relative;background:linear-gradient(#f4ecd8,#e6dabf);color:#33301f;
  border-radius:2px;padding:26px 12px 10px;box-shadow:0 12px 26px #00000066;backface-visibility:hidden;}
.manual-sheet table{width:100%;border-collapse:collapse;font-size:8.6px;line-height:1.3;}
.manual-sheet th{font-family:var(--display);letter-spacing:.18em;text-align:left;border-bottom:1px solid #a99a75;
  font-weight:400;color:#6b3015;padding:3px 0 1px;}
.manual-sheet td{padding:2.5px 2px;border-bottom:1px dashed #b7aa88;vertical-align:top;}
.manual-sheet td:first-child{font-family:var(--display);letter-spacing:.1em;width:46%;color:#202018;}
.fine{font-size:7px;letter-spacing:.05em;opacity:.75;margin-top:5px;}
.manual-sheet.back{position:absolute;inset:0;transform:rotateY(180deg);padding-top:22px;}
#manual.flipped .front{opacity:0;}
#manual.flipped .back{opacity:1;}
.front,.back{transition:opacity .25s;}
.back{opacity:0;pointer-events:none;}
.paper-lines{position:absolute;inset:18px 10px 8px;pointer-events:none;background:
  repeating-linear-gradient(#0000 0 13px,#b7aa884d 13px 14px);}

/* toast */
#toastLayer{position:fixed;z-index:80;left:50%;bottom:4.5%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;}
.toast{font-family:var(--display);letter-spacing:.18em;font-size:12px;color:#ffe4ad;
  background:#191512ee;border:1px solid #574426;padding:7px 16px;border-radius:3px;
  box-shadow:0 10px 24px #00000090;animation:toastIn .25s ease;}
@keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;}}

/* ============ RESPONSIVE STAGING ============ */
#stage{position:absolute;z-index:5;left:50%;bottom:4.5%;transform:translateX(-50%);}

@media (max-aspect-ratio:19/20){ /* portrait-ish */
  #shelf{left:auto;right:max(8px,3vw);top:14px;bottom:auto;width:172px;}
  .cart-rack{flex-wrap:wrap;justify-content:center;}
  .shelf-plaque{font-size:8px;}
  #manual{right:auto;left:max(10px,3vw);bottom:auto;top:12px;width:176px;transform:rotate(-3deg);}
  .prop-schematic{display:none;}
  .wall-poster{display:none;}
  #dust{opacity:.6;}
}
@media (max-width:760px){
  #manual{width:158px;}
  .manual-sheet td,.manual-sheet th{font-size:7.6px;}
  #shelf .shelf-plaque{max-width:64px;overflow:hidden;text-overflow:ellipsis;}
  .prop-mug{bottom:44%;}
}
@media (max-width:430px){
  .cart{width:44px;height:56px;}
  .cart-label b{font-size:8.5px;}
  .prop-screwdriver{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .mug-steam{animation:none;}
}