/* Olamio brand: shared logo styles for every app (creator portal, game client, admin).
   Assets are served from /brand/ in each app (the olamio-ui-assets install step copies them there).

   .olamio-logo  — full lockup: cube picture beside the "Olamio" word box, whose "O"
                   and "lamio" are glyph masks cut from the official artwork and painted
                   by CSS: the O in brand orange with a glow, "lamio" in currentColor.
                   Size with --logo-h (default 1.75em). Gap is the artwork's own spacing
                   (40px at 143px tall).
   .olamio-mark  — the cube alone, as an inline icon (e.g. "Powered by Olamio"). */
.olamio-logo {
  --logo-h: 1.75em;
  display: flex;
  align-items: center;
  gap: calc(var(--logo-h) * 40 / 143);
  flex-shrink: 0;
}
.olamio-logo-cube {
  display: block;
  height: var(--logo-h);
  width: auto;
}
.olamio-logo-word {
  position: relative;
  display: block;
  height: var(--logo-h);
  aspect-ratio: 371 / 143;
}
.olamio-logo-o-glow,
.olamio-logo-o,
.olamio-logo-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Glow lives on a wrapper: a mask clips the masked element's own drop-shadow.
   Tuned for dark backgrounds; light pages can soften it via --olamio-o-glow. */
.olamio-logo-o-glow { filter: var(--olamio-o-glow, drop-shadow(0 0 0.18em rgba(255, 107, 69, 0.8))); }
.olamio-logo-o {
  background-color: #ff6b45;
  -webkit-mask: url('/brand/olamio-logo-o-mask.png') center / 100% 100% no-repeat;
  mask: url('/brand/olamio-logo-o-mask.png') center / 100% 100% no-repeat;
}
.olamio-logo-text {
  background-color: currentColor;
  -webkit-mask: url('/brand/olamio-logo-text-mask.png') center / 100% 100% no-repeat;
  mask: url('/brand/olamio-logo-text-mask.png') center / 100% 100% no-repeat;
}

.olamio-mark {
  display: inline-block;
  height: 1.6em;
  aspect-ratio: 81 / 96;
  flex-shrink: 0;
  background: url('/brand/olamio-logo-cube.png') center / contain no-repeat;
}