.ug { position: absolute; box-sizing: border-box; pointer-events: none; }
/* Only raycast-target graphics, selectables and scroll views receive input, as in UGUI. */
.ug-ray, .ug-btn, .ug-scroll, .ug-input { pointer-events: auto; }
.ug-img { position: absolute; inset: 0; pointer-events: none; box-sizing: border-box; }
.ug-tint { position: absolute; inset: 0; mix-blend-mode: multiply; }
.ug-text { position: absolute; inset: 0; display: flex; overflow: visible; pointer-events: none; }
.ug-text > span { display: block; }
.ug-btn { cursor: pointer; }
.ug-btn:active { filter: brightness(.85); }
.ug-btn.disabled { filter: grayscale(.85) brightness(.75); cursor: not-allowed; }
.ug-scroll { overflow-y: auto !important; overflow-x: hidden; scrollbar-width: thin; }
.ug-input { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; background: transparent; border: 0;
  padding: 0 10px; color: #fffaf0; outline: none; text-shadow: 0 1px 2px #000a; }
.ug-input::placeholder { color: #c3d0ee; opacity: .85; }
.ug-input.on-light { color: #3a2a12; text-shadow: none; }
.ug-input.on-light::placeholder { color: #6d6252; opacity: .9; }
.ug-field > .ug-img { display: none; }
.ug-field > .ug-input { text-shadow: none; background: linear-gradient(#fffdf6, #f3ead6); border: 2px solid #e8a92a; border-radius: 10px;
  box-shadow: inset 0 2px 4px #0003, 0 0 0 2px #7a4a0a55; color: #3a2a12; }
.ug-field > .ug-input::placeholder { color: #8c7a5c; opacity: 1; }
.ug-field > .ug-input:focus { border-color: #ffd34d; box-shadow: inset 0 2px 4px #0003, 0 0 8px #ffd34daa; }