*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #0c0a08;
}

.player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* background-color: #1a1814; */
}

.player__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* transition: opacity 0.45s ease; */
  pointer-events: none;
}

.player__poster--hidden {
  /* opacity: 0; */
}

.player__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* background: transparent; */
}

.player__controls {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 4;
  display: flex;
  gap: 0.35rem;
  pointer-events: auto;
}

.player__control {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.2rem;
  background: rgba(12, 10, 8, 0.72);
  color: rgba(248, 244, 236, 0.94);
  cursor: pointer;
}

.player__control:hover {
  background: rgba(12, 10, 8, 0.9);
}

.player__control:focus-visible {
  outline: 2px solid rgba(248, 244, 236, 0.85);
  outline-offset: 2px;
}

.player__control svg {
  width: 1.15rem;
  height: 1.15rem;
}

.player--fullscreen .player__icon-enter {
  display: none;
}

.player--fullscreen .player__icon-exit {
  display: block;
}

.player__icon-exit {
  display: none;
}

.player__status {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  margin: 0;
  padding: 0.65rem 0.85rem;
  /* background: rgba(12, 10, 8, 0.78); */
  color: rgba(248, 244, 236, 0.92);
  font:
    500 0.75rem/1.4 'Outfit',
    system-ui,
    sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
}